.engagement-body-text-02>div>p{
display:flex;
gap: 10px;
}
.engagement-body-text-02>div>p>span:first-child{
flex: 0 0 max-content;
}
.blank-gap{
width:100%;
height:var(--section-gap);
background: white;
}
.template-05{
padding:0 var(--pad-space);
}
.template-05>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 50px;
}
.template-05-header{
display: grid;
grid-template-columns: 1fr;
grid-gap: 0px;
}
.template-05-header h4{
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
color: var(--main-color);
margin: 0;
line-height: 1.1em;
}
.template-05-header h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
color: var(--main-color);
margin: 0;
line-height: 1.5em;
}
.template-05>div>p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000;
margin: 0;
line-height: 2em;
margin-bottom: 10px;
}
.template-05-content{
overflow: auto;
width: 100%;
max-width: 1250px;
border-radius: 20px;
border: 2px solid #DBDBDB;
}
.template-05-content table{
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 0;
}
.template-05-content th,
.template-05-content td{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
text-align: center;
vertical-align: middle;
color: #4B4A4A;
height: 95px;
}
.template-05-content th{
color: white;
font-weight: 500;
}
.template-05-content th,
.template-05-content td{
border: unset;
border-block-start:unset !important;
}
.template-05-content th{
background: var(--main-color);
}
.template-05-content tbody tr td{
background-color: #F7F7F7 !important;
}
.template-05-content tbody tr td:nth-child(1) {
background-color: #E8E8E8 !important;
}
.template-05-content thead tr th:not(:last-child){
border-right:2px solid white;
}
.template-05-content tbody tr td:not(:last-child){
border-right: 2px solid #DBDBDB;
}
.template-05-content tbody tr:not(:last-child) td{
border-bottom: 2px solid #DBDBDB;
}
.engagement{
padding: 0 var(--pad-space);
}
.engagement>div{
width: 100%;
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 40px;
display: flex;
flex-direction: column;
grid:40px;
}
.engagement h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
color: var(--main-color);
margin: 0;
text-align: center;
}
.engagement-head-bar {
width: 100%;
max-width: 1050px;
margin: 0 auto;
background: #e8e8e8;
padding: 10px;
border-radius: 100px;
}
.engagement-head-bar>div {
display: grid;
grid-template-columns: repeat(5,1fr);
position: relative;
min-height: 60px;
}
.engagement-head-bar-btn{
background: transparent !important;
border: unset !important;
outline: unset !important;
font-family: var(--ch-font);
color: var(--main-color) !important;
position: relative;
z-index: 2;
}
.engagement-head-bar-btn.active{
color: white !important;
}
.engagement-head-bar-btn p {
margin: 0;
font-size: var(--xd-19px);
line-height: 1em;
font-weight: 500;
}
.engagement-head-bar>div>div {
position: absolute;
top: 0;
left: 0%;
background: var(--main-color);
width: 20%;
height: 100%;
z-index: 1;
border-radius: 100px;
transition: all .5s;
}
.engagement-body{
border-radius: 20px;
border: 1px solid #707070;
overflow: hidden;
}
.engagement-body>div{
display: grid;
grid-template-columns: 30% 70%;
}
.engagement-body h6{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 500;
color: var(--main-color);
margin: 0;
background: #E8E8E8;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #707070;
}
.engagement-body>div:not(:last-child){
border-bottom: 1px solid #707070;
}
.engagement-body>div>div{
padding: 30px 5vw;
}
.engagement-body-text-01{
display: flex;
gap: 30px 5vw;
flex-wrap: wrap;
}
.engagement-body-text-01 p,
.engagement-body-text-02 p{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #000000 !important;
margin: 0;
line-height: 2em;
}
.engagement-body-text-01 p a{
color: #000000 !important;
text-decoration: none;
}
.engagement-body-radio{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.engagement-body-radio>div{
display: flex;
align-items: center;
gap: 15px;
}
.engagement-body-radio>div>div{
width: var(--xd-19px);
height: var(--xd-19px);
border: 1px solid #787878;
border-radius: 100%;
}
.engagement-body-radio>div:not(.efi-0){
display: none;
}
.engagement-body-text-01 p{
display: none;
}
.engagement-body-text-01 p.efi-0{
display: block;
}
.engagement-body-radio label{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: black;
line-height: 1.4em;
}
.engagement-body-radio input[type="radio"]{
width: var(--xd-19px);
height: var(--xd-19px);
cursor: pointer;
}
.engagement-body-text-02>div{
display:none;
}
.engagement-body-text-02>div.efi-0{
display:block;
}
.engagement-head-bar-mobile{
width: 100%;
}
.engagement-head-bar-mobile>div {
display: flex;
align-items: center;
gap: 10px;
align-items: center;
background: #E8E8E8;
border-radius: 200px;
padding: 10px;
}
.engagement-head-bar-mobile button {
width: 40px;
padding: 0px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: transparent !important;
outline: unset !important;
border: unset !important;
}
.engagement-head-bar-mobile-slick{
width: calc(100% - 78px - 30px);
}
.engagement-head-bar-mobile-slick p{
font-weight: 500;
font-family: var(--ch-font);
font-size: var(--xd-19px);
text-align: center;
margin: 0;
line-height: 1.3em;
color:#969696;
}
.engagement-head-bar-mobile>div{
padding: 5px 10px;
}
.engagement-head-bar-mobile-slick .slick-current p{
color: var(--main-color);
}
.engagement-head-bar-mobile button svg line {
stroke-width: 1;
}
.engagement-head-bar-mobile button svg {
height: 40px;
width: 13px;
}
.contact-us{
padding: var(--section-gap) var(--pad-space);
background-image: url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/happy-many-children-wore-rain-boots-jump-play-puddles-when-its-raining-around.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.contact-us>div{
width: 100%;
max-width: 1100px;
background: #F7F7F7;
padding: 80px;
border-radius: 20px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 60px;
}
.contact-us h6{
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
color: var(--main-color);
margin: 0;
line-height: 1.1em;
}
.contact-us h5{
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
color: var(--main-color);
margin: 0;
line-height: 1.5em;
}
.contact-us-body{
padding-left: 120px;
padding-right: 120px;
display: flex;
flex-direction: column;
gap: 60px;
}
.contact-us-body>div>label{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 600;
color: var(--main-color);
margin: 0;
margin-bottom: 15px;
}
.contact-us input[type="text"],
.contact-us input[type="email"],
.contact-us input[type="tel"]{
border-radius: 20px;
border: 1px solid #707070;
padding: 12px 30px;
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 600;
color: black;
}
.contact-us input[type="text"]::placeholder,
.contact-us input[type="email"]::placeholder,
.contact-us input[type="tel"]::placeholder,
.contact-us textarea::placeholder{
opacity: 0.5;
}
.contact-us-body-radio-line{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 15px;
}
.contact-us-body .contact-focus-box .contact-us-body-radio-line>div{
display: none;
}
.contact-us-body .contact-focus-box .contact-us-body-radio-line>div.efi-0{
display: flex;
}
.contact-us-body-radio-line>div{
display: flex;
align-items: center;
gap: 15px;
}
.contact-us-body-radio-line label{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: black;
line-height: 1.4em;
}
.contact-us-body-radio-line input[type="radio"]{
width: var(--xd-19px);
height: var(--xd-19px);
cursor: pointer;
}
.contact-us textarea{
border-radius: 20px;
border: 1px solid #707070;
padding: 12px 30px;
}
.policy-check{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.policy-check>div{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.policy-check label{
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
color: #AFAFAF;
line-height: 1em;
}
.policy-check input[type="checkbox"]{
width: var(--xd-19px);
height: var(--xd-19px);
transform: translateY(2px);
}
.policy-check button{
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: white !important;
min-width: 140px;
gap: 15px;
border: 2px solid var(--main-color);
border-radius: 100px;
padding: 5px 20px;
transition: all .5s;
outline: unset !important;
}
.policy-check button::before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
background: var(--main-color);
transition: all .5s;
}
.policy-check button:hover{
background: var(--main-color) !important;
}
.policy-check button:hover span{
color: white;
}
.policy-check button:hover::before{
top: 0;
}
.policy-check button span{
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
color: var(--main-color);
position: relative;
z-index: 2;
}
.policy-check button svg{
height: 14px;
position: relative;
z-index: 2;
}
.policy-check button svg line{
stroke: var(--main-color);
}
.policy-check button:hover svg line{
stroke: white;
transition: all .5s;
}
.engagement-head-bar-mobile{
display: none;
}
.pop-up-tips {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100dvh;
background: rgba(255, 255, 255, 0.8);
display: none;
padding: var(--pad-space);
}
.pop-up-tips>div {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.pop-up-tips>div>div {
width: 100%;
max-width: 300px;
padding: 40px 20px;
background: white;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius: 20px;
}
.pop-up-tips h6 {
font-family: var(--ch-font);
font-size: 25px;
font-weight: 700;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.pop-up-tips p {
font-family: var(--ch-font);
font-size: 15px;
font-weight: 400;
text-align: center;
margin-bottom: 30px;
}
.pop-up-tips button {
font-family: var(--ch-font);
font-size: 15px;
display: block;
margin: 0 auto;
font-weight: 700;
background: var(--main-color) !important;
color: white;
border-radius: 100px;
padding: 8px 30px;
cursor: pointer;
outline: unset !important;
}
@media only screen and (max-width:1200px){
.contact-us-body{
padding-left: 0px;
padding-right: 0px;
}
.contact-us>div{
padding: 80px var(--pad-space);
}
}
@media only screen and (max-width:1024px){
.engagement-body {
border-radius: 0px;
border: unset;
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
}
.engagement-body>div{
border: 1px solid #707070;
display: grid;
grid-template-columns: 1fr;
border-radius: 10px;
overflow: hidden;
}
.engagement-body h6{
border-right: unset;
border-bottom: 1px solid #707070;
padding: 20px 5vw;
}
.engagement-body-radio{
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.engagement-body-text-01-box{
display: flex;
justify-content: center;
}
.engagement-body-text-01{
display: flex;
flex-wrap: wrap;
}
.engagement-body-text-02{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.engagement-body-text-01{
display: grid;
gap: 20px;
}
}
@media only screen and (max-width:850px){
.contact-us-body-radio-line{
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width:767px){
.template-05>div>p,
.template-05-header h6{
line-height: 1.8em;
font-size: 14px;
}
.template-05>div{
grid-gap: 30px;
}
.template-05-content th, .template-05-content td{
padding: 15px 5px;
height: auto;
font-size: 14px;
}
.template-05-content{
border-radius: 10px;
}
.engagement-head-bar-mobile{
display: block;
}
.engagement-head-bar{
display: none;
} .contact-us{
border-radius: 0px;
}
.contact-us>div {
padding: 40px var(--pad-space);
gap: 30px;
}
.contact-us-body{
gap: 30px;
}
.contact-us-body>div>label{
margin-bottom: 15px;
}
.contact-us input[type="text"], .contact-us input[type="email"], .contact-us input[type="tel"]{
border-radius: 7px;
padding: 10px;
}
.contact-us textarea{
padding: 10px;
border-radius: 7px;
}
.contact-us-body-radio-line{
grid-gap: 10px;
}
.policy-check>div {
gap: 10px;
margin-bottom: 10px;
}
}
@media only screen and (max-width:600px){
.engagement-body-radio{
display: grid;
grid-template-columns: auto auto;
grid-gap: 15px 20px;
}
.engagement-body>div>div{
padding: var(--pad-space);
padding: 20px;
}
.engagement-body h6{
padding: 15px var(--pad-space);
}
.engagement-body-radio-box{
display: flex;
justify-content: center;
}
.contact-us-body-radio-line{
grid-template-columns: 1fr;
}
.engagement-body-radio>div{
gap: 10px;
}
}
@media only screen and (max-width:450px){
.template-05-header h4{
font-size: 8.5vw;
}
}