/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; color:inherit; }
img { vertical-align: top; }

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1400px; margin:0 auto; position: relative; font:18px/1.6 stm;  }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fl:after { display:none; }
.dn { display:none !important; }
.shd { box-shadow: 2px 2px 8px rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; }
.cp { color:#1693f4; }
.title { font:36px/1.4 steb; }

.more { padding:0 40px; height:50px; background: #000; color:#fff; border-radius: 100px; margin:0 auto; display: inline-block; font:16px stsb; display:inline-flex; align-items: center; justify-content: center; }
.more i { margin-left: 6px;  }

.left { float:left; width: 320px; }
.right { float:right; width: 1040px; }

/* header & footer */
#w_header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; height: 70px; overflow: hidden; color:#fff; transition:0.3s; }
#w_header.fix, #w_header.down, #w_header.bl { background: rgba(255,255,255,0.9); border-bottom:1px solid #ddd; color:#000; }
#w_header.down { height: 200px; }

#w_header h1 { padding-top: 22px;  }
#w_header h1 img { transition:0.3s; height: 22px; }
#w_header.fix h1 img, #w_header.down h1 img, #w_header.bl h1 img { filter: invert(1); }
#w_header #w_gnb { position: absolute; right:0; top:24px; }
#w_header #w_gnb > li { float:left; margin-left: 80px; font:18px stsb; text-transform: uppercase; }
#w_header #w_gnb ul { position: absolute; top:33px; font-size:16px;  }
#w_header #w_gnb ul li { line-height:40px;  }

#w_footer { background: #131313; color:#999; padding:60px 0; }
#w_footer img { position: absolute; left: 0; top: 0; opacity: 0.5; height: 20px; }
#w_footer address { font-style: normal; font-size:16px; line-height:1.8; padding-left: 460px;  }
#w_footer address span, #w_footer address a { margin-right: 20px; }

/* index */
#main { height: 100vh; } 
#main .ment { color:#fff; font:24px/1.6 stm; position: absolute; left:calc(50% - 700px); top:340px; z-index:10;  text-align: left; }
#main .ment h2 { font:54px/1.2 stb; margin-bottom: 20px; }
#main .swiper-pagination { width:auto; top:auto; bottom:120px; left:calc(50% - 700px); }
#main .swiper-pagination-bullet { width: 12px; height: 12px; background: #fff; margin:0 16px 0 0; }

#about { text-align: center; padding:150px 0; }
#about h2 { margin-bottom: 40px; }
#about ul { justify-content: space-between; margin-top: 100px; }
#about ul li { width: 433px; height: 665px; color:#fff; }
#about ul li:nth-child(1) { background: url(/images/bg_cate1.png) no-repeat center/cover; }
#about ul li:nth-child(2) { background: url(/images/bg_cate2.png) no-repeat center/cover; }
#about ul li:nth-child(3) { background: url(/images/bg_cate3.png) no-repeat center/cover; }
#about ul li a { display: block; width: 100%; height: 100%; padding:40px 30px; box-sizing: border-box; text-align: left; position: relative; }
#about ul li h3 { font:24px steb; }
#about ul li i { position: absolute; font-size:32px; right:28px; top:40px;  }
#about ul li dl { padding-top: 140px; }
#about ul li dl dt { font:36px/1.4 steb; margin-bottom: 30px; }

#news { padding:100px 0 150px; text-align: center; }
#news h2 { text-align: center; margin-bottom: 60px; }
#news .pc ul { justify-content: space-between; margin:0; }
#news .pc ul:after { display: none; }
#news .pc ul li { padding:0; width:433px; text-align: left; }
#news .pc ul li img { margin-bottom: 20px; }
#news .pc ul li a { margin:0; font:24px stb; }
#news .pc ul li a p { font:18px/1.6 stm; margin-top: 10px; display: -webkit-box;   -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  text-overflow: ellipsis;  overflow: hidden;}
#news .more { margin-top: 40px; }

#cvc { background:url(/images/bg_cvc.png) no-repeat center/cover; text-align: center; padding:150px 0; }
#cvc p { margin:40px 0 60px; }

#contact { padding:150px 0; }
#contact .left { width: 420px; }
#contact .right { width: 920px; }
#contact .left p { margin: 40px 0 170px; }
#contact .left a { margin-top: 30px; font:30px stb; display: inline-block; }

#formmail ul li { width: calc((100% - 50px) / 2); margin:0 50px 30px 0; float:left; }
#formmail ul li:nth-child(2n) { margin-right: 0; }
#formmail ul li:last-child { width: 100%; margin-right: 0; }
#formmail ul li input { border:none; background: #eee; padding:0 20px; height: 50px; width: 100%; font:16px/1.6 stm; box-sizing: border-box; outline: none; border-radius: 50px;  }
#formmail ul li textarea { border:none; background: #eee; padding:20px; width: 100%; font:16px/1.6 stm; box-sizing: border-box; outline: none; border-radius: 30px;  } 
#formmail .more { background: #000; color:#fff; width: 200px; height: 50px; font:16px stsb; border:none; border-radius: 100px; }


/* sub layout */
#sv1 p { font:36px/1.6 stsb; padding-top: 160px; margin-bottom: 60px;  }
#sv1 figure { overflow: hidden; height: 500px; }
#sv1 figure img { width: 100%; height: 100%; object-fit: cover; transition:0.8s; }
#sv1 figure.on img { transform: scale(1.2); }
#sv2 { height: 390px; background:url(/images/bg_sub2.png) no-repeat center/cover; }
#sv3 { height: 390px; background:url(/images/bg_sub3.png) no-repeat center/cover; }
#sv4 { height: 390px; background:url(/images/bg_sub4.png) no-repeat center/cover; }
#sv6 { height: 390px; background:url(/images/bg_sub6.png) no-repeat center/cover; }


.pad { padding:100px 0; }
.wrap h3 { font:24px/1.4 steb; }

/* sub1 */
#sub1 .cont2 { height: 500px; background:url(/images/sub1_1.png) no-repeat center/cover; }

#sub1 .cont3 ul { justify-content: space-between; align-items: flex-start; }
#sub1 .cont3 ul li { width: 330px; border:1px solid #333; box-sizing: border-box; padding:40px 20px; border-radius: 20px; min-height: 540px;  }
#sub1 .cont3 ul li h4 {  font:20px sth; }
#sub1 .cont3 ul li figure { height: 180px; margin-top: 20px;  }


#sub1 .cont4 .circle { padding-left: 200px; position: relative; margin-bottom: 160px; }
#sub1 .cont4 .circle span { font:20px sth; text-transform: uppercase; position: absolute; }
#sub1 .cont4 .circle span:nth-of-type(1) { left:114px; top:110px; }
#sub1 .cont4 .circle span:nth-of-type(2) { left:620px; top:30px; }
#sub1 .cont4 .circle span:nth-of-type(3) { left: 486px; top: 210px; }
#sub1 .cont4 .circle span:before { content:""; width: 16px; height: 16px; display: inline-block; background: #000; border-radius: 20px; margin:0 8px; transform: translateY(1px); }
#sub1 .cont4 .circle span:first-of-type:after { content:""; width: 16px; height: 16px; display: inline-block; background: #000; border-radius: 20px; margin:0 8px; transform: translateY(1px);}
#sub1 .cont4 .circle span:first-of-type:before { display: none; }

#sub1 .cont4 dl { margin-top: 40px; }
#sub1 .cont4 dl dt { text-transform: uppercase; font:20px steb; margin-bottom: 10px;  }

#sub1 .cont5 { border-bottom:1px solid #ddd; padding:100px 0 40px; }
#sub1 .cont5 ul li { position: relative; font:26px steb; margin-bottom: 10px; justify-content: flex-start; }
#sub1 .cont5 ul li strong { font-size:18px; width: 140px; }

#sub1 .cont8 { margin: 200px 0; overflow-x: hidden; }
#sub1 .cont8 ul { width: 3200px; position: relative; animation: 7s move linear infinite;  }
#sub1 .cont8 ul li { float:left; margin-right: 48px; }
@keyframes move {
    from { left:0; }
    to { left:-800px; }
}


#sub1 .cont6 { border-bottom:1px solid #ddd; padding:40px 0 20px; }
#sub1 .cont6 ul li { position: relative; padding-left: 360px; margin-bottom: 20px; }
#sub1 .cont6 ul li strong { font-family: steb; position: absolute; left:0; }

#sub1 .cont7 { padding:60px 0 200px; }
#sub1 .cont7 .right form { width: 640px; }

/* sub2 */
#sub2 .cont1 { padding:80px 0 200px; } 
#sub2 .cont1 img { margin-top: 160px; width: 100%; } 
#sub2 .cont1 dl { margin-top: 60px; } 
#sub2 .cont1 dl dt { font:20px steb; margin-bottom: 10px; text-transform: uppercase; }

/* sub3 */
#sub3 .cont1 { padding:80px 0; border-bottom:1px solid #ddd; }
#sub3 .list { padding: 40px 0 200px; }
#sub3 .list .left ul { text-transform: uppercase; font:20px steb;  }
#sub3 .list .left ul li { margin-bottom: 20px; opacity: 0.5; }
#sub3 .list .left ul li.select { opacity: 1; }
#sub3 .list .left ul li a { position: relative; }
#sub3 .list .left ul li i { position: absolute; left:160px; top:2px; display: none; }
#sub3 .list .left ul li.select i { display: block; }
#sub3 article p b{font:18px stb;}
#sub3 article h4 {position: relative;  font:17px stm; padding-left: 20px; padding-bottom: 30px;}
#sub3 article h4 span { position: absolute; left: 0; }

.w_subject { margin-bottom: 100px; }
.w_subject #sub3_2_logo{padding-bottom: 30px;}
.w_subject ul { margin-top: 30px; }
.w_subject ul li { position: relative; padding-left: 16px; }
.w_subject ul li span { position: absolute; left: 0; }
#w_subject_2 {font:20px steb; padding-bottom: 30px;}
#sub3 .vision { margin-bottom: 120px; }
#sub3 .vision img { width: 100%; margin-bottom: 40px; }

.prd li { float:left; width: 320px; margin-right: 40px; margin-bottom: 60px; text-align: center; }
.prd li figure img { width: 100%; }
.prd li dl { margin-top: 20px; }
.prd li dl dt { font:20px steb; margin-bottom: 10px; }

.detail:after { content:""; clear: both; display: block; }
.detail .gallery { width: 550px; float:left; }
.detail .gallery .bimg { width: 100%; }
.detail .gallery .fl { margin-top: 16px; justify-content: flex-start; }

.detail .gallery .fl li { width: 15%; margin-right: 2%; cursor: pointer; }
.detail .gallery .fl li:last-child { margin-right: 0; }

.detail .gallery .fl li img { width: 100%; }
.detail article { width: 450px; float:right; color:#666;  }
.detail article h2 { color:#000; margin-bottom: 20px; }
.detail article ul { margin-top: 60px; }
.detail article ul li { position: relative; padding-left: 24px; margin-bottom: 20px; }
.detail article ul li span { position: absolute; left: 0; }


/* sub4 */
#sub4 .cont1 { padding:80px 0 200px; } 
#sub4 .cont1 .right > div { position: relative; margin-top: 160px; }
#sub4 .cont1 .right div.fl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; transition:0.3s; }
#sub4 .cont1 .right div.fl:hover { opacity: 1; }
#sub4 .cont1 img { width: 100%; } 
#sub4 .cont1 dl { margin-top: 60px; } 
#sub4 .cont1 dl dt { font:20px steb; margin-bottom: 10px; text-transform: uppercase; }


/* sub5 */
#sub5 { background:url(/images/bg_sub5.png) no-repeat center/cover; }
#sub5 .fl { height: 100vh; flex-direction: column; color:#fff; text-align: center; }
#sub5 h2 { font:32px steb; }
#sub5 p { font-size:30px; line-height:1.6; margin-top: 60px; }

/* sub6 */
#sub6 .cont1 { padding:80px 0 0; } 
#sub6 .cont1 h2 { display: inline-block; font:20px steb; } 
#sub6 .cont1 p { display: inline-block; margin-left: 80px; } 

/* news */
#sub6 .bbs { font-size:12px; padding-bottom: 200px; }
#sub6 .bbs #bo_gall .gall_li { padding:0; width: 432px; margin-right: 52px; }
#sub6 .bbs #bo_gall .gall_info .gall_date { margin-left: 0; font:16px stm;  }
#sub6 .bbs #bo_gall .gall_text_href a { font:18px/1.4 stb; display: -webkit-box;   -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  text-overflow: ellipsis;  overflow: hidden;}

.fa-search { font-size:28px; }
#sfl option:last-child { display:none; }