/* 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:1200px; margin:0 auto; position: relative; font:16px/1.8 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; }
.cp { color:#358055; }



/* header & footer */
#w_header { position: fixed; z-index: 99; width: 100%; height: 80px; transition: 0.3s;  }
#w_header.fix { background: #fff; border-bottom:1px solid #ddd; }
#w_header h1 { padding-top: 20px; }
#w_header #w_gnb { position: absolute; right:180px; top:0; }
#w_header #w_gnb li { font:18px/80px steb; float:left; margin-left: 100px;  }
#w_header .lang { position: absolute; right:0; top:22px; border:2px solid #358055; padding:0 20px; border-radius: 50px; }
#w_header .lang select { font-size:13px; background:transparent; border:none; outline:none; width:70px;  }



#w_footer { padding:80px 0; text-align: center; background: #e7e7e7; }
#w_footer p { margin-top: 30px; font:15px stm; color:#666; }

/* index */
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
#main .swiper-pagination-bullet { width: 12px; height: 12px; border:1px solid #000; background: rgba(0,0,0,0); opacity: 1; margin:0 10px; }
#main .swiper-pagination-bullet-active { background: #000;}
#main .swiper-horizontal>.swiper-pagination-bullets { top:auto; bottom:40px; }

#main { height: 880px; }
#prd { padding:100px 0 200px; }
#prd ul { justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
#prd ul li { width:330px; margin-bottom: 60px; }
#prd ul li img { width: 100%; }
#prd ul li dl dt { font:20px stb; padding:14px 0;  }
#prd ul li dl dd { font:16px/1.6 stm; color:#666; }


/* sub layout */
.cont { padding:165px 0 200px; }
.cont .left { width: 270px; float:left; } 
.cont .right { width: 890px; float:right; } 

/* brand */
#brand h2 { font:normal 18px steb; margin-bottom: 30px; }
#brand .left { position:fixed; }
#brand .left h2 { font:36px/1.2 steb; }
#brand .left ul { border-top:2px solid #358055; margin-top: 20px; }
#brand .left ul li { font:16px steb; margin-top: 20px; position: relative; color:#bdbdbd; }
#brand .left ul li i { font-weight: bold; display: none; position: absolute; right:10px; top:2px; }
#brand .left ul li.select { color:#000; }
#brand .left ul li.select i { display: block; }

#brand .cont1 p { font:18px/1.8 stsb; }
#brand .cont1 img { width: 100%; margin-top: 30px; }

#brand .cont2 h2 { margin-top: 40px; }
#brand .cont2 h2 span { font-family: stm; margin-left: 10px;  }
#brand .cont2 ul { font-family: stsb; }
#brand .cont2 ul li { position: relative; padding-left: 100px; margin-bottom: 10px; }
#brand .cont2 ul li strong { position: absolute; left: 0; }
#brand .cont2 p { color:#999; margin-top: 40px; }

#brand .cont2 ~ div { margin-top: 100px; }
#brand .cont3 p { font:18px/1.6 stsb; }
#brand .cont3 ul { margin-top: 40px; border-top:2px solid #358055; }
#brand .cont3 ul li { border-bottom:1px solid #ddd; position: relative; padding:10px 0 10px 190px; }
#brand .cont3 ul li strong { position: absolute; left: 0; top:10px;  }

#brand .cont4 strong { display: block; font:30px/1.4 stm; }
#brand .cont4 p { margin-top: 10px; font-size:18px; font-family: stsb; }

#brand .cont5{ margin-top: 100px; }
#brand .cont5 p { font-size:18px; font-family: stsb; }

#brand .cont6 h2 {font:18px steb; margin-bottom: 30px;}
#brand .cont6 p { font:18px/1.6 stsb; }
#brand .cont6 figure { margin-top: 40px; }

/* prd */
#product ul { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
#product ul li { width: 580px; margin-bottom: 100px; }
#product ul li img { width: 100%; }
#product ul li dl dt { font:24px stb; margin:20px 0; }

/* prd 상세 */
/* 스타일을 넣을때 공통적인 부분은 .prd로 하고 상세페이지 마다 다르면 #prd1 로 바꿔서 처리 */
.prd .left { position:fixed; }
.prd .left h2 { font:36px/1.2 steb; }
.prd .left ul { border-top:2px solid #358055; margin-top: 20px; }
.prd .left ul li { font:16px/1.6 steb; margin-top: 20px; position: relative; color:#bdbdbd; }
.prd .left ul li i { font-weight: bold; display: none; position: absolute; right:10px; top:2px; }
.prd .left ul li.select { color:#000; }
.prd .left ul li.select i { display: block; }

.prd .cont1 h3 { font:36px steb; }
.prd .cont1 p { margin-top: 20px; font:16px/1.6 stm; color:#666; }
.prd .cont1 img { width: 100%; margin-top: 40px; }

.prd h4 { font:22px/1.4 steb; margin-bottom: 20px; }
.prd .cont2 { margin-top: 80px; }
.prd .cont2 > img { width: 100%; margin-bottom: 30px;  }
.prd .cont2 figure { margin-top: 60px; display: block; }
.prd .cont2 figure img { float:left; width:48%; margin:0 4% 4% 0; }
.prd .cont2 figure img:nth-child(2n) { margin-right: 0; }
.prd .cont2 figure img:nth-child(2n+1) { clear: both; }
.prd .cont2 ul li { position: relative; padding-left: 150px; margin-bottom: 10px; font:18px/1.4 stsb; }
.prd .cont2 ul li strong { position: absolute; left: 0; font-family: stb;  }

.prd .cont3 { margin-top: 80px; }
.prd .cont3 p { font:18px/1.6 stsb; }
.prd .cont3 figure { justify-content: space-between; margin-top: 40px; }

.prd .cont4 { margin-top: 40px; }
.prd .cont4 ul li { padding-left: 20px; position: relative; font:18px/1.4 stsb; margin-bottom: 6px; }
.prd .cont4 ul li span { position: absolute; left: 0;  }

.prd .cont5 { margin-top: 160px; }
.prd .cont5 p { font:18px/1.6 stsb; }
.prd .cont5 span { color:#a7a7a7; font:14px/1.6 stsb; display: block; margin-top: 40px; }
.prd .cont5 ul { margin-top: 10px; border-top:1px solid #358055; }
.prd .cont5 ul li { padding:10px 0 20px 190px; position: relative; border-bottom:1px solid #ddd; }
.prd .cont5 ul li strong { color:#358055; position: absolute; left: 0; }
.prd .cont5 em { font-style:normal; display: block; margin-top: 10px; }

.prd .cont6 { margin-top: 160px; }
.prd .cont6 h4 img { margin-right: 10px; }
.prd .cont6 ul li { position: relative; padding-left: 16px; font:18px/1.4 stsb; margin-bottom: 6px;  }
.prd .cont6 ul li:before { content:"-"; position: absolute; left: 0; }
.prd .cont6 span { display: block; margin-top: 20px; }





/* contact */
#contact .left h3 { height: 110px; font:36px steb; border-bottom:2px solid #358055; }
#contact .left li { margin-top: 10px; position: relative; padding-left: 60px; font-family: steb;  }
#contact .left li span { position: absolute; left: 0; }
#contact .right p { height: 110px; border-bottom:2px solid #358055; font:20px/1.6 stsb; margin-bottom: 20px; }
#contact .right ul li { width: 435px; margin:0 20px 20px 0; float:left; }
#contact .right ul li:nth-child(2n) { margin-right: 0; }
#contact .right ul li:last-child { width: 100%; margin-right: 0; }
#contact .right 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; }
#contact .right ul li textarea { border:none; background: #eee; padding:20px; width: 100%; font:16px/1.6 stm; box-sizing: border-box; outline: none; } 
#contact .right .more { background: #358055; color:#fff; width: 400px; height: 60px; font:16px stsb; border:none;  }