/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none !important; }
p { word-break: keep-all; }
img { vertical-align: top; }

/* common */
html, body { height:100%; }
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1400px; margin:0 auto; position: relative; }
.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; }

.t36 { font:36px sth; }
.t48 { font:48px sth; }


/* common */
html, body { height:100%; }
html { overflow-x: hidden; }
html.fix { overflow: hidden; }
.wrap { width:1400px; margin:0 auto; position: relative; }
.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; }

.t36 { font:36px sth; }
.t48 { font:48px sth; }


/* header & footer */
#w_header { position: absolute; top:60px; left: 0; z-index: 99; width: 100%; }
#w_header .box { background: #fff; border-radius: 30px; width:1400px; margin:0 auto; transition: 0.3s; height: 60px; overflow: hidden; }
#w_header.fix { position: fixed; top:0; }
#w_header.fix .box { width: 100%; border-radius: 0; border-bottom:1px solid #ddd; }
#w_header h1 { padding-top: 21px; margin-left: 40px; }
#w_header #w_gnb { position: absolute; right:140px; top:22px;  }
#w_header #w_gnb > li { float:left; margin-left: 80px; font:16px steb; }
#w_header #w_gnb ul { position: absolute; padding-top: 20px; font-family: stm; }
#w_header #w_gnb ul li { margin-bottom: 8px; }
#w_header #w_gnb ul li.st { color:#000; font-family: stb; }
#w_header #w_gnb ul li a { color:#666; }
#w_header #w_gnb ul li a:hover{border-bottom: 3px solid #000;transition-duration: 0.1s;}
#w_header .contact { position: absolute; top:16px; right:24px; }
#w_header.on .box { height: 320px; }

#w_footer { background: #121212; padding:40px 0 60px; border-top:1px solid #fff; color:#fff; font:normal 14px str; }
#w_footer img { position: absolute; left: 0; top: 0; }
#w_footer address { margin-left: 520px; }
#w_footer address ul li { margin-bottom: 14px; font-style: normal;  float:left;}
#w_footer address ul li img{position:relative;}
#w_footer address ul li p{color:#fff; margin-left:10px; margin-top: 5px;}
#w_footer address ul li strong { display: inline-block; width: 50px; }


#w_footer p { font-style: normal; color:#fff; margin-top: 5px; float:right;}
#w_footer address p { font-style: normal; }

#w_footer .fnb { position: absolute; right:0; top:0; border:2px solid #fff;  border-radius: 30px; padding:0 20px; height: 30px; }
#w_footer .fnb a{color:#fff;}
#w_footer .fnb_2 { position: absolute; right:0; top:40px; border:2px solid #fff; border-radius: 30px; padding:0 20px; height: 30px; }
#w_footer .fnb_2 select { background: none; border:none; font:14px stm; color:#fff; appearance:none; width: 120px; background:#121212 url(/images/down.png) no-repeat right center; }


/* index */
.more { height: 44px; background: #000; border-radius: 50px; position: relative; display: inline-block; width: 200px; color:#fff; font:16px stb; box-sizing: content-box; }
.more:hover{background:#505050; transition-duration: 0.3s;}
.more:before { content:""; position: absolute; left: 8px; top: 7px; width:30px; height: 30px; border-radius: 50px; background: #fff; }
.more span { line-height:42px; position: absolute; right:8px; top:0; text-align: center; width:calc(100% - 46px); }

#w_main { height: 950px; background:url(/images/bg_main.jpg) no-repeat center/cover; }
#w_main .wrap { height:100%; flex-direction: column; align-items: flex-start; }
#w_main h2 { line-height:1.4; }
#w_main p { font:24px str; margin-top: 40px; }
#w_main .more { margin-top: 100px; }

#bnr figure, #bnr > div { width:50%; height:640px; background:#111; }
#bnr figure:nth-of-type(1), #bnr > div:nth-of-type(1) { float:left; }
#bnr figure:nth-of-type(2), #bnr > div:nth-of-type(2) { float:right; }
#bnr figure:nth-of-type(3), #bnr > div:nth-of-type(3) { float:left; }

#bnr figure:nth-of-type(1) { background: url(/images/main_left0.png) no-repeat center/cover; }
#bnr figure:nth-of-type(2) { background: url(/images/main_right.png) no-repeat center/cover; }
#bnr figure:nth-of-type(3) { background: url(/images/main_left.png) no-repeat center/cover; }

#bnr > div:nth-of-type(1) .fl { padding-left: 50px; }
#bnr > div:nth-of-type(2) .fl { margin-left: auto; }
#bnr > div:nth-of-type(3) .fl { padding-left: 50px; }

#bnr .fl { height: 100%; color:#fff; flex-direction: column; align-items: flex-start; width: 700px; box-sizing: border-box; position: relative; }
#bnr .fl h2 { color:#fff; margin-top: 80px; }
#bnr .fl p { font:18px/1.6 str; margin-top: 60px; }
#bnr .fl .more { border:1px solid #fff; position: absolute; }
#bnr div:nth-of-type(1) .fl .more { left:300px; top:297px; }
#bnr div:nth-of-type(2) .fl .more { left:337px; top:299px; }
#bnr div:nth-of-type(3) .fl .more { left:380px; top:297px; }

#tech { padding:100px 0; background: #bed6e5; text-align: center; }
#tech h2 { text-transform: uppercase; }
#tech p { font:18px str; margin-top: 20px; }
#tech .more { margin-top:40px; }
#tech ul { justify-content: space-between; width: 1000px; margin:80px auto 0; }
#tech ul li strong { display: block; margin-top: 24px; font:20px sth; }
#tech ul li span { font:16px/1.4 stm; margin-top: 10px; display: inline-block; }
#tech ul li:nth-child(1){margin-right:15px; margin-left: 15px;}

#smile { background:url(/images/bg_needle.png) no-repeat center/cover; padding:160px 0; text-align: center; }
#smile strong { font:28px stb; margin-top: 20px; display: block; }
#smile img { margin-top: 100px; }
#smile p { font:22px/1.6 stb; margin-top: 50px; }


#prd { background: #000; padding:160px 0; text-align: center; color:#fff; }
#prd h2 { color:#fff; }
#prd em { display: inline-block; font:18px/1.4 str; margin-top: 30px; }
#prd ul li { float:left; margin:120px 40px 0 0; width: 320px; }
#prd ul li:nth-child(4n) { margin-right: 0; }
#prd ul li a { color:#fff; display: block; }
#prd ul li a strong { display: block; font:22px sth; margin-top: 30px; }
#prd ul li a p { font:16px/1.6 stm; margin-top: 10px; }
#prd .more { border:1px solid #fff; margin-top: 40px; }

#prd ul li a .imgbox  { width:320px; height:335px; position:relative; }
#prd ul li a .imgbox img  { width:100%; height:100%; border:0px;  }
#prd ul li a .imgbox img:nth-child(2){opacity: 0; transition: opacity 0.3s; position:absolute; top:0px; left:0px; }
#prd ul li a:hover img:nth-child(2) {opacity:1;}
#prd ul li a:hover img:nth-child(1) {opacity:0;}
#prd ul li a .more { transition:0.3s; }
#prd ul li a:hover .more { background: #505050;}


/* sub layout */
.left { float:left; width: 370px; }
.right { float:right; width: 790px; }

.cont { font:16px/1.6 str; padding-bottom: 200px; }
.cont .wrap { width: 1200px; }
.cont .cont1 ~ div { margin-top: 140px; }

/* sub1 */
#sub1 { padding-bottom: 0; }
#sub1 .cont1 { height: 700px; background:url(/images/sub1_1.png) no-repeat center/cover; }
#sub1 .cont2 { height: 600px; background:url(/images/sub1_2.png) no-repeat center/cover; margin-top: 0; }
#sub1 .wrap { height: 100%; justify-content: flex-start; }
#sub1 .cont2 .wrap { justify-content: flex-end; }
#sub1 h2 { margin-top: 30px; font:40px steb; }    
#sub1 p { margin-top: 10px; font:16px stsb; }    
#sub1 .more { margin-top: 30px; }


/* sub1_1 */
#sub1_1 { background: #f9e1e1; padding-top: 240px; }
#sub1_1 .wrap { height: 100%; justify-content: flex-start; }
#sub1_1 .cont1 img{ width:1320px; height: 897px; position:relative;}
#sub1_1 .cont2 strong { font:50px/1.4 sth; }
#sub1_1 .cont2 p { font:20px;  margin-top: 50px;  margin-bottom: 30px;}

#sub1_1 .cont3 strong { font:50px/1.4 sth; }
#sub1_1 .cont3 p {font:20px;  margin-top: 50px; margin-bottom: 30px; }
#sub1_1 .cont3 figure { border:1px solid #000; border-radius: 20px; overflow: hidden;  }
#sub1_1 .cont3 em { display: block; font:normal 20px stb; margin-bottom: 14px; margin-top: 40px; }

#sub1_1 .cont3 .imgbox  { width:500px; height:100px; position:relative; }
#sub1_1 .cont3 .imgbox > img  { width:100%; height:100%; border:0px; display:block; position:absolute; top:0px; left:0px;  }
#sub1_1 .cont3 .imgbox > img:nth-child(2){opacity: 0;   transition: opacity 2s; }
#sub1_1 .cont3 :hover > .imgbox img:nth-child(2) {opacity:   1;}
#sub1_1 .cont3 :hover > .imgbox img:nth-child(1) {opacity:   0;}

#sub1_1 .cont4 h2 { font:24px sth; }
#sub1_1 .cont4 .more { width:140px; margin-top: 20px; border:1px solid #000; background: none; color:#000; height: 30px;  }
#sub1_1 .cont4 .more:before { content:"\e905"; background: #000; color:#fff; display:flex; align-items: center; justify-content: center; font-size:18px; width: 22px; height: 22px; left:5px; top:4px; }
#sub1_1 .cont4 .more span { width:calc(100% - 33px); font:14px/30px sth; }
#sub1_1 .cont4 strong { font:40px sth; }
#sub1_1 .cont4 p { margin-top: 10px; }
#sub1_1 .cont4 ul li { float:left; margin-top: 40px; width: 100%; }
#sub1_1 .cont4 ul li:nth-child(2) { width: 374px; }
#sub1_1 .cont4 ul li:nth-child(3) { width: 374px; float:right; }
#sub1_1 .cont4 ul li em { display: block; font:normal 20px stb; margin-bottom: 14px; }
#sub1_1 .cont4 ul li figure { border:1px solid #000; border-radius: 20px; overflow: hidden; }


/* sub1_2 */
#sub1_2 { background: #f9e1e1; padding-top: 240px; }
#sub1_2 .cont1 h2 { font:40px sth; margin-top: 80px; margin-bottom: 30px; }
#sub1_2 .cont1 h2:nth-child(1){margin-top: 80px;}
#sub1_2 .cont1 b{font:20px stb;}
#sub1_2 .cont1 strong { display: block; font:20px stb; margin-bottom: 10px; margin-top:10px; }
#sub1_2 .cont1 figure { border-radius: 20px; border:1px solid #000; overflow: hidden; margin-top: 20px;  margin-bottom: 20px;}
#sub1_2 .cont1 figure img { width:100%; }

#sub1_2 .cont1 .hand_ul ul{ float:left; text-align: center;}
#sub1_2 .cont1 .hand_ul ul img{margin-bottom: 20px;}
#sub1_2 .cont1 .hand_ul li p{font:30px sth;}
#sub1_2 .cont1 strong:nth-of-type(3) { margin-top: 100px; }


#sub1_2 .cont1 ul { justify-content: space-between;  margin-top:30px;}
#sub1_2 .cont1 ul li {float:left;}
#sub1_2 .cont1 ul li em { border:1px solid #000; border-radius: 20px; background:#fff; font:normal 18px stb; text-align: center; margin-bottom: 20px; height:40px; display:flex; align-items: center; justify-content: center; }
#sub1_2 .cont1 ul li div { width: 220px; height: 300px; border:1px solid #000; border-radius: 20px; background:#fff; font-family: stb; }





#sub1_2 .cont2 h2 { font:40px sth; }
#sub1_2 .cont2 ul { margin-top: 30px; justify-content: space-between; flex-wrap:wrap; }
#sub1_2 .cont2 ul li { width: 280px; height: 300px; display:flex; align-items: center; justify-content: center; flex-direction: column; background: #fff; border-radius: 20px; border:1px solid #000; text-align: center; margin-bottom: 20px; }
#sub1_2 .cont2 ul li p { font-family: stb; margin-top: 20px; }



/* sub2 */
#sub1.sub2 .cont1 { background-image:url(/images/sub2_1.png); }
#sub1.sub2 .cont2 { background-image:url(/images/sub2_2.png); }



/* sub2_1 */
#sub2_1 .cont1 { background: #e2d0c2; padding-top: 200px; height: 530px; }
#sub2_1 .cont1 h2 { font:50px sth; }
#sub2_1 .cont1 strong { display: block; font:20px stb; margin-top: 30px; }
#sub2_1 .cont1 p { margin-top: 10px; }
#sub2_1 .cont2 { height: 800px; background: url(/images/sub2_1_2.png) no-repeat center/cover; margin-top: 0; }
#sub2_1 .cont3 h2 {font:24px sth; margin-bottom: 30px; }
#sub2_1 .cont3 .left { clear:both; }
#sub2_1 .cont3 .right strong { font:30px sth; }
#sub2_1 .cont3 .right p { margin-top: 10px; }
#sub2_1 .cont3 .right figure { margin-top: 20px; border-radius: 20px; border:1px solid #000; overflow: hidden; margin-bottom: 90px; }
#sub2_1 .cont3 .right figure img { width: 100%; }

#sub2_1 .cont4 h2 { font:24px sth; margin-bottom: 30px; }
#sub2_1 .cont4 ul li { margin-bottom: 50px; justify-content: flex-start; }
#sub2_1 .cont4 ul li figure { background: #f9e1e1; width: 120px; height: 120px; border:1px solid #000; border-radius: 20px; margin-right: 30px; }
#sub2_1 .cont4 ul li dl dt { font:30px sth; }
#sub2_1 .cont4 ul li dl dd { margin-top: 10px; }

#sub2_1 .cont5 { text-align:center;  }
#sub2_1 .cont5 img { max-width:100%; }

/* sub2_2 */

#sub2_1.sub2_2 .cont1_2 { background: #f4e5c0; padding-top: 200px; height: 530px; }
#sub2_1.sub2_2 .cont1_2 h2 { font:50px sth; }
#sub2_1.sub2_2 .cont1_2 strong { display: block; font:20px stb; margin-top: 30px; }
#sub2_1.sub2_2 .cont1_2 p { margin-top: 10px; }
#sub2_1.sub2_2 .cont2 {  height: 800px; background-image: url(/images/sub2_2_2.png); margin-bottom: 140px;}


/* sub3 */
#sub1.sub3 .cont1 { background-image:url(/images/sub3_1.png); }
#sub1.sub3 .cont2 { background-image:url(/images/sub3_2.png); }
#sub1.sub3 .more { width:160px; margin-right: 6px; }


/* sub3_1 */
#sub2_1.sub3_1 .cont1,
#sub2_1.sub3_1 .cont4 ul li figure { background: #deefc8; }
#sub2_1.sub3_1 .cont2 { background-image: url(/images/sub3_1_2.png); }

/* sub3_2 */
#sub2_1.sub3_2 .cont1, 
#sub2_1.sub3_2 .cont4 ul li figure { background: #f4e0fe; }
#sub2_1.sub3_2 .cont2 { background-image: url(/images/sub3_2_2.png); }


/* sub3_3 */
#sub2_1.sub3_3 .cont1, 
#sub2_1.sub3_3 .cont4 ul li figure { background: #f9e1e1; }
#sub2_1.sub3_3 .cont2 { background-image: url(/images/sub3_3_2.png); }


/* sub3_4 */
#sub2_1.sub3_4 .cont1, 
#sub2_1.sub3_4 .cont4 ul li figure { background: #fff6d9; }
#sub2_1.sub3_4 .cont2 { background-image: url(/images/sub3_4_2.png); }


/* sub3_5 */
#sub2_1.sub3_5 .cont1, 
#sub2_1.sub3_5 .cont4 ul li figure { background: #d3f4f5; }
#sub2_1.sub3_5 .cont2 { background-image: url(/images/sub3_5_2.png); }


/* sub3_6 */
#sub2_1.sub3_6 .cont1, 
#sub2_1.sub3_6 .cont4 ul li figure { background: #f9e1e1; }
#sub2_1.sub3_6 .cont2 { background-image: url(/images/sub3_6_2.png); }
#sub2_1.sub3_6 .cont1 h3{font:30px sth; }

/* sub4_1 */
#sub4_1 { padding-top: 240px; background: #f9e1e1; }
#sub4_1 .right .title { font:50px sth; margin-bottom: 40px; }


/* sub4_3 */
#sub4_3 { padding-top: 200px; background: #f9e1e1; }
#sub4_3 .left { font:24px sth; }
#sub4_3 .cont1 h2 { font:50px sth; margin-bottom: 50px; } 
#sub4_3 .cont1 ul li { margin-bottom: 20px; }
#sub4_3 .cont1 ul li select,
#sub4_3 .cont1 ul li input,
#sub4_3 .cont1 ul li textarea { width:100%; box-sizing: border-box; border:1px solid #000; font:16px/1.6 stb; border-radius: 20px; padding:0 20px; }
#sub4_3 .cont1 ul li select { appearance:none; background:#fff url(/images/down1.jpg) no-repeat right 20px center; }
#sub4_3 .cont1 ul li select,
#sub4_3 .cont1 ul li input { height: 60px; }
#sub4_3 .cont1 ul li textarea { padding:20px; }
#sub4_3 .cont1 ul + input { border:none; margin:10px auto; display: block; }

#sub4_3 .cont2 ul li { font:20px str; margin-bottom: 20px; }
#sub4_3 .cont2 ul li span { display: inline-block; width: 70px; font-family:stb; }
#sub4_3 .cont2 .map { border:1px solid #000; border-radius: 20px; overflow: hidden; }
#sub4_3 .cont2 iframe { vertical-align: top; width: 100%; height: 500px; }

/* sub5 */
#sub1.sub5 .cont1 { background-image:url(/images/sub5_1.png); }
#sub1.sub5 .cont2 { background-image:url(/images/sub5_2.png); }

/* sub5_1 */

#sub2_1.sub5_1 .cont1_2 { background: #bed6e5; padding-top: 200px; height: 530px; }
#sub2_1.sub5_1 .cont1_2 h2 { font:50px sth; }
#sub2_1.sub5_1 .cont1_2 strong { display: block; font:20px stb; margin-top: 30px; }
#sub2_1.sub5_1 .cont1_2 p { margin-top: 10px; }
#sub2_1.sub5_1 .cont2 {  height: 800px; background-image: url(/images/sub5_1_2.png); margin-bottom: 140px;}
#sub2_1.sub5_1 .cont5 { text-align:center;  }
#sub2_1.sub5_1 .cont5 img { max-width:100%; }


/* sub5_2 */

#sub2_1.sub5_2 .cont1_2 { background: #bed6e5; padding-top: 200px; height: 530px; }
#sub2_1.sub5_2 .cont1_2 h2 { font:50px sth; }
#sub2_1.sub5_2 .cont1_2 strong { display: block; font:20px stb; margin-top: 30px; }
#sub2_1.sub5_2 .cont1_2 p { margin-top: 10px; }
#sub2_1.sub5_2 .cont2 {  height: 800px; background-image: url(/images/sub5_2_2.png); margin-bottom: 140px;}
#sub2_1.sub5_2 .cont5 { text-align:center;  }
#sub2_1.sub5_2 .cont5 img { max-width:100%; }