html,body
{
font-family: "Noto Sans TC";
font-size: 16px;
font-style: normal;
color:$text-color;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.64px;
}
.m-wrap
{
@media(min-width:1249px)
{
padding-left:calc(50% - 600px);
padding-right:calc(50% - 600px);
}
@media(max-width:1248px)
{
padding-right:24px;
padding-left:24px;
}
}
*[role=link]
{
&:hover
{
cursor: pointer;
}
}
#head
{
position: absolute;
top:0px;
left:0px;
z-index:100;
width: 100%;
display: flex;
align-items:center;
#main-menu
{
flex:1;
}
#socil-menu
{
ul
{
display: flex;
}
}
@media(min-width:1200px)
{
padding-top:32px;
padding-left:pxvw(48,1920);
padding-right:pxvw(48,1920);
#main-menu
{
ul
{
display: flex;
justify-content:flex-end;
li
{
padding:0 24px;
a
{
color:#fff;
transition-duration:.5s;
&:hover
{
color:$main-color;
}
}
}
}
}
#socil-menu
{
ul
{
li
{
display: flex;
a
{
border:1px solid #C4C9D5;
border-radius: 4px;
padding:16px 24px;
margin-left:24px;
background-color: #fff;
color:$main-color;
transition-duration:.5s;
i
{
margin-right: 5px;
}
&:hover
{
color:#fff;
background-color: $main-color;
}
}
&:has(input)
{
display: none;
}
}
}
}
}
@media(max-width:1199px)
{
padding-left:24px;
padding-right:24px;
padding-top:18px;
padding-bottom:18px;
flex-wrap:wrap;
background-color: #fff;
#logo
{
order:0;
flex:1;
height: 50px;
justify-content:flex-start;
a
{
display: block;
height: 50px;
width: 50px;
}
picture
{
display: block;
width: 100%;
height: 100%;
img
{
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
}
}
#socil-menu
{
order:1;
ul
{
li
{
color:$main-color;
margin-left:24px;
font-size:24px;
a
{
color:$main-color;
span
{
display: none;
}
}
&:has(input)
{
position: relative;
.fa-times
{
display: none;
}
input
{
position: absolute;
cursor: pointer;
opacity: 0;
top:0px;
left:0px;
width: 100%;
height:100%;
margin:0px;
padding:0px;
}
}
}
}
}
#main-menu
{
order:2;
min-width: 100%;
display: grid;
grid-template-rows:0fr;
transition-duration:.5s;
ul
{
overflow: hidden;
}
}
&:has(input[name=main-menu]:checked)
{
#socil-menu
{
ul
{
li
{
&:has(input)
{
.fa-times
{
display: block;
}
.fa-bars
{
display: none;
}
}
}
}
}
#main-menu
{
padding-top:48px;
padding-bottom:48px;
grid-template-rows:1fr;
li
{
border-bottom:1px solid #D8DAE5;
a
{
text-align: center;
color:$main-color;
display: block;
padding-top:24px;
padding-bottom:24px;
transition-duration:.5s;
&:hover
{
background-color: $main-color;
color:#fff;
}
}
&:first-child
{
border-top:1px solid #D8DAE5;
}
}
}
}
}
}
#foot-contact
{
padding-top:44px;
padding-bottom:88px;
h2
{
font-size: 28px;
line-height: 42px; /* 150% */
letter-spacing: 1.12px;
margin-bottom:48px;
}
p
{
margin-bottom:64px;
}
dl
{
padding-bottom:24px;
margin-bottom:24px;
border-bottom:1px solid #D8DAE5;
dt
{
font-weight: 700;
}
dd
{
a
{
color:$text-color;
transition-duration:.5s;
display: block;
&:hover
{
color:$main-color;
}
}
}
}
#foot-form
{
h2
{
font-size: 16px;
font-weight: 700;
line-height: 24px; /* 150% */
letter-spacing: 0.64px;
}
*[data-dh-form]
{
.form-group
{
margin-bottom:24px;
label
{
display: block;
}
input,textarea
{
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.64px;
display: block;
width: 100%;
border:0px;
padding:10px 12px;
border-bottom:1px solid #D8DAE5;
}
textarea
{
height:300px;
}
&.has-error
{
label
{
code
{
color:#a00;
padding-left:10px;
}
input,textarea,select
{
border-color:#a00;
}
}
}
}
.form-btn
{
display: flex;
justify-content:flex-end;
button
{
border:1px solid #C4C9D5;
background-color: #fff;
color:$main-color;
padding:12px 21px;
border-radius: 4px;
cursor: pointer;
transition-duration:.5s;
&:hover
{
background-color: $main-color;
color:#fff;
}
}
}
}
}
@media(min-width:768px)
{
dl
{
display: flex;
flex-wrap:wrap;
dt
{
width:25%;
}
dd
{
width: 75%;
}
}
#foot-form
{
display: flex;
h2
{
width: 25%;
}
form
{
width: 75%;
}
}
}
@media(max-width:767px)
{
dl
{
dt
{
margin-bottom:12px;
}
}
#foot-form
{
h2
{
margin-bottom:24px;
}
}
}
}
#foot
{
>ul
{
padding-top:32px;
padding-bottom:32px;
border-top:1px solid #D8DAE5;
>li
{
ul
{
li
{
a
{
color:$main-color;
transition-duration:.5s;
&:hover
{
color:$text-color;
}
}
}
}
&:first-child
{
ul
{
li
{
margin-bottom:4px;
}
}
}
&:nth-child(2)
{
ul
{
display: flex;
}
}
&:last-child
{
ul
{
display: flex;
li
{
a
{
i
{
font-size:24px;
}
}
}
}
}
}
}
@media(min-width:768px)
{
>ul
{
display: flex;
>li
{
&:first-child
{
width: 30%;
}
&:nth-child(2)
{
width: 40%;
ul
{
justify-content:center;
li
{
margin:0 24px;
}
}
}
&:last-child
{
width: 30%;
ul
{
justify-content:flex-end;
li
{
margin-left: 32px;
}
}
}
}
}
}
@media(max-width:767px)
{
>ul
{
>li
{
&:first-child
{
text-align: center;
}
&:nth-child(2)
{
padding:32px 0 20px 0;
flex-wrap:wrap;
ul
{
justify-content:center;
li
{
margin:0 16px 12px 16px;
}
}
}
&:last-child
{
ul
{
justify-content:center;
li
{
margin:0 16px;
}
}
}
}
}
}
}
#page-header
{
position: relative;
picture
{
position: absolute;
top:0px;
left:0px;
width: 100%;
height:100%;
display: block;
img
{
width: 100%;
height:100%;
object-fit:cover;
object-position: center;
display: block;
}
}
h1,h2
{
position: relative;
z-index:1;
color: #FFF;
font-size: 36px;
font-weight: 700;
line-height: 52px; /* 144.444% */
letter-spacing: 1.44px;
padding-top:368px;
padding-bottom:96px;
}
@media(min-width:767px)
{
h1,h2
{
padding-top:266px;
padding-bottom:150px;
}
}
}
.breadcrumb
{
margin-bottom:88px;
ul
{
display: flex;
flex-wrap:wrap;
color:#D8DAE5;
border-bottom: 1px solid #D8DAE5;
padding-top:24px;
padding-bottom:24px;
font-size: 14px;
line-height: 22px;
letter-spacing: 0.56px;
li
{
&::after
{
content:'/';
padding-left:16px;
padding-right:16px;
}
a
{
color:#D8DAE5;
transition-duration:.5s;
&:hover
{
color:$main-color;
}
}
&:last-child
{
&::after
{
display: none;
}
a
{
color:$main-color;
}
}
}
}
@media(max-width:979px)
{
margin-bottom:24px;
}
}