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

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:16px;
	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;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

input[type="number"]{
  -moz-appearance:textfield;
}

:root{
    --enfont:'Oswald', sans-serif;
	--cyan:#49B6B9;
}

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

/*HOME_S1-----------------*/
.home .s1 .splide__track{
    height:calc(100vh - 120px);
    min-height:600px;
}

.home .s1 .splide__slide{
	overflow:hidden;
}

.home .s1 .splide__slide .bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
	transform:scale(1.1);
}

.home .s1 .splide .is-active .bg{
	animation:pageinbg 3s both;
}

.home .s1 .splide .splide__slide ul li{
	opacity:0;
}

.home .s1 .splide .is-active ul li{
	animation:fadeSlideIn 0.6s both;
}

.home .s1 .splide .is-active ul li:nth-child(2){
	animation-delay:0.3s;
}

.home .s1 .splide .is-active ul li:nth-child(3){
	animation-delay:0.6s;
}

.home .s1 .splide .is-active ul li:nth-child(4){
	animation-delay:0.9s;
}

@keyframes fadeSlideIn{
  0%{
    opacity:0;
    transform:translateY(40px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.home .s1 .text{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    font-size:50px;
    color:#FFFFFF;
}

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

.home .s1 .text ul{
    max-width:13em;
}

.home .s1 .text .t1{
    font-weight:300;
    line-height:1.2em;
}

.home .s1 .text .t2{
    font-size:20px;
    line-height:1.5em;
    margin:2em 0;
}

.home .s1 .text .img{
    display:flex;
    margin-bottom:0.7em;
}

.home .s1 .text img{
    width:95px;
}

.home .s1 .text .bt_s1{
    color:#FFFFFF;
    border-color:rgba(255,255,255,0.5);
}

.home .s1 .text .bt_s1:after{
    border-color:transparent transparent transparent #FFFFFF;
}

.home .s1 .splide__pagination{
    bottom:45px;
    justify-content:flex-end;
    padding:0 70px;
}

.home .s1 .splide__pagination__page{
    width:45px;
    height:4px;
    opacity:1;
    border-radius:0;
    margin:5px;
    background:#B4B4B5;
}

.home .s1 .splide__pagination__page.is-active{
    transform:none;
    height:7px;
    background:var(--cyan);
}

@media only screen and (max-width:500px){
    .home .s1 .bt_s1{
        font-size:3vw;
    }
}

/*HOME_S2-----------------*/
.home .s2{
    position:relative;
    padding:160px 0;
    background:url("../images/home_s2_bg.jpg") left bottom no-repeat;
}

.home .s2 .out{
    position:static;
}

.home .s2 .bt_s1,
.home .s21 .bt_s1,
.home .s4 .bt_s1,
.home .s6 .bt_s1{
    border:#C8C9C9 1px solid;
    margin-top:50px;
    background:#FFFFFF;
}

.home .s6 .bt_s1{
    border:none;
}

.home .s2 .bt_s1:after,
.home .s21 .bt_s1:after,
.home .s4 .bt_s1:after,
.home .s6 .bt_s1:after{
    border-color:transparent transparent transparent var(--cyan);
}

.home .s2 .text_s2{
    color:#666666;
}

.home .s2 .img{
    position:absolute;
    top:50%;
    left:50%;
    overflow:hidden;
    width:80%;
    max-width:1160px;
    min-width:800px;
    aspect-ratio:23/13;
    transform:translateY(-50%) skewX(-17deg);
    border-radius:20px 0 0 20px;
}

.home .s2 .img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:skewX(17deg);
    margin-left:-9%;
}

@media only screen and (max-width:1250px){
    .home .s2 .img{
        left:600px;
        width:70%;
        min-width:700px;
    }
}

/*HOME_S21-----------------*/
.home .s21{
	background:#F7F7F7;
	padding:90px 0;
}

.home .s21 ul li a{
    background:#FFFFFF;
}

.home .s21 .title_en{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
}

.home .s21 .title_en a{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:15px;
	line-height:1em;
	font-weight:normal;
}

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

.home .s3 .text{
    padding-top:92px;
}

.home .s3 .text,
.home .s3 .title_en{
    color:#FFFFFF;
}

.home .s3 .out{
    display:flex;
    gap:5%;
}

.home .s3 .splide__slide a{
    position:relative;
    z-index:9;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:linear-gradient(#FFFFFF,#FFFFFF,#E0E6EF);
    aspect-ratio:16/13;
    border-radius:15px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    overflow:hidden;
    transition:0.2s;
}

.home .s3 .splide__slide a:hover{
    color:#FFFFFF;
}

.home .s3 .splide__slide a:after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(#6F86B4,#C9D3E3,#C9D3E3);
    opacity:0;
    transition:0.2s;
}

.home .s3 .splide__slide a:hover:after{
    opacity:1;
}

.home .s3 .splide__slide div{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    margin:1em;
    line-height:1.5em;
    max-height:3em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}

.home .s3 .splide__slide img{
    position:relative;
	bottom:10%;
    z-index:1;
    width:70%;
    height:70%;
    object-fit:cover;
}

.home .s3 .splide__pagination{
    display:none;
}

.home .s3 .page-number{
    font-size:23px;
    color:#CCCCCC;
    text-align:right;
    padding-bottom:2em;
}

.home .s3 .page-number #current-page{
    font-size:1.4em;
    color:#FFFFFF;
}

.home .s3 .splide__arrow,
.home .s5 .splide__arrow,
.esg .s2 .info .splide__arrow{
    top:-65px;
    width:44px;
    height:44px;
    opacity:1;
    background:#FFFFFF;
    transition:0.2s;
}

.home .s3 .splide__arrow:hover,
.home .s5 .splide__arrow:hover,
.esg .s2 .info .splide__arrow:hover{
    background:#83CDCF;
}

.home .s3 .splide__arrow svg,
.home .s5 .splide__arrow svg,
.esg .s2 .info .splide__arrow svg{
    width:50%;
    height:50%;
    fill:#888888;
    transition:0.2s;
}

.home .s3 .splide__arrow:hover svg,
.home .s5 .splide__arrow:hover svg,
.esg .s2 .info .splide__arrow:hover svg{
    fill:#FFFFFF;
}

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

.home .s3 .splide__arrow--next{
    right:100px;
}

@media screen and (max-width:1200px) and (min-width:1001px){
    .home .s3 .splide__slide a{
        font-size:1.4vw;
    }
}

/*HOME_S4-----------------*/
.home .s4{
    background:#F7F7F7;
    padding:160px 0;
}

.home .s4 ul{
    position:relative;
}

.home .s4 .text{
    padding:0 64% 20% 0;
}

.home .s4 .image{
    width:90%;
    aspect-ratio:2/1;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-20%;
}

.home .s4 .image img{
    position:absolute;
    height:48%;
}

.home .s4 .image img:nth-child(1){
    top:0;
    left:10%;
}

.home .s4 .image img:nth-child(2){
    top:0;
    right:0;
}

.home .s4 .image img:nth-child(3){
    bottom:0;
    left:0;
}

.home .s4 .image img:nth-child(4){
    bottom:0;
    right:2%;
}

/*HOME_S5-----------------*/
.home .s5{
    position:relative;
    z-index:1;
    background:#FDFDFD url("../images/home_s5_bg.jpg") bottom left no-repeat;
    padding:120px 0;
}

.home .s5:before{
    content:"";
    position:absolute;
    top:-97px;
    left:50%;
    width:392px;
    height:97px;
    background:url("../images/home_s5_bg_top.png");
    margin-left:-1000px;
}

.home .s5 .text{
    text-align:center;
}

.home .s5 .text_s2{
    margin:0 auto 80px;
}

.home .s5 .splide__slide{
    padding:20px;
    background:#FFFFFF;
    border:#DBDCDC 1px solid;
}

.home .s5 .splide__slide img{
    width:100%;
}

.home .s5 .splide{
    padding:0 70px;
}

.home .s5 .splide__arrow{
    top:50%;
    box-shadow:2px 2px 6px rgba(0,0,0,0.2);
}

.home .s5 .splide__pagination{
    bottom:-50px;
}

.home .s5 .splide__pagination__page{
    opacity:1;
    width:10px;
    height:10px;
    margin:5px;
    background:#B4B4B5;
}

.home .s5 .splide__pagination__page.is-active{
    background:var(--cyan);
    transform:scale(1.2);
}

/*HOME_S6-----------------*/
.home .s6{
    background:url("../images/home_s6.jpg");
    background-size:cover;
	background-attachment:fixed;
    padding:200px 0;
    color:#FFFFFF;
    text-align:center;
}

.home .s6 .title_en{
    color:#FFFFFF;
}

.home .s6 .text_s2{
    max-width:22em;
    margin:0 auto;
}

/*ABOUT-----------------------------------------*/
.about .s1:before{
	background-image:url("../images/about_s1.jpg");
}

.pagein.about .s1 .out{
    height:580px;
}

/*ABOUT_S2-----------------*/
.about .s2 .text{
	display:flex;
	justify-content:space-between;
	padding:90px 0;
}

.about .s2 .left{
	min-width:395px;
}

.about .s2 .right{
	width:60%;
}

.about .s2 .t1{
	font-size:30px;
	font-weight:normal;
	color:#294D83;
	line-height:1.5em;
	margin-bottom:1em;
}

.about .s2 .t2{
	line-height:1.7em;
}

.about .s2 .right ul{
	max-width:580px;
	display:flex;
	flex-wrap:wrap;
	gap:2%;
	list-style:disc;
	list-style-position:inside;
	margin:40px 0 50px;
}

.about .s2 .right li{
	padding:1em 0;
	border-bottom:#49B6B9 1px solid;
	text-indent:-1em;
	padding-left:1em;
	line-height:1.3em;
	width:49%;
	box-sizing:border-box;
}

.about .s2 .right li::marker{
	color:#49B6B9;
}

.about .s2 .text img{
	position:absolute;
	left:50%;
	bottom:-50px;
	margin-left:-1000px;
}

/*ABOUT_S3-----------------*/
.about .s3{
	position:relative;
	z-index:1;
	padding:200px 0 160px;
	background:#F7F7F7;
}

.about .s3:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-53px;
	width:319px;
	height:53px;
	background:url("../images/about_s3.png") no-repeat;
	margin-left:-1000px;
}

.about .s3 .out{
	display:flex;
	justify-content:space-between;
}

.about .s3 .left{
	min-width:420px;
}

.about .s3 .right{
	width:60%;
}

.about .s3 .right .title{
	position:relative;
	font-family:var(--enfont);
	font-size:36px;
	padding-bottom:1em;
	border-bottom:#B4B4B5 2px solid;
}

.about .s3 .right .title:after{
	content:"";
	position:absolute;
	left:0;
	bottom:-8px;
	width:15px;
	height:15px;
	background:#294D83;
	border-radius:50%;
}

.about .s3 .right .splide__slide ul{
	list-style:disc;
	padding:36px 0;
	line-height:1.8em;
	margin-left:1.2em;
}

.about .s3 .right .splide__slide li::marker,
.about .s3 .right .splide__slide span{
	color:#294D83;
}

.about .s3 .right .splide{
	padding-bottom:50px;
}

.about .s3 .right .splide__track{
	overflow:visible;
	clip-path:inset(0 -100vw 0 0);
}

.about .s3 .right .splide__arrow{
	top:auto;
	bottom:0;
	transform:none;
	width:40px;
	height:40px;
	background:#9E9F9F;
	opacity:1;
	transition:0.2s;
}

.splide__arrow:disabled{
	opacity:0.5 !important;
	pointer-events:none;
}

.about .s3 .right .splide__arrow:hover{
	background:#49B6B9;
}

.about .s3 .right .splide__arrow svg{
	width:45%;
	height:45%;
	fill:#FFFFFF;
}

.about .s3 .right .splide__arrow--prev{
	left:0;
}

.about .s3 .right .splide__arrow--next{
	right:auto;
	left:50px;
}

/*ABOUT_S4-----------------*/
.about .s4{
	position:relative;
	height:1172px;
	background:url("../images/about_s4.jpg") top right no-repeat;
	overflow:hidden;
}

.about .s4 .mb{
	display:none;
}

.about .s4 .top{
	padding-top:100px;
}

.about .s4 .top *{
	color:#FFFFFF;
}

/*ABOUT_S4_LINK*/
.about .s4 .link li{
	position:absolute;
	font-size:22px;
	color:#FFFFFF;
	font-weight:600;
	cursor:pointer;
	padding-left:30px;
	white-space:nowrap;
}

.about .s4 .link li:before{
	content:"";
	position:absolute;
	top:6px;
	left:0;
	width:8px;
	height:8px;
	background:#FFFFFF;
	border:#49B6B9 4px solid;
	border-radius:50%;
	opacity:0.9;
	transition:0.2s;
}

.about .s4 .link li:hover:before,
.about .s4 .link li.active:before{
	transform:scale(1.5);
	opacity:1;
}

.about .s4 .link li:nth-child(1){
	top:397px;
	right:685px;
}

.about .s4 .link li:nth-child(2){
	top:267px;
	right:752px;
}

.about .s4 .link li:nth-child(3){
	top:427px;
	right:852px;
}

.about .s4 .link li:nth-child(4){
	top:264px;
	right:895px;
	padding:0 30px 0 0;
}

.about .s4 .link li:nth-child(4):before,
.about .s4 .link li:nth-child(5):before{
	left:auto;
	right:0;
}

.about .s4 .link li:nth-child(5){
	top:370px;
	right:940px;
	padding:0 30px 0 0;
}

.about .s4 .link li:nth-child(6){
	top:400px;
	right:960px;
}

.about .s4 .link li:nth-child(7){
	top:780px;
	right:990px;
}

/*ABOUT_S4_INFO*/
.about .s4 .info{
	position:absolute;
	top:50%;
	right:0;
	width:52%;
	max-width:550px;
	transform:translateY(-50%);
}

.about .s4 .info .list{
	padding:10px 30px;
	border-bottom:#C8C9C9 1px solid;
	display:flex;
	gap:20px;
	justify-content:space-between;
	align-items:center;
	cursor:pointer;
	background:#FFFFFF;
	transition:0.2s;
}

.about .s4 .info .list:first-child{
	border-radius:10px 0 0 0;
}

.about .s4 .info .list:hover,
.about .s4 .info .list.active{
	background:#49B6B9;
	transform:scaleX(1.05);
	transform-origin:right;
}

.about .s4 .info .list:hover,
.about .s4 .info .list:hover li::marker,
.about .s4 .info .list.active,
.about .s4 .info .list.active li::marker{
	color:#FFFFFF;
}

.about .s4 .info .list:last-child{
	border-bottom:none;
	border-radius:0 0 0 10px;
	align-items:flex-start;
}

.about .s4 .info .list:last-child img{
	margin-top:20px;
}

.about .s4 .info .t1{
	font-size:24px;
	font-weight:600;
	line-height:1.2em;
	margin-bottom:0.5em;
}

.about .s4 .info .list ul{
	list-style:disc;
	margin-left:1.2em;
}

.about .s4 .info .list li::marker{
	color:#49B6B9;
}

.about .s4 .info .list li,
.about .s4 .info .text div{
	line-height:1.5em;
}

.about .s4 .info .text{
	padding:20px 0;
}

.about .s4 .info img{
	height:100px;
}

/*ABOUT_S5-----------------*/
.about .s5{
	background:#F5F6FA url("../images/about_s5.jpg") right center no-repeat;
	background-size:92% auto;
	padding:140px 0 70px;
}

.about .s5 .top{
	max-width:670px;
	width:55%;
	margin:70px 0 80px;
}

.about .s5 .top .t1{
	font-size:30px;
	line-height:1.3em;
	font-weight:normal;
	color:#294D83;
}

.about .s5 .top .t2,
.about .s5 .bm .t2{
	line-height:1.7em;
	margin-top:1em;
}

.about .s5 .bm{
	max-width:670px;
	width:55%;
	display:flex;
	flex-wrap:wrap;
	gap:50px;
}

.about .s5 .bm li{
	font-size:22px;
}

.about .s5 .bm .t1{
	font-weight:normal;
	line-height:1.3em;
}

.about .s5 .bm .t2{
	font-size:17px;
}

.about .s5 .mb{
	display:none;
}

/*ABOUT_S6-----------------*/
.about .s6{
	position:relative;
	background:#FDFDFD url("../images/home_s2_bg.jpg") left bottom no-repeat;
	padding:150px 0;
}

.about .s6:before{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:555px;
	height:454px;
	background:url("../images/home_s2_bg.jpg");
	transform:rotate(180deg);
}

.about .s6 .bm{
	display:flex;
	flex-wrap:wrap;
	gap:2%;
	padding-top:100px;
}

.about .s6 .bm .list{
	width:32%;
	padding-bottom:20px;
}

.about .s6 .bm .image{
	border-radius:0 70px 0 0;
	overflow:hidden;
}

.about .s6 .bm .image img{
	display:block;
	width:100%;
}

.about .s6 .bm .image div{
	font-size:24px;
	color:#FFFFFF;
	padding:0.8em 1em;
	background:#49B6B9;
}

.about .s6 .bm .text{
	padding:25px;
}

.about .s6 .bm .t1{
	font-size:21px;
	font-weight:600;
	margin-bottom:1em;
}

.about .s6 .bm ul{
	list-style:disc;
	margin:0 0 30px 1.2em;
}

.about .s6 .bm li{
	line-height:1.7em;
}

.about .s6 .bm li::marker{
	color:#49B6B9;
}

/*ABOUT_S7-----------------*/
.about .s7{
	background:url("../images/about_s7.jpg") no-repeat;
	background-size:cover;
	padding:150px 0;
}

.about .s7 .top{
	display:flex;
	justify-content:space-between;
	gap:30px;
	color:#FFFFFF;
}

.about .s7 .top .title *{
	color:#FFFFFF;
}

.about .s7 .top .title_en{
	white-space:nowrap;
}

.about .s7 .top .text{
	max-width:60%;
	line-height:1.7em;
}

.about .s7 .bm{
	display:flex;
	gap:2%;
	margin-top:100px;
}

.about .s7 .bm li{
	width:23.5%;
	padding-top:50px;
	color:#FFFFFF;
	text-align:center;
}

.about .s7 .bm img{
	width:100%;
	margin-bottom:1em;
}

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

/*PRODUCT_S2-----------------*/

/*PRODUCT_S2_TOP*/
.product .s2 .top{
	text-align:left;
	padding:60px 0;
}

.product .s2 .top .t1{
	font-size:35px;
	line-height:1.2em;
	font-weight:600;
	color:#1E375E;
}

.product.search .s2 .top .t1{
	font-size:20px;
}

.product .s2 .top .t1 img{
	height:1em;
	vertical-align:bottom;
}

.product .s2 .top .t2{
	line-height:1.7em;
	margin-top:1em;
}

/*PRODUCT_S2_LINK*/
.product .s2 .link div{
	display:none;
}

.product .s2 .link ul{
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	text-align:left;
	margin-bottom:40px;
}

.product .s2 .link a{
	display:block;
	border:#C8C9C9 1px solid;
	padding:1em;
	transition:0.2s;
}

.product .s2 .link a:hover{
	color:#294D83;
}

.product .s2 .link a b{
	color:#1E375E;
	margin-left:10px;
}

.product .s2 .link .active a,
.product .s2 .link .active a b{
	color:#FFFFFF;
	border-color:var(--cyan);
	background:var(--cyan);
}

.product .s2 .nodata{
	padding:40px 0 80px;
	line-height:1.7em;
	text-align:center;
}

.product .s2 .nodata img{
	width:30px;
	vertical-align:middle;
	margin-right:10px;
}

.product .s2 .nodata span{
	color:#294D83;
}

/*PRODUCT_S2_TABLE*/
.product .s2 .scroll{
    overflow:auto;
    scrollbar-color:var(--cyan) #FFFFFF;
    scrollbar-width:thin;
	-webkit-overflow-scrolling:touch;
	will-change:scroll-position;
}

.product .s2 table,
.product .s2 td:first-child{
	text-align:left !important;
}

.product .s2 td{
	position:relative;
	vertical-align:top;
	padding:1.5em 1em;
	min-width:220px;
	width:220px;
	background:#FFFFFF;
}

.product .s2 td:after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	box-sizing:border-box;
	border-color:#D7DEE9;
	border-style:solid;
	border-width:1px 1px 0 0;
	pointer-events:none;
}

.product .s2 tr:first-child td:after{
	border-width:0 1px 0 0;
}

.product .s2 td:last-child:after{
	border-width:1px 0 0 0;
}

/*PRODUCT_S2_TABLE_TB_TOP*/
.product .s2 .scroll.up{
	overflow-y:hidden;
}

.product .s2 .tb_top td{
	height:135px;
}

.product .s2 .tb_top tr:last-child td:after{
	border-width:0 1px 1px 0;
}

.product .s2 .tb_top tr:last-child td:last-child:after{
	border-width:0 0 1px 0;
}

.product .s2 .tb_top tr:first-child div,
.product .s2 .tb_bm tr:first-child div{
	border-top:#FFFFFF 1px solid;
}

.product .s2 td:first-child{
	position:sticky;
	left:0;
	z-index:5;
}

.product .s2 td sub{
	font-size:0.7em;
}

.product .s2 .tb_top tr:first-child,
.product .s2 .tb_top tr:first-child td,
.product.search .s2 .tb_bm tr:first-child,
.product.search .s2 .tb_bm tr:first-child td{
	color:#FFFFFF;
	background:#1E375E;
	white-space:nowrap;
	text-align:center;
	height:auto;
	vertical-align:middle;
	line-height:2em;
	padding:1em;
}

.product.search .s2 .tb_bm tr:first-child{
	position:sticky;
	top:0;
	z-index:7;
}

.product.search .s2 .tb_bm{
	border-bottom:#D7DEE9 1px solid;
}

.product.search .s2 .tb_bm tr:first-child td:first-child{
	z-index:9;
}

.product .s2 .box{
	position:relative;
	border:#D7DEE9 1px solid;
	display:inline-block;
	max-width:100%;
}

.product .s2 .tb_top .scroll{
	height:100%;
}

.product .s2 .tb_top label{
	display:block;
	position:relative;
	padding-left:30px;
	word-break:break-all;
	line-height:20px;
	cursor:pointer;
}

.product .s2 .tb_top li{
	margin-bottom:15px;
}

.product .s2 .tb_top li:last-child{
	margin-bottom:0;
}

.product .s2 .tb_top li input[type="checkbox"]{
	display:none;
}

.product .s2 .tb_top li span{
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	border:#294D83 1px solid;
	background:#EEEEEE;
}

.product .s2 .tb_top li input[type="checkbox"]:checked + span{
	background:#294D83;
}

.product .s2 .reset{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-size:13px;
	width:120px;
	height:30px;
	color:#FFFFFF;
	background-color:#1E375E;
	margin-top:1.5em;
	transition:0.2s;
}

.product .s2 .reset:hover{
	background-color:var(--cyan);
}

.product .s2 .reset img{
	width:15px;
}

/*PRODUCT_S2_TABLE_TB_BOTTOM*/
.product .s2 .scroll.bm{
	overflow-x:hidden;
	max-height:483px;
	border-top:#D7DEE9 1px solid;
}

.product.search .s2 .scroll.bm{
	overflow:auto;
}

.product .s2 .tb_bm tr:nth-child(even),
.product .s2 .tb_bm tr:nth-child(even) td{
	background:#F4F6F9;
}

.product .s2 .tb_bm td{
	text-align:center;
}

.product .s2 .slider-container{
    position:relative;
    height:60px;
    margin:10px 0;
}

.product .s2 .slider-container:after,
.product .s2 .slider-container:before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:2px;
    height:100%;
    background:#B4B4B5;
}
	
.product .s2 .slider-container:before{
	z-index:9;
    background:#FFFFFF;
	height:2px;
}

.product .s2 .range-fill{
    position:absolute;
    left:50%;
    width:2px;
    background:#294D83;
    z-index:1;
}

.product .s2 .slider{
    writing-mode:vertical-lr;
    direction:rtl;
    appearance:none;
    position:absolute;
    height:100%;
    width:100%;
    background:transparent;
    pointer-events:none;
    z-index:2;
}

.product .s2 .slider::-webkit-slider-thumb{
    appearance:none;
    height:12px;
    width:12px;
    background:#294D83;
    border-radius:50%;
    cursor:pointer;
    pointer-events:auto;
    transform:translateX(-50%);
}

.product .s2 .slider::-moz-range-thumb{
    height:12px;
    width:12px;
    background:#294D83;
    border:none;
    border-radius:50%;
    cursor:pointer;
    pointer-events:auto;
	transform:translateX(-1px);
}

.product .s2 .slider::-webkit-slider-runnable-track{
    background:transparent;
    width:2px;
}

.product .s2 .slider::-moz-range-track{
    background:transparent;
    width:2px;
}

.product .s2 td input[type="number"]{
	display:block;
    margin:0 auto;
	text-align:center;
	width:50px;
	height:25px;
	background:#EEEEEE;
	border:none;
	border-radius:5px;
}

.product .s2 .amount{
	text-align:left;
	margin-top:2em;
}

/*APPLICATION-----------------------------------------*/
.app .s1:before{
    background-image:url("../images/app_s1.jpg");
}

/*APPLICATION_S2-----------------*/
.app .s2,
.product .s2{
    position:relative;
    padding-bottom:100px;
}

.app .s2:after,
.app .info:after,
.product .s2:after,
.contact .s3:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:90px;
    background:linear-gradient(#FFFFFF,#EBEEF2);
}

.app .s2 .list,
.home .s21 ul{
    text-align:left;
    display:flex;
    gap:0 3.5%;
    flex-wrap:wrap;
}

.app .s2 .list li,
.home .s21 li{
    margin-top:60px;
    width:31%;
}

.app .s2 .list a,
.app .info .right a,
.home .s21 li a{
	position:relative;
	top:0;
    display:block;
    background:#F4F6F9;
    border-radius:40px 0 40px 0;
    overflow:hidden;
	transition:0.2s;
}

.app .s2 .list li:hover a,
.app .info .right li:hover a,
.home .s21 li:hover a{
	top:-20px;
	box-shadow:3px 3px 10px rgba(0,0,0,0.2);
}

.app .s2 .list .image,
.app .info .right .image,
.home .s21 li .image{
    position:relative;
    overflow:hidden;
}

.app .s2 .list .image:after,
.app .info .right .image:after,
.home .s21 li .image:after{
    content:"";
    position:absolute;
	bottom:-1px;
    left:-1%;
    width:102%;
    height:100%;
    background:url("../images/app_s2_img_top.png") bottom no-repeat;
    background-size:100% auto;
}

.home .s21 li .image:after{
    background-image:url("../images/home_s21_img_top.png");
}

.app .s2 .list img,
.app .info .right img,
.home .s21 li img{
    width:100%;
    transition:0.2s;
}

.app .s2 .list a:hover img,
.app .info .right a:hover img,
.home .s21 li a:hover img{
    transform:scale(1.1);
}

.app .s2 .list .text,
.app .info .right .text,
.home .s21 li .text{
    padding:10%;
}

.app .s2 .list .t1,
.app .info .right .t1,
.home .s21 li .t1{
    font-size:22px;
    font-weight:normal;
    color:#294D83;
    line-height:1.4em;
    height:2.8em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}

.app .s2 .list .t2,
.app .info .right .t2,
.home .s21 li .t2{
    line-height:1.7em;
    height:5.1em;
	overflow:hidden;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
    margin-top:1em;
}

.app .s2 .list .bm{
	display:flex;
	justify-content:space-between;
	font-size:14px;
	color:#294D83;
}

.news .date,
.home .s21 li .date{
	font-size:14px;
	color:#294D83;
	text-align:left;
	margin-top:2em;
}

.app .s2 .list .bm .date span,
.news .date span,
.home .s21 li .date span{
	color:#DDDDDD;
	margin:0 0.5em;
}

.app .s2 .list .bt,
.app .info .right .bt{
    font-size:15px;
    color:#888888;
}

.app .s2 .list .bt span,
.app .info .right .bt span{
    position:relative;
    display:inline-block;
    width:30px;
    height:3px;
    background:#294D83;
    margin-right:15px;
    transition:0.2s;
}

.app .s2 .list a:hover .bt span,
.app .info .right a:hover .bt span{
    width:40px;
}

.app .s2 .list .bt span:after,
.app .info .right .bt span:after{
    content:"";
    position:absolute;
    right:-4px;
    bottom:0;
    border-style:solid;
    border-width:8px 0 0 10px;
    border-color:transparent transparent transparent #294D83;
}

/*APPLICATION_INFO-----------------*/
.app .info{
    position:relative;
    padding-bottom:100px;
}

.app .info .box{
    display:flex;
    gap:6%;
    padding-top:60px;
}

/*APPLICATION_INFO_LEFT*/
.app .info .left{
    width:100%;
    text-align:center;
}

.app .info .left .title{
    position:relative;
    font-size:30px;
    font-weight:600;
    line-height:1.3em;
    text-align:left;
    padding-left:1.8em;
    padding-bottom:0.8em;
}

.app .info .left .title:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:#DBDCDC;
    border-left:var(--cyan) 4em solid;
}

.app .info .left .title:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0.5em;
    height:1.3em;
    background:var(--cyan);
    transform:skewX(-35deg);
    transform-origin:bottom left;
}

.app .info .left .edit{
    line-height:1.7em;
    padding:60px 0;
    text-align:left;
}

.app .info .left .edit img{
    display:block;
    margin:2em auto;
    max-width:100%;
    height:auto !important;
}

.app .info .left .bt span{
    display:inline-block;
    vertical-align:middle;
    width:50px;
    height:50px;
    background:#EEF1F5 url("../images/app_info_back.svg") center no-repeat;
    background-size:auto 50%;
    border-radius:50%;
    margin-right:1em;
}

.app .info .left .bt{
    transition:0.2s;
}

.app .info .left .bt:hover{
    color:#294D83;
}

/*APPLICATION_INFO_RIGHT*/
.app .info .right{
    width:430px;
    min-width:430px;
}

.app .info .right li{
    margin-bottom:35px;
}

.app .info .right .title{
    font-size:24px;
    font-weight:600;
    border-left:var(--cyan) 5px solid;
    padding-left:0.5em;
    margin-bottom:60px;
}

/*NEWS-----------------------------------------*/
.app.news .s1:before{
    background-image:url("../images/news_s1.jpg");
}

/*ESG-----------------------------------------*/

/*ESG_S1-----------------*/
.esg .s1:before{
	background-image:url("../images/esg_s1.jpg");
}

.pagein.esg .s1 .out{
    height:580px;
}

/*ESG_S2-----------------*/
.esg .s2{
	position:relative;
	padding-bottom:100px;
	background:url("../images/home_s2_bg.jpg") left bottom no-repeat;
}

.esg .s2:after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:90px;
    background:linear-gradient(rgba(255,255,255,0),#EBEEF2);
}

/*ESG_S2_TAB*/
.esg .s2 .tab{
	display:flex;
	gap:1px;
	padding:50px 0 70px;
}

.esg .s2 .tab li{
	position:relative;
	width:calc(33.33% - 1px);
	text-align:center;
	background:#EAEDF3;
	padding:1em 0;
	border:none !important;
	cursor:pointer;
}

.esg .s2 .tab li.active{
	color:#FFFFFF;
	background:var(--cyan);
}

.esg .s2 .tab li:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:0;
	height:4px;
	background:var(--cyan);
	transform:translateX(-50%);
	transition:0.2s;
}

.esg .s2 .tab li:hover:after{
	width:100%;
}

@media screen and (max-width:1200px) and (min-width:1001px){
    .esg .s2 .tab li{
        font-size:1.35vw;
    }
}

/*ESG_S2_INFO*/
/*.esg .s2 .info .splide__list{
	align-items:flex-start;
}


.esg .s2 .info .splide__slide:not(.is-active){
	height:0;
}*/

.esg .s2 .info .splide__slide{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
}

.esg .s2 .info .text{
	width:40%;
}

.esg .s2 .info .t1{
	position:relative;
	font-size:40px;
	line-height:1.3em;
	font-weight:normal;
	padding-bottom:1em;
}

.esg .s2 .info .t1:before{
    content:"";
    position:absolute;
	bottom:0;
    left:0;
    width:110px;
    height:15px;
    background:#DBDCDC;
    border-right:var(--cyan) 18px solid;
    transform:skewX(-25deg);
    border-radius:3px 0 3px 0;
}

.esg .s2 .info .t2{
	font-size:24px;
	color:#398F91;
	line-height:1.5em;
	margin:3em 0 2em;
}

.esg .s2 .info .t3{
	line-height:1.7em;
}

.esg .s2 .info img{
	width:55%;
	opacity:0;
}

.esg .s2 .info .is-active img{
	animation:esgimg 0.5s both;
}

.esg .s2 .info .splide__slide ul{
	list-style:disc;
	margin:2em 0 0 1.2em;
}

.esg .s2 .info .splide__slide li{
	margin-bottom:0.5em;
	line-height:1.7em;
}

.esg .s2 .info .splide__slide li::marker{
	color:var(--cyan);
}

.esg .s2 .info .splide__arrow{
	display:none;
}

@keyframes esgimg{
    0%{opacity:0;}
    100%{opacity:1;}
}

@media only screen and (max-width:620px){
    .esg .s2 .tab li{
        font-size:2.6vw;
    }
}

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

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

.pagein.contact .s1 .out{
    height:580px;
}

/*CONTACT_S2-----------------*/
.contact .s2 .text{
	max-width:1250px;
	margin:0 auto;
	padding-top:60px;
	display:flex;
	gap:5%;
	flex-direction:row-reverse;
}

/*CONTACT_S2_LEFT*/
.contact .s2 .left{
	width:45%;
	min-width:400px;
}

.contact .s2 .left .word{
	line-height:1.7em;
}

.contact .s2 .left .ps{
	padding:0.5em 0.7em 1em 0;
	text-indent:-0.7em;
	margin-left:0.7em;
}

.contact .s2 .left .ps span{
	font-family:'微軟正黑體',sans-serif;
	color:var(--cyan);
}

.contact .s2 .left li{
	margin-top:15px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.contact .s2 .left li img{
	margin-right:10px;
}

.contact .s2 .left li span{
	width:100%;
	line-height:1.5em;
	margin-left:44px;
}

/*CONTACT_S2_RIGHT*/
.contact .s2 .right{
	background:#F4F6F9;
	padding:50px 4.5%;
	width:55%;
	border-radius:20px;
}

.contact .s2 .right ul{
	display:flex;
	flex-wrap:wrap;
	gap:4%;
}

.contact .s2 .right li{
	width:48%;
	margin-bottom:1em;
}

.contact .s2 .right .write,
.contact .s2 .right .captcha{
	width:100%;
}

.contact .s2 .right input[type="text"],
.contact .s2 .right textarea{
	width:100%;
	height:50px;
	border:none;
	font-size:16px;
	padding:12px;
	margin-top:1em;
	box-sizing:border-box;
	border-radius:5px;
}

.contact .s2 .right textarea{
	height:200px;
}

.contact .s2 .right .captcha input[type="text"]{
	width:180px;
}

.contact .s2 .right .captcha img{
	height:50px;
	vertical-align:bottom;
	margin-left:10px;
}

.contact .s2 .right .bt{
	position:relative;
	width:240px;
	margin:2em auto 0;
	transition:0.2s;
}

.contact .s2 .right .bt:hover{
	width:270px;
}

.contact .s2 .right .bt:after{
	content:"";
	position:absolute;
	top:50%;
	right:70px;
    border-style:solid;
    border-width:3px 0 3px 6px;
    border-color:transparent transparent transparent #FFFFFF;
	margin-top:-3px;
}

.contact .s2 .right .bt input{
	font-size:16px;
	color:#FFFFFF;
	height:50px;
	width:100%;
	background:var(--cyan);
	border-radius:30px;
	border:none;
	cursor:pointer;
}

.contact .s2 .nofill,
.contact .s2 .format{
	position:relative;
}

.contact .s2 .nofill:before,
.contact .s2 .format:before{
	position:absolute;
	top:4px;
	right:10px;
	color:#FFFFFF;
	padding:8px 10px;
	background-color:var(--cyan);
	border-radius:5px 5px 0px 0px;
	font-size:12px;
	line-height:1em;
	white-space:nowrap;
	pointer-events:none;
}

.contact .s2 .captcha.nofill:before{
	right:auto;
	top:-12px;
	left:10px;
}

.contact .s2 .nofill input,
.contact .s2 .format input,
.contact .s2 .nofill textarea{
	outline:var(--cyan) 1px solid;
	box-shadow:0px 0px 5px var(--cyan);
}

.contact .s2 .nofill:before{
	content:"Required";
}

.contact .s2 .format:before{
	content:"Format error";
}

/*CONTACT_S3-----------------*/
.contact .s3{
	position:relative;
	padding:90px 0 150px;
}

.contact .s3 .title{
	position:relative;
	font-size:30px;
	font-weight:600;
	margin-bottom:1em;
}

.contact .s3 .title:after{
	content:"";
	position:absolute;
	top:50%;
	left:2.5em;
	width:3em;
	height:1px;
	background:var(--cyan);
}

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

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

header .out{
    max-width:none;
}

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

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

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

header .logo img{
	width:100%;
}

/*HEADER_MENU-----------------*/
header .pc .menu{
	display:flex;
	justify-content:flex-end;
	padding:50px 225px 0 0;
	font-size:18px;
	transition:0.2s;
}

header.active .pc .menu{
	padding:30px 225px 0 0;
}

header .pc .menu .list{
	margin-left:2em;
}

header .pc .menu .list > a,
header .pc .menu .list span{
	position:relative;
	display:block;
    line-height:20px;
	padding-bottom:50px;
	cursor:pointer;
	transition:0.2s;
}

header.active .pc .menu .list > a,
header.active .pc .menu .list span{
	padding-bottom:30px;
}

header .pc .menu .list > a:after,
header .pc .menu .list span:after{
	content:"";
	position:absolute;
    bottom:0;
	left:50%;
	width:0;
	height:4px;
	background:var(--cyan);
	transform:translateX(-50%);
	transition:0.2s;
}

header .pc .menu .list:hover > a:after,
header .pc .menu .list:hover span:after{
	width:2em;
}

header .pc .list .sub{
    visibility:hidden;
	position:absolute;
    left:0;
    opacity:0;
    /*right:-25px;*/
    width:100%;
    scrollbar-width:none;
	text-align:left;
	background:#F6F7F7;
    box-shadow:inset 0px 2px 2px rgba(0,0,0,0.1);
    padding:70px 20px;
    box-sizing:border-box;
    overflow-x:hidden;
    overflow-y:auto;
    height:calc(100vh - 120px);
	transition:0.3s;
}

header.active .pc .list .sub{
    height:calc(100vh - 80px);
}

header .pc .list:hover .sub{
    visibility:visible;
    opacity:1;
}

header .pc .list .sub div{
    max-width:1500px;
    margin:0 auto;
    display:grid;
    justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(auto,330px));
    gap:60px;
}

header .list .sub ul li:first-child{
    font-size:18px;
    color:#294D83;
    line-height:1.5em;
    min-height:3em;
    padding-bottom:0.5em;
    border-bottom:#88A6D3 1px solid;
    margin-bottom:30px;
}

header .list li a{
    position:relative;
    display:block;
    font-size:16px;
    line-height:1.5em;
    padding:0.5em 0 0.5em 1em;
    transition:0.2s;
}

header .list li a:hover{
    color:#294D83;
    background:#FFFFFF;
}

header .list li a:before{
    position:absolute;
    top:1.3em;
    left:0;
    content:"";
    width:6px;
    height:1px;
    background:#88A6D3;
}

/*HEADER_SEARCH-----------------*/
header .pc .search{
    position:absolute;
    top:42px;
    right:170px;
    transition:0.2s;
}

header.active .pc .search{
    top:22px;
}

header .pc .search div{
    display:inline;
}

header .pc .search span{
    display:block;
    width:36px;
    height:36px;
    background:#EEEEEE url("../images/header_search.svg") center no-repeat;
    background-size:20px;
    border-radius:5px;
    cursor:pointer;
    margin-bottom:42px;
    transition:0.2s;
}

header.active .pc .search span{
    margin-bottom:22px;
}

header .pc .search form{
    visibility:hidden;
    max-width:2000px;
    position:fixed;
    top:120px;
    left:0;
    right:0;
    width:100%;
    margin:0 auto;
    background:#F6F7F7;
    opacity:0;
    text-align:center;
    padding:25px 0;
    transition:0.2s;
}

header.active .pc .search form{
    top:80px;
}

header .pc .search span.active + form{
    visibility:visible;
    opacity:1;
}

header .search form .text{
    width:100%;
    max-width:600px;
    height:40px;
    border:#DBDCDC 1px solid;
    box-sizing:border-box;
    padding:0 1em;
    border-radius:5px;
    margin:0 5px 0 20px;
}

header .search form .bt{
    width:100px;
    height:38px;
    background:#416191;
    border-radius:5px;
    border:none;
    font-size:18px;
    color:#FFFFFF;
    border-bottom:#172A62 2px solid;
    cursor:pointer;
}

/*HEADER_LANG-----------------*/
header .pc .lang{
	position:absolute;
	top:50%;
	right:20px;
    font-size:16px;
    margin-top:-2px;
}

header .lang div{
	position:relative;
	width:125px;
    font-size:16px;
	text-align:center;
	line-height:36px;
	padding-left:15px;
	background:#EEEEEE url("../images/header_icon.svg") left 15px center no-repeat;
    background-size:20px;
	margin-top:-17px;
	border-radius:20px;
	cursor:pointer;
}

header .lang div.active{
	border-radius:15px 15px 0 0;
}

header .lang div:after{
	content:"";
	position:absolute;
	top:50%;
	right:15px;
    border-style:solid;
    border-width:6px 3px 0 3px;
    border-color:#294D83 transparent transparent transparent;
	margin-top:-3px;
}

header .lang ul{
	position:absolute;
	width:100%;
	background:#EEEEEE;
	padding:10px 0;
	border-radius:10px;
	transform-origin:top;
	transform:scaleY(0);
	transition:0.2s;
}

header .lang div.active + ul{
	transform:scaleY(1);
    border-radius:0 0 10px 10px;
}

header .lang li a{
	white-space:nowrap;
	display:block;
    color:#595757;
	padding:0.5em 0;
    text-align:center;
	transition:0.2s;
}

header .lang li:hover a{
	color:#294D83;
}

@media only screen and (max-width:1350px){
    header .logo{
        max-width:260px;
    }
    
    header .pc .menu{
        font-size:1.4vw;
        padding-right:205px !important;
    }
    
    header .pc .menu .list{
        margin-left:1.2em;
    }
}

/*STYLES-----------------------------------------*/

/*STYLES_TEXT-----------------*/
.title_tw{
    display:inline-block;
    position:relative;
    font-size:30px;
    font-weight:600;
    padding-left:145px;
}

.title_tw:before{
    content:"";
    position:absolute;
    top:8px;
    left:0;
    width:110px;
    height:15px;
    background:#DBDCDC;
    border-right:var(--cyan) 18px solid;
    transform:skewX(-25deg);
    border-radius:3px 0 3px 0;
}

.title_en{
    font-family:var(--enfont);
    font-size:70px;
    line-height:1.1em;
    font-weight:600;
    color:var(--cyan);
    padding:0.2em 0 0.5em;
}

.text_s1{
    max-width:24em;
    font-size:22px;
    line-height:1.5em;
    padding:1em 0;
}

.text_s2{
    max-width:31em;
    line-height:1.7em;
}

/*STYLES_BT-----------------*/
.bt_s1{
    display:inline-block;
    position:relative;
    font-size:15px;
    padding:0.7em 3em;
    border-style:solid;
    border-width:1px;
    border-radius:3em;
    transition:0.2s;
}

.bt_s1:hover{
    padding:0.7em 4em;
}

.bt_s1:after{
    content:"";
    position:absolute;
    top:50%;
    right:1em;
    border-style:solid;
    border-width:0.3em 0 0.3em 0.5em;
    margin-top:-0.2em;
}

/*PAGEIN_S1-----------------*/
.pagein .s1{
	position:relative;
	overflow:hidden;
}

.pagein .s1:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover;
	animation:pageinbg 3s both;
}

@keyframes pageinbg{
    0%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

.pagein .s1:after{
	content:"";
	position:absolute;
	left:0;
	bottom:-1px;
	height:50px;
	width:100%;
	background:url("../images/pagein_s1.png") bottom center no-repeat;
	background-size:100% auto;
}

.pagein .s1 .out{
    height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
	flex-direction:column;
    font-size:60px;
    color:#FFFFFF;
    font-weight:600;
}

.pagein .s1 .t1{
    font-family:var(--enfont);
}

.pagein .s1 .t2{
	font-size:0.45em;
    width:2.2em;
    height:0.3em;
    background:#FFFFFF;
    border-right:var(--cyan) 0.3em solid;
    transform:skewX(-30deg);
	margin-bottom:0.5em;
}

.pagein .s1 .t3{
	width:100%;
	max-width:750px;
    font-size:0.3em;
	text-align:center;
	line-height:1.5em;
	margin-top:2em;
	font-weight:normal;
}

@media only screen and (max-width:500px){
    .pagein .s1 .out{
        height:220px !important;
        font-size:11.5vw;
    }
}

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

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

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

.area li:after{
    content:"";
    position:absolute;
    top:50%;
    right:16px;
    border-style:solid;
    border-width:3px 0 3px 6px;
    border-color:transparent transparent transparent #94A6C1;
    margin-top:-3px;
}

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

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

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

/*PAGE_NUMBER-----------------------------------------*/
.page_number{
    display:inline-block;
	font-family:Arial;
	color:#666666;
	text-align:center;
    background:#F4F6F9;
    padding:8px;
    border-radius:30px;
    margin:80px 0 0 50%;
	transform:translateX(-50%);
}

.page_number ul{
	display:inline-block;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
}

.page_number li{
	display:inline-block;
}

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

.page_number li.page_select{
	padding:0 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:#294D83 transparent transparent transparent;
	transform:translateX(-50%);
	margin-left:1px;
	transition:0.2s;
}

.page_number a{
	display:inline-block;
	width:40px;
	height:40px;
	background:rgba(0,0,0,0.7);
	vertical-align:middle;
	position:relative;
	border-radius:50%;
	opacity:0.5;
	transition:0.2s;
}

.page_number a:hover{
	opacity:1;
}

.page_number li a:after{
	content:"";
	position:absolute;
	top:14px;
    border-style:solid;
    border-color:#FFFFFF;
    width:10px;
    height:10px;
    transform:rotate(45deg);
}

.page_number li.page_prev a:after{
    border-width:0 0 2px 2px;
    left:17px;
}

.page_number li.page_next a:after{
	border-width:2px 2px 0 0;
    right:16px;
}

.page_number li select{
	border:none;
	font-family:Arial;
	font-size:24px;
	color:#666666;
	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:#294D83;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:56px;
	height:56px;
	z-index:500;
	background:#595757 url("../images/pagetop.svg") center no-repeat;
    background-size:50% auto;
	opacity:0.9;
	position:relative;
	transition:opacity 0.2s;
}

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

/*FOOTER-----------------------------------------*/
footer .out{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

/*FOOTER_TOP-----------------*/
footer .top{
    padding:70px 0;
}

footer .top img{
    width:390px;
}

footer .top li ul{
    display:flex;
    flex-wrap:wrap;
}

footer .top .add{
    max-width:27em;
}

footer .top .add li{
    line-height:1.5em;
    margin-bottom:0.5em;
}

footer .top .add li:first-child:after{
    content:"•";
    color:#294D83;
    padding:0 5px;
}

footer .top .add li:last-child{
    margin-bottom:0;
    text-indent:-2.9em;
    padding-left:2.9em;
}

footer .top .link{
    max-width:18em;
	align-self:flex-start;
}

footer .top .link li{
	min-width:4em;
    margin:0 0 1em 2em;
}

footer .top .link li:nth-child(1),
footer .top .link li:nth-child(4){
    margin-left:0;
}

footer .top .link a{
    transition:0.2s;
}

footer .top .link a:hover{
    color:#348285;
}

@media screen and (max-width:1230px) and (min-width:1001px){
    footer{
        font-size:1.3vw;
    }
    
    footer .top img{
        width:270px;
    }
}

/*FOOTER_BM-----------------*/
footer .bm{
	font-size:15px;
    padding:1em 0;
    background:#2F5896;
    color:#FFFFFF;
    line-height:1.5em;
}

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

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

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
    /*HOME-----------------------------------------*/
    
    /*HOME_S1-----------------*/
    .home .s1 .splide__track{
        height:auto;
        min-height:0;
        aspect-ratio:1/1.2;
    }
    
    .home .s1 .text{
        font-size:7vw;
        text-shadow:0 0 3px #000000;
    }
    
    .home .s1 .text .t1{
        font-weight:400;
    }
    
    .home .s1 .text .t2{
        font-size:3.2vw;
    }
    
    .home .s1 .text img{
        width:9.5vw;
    }
    
    .home .s1 .splide__pagination{
        bottom:15px;
        justify-content:flex-end;
        padding:0 7%;
    }
    
    .home .s1 .splide__pagination__page{
        width:25px;
    }
    
    /*HOME_S2-----------------*/
    .home .s2,
    .home .s3,
    .home .s4,
    .home .s6{
        padding:70px 0;
		background-attachment:scroll;
    }
    
    .home .s2 .img{
        position:static;
        width:auto;
        min-width:0;
        transform:skewX(-17deg) translateX(15%);
        margin-top:50px;
    }
    
    /*HOME_S3-----------------*/
    .home .s3 .out{
        display:block;
    }
    
    .home .s3 .page-number{
        font-size:17px;
    }
    
    .home .s3 .page-number #current-page{
        font-size:1.5em;
    }
    
    .home .s3 .text{
        padding:0 0 30px;
    }
    
    .home .s3 .splide__arrow,
    .home .s5 .splide__arrow{
        width:25px;
        height:25px;
    }
    
    .home .s3 .splide__arrow{
        top:-45px;
    }
    
    .home .s3 .splide__arrow--prev{
        right:115px;
    }

    .home .s3 .splide__arrow--next{
        right:80px;
    }
    
    /*HOME_S4-----------------*/
    .home .s4 .text{
        padding:0 0 50px;
        text-align:center;
    }
    
    .home .s4 .image{
        width:calc(114% + 20px);
        position:relative;
        left:-14%;
        margin-left:0;
    }
    
    /*HOME_S5-----------------*/
    .home .s5{
        padding:70px 0 100px;
    }
    
    .home .s5 .splide{
        padding:0 50px;
    }
	
    /*ABOUT-----------------------------------------*/
    .pagein.about .s1 .out,
	.pagein.esg .s1 .out,
	.pagein.contact .s1 .out{
        height:309px;
    }
	
	/*ABOUT_S2-----------------*/
	.about .s2 .text{
		display:block;
		padding:90px 0 0;
	}
	
    .about .s2 .left{
        min-width:0;
    }
	
    .about .s2 .right{
        width:auto;
    }
	
    .about .s2 .t1{
        font-size:20px;
    }
	
    .about .s2 .text img{
		max-width:100%;
        position:static;
		margin:50px 0 0 -20px;
    }
	
	/*ABOUT_S3-----------------*/
    .about .s3{
        padding:80px 0;
    }
	
    .about .s3 .out{
        display:block;
    }
	
    .about .s3 .left{
        min-width:0;
		margin-bottom:30px;
    }
	
	/*ABOUT_S4-----------------*/
    .about .s4{
        height:auto;
        background:none;
    }
	
	.about .s4 .top,
	.about .s4 .link{
		display:none;
	}
	
    .about .s4 .mb{
        display:block;
		width:100%;
    }
	
	/*ABOUT_S4_INFO*/
    .about .s4 .info{
        position:static;
        width:auto;
        max-width:550px;
        transform:none;
		margin:0 auto;
		box-shadow:0 0 5px rgba(0,0,0,0.3);
    }
	
    .about .s4 .info .list{
        border-radius:0 !important;
    }
	
    .about .s4 .info .list:hover,
    .about .s4 .info .list.active{
        transform-origin:center;
    }
	
    .about .s4 .info .t1{
        font-size:20px;
    }
	
	/*ABOUT_S5-----------------*/
    .about .s5{
        background:#F5F6FA;
		padding:80px 0 0;
    }
	
    .about .s5 .out{
        height:auto;
    }
	
    .about .s5 .top{
        margin:40px 0 50px;
    }
	
    .about .s5 .top .t1{
        font-size:26px;
    }
	
	.about .s5 .top,
    .about .s5 .bm{
		max-width:none;
        width:auto;
    }
	
	.about .s5 .mb{
		display:block;
		width:100%;
	}
	
	/*ABOUT_S6-----------------*/
    .about .s6{
        padding:80px 0 30px;
    }
	
    .about .s6 .bm{
		justify-content:center;
        gap:30px;
        padding-top:30px;
    }
	
    .about .s6 .bm .list{
        width:auto;
		max-width:400px;
		padding-bottom:0;
    }
	
	/*ABOUT_S7-----------------*/
    .about .s7{
        padding:80px 0;
    }
	
    .about .s7 .top{
        display:block;
    }
	
    .about .s7 .top .title_en{
        white-space:normal;
    }
	
    .about .s7 .top .text{
        max-width:none;
		margin-top:1em;
    }
	
    .about .s7 .bm{
		max-width:600px;
        margin:20px auto 0;
		flex-wrap:wrap;
		gap:4%;
    }
	
    .about .s7 .bm li{
        width:48%;
    }
	
	/*PRODUCT-----------------------------------------*/
	
	/*PRODUCT_S2-----------------*/
    .product .s2 .top .t1{
        font-size:30px;
    }
	
	.product .s2 .box{
		margin-top:80px;
	}
	
    .product .s2 .box:before{
		content:"";
		position:absolute;
		top:-30px;
		left:0;
		height:20px;
		width:100%;
		background:url("../images/wheel_icon.png") top left 180px no-repeat;
		background-size:auto 15px;
    }
	
    .product .s2 td:first-child{
        min-width:150px;
        width:150px;
		word-break:break-all;
    }
	
	/*PRODUCT_S2_LINK*/
	.product .s2 .link{
		margin-bottom:50px;
	}
	
    .product .s2 .link div{
		position:relative;
        display:block;
		font-size:20px;
		color:#FFFFFF;
		font-weight:600;
		text-align:center;
		background:#1E375E;
		padding:1em 0;
		border-radius:5px;
		cursor:pointer;
    }
	
	.product .s2 .link div.active{
		border-radius:5px 5px 0 0;
	}
	
	.product .s2 .link div:after{
		content:"";
		position:absolute;
		top:50%;
		right:20px;
		width:8px;
		height:8px;
		border-style:solid;
		border-color:#FFFFFF;
		border-width:0 3px 3px 0;
		transform:rotate(45deg);
		margin-top:-5px;
	}
	
	.product .s2 .link ul{
		display:none;
	}
	
	.product .s2 .link li:first-child a{
		border-width:1px;
	}
	
    .product .s2 .link a{
		border-width:0 1px 1px 1px;
    }
	
	/*PRODUCT_S2_TABLE_TB_BOTTOM*/
    .product .s2 .scroll.bm{
		overflow:auto;
    }
    
    /*APPLICATION-----------------------------------------*/
    
    /*APPLICATION_S2-----------------*/
    .app .s2{
        padding-bottom:90px;
    }
    
    .app .s2 .list,
	.home .s21 ul{
        display:grid;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,335px));
        gap:0 40px;
    }
	
	.home .s21 ul{
		max-width:500px;
		margin:0 auto;
	}
    
    .app .s2 .list li,
	.home .s21 li{
        width:auto;
    }
    
    /*APPLICATION_INFO-----------------*/
    .app .info{
        padding-bottom:70px;
    }
    
    .app .info .box{
        display:block;
    }
    
    /*APPLICATION_INFO_LEFT*/
    .app .info .left .edit{
        padding:2em 0 60px;
    }
    
    /*APPLICATION_INFO_RIGHT*/
    .app .info .right{
        width:auto;
        min-width:0;
        max-width:430px;
        margin:50px auto 0;
    }
	
    /*ESG-----------------------------------------*/

    /*ESG_S1-----------------*/
	.pagein.esg .s1{
		background-position:right;
	}
	
	/*ESG_S2-----------------*/
	
	/*ESG_S2_TAB*/
    .esg .s2 .tab{
		flex-wrap:wrap;
    }
    
	/*ESG_S2_INFO*/
    .esg .s2 .info .splide__slide{
		display:block;
    }
	
    .esg .s2 .info .text{
        width:auto;
    }
	
    .esg .s2 .info img{
		display:block;
        width:100%;
		max-width:800px;
		margin:50px auto 0;
    }
	
    .esg .s2 .info .t1{
		font-size:35px;
    }
	
    .esg .s2 .info .t2{
        font-size:20px;
		margin:2em 0;
    }
	
    .esg .s2 .info .splide__arrow{
        display:block;
		top:25px;
		transform:none;
		box-shadow:0 0 5px rgba(0,0,0,0.3);
    }
	
	/*CONTACT-----------------------------------------*/
	
	/*CONTACT_S2-----------------*/
    .contact .s2 .text{
        display:block;
    }
	
	/*CONTACT_S2_LEFT*/
    .contact .s2 .left{
        width:auto;
        min-width:0;
		padding-top:60px;
    }
	
	.contact .s2 .left li img{
		position:relative;
		top:3px;
	}
	
	/*CONTACT_S2_RIGHT*/
    .contact .s2 .right{
        padding:50px 30px;
        width:auto;
    }
	
    .contact .s2 .right ul{
        display:block;
    }
	
    .contact .s2 .right li{
        width:auto;
    }
	
    .contact .s2 .right .captcha input[type="text"]{
        width:48%;
		max-width:180px;
    }
	
    .contact .s2 .right .captcha img{
        width:48%;
        max-width:130px;
    }
	
    /*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:#333333;
		transition:0.3s;
		display:block;
	}
	
	header .mb_bt span:before,
	header .mb_bt span:after{
		content:"";
		height:1px;
		position:absolute;
		right:0;
		background:#333333;
		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:#EEEEEE;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	header .mb.active{
		transform:translateX(0);
	}
	
	header .mb .menu{
		padding:20px 40px 100px;
	}
	
	header .mb .menu .list > a,
	header .mb .menu .list span{
		display:block;
		font-size:20px;
		color:#222222;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		border-bottom:#CCCCCC 1px solid;
		transition:0.2s;
	}
    
    header .mb .menu .list > a:hover,
	header .mb .menu .list span:hover{
		color:#294D83;
	}
	
	header .mb .menu .list span:after{
		content:"";
		position:absolute;
		top:50%;
		right:0;
		border-style:solid;
		border-width:8px 4px 0 4px;
		border-color:#222222 transparent transparent transparent;
		margin-top:-4px;
		opacity:0.8;
	}
	
	header .mb .menu .list span.active:after{
		opacity:1;
	}
	
	header .mb .menu .list .sub{
		display:none;
		padding:20px 0;
    }
    
    header .list .sub ul{
        margin-bottom:40px;
    }
    
    header .list .sub ul:last-child{
        margin-bottom:0;
    }
    
    header .list .sub ul li:first-child{
        font-size:20px;
        min-height:0;
        padding-bottom:0.5em;
        border-bottom:none;
        margin-bottom:0;
    }
    
    /*HEADER_SEARCH-----------------*/
    header .mb .search{
        padding:90px 40px 0;
    }
    
    header .mb .search div{
        display:none;
    }
    
    header .mb .search form{
        display:flex;
        justify-content:space-between;
    }
    
    header .mb .search form .text{
        max-width:none;
        margin:0;
        width:calc(100% - 110px);
    }
    
	/*HEADER_LANG-----------------*/
    header .mb .lang{
        position:absolute;
        top:30px;
        left:40px;
    }
    
    header .mb .lang div{
        background-color:#FFFFFF;
        margin-top:0;
    }
    
    header .mb .lang ul{
        background:#FFFFFF;
    }
    
    /*STYLES-----------------------------------------*/

    /*STYLES_TEXT-----------------*/
    .title_tw{
        font-size:24px;
    }
    
    .title_en{
        font-size:50px;
    }
    
    .text_s1,
    .text_s2{
        max-width:none;
    }
    
    /*AREA-----------------*/
    .area{
        display:none;
    }
    
    /*FOOTER-----------------------------------------*/
    footer .out{
        display:block;
    }
    
    footer .top .out{
        max-width:340px;
    }
    
    footer .top img{
        width:100%;
        max-width:250px;
        margin-bottom:20px;
    }
    
    footer .top li ul{
        display:block;
        font-size:16px;
    }
    
    /*FOOTER_TOP-----------------*/
    footer .top{
        padding:30px 0;
    }
    
    footer .top .link,
    footer .top .add li:first-child:after{
        display:none;
    }
    
    /*FOOTER_BM-----------------*/
    footer .bm{
        font-size:16px;
        text-align:center;
    }
    
    footer .bm li:first-child{
        margin-bottom:0.6em;
    }
}