@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600&family=Oswald:wght@400;600&display=swap');

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:17px;
	color:#222222;
	-webkit-text-size-adjust:none;
	image-rendering:-webkit-optimize-contrast;
	background:#FFFFFF;
}

a{
	color:#222222;
}

.webout{
	position:relative;
	max-width:2000px;
	margin:0 auto;
}

article{
	overflow:clip;
}

.out{
	max-width:1400px;
	position:relative;
	padding:0 20px;
	margin:0 auto;
}

input,textarea{
    font-family:'Noto Sans TC','微軟正黑體',sans-serif;
}

:root{
    --oswald:'Oswald', sans-serif;
}

/*HOME-----------------------------------------*/

/*HOME_S1-----------------*/
.home .s1{
    background:url("../images/home_s1.jpg") center;
    aspect-ratio:2.3/1;
    border-bottom:#FFFFFF 1px solid;
    animation:zoomOut 2s both;
}

@keyframes zoomOut{
  from{
    background-size:110%;
  }
  to{
    background-size:100%;
  }
}

@keyframes zoomOutm{
  from{
    background-size:130%;
  }
  to{
    background-size:120%;
  }
}

.home .s1 .out{
    display:flex;
    align-items:center;
    height:100%;
}

.home .s1 .text{
    font-size:100px;
    width:4em;
}

.home .s1 h6{
    font-weight:normal;
    color:#214B8C;
    line-height:1.1em;
}

.home .s1 h6 span{
    display:inline-block;
}

.home .s1 p{
    font-size:0.2em;
    color:#FFFFFF;
    background:#009FE8;
    padding:1em;
    margin-top:2em;
    text-align:center;
}

/*HOME_S2-----------------*/
.home .s2{
    background:url("../images/home_s2_bg.jpg") bottom;
    background-size:cover;
    background-attachment:fixed;
    padding:140px 0 50px;
    border-bottom:#FFFFFF 1px solid;
}

.home .s2 .out{
    max-width:none;
    padding:0 60px;
}

.home .s2 h6{
    position:relative;
    font-size:36px;
    font-weight:600;
    line-height:1.3em;
    text-align:center;
    color:#294D83;
    padding-bottom:1em;
}

.home .s2 h6:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:110px;
    height:1px;
    background:#036EB7;
    margin-left:-55px;
}

.home .s2 p{
    text-align:center;
    line-height:1.7em;
    margin:2em 0;
}

.home .s2 ul{
    display:flex;
    gap:2%;
}

.home .s2 a{
    position:relative;
    display:block;
    background:#FFFFFF url("../images/home_s2_line.png") center;
    border-radius:15px;
    box-shadow:10px 10px 10px rgba(0,0,0,0.1);
    overflow:hidden;
}

.home .s2 a img{
    position:relative;
    z-index:1;
    width:100%;
}

.home .s2 a:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/home_s2_bg1.jpg") center -30px;
    background-size:cover;
    opacity:0.7;
}

.home .s2 li:nth-child(2) a:before{
    background-image:url("../images/home_s2_bg2.jpg");
}

.home .s2 a div{
    position:absolute;
    z-index:2;
    left:0;
    bottom:0;
    width:100%;
    box-sizing:border-box;
    font-size:19px;
    color:#FFFFFF;
    text-align:center;
    padding:0 1em;
    background:#0071BF;
	line-height:3em;
	height:3em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
    transition:0.2s;
}

.home .s2 a:hover div{
	line-height:4em;
	height:4em;
    background:#F29700;
}

/*.home .s2 a div:before,
.home .s2 a div:after,*/
.home .s3 .right .more:before,
.home .s3 .right .more:after{
    content:"";
    position:absolute;
    top:50%;
    right:1em;
    width:1em;
    height:1px;
    background:#F29700;
    transition:0.2s;
}

/*.home .s2 a div:after,*/
.home .s3 .right .more:after{
    width:0.5em;
    transform:rotate(45deg);
    transform-origin:right bottom;
}

/*.home .s2 a:hover div:before,
.home .s2 a:hover div:after{
    background:#FFFFFF;
}*/

@media only screen and (max-width:540px){
    .home .s2 a div{
        font-size:3.5vw;
    }
}

/*HOME_S3-----------------*/
.home .s3{
    background:url("../images/home_s3_bg.jpg");
    background-size:cover;
    padding:90px 0 60px;
}

.home .s3 .out,
.home .s4 .out{
    display:flex;
}

.home .s3 .left,
.home .s4 .left{
    min-width:320px;
}

.home .s3 h6,
.home .s4 h6{
    font-size:30px;
    font-weight:normal;
    margin-bottom:0.5em;
}

.home .s3 .en,
.home .s4 .en{
    font-family:var(--oswald);
    font-weight:600;
    line-height:20px;
    white-space:nowrap;
    color:#036EB7;
    height:20px;
    background:url("../images/home_s3_title.svg") no-repeat;
    background-size:contain;
    padding-left:85px;
}

.home .s3 .right{
    min-width:0;
    clip-path:inset(0 -100vw 0 0);
    padding-bottom:5px;
}

.home .s3 .right .splide__track{
    overflow:visible;
}

.home .s3 .right a .image,
.project .s2 .info a .image{
    position:relative;
    border-radius:20px;
    overflow:hidden;
}

.home .s3 .right a .image:before,
.project .s2 .info a .image:before{
    content:"";
    position:absolute;
    top:-1px;
    left:-110%;
    width:338px;
    height:213px;
    background:url("../images/home_s3_blue.svg") no-repeat;
    background-size:contain;
    opacity:0.8;
    transition:0.3s 0.1s ease-out;
}

.home .s3 .right a:hover .image:before,
.project .s2 .info a:hover .image:before{
    left:0;
}

.home .s3 .right .image div,
.project .s2 .info .image div{
    position:absolute;
    top:-1px;
    left:-100%;
    z-index:1;
    line-height:55px;
    color:#2F5896;
    width:220px;
    padding-left:34px;
    background:url("../images/home_s3_white.svg") no-repeat;
    background-size:contain;
    transition:0.3s ease-out;
}

.home .s3 .right a:hover .image div,
.project .s2 .info a:hover .image div{
    left:0;
}

.home .s3 .right .image div:after,
.home .s3 .right .image div:before,
.project .s2 .info .image div:after,
.project .s2 .info .image div:before{
    content:"";
    position:absolute;
    left:115px;
    height:1px;
    background:#E95514;
}

.home .s3 .right .image div:after,
.project .s2 .info .image div:after{
    top:32px;
    width:27px;
}

.home .s3 .right .image div:before,
.project .s2 .info .image div:before{
    top:26px;
    width:19px;
}

.home .s3 .right img{
    width:100%;
}

.home .s3 .right p{
    line-height:1.5em;
    padding:1em 0;
}

.home .s3 .right .splide{
    padding-bottom:70px;
}

.home .s3 .right .splide__arrow{
    top:auto;
    bottom:0;
    transform:none;
    width:45px;
    height:45px;
    background:#FFFFFF;
    opacity:1;
    box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}

.home .s3 .right .splide__arrow--prev{
    left:2px;
}

.home .s3 .right .splide__arrow--next{
    right:auto;
    left:60px;
}

.home .s3 .right .splide__arrow svg{
    fill:#036EB7;
    height:40%;
    width:40%;
    transition:0.2s;
}

.home .s3 .right .splide__arrow:hover svg{
    fill:#E95514;
}

.home .s3 .right .more{
    position:relative;
    display:block;
    width:220px;
    text-align:center;
    padding:1em 0;
    background:#FFFFFF;
    margin:20px auto 0;
    border-radius:30px;
    box-shadow:2px 2px 5px rgba(0,0,0,0.2);
    transition:0.2s;
}

.home .s3 .right .more:hover{
    width:250px;
}

.home .s3 .right .more:before,
.home .s3 .right .more:after{
    top:55%;
    width:1.6em;
    background:#396AB5;
}

.home .s3 .right .more:after{
    width:0.8em;
}

/*HOME_S4-----------------*/
.home .s4{
    padding:130px 0;
}

.home .s4 .right{
    width:100%;
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    justify-content:space-between;
}

.home .s4 .right > li{
    width:500px;
}

.home .s4 .right a{
    display:flex;
    justify-content:space-between;
}

.home .s4 .right .image{
    width:50%;
    border:#CBD8EC 1px solid;
    border-radius:15px;
    background:linear-gradient(#FFFFFF,#F0F1F5);
    transition:0.2s;
}

.home .s4 .right a:hover .image{
    border-color:#036EB7;
}

.home .s4 .right .image img{
    width:100%;
}

.home .s4 .right .text{
    width:45%;
}

.home .s4 .right .text li:nth-child(1){
    font-size:24px;
    font-weight:600;
    color:#294D83;
    padding-bottom:0.7em;
    margin-bottom:0.7em;
    border-bottom:#CBD8EC 1px solid;
}

.home .s4 .right .text li:nth-child(2){
    line-height:1.5em;
}

/*COMPANY-----------------------------------------*/

/*COMPANY_S1-----------------*/
.company .s1{
    background-image:url("../images/company_s1.jpg");
}

/*COMPANY_S2-----------------*/
.pagein.company .s2{
    background-image:url("../images/company_s2_bg.jpg");
    padding-bottom:90px;
}

.company .s2 .info{
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
}

.company .s2 .image{
    width:43%;
}

.company .s2 .image img{
    width:100%;
}

.company .s2 .text{
    width:52%;
}

.company .s2 .text h5{
    font-size:20px;
    font-weight:600;
    color:#294D83;
    padding:21% 0 0 85px;
    background:url("../images/home_s3_title.svg") left bottom no-repeat;
    background-size:auto 20px;
}

.company .s2 .text p{
    line-height:2em;
    margin:2em 0;
}

.company .s2 .text div{
    padding:10px 30px;
    background:#FFFFFF;
    border-radius:10px;
}

.company .s2 .text h6{
    position:relative;
    color:#294D83;
    font-weight:600;
    padding:15px 0;
    border-bottom:#C3D2E9 1px solid;
}

.company .s2 .text h6:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:4em;
    height:1px;
    background:#294D83;
}

.company .s2 .text ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 15px;
}

.company .s2 .text li{
    border-bottom:#C3D2E9 1px solid;
    padding:1em 0;
    line-height:1.5em;
}

.company .s2 .text li:nth-last-child(-n+2){
    border-bottom:none;
}

/*BRAND-----------------------------------------*/

/*BRAND_S1-----------------*/
.brand .s1{
    background-image:url("../images/brand_s1.jpg");
}

/*BRAND_S2-----------------*/
.pagein .s2{
    background:url("../images/page_bg.jpg") bottom center;
    background-size:cover;
}

.brand .s2 .info{
    max-width:1050px;
    margin:0 auto;
    padding-top:60px;
}

.brand .s2 .list{
    position:relative;
    padding-bottom:150px;
    display:grid;
    align-items:start;
    grid-template-columns:34% 1fr;
    gap:6%;
}

.brand .s2 .list .image{
    background:linear-gradient(#FFFFFF 40%,#FFFFFF,#F0F1F5);
    border-radius:10px;
    overflow:hidden;
    border:#FFFFFF 1px solid;
    box-shadow:3px 3px 10px rgba(0,0,0,0.1);
}

.brand .s2 .list .image img{
    width:100%;
}

.brand .s2 .list h5{
    font-size:36px;
    font-weight:600;
    color:#294D83;
    border-bottom:#C0CCDE 1px solid;
    padding-bottom:0.5em;
    margin-bottom:1em;
}

.brand .s2 .list h6{
    width:150px;
    padding:0.5em 0;
    border:#396AB5 1px solid;
    color:#2F5896;
    text-align:center;
}

.brand .s2 .list p{
    line-height:2em;
    margin:1em 0 2em;
}

.brand .s2 .list img{
    vertical-align:top;
    margin-right:15px;
}

.brand .s2 .list a{
    color:#396AB5;
    border-bottom:rgba(57,106,181,0) 1px solid;
    transition:0.2s;
}

.brand .s2 .list a:hover{
    color:#396AB5;
    border-color:rgba(57,106,181,1);
}

/*PRODUCT-----------------------------------------*/

/*PRODUCT_S1-----------------*/
.pagein .s1{
    background-position:center;
    background-size:cover;
    text-align:center;
}

.product .s1{
    background-image:url("../images/product_s1.jpg");
}

.pagein .s1 .out{
    padding:0;
}

.pagein .s1 .title{
    padding:115px 0;
    font-size:36px;
    color:#FFFFFF;
}

.pagein .s1 .title div{
    font-size:15px;
    margin-top:1em;
}

.pagein .s1 .mb{
    display:none;
}

.pagein .s1 .tab{
    display:flex;
    gap:1px;
}

.pagein .s1 .tab li{
    width:100%;
}

.pagein .s1 .tab a{
    position:relative;
    display:block;
    background:#FFFFFF;
    font-size:20px;
    padding:1em 0;
    transition:0.2s;
}

.pagein .s1 .tab a:hover{
    color:#3A6AB4;
}

.pagein .s1 .tab .active a{
    color:#FFFFFF;
    background:#F29700;
}

.pagein .s1 .tab a:after{
    content:"";
    position:absolute;
    top:50%;
    right:20px;
    width:25px;
    height:8px;
    border-style:solid;
    border-color:#009FE8;
    border-width:1px 0;
    margin-top:-5px;
}

.pagein .s1 .tab .active a:after{
    border-color:#FFFFFF;
    transform:rotate(90deg);
}

/*PRODUCT_S2-----------------*/
.product .s2{
    background:#F4F6F9;
    box-shadow:inset 0 -30px 30px rgba(0,0,0,0.07);
}

.product .s2 .info{
    padding:60px 0 90px;
    display:grid;
    gap:6%;
    grid-template-columns:44% 1fr;
}

.product .s2 .left img{
    width:100%;
    box-shadow:5px 5px 10px rgba(0,0,0,0.2);
}

.product .s2 .right .t1{
    position:relative;
    font-size:30px;
    line-height:1.2em;
    font-weight:normal;
    padding-left:0.8em;
    margin-bottom:2em;
}

.product .s2 .right .t1:before{
    content:"";
    position:absolute;
    top:0.2em;
    left:0;
    width:0.3em;
    height:1em;
    background:#396AB5;
}

.product .s2 .right .t2{
    color:#2F5896;
    font-weight:normal;
    text-align:center;
    width:180px;
    padding:0.5em;
    border:#2F5896 1px solid;
    margin-bottom:2em;
}

.product .s2 .right ul{
    list-style:disc;
    margin-left:1.2em;
    line-height:1.7em;
}

.product .s2 .right li::marker{
    color:#2A64B0;
}

.product .s2 .right a,
.product .s3 a{
    position:relative;
    display:block;
    width:250px;
    padding:1.2em 0;
    background:#FFFFFF url("../images/product_pdf.svg") right 25px center no-repeat;
    background-size:auto 30px;
    text-align:center;
    margin-top:3em;
    box-shadow:5px 5px 10px rgba(0,0,0,0.2);
    border-radius:30px;
    transition:0.2s;
}

.product .s2 .right a:hover,
.product .s3 a:hover{
    color:#2F5896;
}

/*PRODUCT_S3-----------------*/
.product .s3{
    padding:90px 0;
}

.product .s3 h6{
    position:relative;
    font-size:20px;
    font-weight:normal;
    padding-bottom:1em;
    border-bottom:#B4B4B5 1px solid;
}

.product .s3 h6:before{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:80px;
    height:1px;
    background:#2EA6DF;
    border-right:#FFFFFF 3px solid;
}

.product .s3 .image img{
    width:100%;
    max-width:1130px;
    display:block;
    margin:50px auto;
    box-shadow:0 0 4px rgba(0,0,0,0.1);
}

.product .s3 ul{
    margin:60px 0;
    display:grid;
    gap:10px;
    justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(auto,370px));
}

.product .s3 ul:has(:only-child){
    grid-template-columns:repeat(auto-fit,minmax(auto,900px));
}

.product .s3 li{
    background:#F4F6F9;
    padding:10%;
}

.product .s3 li img{
    width:100%;
}

.product .s3 li div{
    text-align:center;
    margin-top:1em;
}

.product .s3 a{
    position:relative;
    background-color:#F4F6F9;
    margin:0 auto;
}

.product .s3 a:before,
.product .s3 a:after{
    content:"";
    position:absolute;
    top:50%;
    width:130px;
    height:1px;
    background:#B8B8B8;
}

.product .s3 a:before{
    left:-150px;
}

.product .s3 a:after{
    right:-150px;
}

/*PROJECT-----------------------------------------*/

/*PROJECT_S1-----------------*/
.project .s1{
    background-image:url("../images/project_s1.jpg");
}

/*PROJECT_LIST-----------------*/
.project section.list{
    background:url("../images/page_bg.jpg") bottom center;
    background-size:cover;
}

.project section.list .top{
    line-height:1.5em;
    text-align:center;
    padding:60px 0;
}

.project section.list .info,
.video .s2 .info{
    margin:0 auto;
    display:grid;
    gap:0 3%;
    grid-template-columns:1fr 1fr 1fr;
    padding-bottom:90px;
}

.project section.list .info li,
.video .s2 .info li{
    margin-bottom:60px;
}

.project section.list .info img,
.video .s2 .info img{
    display:block;
    width:100%;
}

.project section.list .info a,
.video .s2 .info a{
    position:relative;
    display:block;
    box-shadow:5px 5px 10px rgba(0,0,0,0.1);
    border-radius:15px;
    font-size:20px;
    padding-top:3em;
    overflow:hidden;
}

.project section.list .info h6,
.video .s2 .info h6{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    box-sizing:border-box;
    color:#FFFFFF;
    font-weight:normal;
    text-align:center;
    padding:0 1em;
    background:#0071BF;
	line-height:3em;
	height:3em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
    transition:0.2s;
}

.project section.list a:hover h6,
.video .s2 .info a:hover h6{
	line-height:3.5em;
	height:3.5em;
    background:#F29700;
}

/*PROJECT_S2-----------------*/
.project .s2 .info{
    display:grid;
    gap:0 3%;
    grid-template-columns:1fr 1fr 1fr;
    padding-top:60px;
}

.project .s2 .info li{
    margin-bottom:60px;
}

.project .s2 .info h6{
    position:relative;
    font-size:20px;
    line-height:1.3em;
    font-weight:600;
    padding-bottom:1em;
    margin-bottom:1em;
    border-bottom:#CBD8EC 1px solid;
}

.project .s2 .info h6:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:5em;
    height:1px;
    background:#396AB5;
}

.project .s2 .info img{
    width:100%;
    border-radius:20px;
}

/*PROJECT_PJ-----------------*/
.project .pj{
    max-width:1100px;
    margin:0 auto;
    padding:60px 0;
}

.project .pj h5{
    font-size:30px;
    line-height:1.3em;
    font-weight:600;
    color:#2F5896;
}

.project .pj p{
    line-height:1.5em;
    padding:1em 0 2em;
    border-bottom:#294D83 1px solid;
}

.project .pj ul{
    margin:60px 0 20px;
    display:grid;
    gap:0 30px;
    grid-template-columns:1fr 1fr 1fr;
}

.project .pj li{
    margin-bottom:50px;
}

.project .pj .image{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#FFFFFF;
    aspect-ratio:4/2.5;
    overflow:hidden;
}

.project .pj img{
    display:block;
    max-width:100%;
    max-height:100%;
    transition:0.2s;
}

.project .pj a:hover img{
    transform:scale(1.1);
}

.project .pj h6{
    font-weight:normal;
    line-height:1.5em;
    padding-top:1em;
    transition:0.2s;
}

.project .pj a:hover h6{
    color:#3A6AB4;
}

.project .pj .back{
    position:relative;
    display:block;
    width:170px;
    line-height:40px;
    color:#FFFFFF;
    text-align:center;
    background:#0071BF;
    border-radius:30px;
    transition:0.2s;
}

.project .pj .back:hover{
    width:200px;
}

.project .pj .back:before,
.project .pj .back:after{
    content:"";
    position:absolute;
    top:55%;
    left:1em;
    width:1em;
    height:1px;
    background:#FFFFFF;
    transition:0.2s;
}

.project .pj .back:after{
    width:0.5em;
    transform:rotate(-45deg);
    transform-origin:left bottom;
}

.fancybox-slide--image,
.fancybox-slide--video{
	padding:60px 6px !important;
}

.fancybox-content img,
.fancybox-content iframe{
    border-radius:20px;
    outline:#FFFFFF 3px solid;
}

.fancybox-toolbar{
    display:none;
}

.fancybox-button{
    position:relative;
    background:none !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}

.fancybox-button svg{
    display:none !important;
}

.fancybox-button div,
.nGY2ViewerAreaPrevious{
    position:relative;
    padding:0 !important;
    width:55px !important;
    height:55px !important;
	opacity:1;
	transition:0.2s;
}

.fancybox-button:disabled{
    opacity:0.5 !important;
}

.fancybox-button--arrow_left div{
    margin-left:auto;
}

.ngy2viewerToolAction{
    opacity:1 !important;
}

.fancybox-button--arrow_left div:after,
.fancybox-button--arrow_right div:after,
.nGY2ViewerAreaPrevious:after{
    content:"";
    position:absolute;
    top:15px;
    width:25px;
    height:25px;
    border-style:solid;
    border-color:#FFFFFF;
    transform:rotate(45deg);
}

.fancybox-button--arrow_left div:after,
.nGY2ViewerAreaPrevious:after{
    left:20px;
    border-width:0 0 3px 3px;
}

.fancybox-button--arrow_right div:after{
    right:20px;
    border-width:3px 3px 0 0;
}

/*.fancybox-button--close{
    width:55px !important;
    height:55px !important;
    background:url("../images/fancybox_close.svg") center no-repeat !important;
    background-size:100% auto;
}*/

.project .fancybox-close-small,
.video .fancybox-close-small{
    top:-60px !important;
    right:0 !important;
	background:#2EA6DF !important;
	opacity:1 !important;
	border-radius:5px;
	height:40px !important;
	width:40px !important;
	padding:5px;
	color:#FFFFFF;
}

.project .fancybox-close-small svg,
.video .fancybox-close-small svg{
    display:block !important;
	width:40px;
	height:40px;
	transition:0.2s;
}

.project .fancybox-close-small:hover svg,
.video .fancybox-close-small:hover svg{
	transform:rotate(90deg);
}

/*VIDEO-----------------------------------------*/

/*VIDEO_S1-----------------*/
.video .s1{
    background-image:url("../images/video_s1.jpg");
}

/*VIDEO_S2-----------------*/
.video .fancybox-navigation{
    display:none;
}

.video .s2 .info{
    padding:60px 0 30px;
}

.video .s2 .info .image{
    position:relative;
}

.video .s2 .info .image:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("../images/play_icon.svg") center no-repeat;
    background-size:90px;
    opacity:0.7;
    transition:0.2s;
}

.video .s2 .info a:hover .image:after{
    opacity:1;
}

.video .s2 .info a{
    padding:0 0 3em;
}

.video .s2 .info h6{
    top:auto;
    bottom:0;
    text-align:left;
}

/*CONTACT-----------------------------------------*/

/*CONTACT_S1-----------------*/
.contact .s1{
    background-image:url("../images/contact_s1.jpg");
}

/*CONTACT_S2-----------------*/
.contact .s2{
    padding-bottom:70px;
}

.contact .s2 .top,
.contact .s2 .bm{
    padding:60px 0;
    max-width:980px;
    margin:0 auto;
}

/*CONTACT_S2_TOP*/
.contact .s2 .top{
    border-bottom:#B3CAE0 1px solid;
}

.contact .s2 .top p{
    display:flex;
    justify-content:center;
    gap:20px;
    align-items:center;
    text-align:center;
    padding-bottom:30px;
    line-height:1.5em;
    border-bottom:#B3CAE0 1px solid;
}

.contact .s2 .table{
    max-width:400px;
    width:100%;
    margin:50px auto;
}

.contact .s2 .td{
    padding:10px 0;
}

.contact .s2 .td:first-child{
    width:5em;
}

.contact .s2 .td input,
.contact .s2 textarea{
    width:100%;
    height:40px;
    padding:0 10px;
	border:#CBD5E5 1px solid;
    border-radius:5px;
    box-sizing:border-box;
}

.contact .s2 .feedback .td{
    vertical-align:top;
}

.contact .s2 textarea{
    padding:10px;
    height:7em;
}

.contact .s2 .captcha input{
    width:100px;
}

.contact .s2 .captcha img{
    width:100px;
    height:40px;
    vertical-align:middle;
    margin-left:10px;
}

.contact .s2 .send{
    display:block;
    font-size:17px;
    color:#FFFFFF;
    width:180px;
    height:56px;
    border:none;
    background:#2582C5;
    border-radius:30px;
    margin:0 auto;
    cursor:pointer;
    box-shadow:2px 2px 5px rgba(0,0,0,0.3);
    transition:0.2s;
}

.contact .s2 .send:hover{
    width:210px;
}

/*CONTACT_S2_BM*/
.contact .s2 .bm ul{
    display:flex;
    justify-content:center;
    margin-bottom:60px;
}

.contact .s2 .bm li:after{
    content:"\2022";
    padding:0 1em;
}

.contact .s2 .bm li:last-child:after{
    display:none;
}

.contact .s2 .bm iframe{
    border-radius:20px;
}

form .nofill:before,
form .format:before{
	position:absolute;
	top:-2px;
	left:5px;
	color:#FFFFFF;
	padding:8px 10px;
	background:#396AB5;
	border-radius:5px 5px 0px 0px;
	font-size:12px;
	line-height:1em;
	white-space:nowrap;
	pointer-events:none;
}

form .nofill:before{
	content:"此欄為必填";
}

form .format:before{
	content:"格式錯誤";
}

form .nofill,
form .format{
    position:relative;
	padding-top:25px !important;
}

form .nofill input,
form .format input,
form .nofill textarea{
	border:#396AB5 1px solid !important;
	box-shadow:0px 0px 5px #396AB5;
}

/*COMMON--------------------------------------------------------------------*/

/*HEADER-----------------------------------------*/
header{
	position:sticky;
	top:0;
	z-index:1000;
    background:#FFFFFF;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
}

header .mb_bt,
header .mb{
	display:none;
}

header .out{
    max-width:none;
	padding:0 40px;
}

header .logo{
	display:block;
	position:absolute;
	top:50%;
	left:40px;
	z-index:1;
	width:60%;
	max-width:365px;
	transform:translateY(-50%);
	transition:0.2s;
}

header.active .logo{
	max-width:300px;
}

header .logo img{
	width:100%;
}

header .pc .menu{
	display:flex;
	justify-content:flex-end;
    gap:1em;
	padding-top:40px;
	font-size:18px;
	transition:0.2s;
}

header.active .pc .menu{
	padding-top:20px;
}

header .pc .menu .list{
	position:relative;
	cursor:pointer;
}

header .pc .menu .list > a,
header .pc .menu .list div{
	position:relative;
	display:block;
    line-height:20px;
	padding:0.5em 1em;
	margin-bottom:40px;
	border-radius:5px;
    transition:0.2s;
}

header.active .pc .menu .list > a,
header.active .pc .menu .list div{
	margin-bottom:20px;
}

header .pc .menu .list > a:hover,
header .pc .menu .list div:hover{
    color:#FFFFFF;
    background:#0071BF;
}

header .pc .list ul{
	position:absolute;
    left:50%;
	text-align:center;
	background:#F9FBFD;
	border-radius:0 0 10px 10px;
    padding:20px 0;
    box-sizing:border-box;
    box-shadow:0 3px 3px rgba(0,0,0,0.1);
	transform-origin:top;
	transform:translateX(-50%) scaleY(0);
	transition:0.2s;
}

header .pc .menu .list:hover ul{
    transform:translateX(-50%) scaleY(1);
}

header .pc .list li a{
    display:block;
    white-space:nowrap;
    padding:1em 2em;
}

header .pc .list li a:hover{
    color:#3A6AB4;
    background:#ECEFF8;
}

@media only screen and (max-width:1300px){
    header .out{
        padding:0 20px;
    }
    
    header .logo{
        left:20px;
        max-width:300px;
    }
    
    header .pc .menu{
        gap:0;
    }
    
    header .pc .menu .list > a,
    header .pc .menu .list div{
        padding:0.5em 0.7em;
    }
}

/*AREA-----------------------------------------*/
.area{
    display:flex;
    justify-content:flex-end;
    padding:2em 0;
}

.area li{
    position:relative;
    padding-right:36px;
}

.area li:last-child{
    padding-right:0;
}

.area li:after{
    content:"";
    position:absolute;
    top:50%;
    right:10px;
    width:16px;
    height:1px;
    background:#9E9F9F;
}

.area li:last-child:after{
    display:none;
}

.area a{
    color:#9E9F9F;
    transition:0.2s;
}

.area a:hover{
    color:#222222;
}

/*BOOKMARK-----------------------------------------*/
.bookmark{
    position:absolute;
    top:-120px;
    pointer-events:none;
}

/*TABLE-----------------------------------------*/
.table{
    display:table;
}

.tr{
    display:table-row;
}

.td{
    display:table-cell;
}

/*PAGE_NUMBER-----------------------------------------*/
.page_number{
	font-family:Arial;
	color:#666666;
	text-align:center;
	padding:0 0 50px;
}

.page_number ul{
    display:flex;
    justify-content:center;
	margin:0px auto;
	overflow:hidden;
    padding-bottom:5px;
}

.page_number li select{
	cursor:pointer;
	padding:0px 5px;
}

.page_number li.page_select{
	padding:0px 20px 0 10px;
	position:relative;
}

.page_number li.page_select .select_box{
	display:inline-block;
	position:relative;
}

.page_number li.page_select .select_box:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	border-style:solid;
	border-width:6px 3px 0 3px;
	border-color:#036EB7 transparent transparent transparent;
	transform:translateX(-50%);
	margin-left:1px;
	transition:0.2s;
}

.page_number a{
	display:inline-block;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#FFFFFF;
    box-shadow:2px 2px 7px rgba(0,0,0,0.2);
	vertical-align:middle;
	position:relative;
	transition:0.2s;
}

.page_number li a:after{
	content:"";
	position:absolute;
	top:50%;
	border-style:solid;
	border-color:#036EB7;
	border-width:0px 3px 3px 0px;
	padding:4px;
	margin-top:-5px;
    transition:0.2s;
}

.page_number a:hover:after{
	border-color:#E95514;
}

.page_number li.page_prev a:after{
	right:13px;
	transform:rotate(135deg);
}

.page_number li.page_next a:after{
	left:13px;
	transform:rotate(-45deg);
}

.page_number li select{
	border:none;
	font-family:Arial;
	font-size:24px;
	color:#333333;
	font-weight:500;
	border-radius:5px;
	background:none;
	margin-bottom:5px;
	text-align-last:center;
	transition:0.2s;
}

.page_number li .select_box:hover select{
	color:#036EB7;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:40px;
	height:40px;
	border-radius:50%;
	z-index:500;
	background:url("../images/pagetop.svg");
	opacity:0.8;
	position:relative;
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:1 !important;
}

/*FOOTER-----------------------------------------*/
footer .out{
    max-width:1250px;
}

/*FOOTER_TOP-----------------*/
footer .top{
    background:#E8EFF9;
    font-size:16px;
    padding:40px 0;
}

footer .top .out{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

footer .top .out ul{
    display:flex;
    gap:1.5em;
}

footer .top .logo{
    width:26%;
    max-width:320px;
}

footer .top a img{
    width:22px;
}

footer .top .link{
    display:flex;
    justify-content:center;
    gap:10px;
}

/*FOOTER_BM-----------------*/
footer .bm{
    font-size:15px;
    padding:1em 0;
    background:#0071BF;
    color:#FFFFFF;
}

footer .bm .out{
    display:flex;
    justify-content:space-between;
}

footer .bm a{
    color:#FFFFFF;
    transition:0.2s;
}

footer .bm a:hover{
    opacity:0.8;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
    /*HOME-----------------------------------------*/
    
    /*HOME_S1-----------------*/
    .home .s1{
        aspect-ratio:5/3;
        animation:zoomOutm 2s both;
    }
    
    .home .s1 .text{
        font-size:8.5vw;
    }
    
    .home .s1 p{
        font-size:0.23em;
    }
    
    /*HOME_S2-----------------*/
    .home .s2{
        padding:60px 0;
    }
    
    .home .s2 .out{
        max-width:600px;
        padding:0 20px;
    }
    
    .home .s2 h6{
        font-size:30px;
    }
    
    .home .s2 ul{
        display:block;
    }
    
    .home .s2 li{
        margin-bottom:30px;
    }
    
    /*HOME_S3-----------------*/
    .home .s3{
        background-position:top center;
        padding:60px 0;
    }
    
    .home .s3 .out,
    .home .s4 .out{
        display:block;
    }
    
    .home .s3 .left,
    .home .s4 .left{
        min-width:0;
        margin-bottom:2em;
    }
    
    .home .s3 .right a .image:before,
    .home .s3 .right .image div,
    .project .s2 .info a .image:before,
    .project .s2 .info .image div{
        transform:scale(0.7);
        transform-origin:top left;
    }
    
    /*HOME_S4-----------------*/
    .home .s4{
        padding:60px 0;
    }
    
    .home .s4 .right{
        justify-content:center;
    }
    
    .home .s4 .right > li{
        width:100%;
        max-width:485px;
    }
    
    .home .s4 .right a{
        flex-wrap:wrap;
        gap:20px;
        justify-content:center;
    }
    
    .home .s4 .right .image,
    .home .s4 .right .text{
        width:230px;
    }
    
    /*COMPANY-----------------------------------------*/
    
    /*COMPANY_S2-----------------*/
    .pagein.company .s2{
        padding-bottom:60px;
    }
    
    .company .s2 .info{
        display:block;
    }
    
    .company .s2 .image,
    .company .s2 .text{
        width:auto;
    }
    
    .company .s2 .image{
        max-width:500px;
        margin:0 auto;
    }
    
    .company .s2 .text div{
        max-width:400px;
        margin:0 auto 30px;
    }
    
    .company .s2 .text h5{
        padding:60px 0 0 85px;
    }
    
    .company .s2 .text ul{
        display:block;
    }
    
    .company .s2 .text li:nth-last-child(2){
        border-bottom:#C3D2E9 1px solid;
    }
    
    /*PRODUCT-----------------------------------------*/

    /*PRODUCT_S1-----------------*/
    .pagein .s1 .title{
        font-size:28px;
        padding:50px 0;
    }
    
    .pagein .s1 .tab_out{
        width:85%;
        position:relative;
        z-index:1;
        margin:0 auto;
        text-align:left;
        box-shadow:0 0 5px rgba(0,0,0,0.1);
    }
    
    .pagein .s1 .mb{
        position:relative;
        display:block;
        background:#FFFFFF;
        font-size:20px;
        padding:1em;
        cursor:pointer;
    }
    
    .pagein .s1 .mb:after{
        content:"";
        position:absolute;
        top:50%;
        right:20px;
        border-style:solid;
        border-width:10px 5px 0 5px;
        border-color:#396AB5 transparent transparent transparent;
        margin-top:-5px;
    }
    
    .pagein .s1 .tab{
        display:none;
        position:absolute;
        width:100%;
        box-shadow:0 5px 5px rgba(0,0,0,0.1);
        border-top:#8493A8 1px solid;
    }
    
    .pagein .s1 .tab a{
        padding:1em;
    }
    
    .pagein .s1 .tab a:after{
        display:none;
    }
    
    .pagein .s1 .tab a:before{
        content:"";
        position:absolute;
        bottom:0;
        left:1em;
        right:1em;
        height:1px;
        background:#E3E7EA;
    }
    
    .pagein .s1 .tab li.active a:before,
    .pagein .s1 .tab li:last-child a:before{
        display:none;
    }
    
    /*PRODUCT_S2-----------------*/
    .product .s2 .info{
        display:block;
    }
    
    .product .s2 .left{
        max-width:500px;
        margin:0 auto 50px;
    }
    
    .product .s2 .right .t1{
        font-size:30px;
    }
    
    .product .s2 .right a{
        margin:3em auto 0;
    }
    
    /*PRODUCT_S3-----------------*/
    .product .s3 a:before,
    .product .s3 a:after{
        display:none;
    }
    
    /*BRAND-----------------------------------------*/
    
    /*BRAND_S2-----------------*/
    .brand .s2 .list{
        display:block;
        padding-bottom:90px;
    }
    
    .brand .s2 .list:last-child{
        padding-bottom:60px;
    }
    
    .brand .s2 .list .image{
        max-width:350px;
    }
    
    .brand .s2 .list h5{
        margin:1em 0;
    }
    
    /*PROJECT-----------------------------------------*/
    
    /*PROJECT_S2-----------------*/
    .project .s2 .info,
    .project section.list .info,
    .video .s2 .info{
        gap:0 30px;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,400px));
    }
    
    .project section.list .info{
        padding-bottom:30px;
    }
    
    /*PROJECT_PJ-----------------*/
    .project .pj ul{
        grid-template-columns:repeat(auto-fit,minmax(auto,350px));
        justify-content:center;
    }
    
    /*CONTACT-----------------------------------------*/
    
    /*CONTACT_S2-----------------*/
    .contact .s2{
        padding-bottom:0;
    }
    
    /*CONTACT_S2_TOP*/
    .contact .s2 .top p{
        display:block;
    }
    
    .contact .s2 .top p img{
        display:block;
        margin:0 auto 10px;
    }
    
    .contact .s2 .table,
    .contact .s2 .tr,
    .contact .s2 .td{
        display:block;
        max-width:none;
    }
    
    .contact .s2 .table{
        margin:40px auto;
    }
    
    /*CONTACT_S2_BM*/
    .contact .s2 .bm{
        padding-top:40px;
    }
    
    .contact .s2 .bm ul{
        display:block;
        margin-bottom:40px;
    }
    
    .contact .s2 .bm li{
        margin-bottom:1em;
    }
    
    .contact .s2 .bm li:after{
        display:none;
    }
    
    /*COMMON--------------------------------------------------------------------*/
    
    /*HEADER-----------------------------------------*/
	header .out{
		height:60px;
	}
	
    header .logo,
	header.active .logo{
        max-width:200px;
		transition:0s;
    }
	
    header .pc{
		display:none;
    }
    
	/*HEADER_MB_BUTTON-----------------*/
    header .mb_bt,
    header .mb{
        display:block;
    }
	
	header .mb_bt{
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-20px;
		text-align:left;
		cursor:pointer;
	}
	
	header .mb_bt span{
		height:1px;
		width:30px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		background:#222222;
		transition:0.3s;
		display:block;
	}
	
	header .mb_bt span:before,
	header .mb_bt span:after{
		content:"";
		height:1px;
		position:absolute;
		right:0;
		background:#222222;
		transition:0.3s;
	}
	
	header .mb_bt span:before{
		top:-8px;
		width:40px;
	}
	
	header .mb_bt span:after{
		top:8px;
		width:20px;
	}
	
	header .mb_bt:hover span,
	header .mb_bt:hover span:before,
	header .mb_bt:hover span:after{
		width:40px;
	}
	
	header .mb_bt.active span:before{
		width:40px;
		top:0;
		transform:rotate(45deg);
	}
	
	header .mb_bt.active span:after{
		width:40px;
		top:0;
		transform:rotate(-45deg);
	}
	
	header .mb_bt.active:hover span{
		width:40px;
		transform:rotate(-90deg);
	}
	
	header .mb_bt.active span{
		background:none;
	}
    
	/*HEADER_MENU-----------------*/
	header .mb{
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
		width:100%;
		overflow-y:auto;
        background:#F4F6F9;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	header .mb.active{
		transform:translateX(0);
	}
	
	header .mb .menu{
		padding:40px 40px 100px;
	}
	
	header .mb .menu .list > a,
	header .mb .menu .list div{
		display:block;
		font-size:20px;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		border-bottom:#D6E0EF 1px solid;
		transition:0.2s;
	}
	
	header .mb .menu .list div:after{
		content:"";
		position:absolute;
		top:50%;
		right:0;
		border-style:solid;
		border-width:8px 4px 0 4px;
		border-color:#0C5C90 transparent transparent transparent;
		margin-top:-4px;
		opacity:0.8;
	}
	
	header .mb .menu .list div.active:after{
		opacity:1;
	}
	
	header .mb .menu .list ul{
		display:none;
		padding-top:20px;
    }
	
    header .mb .menu .list ul a{
        display:block;
        padding:0.3em 1em;
        line-height:1.5em;
		transition:0.2s;
    }
	
	header .mb .menu .list div:hover,
	header .mb ul a:hover{
		color:#3A6AB4;
	}
    
    /*AREA-----------------------------------------*/
    .area{
        display:none;
    }
    
    /*BOOKMARK-----------------------------------------*/
    .bookmark{
        top:-60px;
    }
    
    /*FOOTER-----------------------------------------*/
    
    /*FOOTER_TOP-----------------*/
    footer .top{
        padding:30px 0;
    }
    
    footer .out,
    footer .top .out ul{
        display:block !important;
        text-align:center;
    }
    
    footer .top .logo{
        width:auto;
    }
    
    footer .top .out ul{
        margin:1.3em 0;
    }
    
    footer .top .out li,
    footer .bm .out li:first-child{
        margin-bottom:0.7em;
    }
}