@charset "utf-8";





                        /*
                                                          subpage                                   //
                        */





.path-title{position:relative; margin-bottom:50px; height:400px;  box-sizing:border-box; padding:15px 15px 5px 15px; z-index:11;}
.path-title>.in{max-width:1400px; position:relative; margin:0 auto;  height:100%; z-index:12;}

.path-title .bg{position:absolute; top:0; left:0; width:100%; height:100%; z-index:9; background-position:center; background-size:cover;}
.path-title .bg:after{position:absolute; top:0; left:0; width:100%; height:100%; content:""; background:#000; opacity:0; z-index:10;}

.path-title.img-1 .bg:after{opacity:0;}
.path-title.img-2 .bg:after{opacity:0.2;}
.path-title.img-3 .bg:after{opacity:0.3;}
.path-title.img-4 .bg:after{opacity:0.2;}

.path-title.img-1 .bg{filter:grayscale(30%); background-image:url('/imgs/sub-top1.jpg');}
.path-title.img-2 .bg{filter:grayscale(30%); background-image:url('/imgs/sub-top2.jpg');}
.path-title.img-3 .bg{filter:grayscale(10%); background-image:url('/imgs/sub-top3.jpg');}
.path-title.img-4 .bg{filter:grayscale(0); background-image:url('/imgs/sub-top4.jpg');}
.path-title.img-4 .bg{filter:grayscale(0); background-image:url('/imgs/sub-top4.jpg');}


.path-title .pc{display:none;}
.path-title .mo{display:block;}


/* .path-title .path{position:relative; z-index:11; margin-bottom:30px;}
.path-title .path ul{}
.path-title .path ul li{position:relative; margin-right:20px;}
.path-title .path ul li + li:after{position:absolute; top:50%; left:-10px; margin:-2px 0 0 -2px; width:3px; height:3px; background:#ccc; content:""; border-radius:50%;}
.path-title .path ul li a{}
.path-title .path ul li:last-child a{color:#323232; font-weight:bold;} */

.path-title .titleArea{position:absolute; top:50%; left:0; transform:translateY(-50%);  color:#fff;  z-index:11; }
.path-title .titleArea h2{font-size:25px;  margin-bottom:5px; font-weight:500;}
.path-title .titleArea p{font-size:14px; opacity:0.7;}

.path-title .titleArea i{position:absolute; font-size:17px; color:#999; top:6px; right:20px; width:30px; height:30px; background:#fff; line-height:30px; text-align:center; border-radius:50%; cursor:pointer; transition:0.2s; z-index:13;}
.path-title .titleArea i:hover{color:#fff; background:#323232;}


.path-title .path{position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box;  }
.path-title .path ul{}
.path-title .path ul li{position:relative; height:40px; line-height:40px; width:calc(100% / 2 - 25px); font-size:15px; padding-left:15px; box-sizing:border-box; }
.path-title .path ul li + li:after{position:absolute; top:50%; left:0;  opacity:0.3; transform:translateY(-50%); width:1px; height:15px; background:#fff; content:"";  }
.path-title .path ul li a{display:block;    position:relative; color:#fff; cursor:pointer;}
.path-title .path ul li a:after{position:absolute; top:50%; right:10px; transform:translateY(-50%); font-family:'xeicon'; font-size:10px; content:"\e943"; transition:0.3s;}
.path-title .path ul li.home{width:50px; padding-left:0;}
.path-title .path ul li.home a:after{display:none;}
.path-title .path ul li.on a:after{transform:translateY(-50%) rotate(180deg);}

.path-title .tnb{box-sizing:border-box; position:absolute; bottom:0; left:0;  width:100%;  }
.path-title .tnb>.in{max-width:1400px; margin:0 auto;}



.path-title .tnb{}
.path-title .tnb ul[class*="-all"]{display:none; position:absolute; top:5px; left:0; width:calc(50% - 25px); padding:15px 0;  box-sizing:border-box; background:var(--c1); }
.path-title .tnb ul[class*="-all"] .d1{}
.path-title .tnb ul[class*="-all"] .d1 a{color:#fff;}
.path-title .tnb ul[class*="-all"] .d1 .depthArea{}


.path-title .tnb ul.d1-all{left:50px;}
.path-title .tnb ul.d1-all .depthArea{display:none; }
.path-title .tnb ul.d1-all .d1{}
.path-title .tnb ul.d1-all .d1>a{display:block; padding:3px 2px 3px 15px; }

.path-title .tnb ul.d2-all{left:calc(50% + 25px); }
.path-title .tnb ul.d2-all .d1>a{display:none;}
.path-title .tnb ul.d2-all .d2>a{display:block; padding:3px 2px 3px 15px; }
.path-title .tnb ul a:hover{color:#ccc;}


[class*="sub"]{}
[class*="sub"]:not(.board-sub)>.in{max-width:1400px; margin:0 auto; padding:0 15px;}


@media all and (min-width:768px){
  .path-title{height:550px; margin-bottom:110px;}

  .path-title .titleArea h2{font-size:50px;  margin-bottom:10px; }
  .path-title .titleArea p{font-size:20px;}

  .path-title .path ul li{width:300px; height:60px; line-height:60px; font-size:18px; padding-left:25px;}
  .path-title .path ul li a:after{right:20px;}


  .path-title .tnb ul[class*="-all"]{width:300px; padding:25px 0; }
  .path-title .tnb ul.d2-all{left:350px; }
  .path-title .tnb ul.d1-all .d1>a{padding:5px 5px 5px 25px; }
  .path-title .tnb ul.d2-all .d2>a{padding:5px 5px 5px 25px; }




}




.tableArea{}
.tableArea + .tableArea{margin-top:100px;}
.tableArea h2.title{font-size:25px; margin-bottom:20px;}
.tableArea h2.title i{display:inline-block; font-style:normal; font-size:15px; margin-left:40px; font-weight:normal;}
.tableArea table{text-align:left; border-top:2px solid #193c86;}
.tableArea table.center{text-align:center;}
.tableArea table tr{}
.tableArea table tr th{padding:10px 5px; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.tableArea table tr td{padding:10px 5px; border-top:1px solid #eee; border-bottom:1px solid #eee;}
.tableArea table thead{background:#f9f9f9;}
.tableArea table thead tr{}
.tableArea table thead tr th{}
.tableArea table tbody{}
.tableArea table tbody tr{}
.tableArea table tbody tr th{}
.tableArea table tbody tr td{}

.tableArea table.bg-fff{background:#fff;}
.tableArea table.type1 th{border:1px solid #eee;}
.tableArea table.type1 th:first-child{border-left:0;}
.tableArea table.type1 th:last-child{border-right:0;}
.tableArea table.type1 td{border:1px solid #eee;}
.tableArea table.type1 td:first-child{border-left:0;}
.tableArea table.type1 td:last-child{border-right:0;}

.tableArea table.top-border{border-top:2px solid #333;}
.tableArea table.middle th,
.tableArea table.middle td{vertical-align:middle;}
.tableArea table.th-cen th{text-align:center;}
.tableArea table select{padding:5px 20px; height:auto;}

.tableArea .left{text-align:left !important;}


@media all and (min-width:768px){
  .tableArea h2.title{font-size:35px;}
  .tableArea table tr th{padding:15px 10px; font-size:16px;}
  .tableArea table tr td{padding:15px 10px;}
}


span.dot.bottom{position:relative;}
span.dot.bottom:after{position:absolute; bottom:10px; right:-15px; width:3px; height:3px; border-radius:50%; content:""; background:#193c86;}

@media all and (min-width:768px){
  span.dot.bottom:after{width:6px; height:6px;}
}




.top-tabArea{display:none; margin-bottom:40px;}
.top-tabArea.display{display:block;}
.top-tabArea ul{}
.top-tabArea ul li{font-size:12px; padding:0 20px; height:30px; line-height:28px; background:#f9f9f9; color:#999; border:1px solid #ddd; border-bottom-color:#333; cursor:pointer; margin-left:-1px; position:relative; z-index:10;}
.top-tabArea ul li:hover{}
.top-tabArea ul li.on{border-color:#333; color:#000; z-index:11; border-bottom:0; font-weight:500; background:#fff;}

.make-tab .tableArea{display:none;}
.make-tab .tableArea.on{display:block; margin-top:0;}

@media all and (min-width:768px){
  .top-tabArea{margin-bottom:60px;}
  .top-tabArea ul li{font-size:17px; height:50px; line-height:48px; padding:0 60px;}
}




















span.l{position:relative; display:block; margin-bottom:3px; padding-left:8px; box-sizing:border-box;}
span.l:after{position:absolute; top:8px; left:0;  width:3px; height:3px; background:#ccc; border-radius:50%; content:"";}
span.l-num{position:relative; display:block; margin-bottom:3px; padding-left:8px; box-sizing:border-box;}
span.l-num span{position:absolute; top:4px; left:-13px;  line-height:1; padding:1px 5px; font-size: 10px;  background:#000; color:#fff; border-radius:5px;  }


@media all and (min-width:768px){

  span.l{padding-left:15px; }
  span.l:after{top:10px; left:0; width:4px; height:4px; }
  span.l-num{padding-left:15px; }
  span.l-num span{top:5px; left:-10px;  font-size:13px;}

}




.board_lnb{margin-bottom:20px;}
.board_lnb ul{}
.board_lnb ul li{margin-right:10px;}
.board_lnb ul li a{display:inline-block; padding:7px 20px; background:#fbf8f4; border-radius:10px; transition:0.3s;}
.board_lnb ul li.on a{color:#193c86; font-weight:bold;   }
.board_lnb ul li a:hover{color:#999;}








#sub-cont{padding:0 15px; margin-top:30px; box-sizing:border-box; }
#sub-cont>.in{max-width:1400px; margin:0 auto;}
#sub-cont>.in + .in{margin-top:50px;}
#sub-cont>.in + .full-img{margin-top:50px; margin-bottom:50px;}
#sub-cont>.in + .full-img.mb-0{margin-bottom:0;}

#sub-cont .titleArea{}
#sub-cont .titleArea h3{font-size:13px; color:var(--c1); font-weight:600; margin-bottom:20px;}
#sub-cont .titleArea h2{font-size:25px; font-weight:600; line-height:1.3; margin-bottom:10px;}
#sub-cont .titleArea h4{font-size:20px; line-height:1.1; font-weight:500; margin-bottom:10px;}
#sub-cont .titleArea h5{font-size:18px; line-height:1.1; font-weight:500; margin-bottom:10px;}
#sub-cont .titleArea h6{font-size:16px; line-height:1.1; font-weight:500; margin-bottom:10px;}
#sub-cont .titleArea p{font-size:13px;}
#sub-cont .titleArea p.title{font-size:14px;}

#sub-cont .full-img{margin-left:-15px; margin-right:-15px; }
#sub-cont .full-img img{width:100%; height:100%; object-fit:cover; object-position:center;}
#sub-cont .center{text-align:center;}

#sub-cont .h-400{height:400px;}

@media all and (min-width:768px){
  #sub-cont{padding:0 20px; margin-top:140px;}
  #sub-cont>.in + .in{margin-top:140px;}
  #sub-cont>.in + .full-img{margin-top:100px; margin-bottom:100px;}

  #sub-cont .titleArea h3{font-size:17px; margin-bottom:30px;}
  #sub-cont .titleArea h2{font-size:40px;;  margin-bottom:20px; }
  #sub-cont .titleArea h4{font-size:35px;  margin-bottom:20px; }
  #sub-cont .titleArea h5{font-size:30px;  margin-bottom:20px; }
  #sub-cont .titleArea h6{font-size:25px;  margin-bottom:20px; }
  #sub-cont .titleArea p{font-size:17px;;  margin-top:50px;}
  #sub-cont .titleArea p.title{font-size:20px; margin-top:50px;}

  #sub-cont .full-img{margin-left:-20px; margin-right:-20px;}

}



#sub-cont .boxArea{}
#sub-cont .boxArea .box{position:relative;}
#sub-cont .boxArea .box + .box{margin-top:100px;}
#sub-cont .boxArea .box .img{height:300px; overflow:hidden;}
#sub-cont .boxArea .box .img img{width:100%; height:100%; object-fit:cover; object-position:center;}
#sub-cont .boxArea .box .txt{box-sizing:border-box; padding:20px;}

@media all and (min-width:768px){
  #sub-cont .boxArea .box{display:flex; justify-content:space-between; align-items:center;}
  #sub-cont .boxArea .box + .box{margin-top:200px;}
  #sub-cont .boxArea .box .img{width:53%; height:400px; box-sizing:border-box; }
  #sub-cont .boxArea .box .img.big-1{height:700px; width:40%;}
  #sub-cont .boxArea .box .txt{width:47%; box-sizing:border-box; padding:0 5% 0 0;}

  #sub-cont .boxArea .box.reverse{flex-direction:row-reverse;}
  #sub-cont .boxArea .box.reverse .txt{max-width:700px; margin-left:auto; padding:0 0 0 1%;; text-align:right;}

}





#sub-cont.about-01{}
#sub-cont.about-01 .top-img{height:400px; _margin-top:50px; margin-bottom:50px;}
#sub-cont.about-01 .top-img img{width:100%; height:100%; object-position:center; object-fit:cover;}
#sub-cont.about-01 .in2{padding:100px 0; box-sizing:border-box;}
#sub-cont.about-01 .cont-wrap{background:#f9f9f9; margin-top:100px; padding:0 15px;}
#sub-cont.about-01 .cont-wrap>.in{max-width:1400px; margin:0 auto;}
#sub-cont.about-01 .cont{margin-top:20px;}
#sub-cont.about-01 .cont ul{margin:0 -5px; width:auto;}
#sub-cont.about-01 .cont ul li{width:50%; box-sizing:border-box; padding:5px; margin-bottom:30px;}
#sub-cont.about-01 .cont ul li:nth-child(even){position:relative; top:-15px;}
#sub-cont.about-01 .cont ul li .img{margin-bottom:15px;}
#sub-cont.about-01 .cont ul li .txt{}
#sub-cont.about-01 .cont ul li .txt h2{font-size:14px; margin-bottom:15px;}
#sub-cont.about-01 .cont ul li .txt p{opacity:0.6;}

#sub-cont.about-01 .vimeo-area{padding-top:100px;}
#sub-cont.about-01 .vimeo-area>.in{max-width:1200px; margin:0 auto;}
#sub-cont.about-01 .vimeo-area iframe{overflow:hidden; border-radius:10px;}


@media all and (min-width:768px){

  /* #sub-cont.about-01 .titleArea p{width:50%;} */


  #sub-cont.about-01 .top-img{height:400px; _margin-top:150px; margin-bottom:150px;}
  #sub-cont.about-01 .in2{position:relative; padding:250px 0 150px 25%;}
  #sub-cont.about-01 .in2 .titleArea{position:absolute; top:170px; left:0;}
  #sub-cont.about-01 .cont-wrap{margin-top:150px; padding:0 20px;}
  #sub-cont.about-01 .cont ul li{width:33%; padding:15px; margin-bottom:60px;}
  #sub-cont.about-01 .cont ul li:nth-child(even){ top:-25px; margin-bottom:30px;}
  #sub-cont.about-01 .cont ul li .img{margin-bottom:30px;}
  #sub-cont.about-01 .cont ul li .txt h2{font-size:20px; margin-bottom:25px;}
  #sub-cont.about-01 .vimeo-area{padding-top:150px;}
}




#sub-cont.about-02{}
#sub-cont.about-02 .cont-1{}
#sub-cont.about-02 .cont-1 ul{}
#sub-cont.about-02 .cont-1 ul li{}
#sub-cont.about-02 .cont-1 ul li + li{margin-top:5px;}
#sub-cont.about-02 .cont-1 ul li p{display:inline-block; padding:5px 10px; background:#f4f4f4; border-radius:5px;}

@media all and (min-width:768px){

  #sub-cont.about-02 .cont-1 ul li p{padding:7px 15px;}

}







#sub-cont.about-03{}
#sub-cont.about-03 .titleArea{margin-bottom:30px; }
#sub-cont.about-03 .root_daum_roughmap{width:100% !important;}
#sub-cont.about-03 .box{margin-top:100px;}
#sub-cont.about-03 .tableArea{margin-top:50px;}
#sub-cont.about-03 .tableArea b{font-size:14px;}


@media all and (min-width:768px){
  #sub-cont.about-03 .box{margin-top:150px;}
  #sub-cont.about-03 .tableArea b{font-size:17px;}

}





#sub-cont.about-02 .cont-2{}
#sub-cont.about-02 .cont-2>.in{}

#sub-cont.about-02 .cont-2{margin-top:50px;}



.process{}
.process ul{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.process ul li{width:90%; margin-bottom:15px; background:#f7f7f7; border-radius:5px; }
.process ul li + li{ }
.process ul li.on{ }
.process ul li h2{font-size:16px; border-top-left-radius:5px; border-top-right-radius:5px; color:#fff; padding:10px 15px; background:var(--c1); background-size:; background-position:center;  box-sizing:border-box;}
.process ul li p{box-sizing:border-box; padding:15px; }
.process ul li + span{position:relative; width:10%; text-align:center;}

@media all and (min-width:768px){

  #sub-cont.about-02 .cont-2 .cont{margin-top:70px;}
  .process ul{flex-wrap:nowrap; align-items:initial;}
  .process ul li{margin-bottom:0; }
  .process ul li h2{font-size:20px; text-align:center;}
  .process ul li p{padding:30px 15px;}
  .process ul li + span i{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); font-size:20px; font-weight:900;}


}

















/* 연혁 */
.history-wrap {width:100%; }
.history-wrap .history { position:relative;  margin-top:30px;}
.history-wrap .history:last-child{margin-bottom:0px;}
.history-wrap .history:before { content:''; display:block; position:absolute; top:0; left:0; width:1px; height:100%; background:#eee;} /* 라인색상 */
.history-wrap .history .box { position:relative;  padding-left:40px; margin-bottom:45px; }
.history-wrap .history .box:before { content:''; display:block; position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%; background:#000;} /* 라인포인트색상 */
.history-wrap .history .box .year {display:block; position:relative; top:-10px; margin-bottom:15px; line-height:1; font-size:25px; font-family:var(--font_serif); font-weight:900; }
.history-wrap .history .box ul {padding:0; margin:0; }
.history-wrap .history .box ul li { padding:0; margin:0; line-height:2;}
.history-wrap .history .box ul li p {margin-top:0px;  line-height:2;}
.history-wrap .history .box ul li p strong {font-size:15px; padding-right:10px;  display:inline-block; _vertical-align:top; text-align:center;  font-family:var(--font_serif); font-weight:900;}
.history-wrap .history .box ul li p span {width:85%; display:inline-block; box-sizing:border-box; }


@media all and (min-width:768px){

  .history-wrap .history .box{margin-bottom:100px;}
  .history-wrap .history .box .year{font-size:35px;}
  .history-wrap .history .box ul li p span{font-size:17px;}


}
















#sub-cont[class*="product"]{}
#sub-cont[class*="product"]>.in{}
#sub-cont[class*="product"] .cont{margin-top:60px;}
#sub-cont[class*="product"] .cont .img{}

#sub-cont[class*="product"] .prdList.x2{display:flex; justify-content:space-between; flex-wrap:wrap; align-items:flex-start; }
#sub-cont[class*="product"] .prdList.x2 li{display:flex; width:100%;  align-items:flex-start;}
#sub-cont[class*="product"] .prdList.x2 li + li{margin-top:20px;}
#sub-cont[class*="product"] .prdList.x2 li .img{width:40%;  box-sizing:border-box; background:#f4f4f4; padding:20px;}
#sub-cont[class*="product"] .prdList.x2 li .txt{width:60%; padding:0 15px; }
#sub-cont[class*="product"] .prdList.x2 li .txt h2{font-size:16px; margin-bottom:10px;}
#sub-cont[class*="product"] .prdList.x2 li .txt p{font-size:13px; margin-bottom:5px;}
#sub-cont[class*="product"] .prdList.x2 li .txt i{ font-size:13px; color:#999; font-style:normal;}

#sub-cont[class*="product"] .colorArea{margin-top:30px; width:100%;}
#sub-cont[class*="product"] .colorArea ul{display:flex; justify-content:space-between;}
#sub-cont[class*="product"] .colorArea ul li{width:100%; height:100px;  position:relative; }
#sub-cont[class*="product"] .colorArea ul li span{position:absolute; bottom:10px; right:10px; padding:5px 10px; background:#000; color:#fff;}

#sub-cont[class*="product"] article{}
#sub-cont[class*="product"] article + article{margin-top:50px;}
#sub-cont[class*="product"] article .titleArea p{padding-left:10px;  margin-top:30px}
#sub-cont[class*="product"] article .prd-img{box-sizing:border-box; background:#f4f4f4; padding:20px; width:50%;}

@media all and (min-width:768px){

  #sub-cont[class*="product"] .cont{margin-top:120px;}
  #sub-cont[class*="product"] .cont .img{}

  #sub-cont[class*="product"] .prdList.x2{ }
  #sub-cont[class*="product"] .prdList.x2 li{display:flex; width:49%; margin-bottom:30px; }
  #sub-cont[class*="product"] .prdList.x2 li + li{margin-top:0;}
  #sub-cont[class*="product"] .prdList.x2 li .img{ padding:40px;}
  #sub-cont[class*="product"] .prdList.x2 li .txt{padding:0 25px;}
  #sub-cont[class*="product"] .prdList.x2 li .txt h2{font-size:22px; margin-bottom:25px;}
  #sub-cont[class*="product"] .prdList.x2 li .txt p{font-size:17px; margin-bottom:20px;}
  #sub-cont[class*="product"] .prdList.x2 li .txt i{font-size:17px;}

  #sub-cont[class*="product"] .colorArea{ width:50%;}

  #sub-cont[class*="product"] article + article{margin-top:30px; }
  #sub-cont[class*="product"] article .titleArea h5 + p{margin-top:0; }
  #sub-cont[class*="product"] article .titleArea p{padding-left:20px; margin-top:50px;}
  #sub-cont[class*="product"] article .prd-img{box-sizing:border-box; background:#f4f4f4; padding:20px; width:50%; max-width:400px;}

  #sub-cont[class*="product"] article{ padding-top:40px; padding-bottom:40px; box-sizing:border-box; padding-left:200px; position:relative; border-top:1px solid #ddd;}
  #sub-cont[class*="product"] article:after{position:absolute; top:20px; left:170px;  width:1px; height:calc(100% - 40px); border-left: 1px dashed #eee; content:"";display:none; }
  #sub-cont[class*="product"] article h5{position:absolute; top:40px; left:0; max-width:180px;}



}

@media all and (min-width:1100px){

  #sub-cont[class*="product"] article + article{margin-top:110px;}
  #sub-cont[class*="product"] article{ padding-left:300px; padding-top:70px; }
  #sub-cont[class*="product"] article:after{left:250px;}
  #sub-cont[class*="product"] article h5{top:70px;  max-width:100%;}

}












#sub-cont[class*="cons"]{}
#sub-cont[class*="cons"]>.in{}
#sub-cont[class*="cons"] .cont{margin-top:60px;}
#sub-cont[class*="cons"] .cont .img{}


#sub-cont[class*="cons"] article{}
#sub-cont[class*="cons"] article + article{margin-top:50px;}
#sub-cont[class*="cons"] article .titleArea p{ margin-top:30px}
#sub-cont[class*="cons"] article .prd-img{box-sizing:border-box; background:#f4f4f4; padding:20px; width:50%;}

#sub-cont[class*="cons"] .imgList{}
#sub-cont[class*="cons"] .imgList li{width:100%; }
#sub-cont[class*="cons"] .imgList li + li{margin-top:20px;}
#sub-cont[class*="cons"] .imgList li .img{margin-bottom:10px;}
#sub-cont[class*="cons"] .imgList li h2{font-size:16px; margin-bottom:10px;}
#sub-cont[class*="cons"] .imgList li p{font-size:13px;}
#sub-cont[class*="cons"] .imgList.bg li{box-sizing:border-box; padding:15px; background:#f4f4f4; border-radius:10px; }

#sub-cont[class*="cons"] .imgList .bg-c1{box-sizing:border-box; padding:10px; background:#f4f4f4; }


#sub-cont[class*="cons"] .process-img{}
#sub-cont[class*="cons"] .process-img ul{}
#sub-cont[class*="cons"] .process-img ul li{width:100%;  border:1px solid #ddd; box-sizing:border-box; padding:10px; }
#sub-cont[class*="cons"] .process-img ul li + li{margin-top:1%; }
#sub-cont[class*="cons"] .process-img ul li .img{}
#sub-cont[class*="cons"] .process-img ul li .txt{box-sizing:border-box; padding:20px 0;}
#sub-cont[class*="cons"] .process-img ul li .txt h2{font-size:17px; font-weight:normal; margin-bottom:15px; }
#sub-cont[class*="cons"] .process-img ul li .txt h2 span{display:inline-block; margin-right:4px; font-size:15px; font-weight:500; width:30px; height:30px; text-align:center; line-height:30px; background:var(--c1); color:#fff; border-radius:50%; vertical-align:middle;}
#sub-cont[class*="cons"] .process-img ul li .txt p{box-sizing:border-box;}
#sub-cont[class*="cons"] .process-img ul li .img:nth-child(n+2){margin-top:10px; }
#sub-cont[class*="cons"] .process-img ul li .txt:nth-child(n+3){ }


#sub-cont[class*="cons"] .calcArea{margin-top:50px;}
#sub-cont[class*="cons"] .calcArea .top{ background:#f4f4f4; box-sizing:border-box; padding:20px;}
#sub-cont[class*="cons"] .calcArea .top .img{width:80px;}
#sub-cont[class*="cons"] .calcArea .top .txt{}
#sub-cont[class*="cons"] .calcArea .top input[class*="btn"]{width:100px; height:40px; line-height:40px; padding:0;}
#sub-cont[class*="cons"] .calcArea .top .btnArea{margin-top:15px; }
#sub-cont[class*="cons"] .calcArea .result{margin-top:20px; }

#sub-cont[class*="cons"] .calcArea .tableArea table.type1{}
#sub-cont[class*="cons"] .calcArea .tableArea table.type1 thead{text-align:center;}
#sub-cont[class*="cons"] .calcArea .tableArea table.type1 td:nth-child(1),
#sub-cont[class*="cons"] .calcArea .tableArea table.type1 td:nth-child(2),
#sub-cont[class*="cons"] .calcArea .tableArea table.type1 td:nth-child(3){text-align:center;}
#sub-cont[class*="cons"] .calcArea .tableArea table.type1 td img{max-width:100px;}


@media all and (min-width:768px){

  #sub-cont[class*="cons"] .cont{margin-top:120px;}
  #sub-cont[class*="cons"] .cont .img{}

  #sub-cont[class*="cons"] .imgList{display:flex; flex-wrap:wrap; justify-content:space-between;}
  #sub-cont[class*="cons"] .imgList li + li{margin-top:0;}
  #sub-cont[class*="cons"] .imgList li h2{font-size:17px;}
  #sub-cont[class*="cons"] .imgList li p{font-size:15px; }
  #sub-cont[class*="cons"] .imgList.auto li{width:auto;; }
  #sub-cont[class*="cons"] .imgList.auto.w1 li.img{width:300px;}
  #sub-cont[class*="cons"] .imgList.auto.w1 li.txt{width:calc(100% - 300px);}
  #sub-cont[class*="cons"] .imgList.grid3 li{width:32.5%; }
  #sub-cont[class*="cons"] .imgList.bg li{padding:25px; }
  #sub-cont[class*="cons"] .imgList.l2{justify-content:flex-start;}
  #sub-cont[class*="cons"] .imgList.l2 li{ margin-left:0.5%; }
  #sub-cont[class*="cons"] .imgList.grid3 li:nth-child(n+4){margin-top:20px; }

  #sub-cont[class*="cons"] .imgList.max-1{ }

  #sub-cont[class*="cons"] .imgList .bg-c1{ padding:40px; }

  #sub-cont[class*="cons"] .process-img ul li{display:flex; flex-wrap:wrap; align-items:center;}
  #sub-cont[class*="cons"] .process-img ul li .img{width:400px;}
  #sub-cont[class*="cons"] .process-img ul li .txt{width:calc(100% - 400px); padding:0 20px;}
  #sub-cont[class*="cons"] .process-img ul li .txt h2{font-size:25px;}
  #sub-cont[class*="cons"] .process-img ul li .txt h2 span{width:40px; height:40px; line-height:40px; font-size:20px;}
  #sub-cont[class*="cons"] .process-img ul li .txt p{padding-left:10px; }


  #sub-cont[class*="cons"] article + article{margin-top:100px; }
  #sub-cont[class*="cons"] article .titleArea h5 + p{margin-top:0; }
  #sub-cont[class*="cons"] article .titleArea p{ margin-top:50px;}
  #sub-cont[class*="cons"] article .prd-img{box-sizing:border-box; background:#f4f4f4; padding:20px; width:50%; max-width:400px;}

  #sub-cont[class*="cons"] .calcArea form{ }
  #sub-cont[class*="cons"] .calcArea .top{padding:40px; font-size:16px;}
  #sub-cont[class*="cons"] .calcArea .result{  }




}

@media all and (min-width:1100px){

  #sub-cont[class*="cons"] .calcArea form{display:flex; justify-content:space-between;}
  #sub-cont[class*="cons"] .calcArea .top{width:500px; }
  #sub-cont[class*="cons"] .calcArea .result{width:calc(100% - 530px); margin-top:0;}

}















#sub-cont.product-01{}









#sub-cont.board-sub{}
#sub-cont.board-sub>.in{}
#sub-cont.board-sub .left-section{}
#sub-cont.board-sub .left-section h2{font-weight:500;  font-size:20px;}
#sub-cont.board-sub .left-section h2 span{}


@media all and (min-width:768px){

  #sub-cont.board-sub .left-section h2{font-size:30px; }

}


#sub-cont.guide{}
#sub-cont.guide article{white-space:pre-line;}
#sub-cont.guide h2{margin-top:50px;}
#sub-cont.guide h6{padding-left:10px;}
#sub-cont.guide p{padding-left:20px; margin-top:10px; margin-bottom:50px;}

@media all and (min-width:768px){
  #sub-cont.guide h2{font-size:30px;}
  #sub-cont.guide h2:nth-child(n+2){margin-top:80px; }
  #sub-cont .titleArea h6{font-size:22px;}
}















/* contact */
.JS-form_mail{ }
.JS-form_mail>.in{position:relative; padding:0;  max-width:600px; }
.JS-form_mail .input-box{margin-bottom:10px;}
.JS-form_mail h3{ font-size:14px; line-height:30px; font-weight:500;}
.JS-form_mail h3 span{font-weight:normal; font-size:12px; display:inline-block; margin-left:10px;}
.JS-form_mail input.input{border:1px solid #ddd; width:100%; height:34px; line-height:34px; padding:10px;}
.JS-form_mail input.input:focus{border-color:#333;}
.JS-form_mail input.send-this{display:block; border:0;   width:100%; margin:20px 0 0 0; line-height:40px; cursor:pointer;}
.JS-form_mail input[type="number"]::-webkit-outer-spin-button,
.JS-form_mail input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
.JS-form_mail textarea{min-height:50px; max-height:300px; width:100%; padding:10px;}
.JS-form_mail .infoArea{margin-top:30px; max-width:700px; margin:30px auto;  }
.JS-form_mail .infoArea h2{font-size:15px;}
.JS-form_mail .infoArea .box{overflow-y:auto; max-height:80px; font-size:13px; background:#f4f4f4; margin-bottom:20px; padding:10px; border:1px solid #ddd;}



@media all and (min-width:768px){

  .JS-form_mail .input-box{margin-bottom:15px;}
  .JS-form_mail h3{font-size:17px;}
  .JS-form_mail h3 span{font-size:15px; margin-left:15px;}
  .JS-form_mail input.send-this{width:50%;}

}




#contents>.register{max-width:600px; margin:30px auto;}
#contents #fregister p{background:#333; font-weight:normal;}
#contents #fregister p:before{display:none;}
#contents .register .btn_confirm{}
#contents .register .btn_confirm a,
#contents .register .btn_confirm button{box-sizing:border-box;}








/* board - galley */
#sub-cont.board-sub #gall_ul{display:flex; justify-content:space-between; flex-wrap:wrap;}
#sub-cont.board-sub #gall_ul>li{width:calc(100% / 1 - 5px) }

#sub-cont.board-sub #bo_gall .btn_bo_user>li{width:auto; min-width:40px; }
#sub-cont.board-sub #bo_gall .btn_bo_user .btn_submit{display:inline-block; height:35px; line-height:35px; padding:0 20px; border-radius:3px; transition:0.3s;}
#sub-cont.board-sub #bo_gall .btn_bo_user .btn_submit:hover{background:#666;}
#sub-cont.board-sub #bo_gall .gall_text_href a{}
#sub-cont.board-sub #bo_gall .gall_text_href a .title{font-weight:bold; font-size:17px;}
#sub-cont.board-sub #bo_gall .gall_text_href a .numb{color:#999; font-size:14px;}
#sub-cont.board-sub #bo_gall .gall_text_href a .exp{white-space:pre-line; margin-top:20px; font-size:13px; color:#666;}


@media all and (min-width:768px){
  #sub-cont.board-sub #gall_ul{justify-content:flex-start; margin:0 0 0 -20px; }
  #sub-cont.board-sub #gall_ul>li{width:calc(100% / 2 - 20px);  margin-left:20px; }
  #sub-cont.board-sub #gall_ul>li .gall_con{display:flex;}
  #sub-cont.board-sub #gall_ul>li .gall_con .gall_img{width:50%;}
  #sub-cont.board-sub #gall_ul>li .gall_con .gall_text_href{width:50%; box-sizing:border-box; padding-left:5%; margin:0;}

  #sub-cont.board-sub #bo_gall .gall_text_href a .title{ font-size:22px;}
  #sub-cont.board-sub #bo_gall .gall_text_href a .numb{font-size:16px;}
  #sub-cont.board-sub #bo_gall .gall_text_href a .exp{ margin-top:30px; font-size:14px;}

}




#sub-cont.board-sub.prd.read{}
#sub-cont.board-sub.prd.read .swiper{ overflow:visible; margin-bottom:50px;}
#sub-cont.board-sub.prd.read .swiper-container{position:static; overflow:hidden;}
#sub-cont.board-sub.prd.read .swiper-button-prev{left:0;    }
#sub-cont.board-sub.prd.read .swiper-button-next{right:0;    }
#sub-cont.board-sub.prd.read .swiper-button-prev:after,
#sub-cont.board-sub.prd.read .swiper-button-next:after{font-size:15px; color:#333;}
#sub-cont.board-sub.prd.read .swiper-pagination-progressbar{height:2px; width:30%; left:3%; top:auto; bottom:3%;}
#sub-cont.board-sub.prd.read .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#000;}
#sub-cont.board-sub.prd.read .swiper .item{}
#sub-cont.board-sub.prd.read .swiper .item img{width:100%;}

#sub-cont.board-sub.prd.read .detailTop{}
#sub-cont.board-sub.prd.read .detailTop .imgArea{}
#sub-cont.board-sub.prd.read .detailTop .infoArea{}

#sub-cont.board-sub.prd.read  ul{margin:0; padding:0;}
#sub-cont.board-sub.prd.read .wr-extra{margin-bottom:30px;}
#sub-cont.board-sub.prd.read .wr-extra li{}
#sub-cont.board-sub.prd.read .wr-extra li + li{border-top:1px solid #ddd; padding-top:10px; margin-top:10px;}
#sub-cont.board-sub.prd.read .wr-extra li p{}
#sub-cont.board-sub.prd.read .wr-extra li:not(.title){display:flex;}
#sub-cont.board-sub.prd.read .wr-extra li b{width:90px;}
#sub-cont.board-sub.prd.read .wr-extra li:not(.title) p{width:calc(100% - 90px); box-sizing:border-box; padding-left:10px; white-space:pre-line;}
#sub-cont.board-sub.prd.read .wr-extra .title{margin-bottom:30px;}
#sub-cont.board-sub.prd.read .wr-extra .title h2{margin-bottom:5px;}
#sub-cont.board-sub.prd.read .wr-extra .title p{color:#999;}

#sub-cont.board-sub.prd.read .detailTop .infoArea .btnSubmit{padding:10px; }
#sub-cont.board-sub.prd.read .detailTop .infoArea .btnSubmit i{margin-left:10px;}


@media all and (min-width:768px){

  #sub-cont.board-sub.prd.read .swiper{position:sticky; top:100px;}
  #sub-cont.board-sub.prd.read .swiper-button-prev{}
  #sub-cont.board-sub.prd.read .swiper-button-next{;}
  #sub-cont.board-sub.prd.read .swiper-button-prev:after,
  #sub-cont.board-sub.prd.read .swiper-button-next:after{font-size:20px;}
  #sub-cont.board-sub.prd.read .swiper-pagination-progressbar{bottom:-3%;}

  #sub-cont.board-sub.prd.read .detailTop{}
  #sub-cont.board-sub.prd.read .detailTop>.in{display:flex;}
  #sub-cont.board-sub.prd.read .detailTop .imgArea{ width:50%;}
  #sub-cont.board-sub.prd.read .detailTop .infoArea{ width:50%; box-sizing:border-box; padding-left:5%;}
  #sub-cont.board-sub.prd.read .detailTop .infoArea>.in{position:sticky; top:100px;}

  #sub-cont.board-sub.prd.read .wr-extra{margin-bottom:50px;}
  #sub-cont.board-sub.prd.read .wr-extra li{font-size:16px; line-height:1.6; }
  #sub-cont.board-sub.prd.read .wr-extra li + li{  padding-top:25px; margin-top:25px;}
  #sub-cont.board-sub.prd.read .wr-extra li b{width:150px;}
  #sub-cont.board-sub.prd.read .wr-extra li:not(.title) p{width:calc(100% - 150px);}
  #sub-cont.board-sub.prd.read .wr-extra .title{margin-bottom:50px;}
  #sub-cont.board-sub.prd.read .wr-extra .title h2{font-size:30px; margin-bottom:10px;}
  #sub-cont.board-sub.prd.read .wr-extra .title p{font-size:19px;}

  #sub-cont.board-sub.prd.read .detailTop .infoArea .btnSubmit{padding:15px; font-size:18px;}



}












  /* read */
  #sub-cont.board-sub #bo_v_title{margin-bottom:10px;}
  #sub-cont.board-sub #bo_v_title .bo_v_tit{font-size:20px;}
  #sub-cont.board-sub #bo_v_info{border:0;}
  #sub-cont.board-sub #bo_v_info .profile_info{margin:0 0 0 0; float:none; display:block;}
  #sub-cont.board-sub #bo_v_info .profile_info_ct{float:none;}
  #sub-cont.board-sub #bo_v_info .profile_info_ct i{display:none;}
  #sub-cont.board-sub #bo_v_info ul{display:}
  #sub-cont.board-sub #bo_v_info ul li{position:relative; margin-right:20px; }
  #sub-cont.board-sub #bo_v_info ul li + li:after{position:absolute; top:50%; left:-10px; width:1px; height:10px; transform:translateY(-50%); background:#ddd; content:"";}
  #sub-cont.board-sub #bo_v_info ul li strong{margin:0;}
  #sub-cont.board-sub #bo_v_info ul li span:not(.sv_member){color:#333; font-weight:500; margin-right:10px; }
  #sub-cont.board-sub #bo_v_info ul li .sv_member,
  #sub-cont.board-sub #bo_v_info ul li b{font-weight:normal; color:#666; display:inline-block;  }
  #sub-cont.board-sub #bo_v_atc{padding-top:0;}
  #sub-cont.board-sub #bo_v_con{margin:10px 0; font-size:14px; padding:30px 0; border-top:2px solid #333; border-bottom:2px solid #333;}
  #sub-cont.board-sub #bo_v_img{margin-top:50px; }

  @media all and (min-width:768px){

      /* list */
      #sub-cont.board-sub #bo_list table th,
      #sub-cont.board-sub #bo_list table td{font-size:15px;}

      /* read */
      #sub-cont.board-sub #bo_v_title{text-align:center;}
      #sub-cont.board-sub #bo_v_title .bo_v_tit{font-size:27px;}
      #sub-cont.board-sub #bo_v_info{text-align:center;}
      #sub-cont.board-sub #bo_v_info ul li{margin:0 20px;}
      #sub-cont.board-sub #bo_v_info ul li + li:after{left:-20px;}
      #sub-cont.board-sub #bo_v_con{font-size:16px; padding:50px 0; }

  }





.write-box{box-sizing:border-box; background:#f4f4f4;  padding:10px; border-radius:10px;}
.write-box ul{}
.write-box ul li{}
.write-box ul li + li{margin-top:30px;}
.write-box ul li .box{}
.write-box ul li h2{font-size:14px; font-weight:500;}
.write-box ul li .box>div{}
.write-box ul li .box input[type="text"]{width:100%; _background:#f4f4f4; _border-radius:10px; border:1px solid #fff; width:100%;}
.write-box ul li .box textarea{width:100%; _background:#f4f4f4; _border-radius:10px; border:1px solid #fff; min-height:200px;}
.write-box ul li .box input[type="text"]:focus,
.write-box ul li .box textarea:focus{border-color:#aaa;}


@media all and (min-width:768px){

  .write-box{padding:50px; border-radius:30px;}
  .write-box ul li + li{margin-top:50px;}
  .write-box ul li h2{font-size:20px;}
  .write-box ul li.grid4{display:flex; justify-content:space-between;}
  .write-box ul li.grid4 .box{width:calc(100% / 4 - 10px);}

  .write-box ul li .box input{padding:0 15px;}
  .write-box ul li .box textarea{padding:15px;}
  .write-box ul li.file{display:flex; align-items:center;}
  .write-box ul li.file + .file{margin-top:5px;}
  .write-box ul li.file h2{width:150px;}
  .write-box ul li.file>div{width:calc(100% - 150px); margin:0 !important;}


}










/* en */
html[lang="en"]{}
html[lang="en"] body{font-family:'Roboto', 'Pretendard', Nanum Barun Gothic, Verdana,Dotum,AppleGothic, malgun gothic, AppleGothicNeoSD, Microsoft NeoGothic, Droid sans, sans-serif;}
html[lang="en"] iframe[src*="google"]{width:100%;}
html[lang="en"] #header .gnb .depth02Area ul li a{font-size:14px;}
html[lang="en"] #header .gnb .depth02Area ul li a:hover{  }
html[lang="en"] #header .gnb .depth02Area ul li a:after{ }
html[lang="en"] #aside .snb ul li.d1 .toggle{left:auto; right:20px; margin-left:0;}
html[lang="en"] #main-ico ul{display:flex; flex-wrap:wrap;}
html[lang="en"] #main-ico ul li{line-height:1.2;}

@media all and (min-width:768px){
  #aside .snb ul li>a{font-size:35px;}
}


@media all and (min-width:900px){
  html[lang="en"] #header.cate-on{height: 470px;}
  html[lang="en"] #header .gnb ul li.d1{margin:0 5px;}
  html[lang="en"] #header .gnb ul li.d1>a{font-size:15px;}
}

@media all and (min-width:1000px){
  html[lang="en"] #header .gnb ul li.d1{ margin:0 10px; }
  html[lang="en"] #header .gnb ul li.d1>a{font-size:16px;}
  html[lang="en"] #header .gnb ul li.d1.lang{right:80px;}
  html[lang="en"] #header .gnb ul li.d1[cate_d1="03"]{}
  html[lang="en"] #header .gnb ul li.d1[cate_d1="02"] .depth02Area{width:180px; margin-left:-90px;}
  html[lang="en"] #header .gnb ul li.d1[cate_d1="03"] .depth02Area{width:200px; margin-left:-100px;}
}

@media all and (min-width:1200px){
  html[lang="en"] #header .gnb ul li.d1{ margin:0 30px; }
}







/* cn */
html[lang="cn"]{}
html[lang="cn"] body{font-family:'Montserrat', 'Noto Sans TC', Nanum Barun Gothic, Verdana,Dotum,AppleGothic, malgun gothic, AppleGothicNeoSD, Microsoft NeoGothic, Droid sans, sans-serif;}
html[lang="cn"] iframe[src*="google"]{width:100%;}

@media all and (min-width:768px){
  html[lang="cn"] #sub-cont.about-01 .in2{padding-left:430px;}
}



































/**/