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

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
body { font:16px/1.6 nsb; color:#999; background: #f6f6f6; }
.wrap { width:1400px; margin:0 auto; position: relative; }
.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; }
.fld { flex-direction: column; }
.fl:after, .fld:after { display:none; }
.dn { display:none !important; }

.cp { color:#20b59c; }
.cb { background: #20b59c; color:#fff; }
.f32 { font-size:32px; }
.f18 { font-size:18px; }

.mt { font:36px/1.4 steb; }
.st { font:32px/1.4 steb; }
.shd { box-shadow: 0 0 10px rgba(0,0,0,0.05); }

.swiper, .swiper-container, .swiper-wrapper { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; background-position: center;  background-size: cover; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 

/* adm */
#hd, #container { font-size:14px; }

/* header & footer */
#w_header { position:fixed; top:0; left:0; width:100%; height: 60px; z-index: 99; background:#1b1b1b; overflow: hidden; transition:0.3s; }
#w_header.down { height: 240px; }
#w_header h1 { position: absolute; left: 0; top: 0; padding-top: 16px; }
#w_header h1:before { content:""; width: 520px; height: 500px; background: #20b59c; position: absolute; top: 0; left: -300px; }
#w_header h1 a { position: relative; }
#w_header #w_gnb { display:flex; align-items:flex-start; justify-content:center; text-transform: uppercase; color:#fff; }
#w_header #w_gnb a { transition:0.3s; } 
#w_header #w_gnb > li > a { font:16px/60px ntm; padding:0 50px; }
#w_header #w_gnb > li:hover > a { color:#20b59c;}
#w_header #w_gnb ul { position: absolute; margin-left: 50px; font:16px/30px ntm; color:#999; }
#w_header #w_gnb ul li a:hover { color:#fff; }
#w_header .lang { position: absolute; right:0; top:19px; }
#w_header .lang a { margin-left: 10px; font:16px ntm; }

#w_footer { padding:60px 0 140px; background: #000; color:#999; }
#w_footer .wrap { padding-left: 480px; box-sizing: border-box; }
#w_footer .wrap > img { position: absolute; left: 0; }
#w_footer .sns li { float:left; margin-right: 10px; }
#w_footer .fl { margin-top: 40px; justify-content: flex-start; }
#w_footer .fl h3 { font-family: nseb; margin-right: 40px; }
#w_footer .fl ul li { float:left; font:14px nsb; }
#w_footer .fl ul li:after { content:"|"; margin:0 10px; }
#w_footer .fl ul li:last-child:after { display: none; }
#w_footer p { font-family: nseb; margin-top: 30px; }







/* index */

.more { width: 260px; height: 50px; border-radius: 50px; display:flex; align-items:center; justify-content:center; font-family: ntm; }

#main { position: relative; height: 100vh; }
#main .wrap { height: 100vh; color:#fff; align-items: flex-start; position: absolute; left: calc(50% - 700px); top: 0; z-index: 1; }
#main h2 { font:60px/1.2 ntbl; }
#main p { margin-top: 30px; }
#main .more { margin-top: 60px; }
#main .more:hover{color:#20b59c; background:#fff;  transition:0.3s; }
.swiper-button-next, .swiper-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-rtl .swiper-button-next { color:#20b59c;}
.swiper-pagination-bullet-active { background: #20b59c; }

#pvc .wrap { height: 630px; align-items: stretch; }
#pvc .wrap > figure { width: 66.6666%; }
#pvc article { border-left:1px solid #ddd; width:33.3333%; padding-left: 30px; padding-top: 110px; box-sizing: border-box; }
#pvc article h2 { color:#333; }
#pvc article p { margin-top: 60px; line-height:1.8; }
#pvc article .more { margin-top: 140px; }
#pvc article .more:hover{color:#fff; background:#20b59c;  transition:0.3s; }
#pvc .icon { border-top:1px solid #ddd; }
#pvc ul { height: 700px; align-items: stretch; text-align: center; }
#pvc ul li { width: 33.3333%; box-sizing: border-box; border-left:1px solid #ddd;}
#pvc ul li:last-child { border-right:1px solid #ddd;}
#pvc ul li figure { width: 240px; height: 240px; border-radius: 240px; }
#pvc ul li h3 { margin-top: 50px; color:#000; }
#pvc ul li p { margin-top: 30px; }

#oem { background: #262626; color:#fff;}
#oem .part1 article { height: 700px; align-items: flex-start; width: 33.3333%; }
#oem .part1 article p { margin-top: 60px; line-height:1.8; color:#999; }
#oem .part1 article .more { margin-top: 120px; }
#oem .part1 article .more:hover{color:#20b59c; background:#fff;  transition:0.3s; }
#oem .part1 figure { width: 70vw; max-width:1230px; height: 700px; position: absolute; left:33.3333%; top:0; overflow: hidden; }
#oem .part1 figure img { width: 100%; height: 100%; }

#oem .part2 figure { height: 520px; width: 33.3333%; position: relative; float:left; }
#oem .part2 figure img { height: 520px; position: absolute; right: 0; top: 0; }
#oem .part2 article { width: 66.6666%; padding: 100px 0 0 260px; float:right; position: relative; }
#oem .part2 article img { position: absolute; left: 120px; top: 100px; }
#oem .part2 article p { margin-top: 40px; line-height:1.8; color:#999; }

#hand { padding:100px 0; text-align: center; border-bottom:1px solid #ddd; }
#hand h2 { color:#000; }
#hand img { max-width:100%; margin-top: 40px; }
#hand .more { margin:40px auto 0; }

#latest { padding:120px 0; }
#latest .wrap { justify-content: space-between; align-items: flex-start; }
#latest article { width: 440px; position: relative; height: 252px; }
#latest article h2 { color:#000; }
#latest article h3 { margin-top: 20px; font-size:20px; color:#333; font-family: nseb; }
#latest article ul { margin-top: 40px; line-height:1.8; }
#latest article .plus { position: absolute; top:10px; }
#latest article:nth-child(1) .plus { left:144px; }
#latest article:nth-child(2) .plus { left:108px; }
#latest article:nth-child(3) .plus { left:200px; }
#latest article:nth-child(3) ul { position: absolute; bottom: 0; }

/* sub lauout */
.sv { height: 470px; padding-top: 60px; box-sizing: border-box; }
.sv h2 { color:#fff; font:40px steb; text-transform: uppercase; }

.sm { border-bottom:1px solid #ddd; }
.sm ul { height: 50px; display:flex; align-items:center; justify-content:center; font:18px stsb; color:#999; text-transform: uppercase; }
.sm ul li.select a { color:#000; }
.sm ul li:after { content:"|"; margin:0 40px;  }
.sm ul li:last-child:after { display: none; }

#sv1 { background:url(/images/bg_sub1.png) no-repeat center/cover; }
#sv2 { background:url(/images/bg_sub2.png) no-repeat center/cover; }
#sv3 { background:url(/images/bg_sub3.png) no-repeat center/cover; }
#sv4 { background:url(/images/bg_sub4.png) no-repeat center/cover; }
#sv5 { background:url(/images/bg_sub5.png) no-repeat center/cover; }

.pad { padding:100px 0 200px; color:#333; font:18px/1.6 stm; word-break: keep-all; }
.pad.nopad { padding:0; }

.left { float:left; width: 440px; }
.right { float:right; width: 920px; }

/* sub1_1 */
#sub1_1 h2 { margin-bottom: 60px; }
#sub1_1 p { line-height:1.9; font-family: stsb; }


/* sub1_2 */
#sub1_2 > div { padding:100px 0; }
#sub1_2 .left p { margin-top: 10px; font-family: stb; font-size:16px; }
#sub1_2 .cont1 { padding-bottom: 200px; }
#sub1_2 .cont1 .right p { color:#666; margin-top: 30px; }

#sub1_2 .cont2 { background: #ededed; }
#sub1_2 .cont2 .right ul li { margin-bottom: 70px; }
#sub1_2 .cont2 .right ul li h3 { font-size:24px; font-family: steb; }
#sub1_2 .cont2 .right ul li p { line-height:1.8; margin-top: 14px; color:#666; }

#sub1_2 .cont3 { background: url(/images/mission.png) no-repeat center/cover; height: 520px; box-sizing: border-box; color:#fff; }
#sub1_2 .cont3 .right p { margin-top: 40px; }

/* sub1_3 */
#sub1_3 > div { padding:100px 0; border-bottom:1px solid #ddd; }
#sub1_3 .cont1 .left { width: 220px; }
#sub1_3 .cont1 .right { width: 1180px; display:flex; align-items:center; justify-content:space-between; }
#sub1_3 .cont1 figure { border:1px solid #ddd; box-sizing: border-box; width: 460px; height: 275px; }
#sub1_3 .cont1 article { width: 650px; }
#sub1_3 .cont1 article h3 { font-size:24px; font-family: steb; }
#sub1_3 .cont1 article p { margin-top: 40px; color:#666;  }
#sub1_3 .cont1 article ul { justify-content: space-between; margin-top: 50px; }
#sub1_3 .cont1 article ul li a { border-radius: 50px; width: 200px; line-height:40px; display: block; text-align: center; font-size:16px; }

#sub1_3 .cont2 .right ul.fl { display:flex; align-items:center; justify-content:space-between; }
#sub1_3 .cont2 .right figure { border:1px solid #ddd; box-sizing: border-box; width: 440px; height: 260px; }
#sub1_3 .cont2 .right p { margin-top: 40px; text-align: center; }

#sub1_3 .cont3 { padding-bottom: 200px; border-bottom:none; }
#sub1_3 .cont3 .right > ul > li { width: 110px; height: 180px; float:left;  }
#sub1_3 .cont3 .right > ul > li:first-child { width: calc(100% - 440px); box-sizing: border-box; padding:20px 14px; color:#fff; position: relative; }
#sub1_3 .cont3 .right .do > li:nth-child(1) { background: #025669; }
#sub1_3 .cont3 .right .do > li:nth-child(2) { background: #447685; }
#sub1_3 .cont3 .right .do > li:nth-child(3) { background: #7096a1; }
#sub1_3 .cont3 .right .do > li:nth-child(4) { background: #9db6be; }
#sub1_3 .cont3 .right .do > li:nth-child(5) { background: #c9d6da; }
#sub1_3 .cont3 .right .one { margin-top: 40px; }
#sub1_3 .cont3 .right .one > li:nth-child(1) { background: #2FB59B; }
#sub1_3 .cont3 .right .one > li:nth-child(2) { background: #4bc2ae; }
#sub1_3 .cont3 .right .one > li:nth-child(3) { background: #76cfc0; }
#sub1_3 .cont3 .right .one > li:nth-child(4) { background: #a0dcd2; }
#sub1_3 .cont3 .right .one > li:nth-child(5) { background: #cbe9e4; }
#sub1_3 .cont3 .right > ul > li h3 { display: inline-block; border-bottom:1px solid #fff; }
#sub1_3 .cont3 .right > ul ul { font-size:14px; position: absolute; bottom: 20px; left: 14px; }

#sub1_3 .cont4 { border-bottom:none; padding:0; }
#sub1_3 .cont4 img { width: 100%; height: 570px; }

/* sub1_4 */
#sub1_4 .year { border-top:1px solid #ddd; }
#sub1_4 .year > li { border-bottom:1px solid #ddd; padding:20px 0; position: relative; padding-left: 180px; }
#sub1_4 .year > li strong { font:24px steb; color:#333; position: absolute; left: 0; }
#sub1_4 .year ul li { position: relative; padding-left: 70px; margin-bottom: 6px; color:#666; }
#sub1_4 .year ul li span { font-family: stb; position: absolute; left: 0; }
#sub1_4 img { margin-top: 100px; width: 100%; }


/* sub2_1_1 */
.sv_prd { padding:110px 0 50px; border-bottom:1px solid #ddd; }
.sv_prd h2 { font:50px/1.4 steb; color:#333;  }

.prd { padding-top: 50px; padding-bottom: 200px; }
.prd .left { width: 300px; }
.prd .left ul.cate { font:18px sth; color:#ccc; height: 55px; }
.prd .left ul.cate li { float:left; margin-right: 24px; cursor: pointer; }
.prd .left ul.menu { border-top:2px solid #000; display: none; }
.prd .left ul.menu.on { display: block; }
.prd .left ul.menu li { border-bottom:1px solid #ddd; }
.prd .left ul.menu li a { display:flex; align-items:center; justify-content:space-between; font:18px stm; color:#333; height: 40px; }
.prd .left ul.menu li.select a { font-family: steb; }
.prd .left ul.menu li.select a:after { content:">"; }

.prd .right { padding-top: 55px; width: 1000px; }
.prd .right .title { border-top:2px solid #000; color:#333; margin-bottom: 40px; }
.prd .right .title h2 { padding-top: 20px;  }
.prd .right .title p { font-family: stb; margin-top: 10px; margin-bottom: 20px; }
.prd .right .title img { width: 100%; }
.prd .right .both { position: relative; margin-bottom: 100px; padding-left: 140px; color:#333; }
.prd .right .both h3 { position: absolute; left: 0; font-family: steb; }
.prd .right .both p { font:18px/1.6 stm; }

.prd .right .spec table { width: 100%; border-collapse: collapse; border-top:1px solid #000;  }
.prd .right .spec table th, 
.prd .right .spec table td { padding:8px 0; text-align: left; border-bottom:1px solid #ddd; }
.prd .right .spec table th { font-family: steb; }
.prd .right .spec table td { font-family: stm; }

.prd .right .photo img { width: 100%; margin-bottom: 40px; }

/* sub3_1 */
#sub3_1 .right h3 { font-family:stsb; }
#sub3_1 .right img { margin-top: 40px; width: 100%; }
#sub3_1 .right p { font-family: stsb; margin-top: 40px; }
#sub3_1 .right dl { margin-top: 100px; }
#sub3_1 .right dl dt { font-family: steb; }
#sub3_1 .right dl dd { font-family: stsb; margin-top: 4px; }

/* sub3_2 */
#sub3_2 .right h3 { font-family:stsb; }
#sub3_2 .right ul { flex-wrap: wrap; justify-content: space-between; align-items: flex-start; text-align: center; margin-top: 80px; }
#sub3_2 .right ul li { margin-bottom: 40px; }
#sub3_2 .right ul li img { width: 260px; height: 370px; }
#sub3_2 .right ul li p { margin-top: 10px; }

.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99; display: none; }
.modal.on { display:flex; }
.modal .photo { max-width:80%; max-height:80%; }

/* sub4_1 */
#sub4_1 .left { width: 220px; }
#sub4_1 .right { width: 1180px; }
#sub4_1 .right .tbl_wrap table { border-top-color:#000; background:none; }
#sub4_1 .right #bo_btn_top,
#sub4_1 .right #bo_v_top,
#sub4_1 .right #bo_w { font-size:13px; }
#sub4_1 .right #bo_v_title .bo_v_tit { font-size:32px; font-family: stb; margin-top: 0; }
#sub4_1 .right #bo_list tbody .even td,
#sub4_1 .right .btn_bo_user li,
#sub4_1 .right #bo_v,
#sub4_1 .right #bo_v_top ul { background: none; }
#sub4_1 .right .more_opt li { background: #fff; }

/* sub4_2 */
#sub4_2 .left { width: 220px; }
#sub4_2 .right { width: 1180px; }
#sub4_2 .right ul { border-top:1px solid #000; }
#sub4_2 .right ul li { border-bottom:1px solid #ddd; padding:20px 0;}
#sub4_2 .right ul li h3 { position: relative; padding-left: 60px; font-family: stb; color:#999; cursor: pointer; }
#sub4_2 .right ul li p { position: relative; padding-left: 60px; font-family: stb; color:#333; padding-top: 10px; display: none; }
#sub4_2 .right ul li span { position: absolute; left: 0; }

/* sub5_1 */
#sub5_1 .left h2 { height: 70px; }
#sub5_1 .left ul { margin-top: 40px; }
#sub5_1 form { padding-top: 70px; }
#sub5_1 form ul li { width:calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 24px; float:left; }
#sub5_1 form ul li:nth-child(2n) { margin-right: 0; }
#sub5_1 form ul li:last-child { width: 100%; }
#sub5_1 form ul li input,
#sub5_1 form ul li textarea { width:100%; border-radius: 8px; border:none; background: #fcfcfc; padding:0 16px; box-sizing: border-box; height: 50px; font:18px/1.6 stm; }
#sub5_1 form ul li textarea { padding:16px; height: 260px; }
#sub5_1 form > input { border:none; }