/*
**
**      c o m m o n 
*/
.btn-wrap{margin: 50px 0;}
.main-title{font-size: 2.2em; line-height: 1em; color:#000; }
.row{ margin: 4em 0;}
.row .col{ width: 50%;}
.sub-bannner{position: relative; display: table; width: 100%; height: 27.5vw; text-align: center; margin: auto;}
.bannertxt { position: relative; display: table-cell; vertical-align: middle; z-index: 10; position:absolute; top:50%; left:0%; width:100%;}
.bannertxt:after{position: absolute; top:50%; left:50%; width: 50%; height: 0px; background-color:#0074b6; content: ''; z-index: -1;}
.bannertxt p{ display: inline-block; background-color:#0074b6;color:#fff; font-size: 1.5em; line-height: 1.5em; padding: 1% 2.2%; font-weight: 400;}


/*
**
**      p r o d u c t s
*/
#sub_nav{ position: relative; width: 100%; background: #f4f4f4; color: #000; border-bottom: 1px solid #ababab; text-align: center; height: 88px; line-height: 88px; padding: 0 3%;}
#sub_nav .breadcrum{ display: inline-block; margin: auto; margin-left: -60px;}
#sub_nav .breadcrum li{position: relative; float: left; margin-right: 15px;}
#sub_nav .breadcrum li:after{content: '>';margin: 0 10px;}
#sub_nav .breadcrum li:last-child{margin-right: 0;}
#sub_nav .breadcrum li:last-child:after{display: none;}
#sub_nav #btn_back{float: left; padding: 0 1.5%; min-width: 85px;}

#spec {margin: 90px 0; padding-top: ;}
#spec ._container_big > div {float: left; width: 50%; }
#spec .img-wrap{padding: 0 6%;}
#spec .spec-cont{margin-bottom: 30px;padding: 20px 20px; }
#spec .main-title { padding-bottom: 4%; border-bottom: 1px solid #ddd;}
#spec .btn-wrap{text-align: left; }

#prd-banner .col{ float: left; width:33.3333%; overflow: hidden;}
._half:after{display: block; content: ''; clear: both;}
._half > div{float: left; width:50%; padding: 3%; margin: auto; text-align: center;}
._half img{ max-width: 100%;}
.tab_cont.diagram ._half{margin-top: 10px;}
.tab_cont h1{margin: 0; }
.prd-list{ border-top: 1px solid #000; border-bottom: 1px solid #000; margin-bottom: 30px;}
.prd-list li{border-bottom: 1px solid #ddd; display: table; width:100%;}
.prd-list li:last-child{border-bottom: 0;}
.prd-list li > div{display: table-cell; float: left; line-height: 2.5em;}
.prd-list li .title{width:40%;text-align: left;}
.prd-list li .left{width:40%; text-align: center; }
.prd-list li .right{width:20%; text-align: right;}
.standard h1, .standard h2{text-align: left;}
.standard._half > div{padding: 0 3%;}
select option{padding: 10px}

/* magnific popup (product 팝업) */
.mfp-content{max-width: 600px; width: 100%; margin: 30px auto; padding: 2%;}
.mfp-close{ top:8px !important; right:10px !important; background: url('../img/common/btn_close-white.png') 50% 50% no-repeat !important; background-size: cover; opacity: 1 !important; text-indent: -9999px;}
#popupform{ position: relative; display: block; background: #fff; max-width: 600px; width: 100%; margin: auto; border-radius: 8px; -webkit-box-shadow: 0 0 6px 1px #00000038; -moz-box-shadow: 0 0 6px 1px #00000038;
  box-shadow: 0 0 6px 1px #00000038;}
#popupform .form{padding: 4%; padding-top: 0;}
#popupform .title{ height: 55px; line-height: 55px; background-color: #0074b6; color: #fff; text-align: center; font-size: 24px; border-radius: 8px 8px 0 0;}
#popupform .sub-tit{ height: 60px; line-height: 60px; color: #000; border-bottom: 1px solid #ddd; font-size: 18px; text-align: center; margin-bottom: 15px;}
#popupform form > div:not(.btn-wrap){margin-bottom: 5px;}
#popupform form label{line-height: 1.8em; color: #0074b6;}
#popupform .textbox > div{float: left; width: 48%;}
#popupform .textbox > div:first-child{margin-right: 4%;}
#popupform .number > div{width: 100%;}
#popupform .number select#number{width: 30%; margin-right: 1%;}
#popupform .number input{width: 100%;}
#popupform .btn-wrap{margin: 30px 0;}
#popupform .ft-dist .top-link{padding: 0 10%;margin: 1.5em 0;}
#popupform .ft-dist .top-link li{position: relative; float: left; width: 50%; text-align: center; }
#popupform .ft-dist .top-link li:after{position: absolute; top:5px; right: 10px; width: 1px; height: 16px; background-color: #bbb; content: '';}
#popupform .ft-dist .top-link li:last-child:after{display: none;}
#popupform .ft-dist .top-link a{color: #0074b6;}
#popupform .ft-dist{text-align: center;}
#popupform .ft-dist p{margin: 1em 0; font-size: 13px; padding: 0 5%; line-height: 1.4;}
#popupform .btn-border{color: #000; border-color: #000; width: 100%;}
#popupform .btn-border:hover{background-color: #000; color: #fff;}
#popupform .popup-logo{width: 100px;}



/*
**
**      product 전체 리스트 페이지
*/
.scrollerWrap{ position: relative; width: 100%; margin: 1em auto;overflow: hidden; border: 1px solid #eee;}
.iScrollIndicator{background: rgba(0,0,0,0.3) !important;}
#scroller{ width: 100%; margin: auto; transform: translateZ(0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow: hidden;}
#scroller ul{ width: 100%; height: 100%; border: none !important; background: #fff; }
#scroller ul:after{display: block; content: ''; clear: both;}
#scroller li{ float: left; display: inline-block; width:142px; height: 60px; line-height: 60px; text-align: center;  padding: 0 1em !important; border-bottom: none; border-right: 1px solid #ddd; cursor: pointer; font-size:14px; font-weight:500}
.sub-nav li.on{border-bottom: 3px solid #0074b6; background:#0074b6; color:#fff }

#prd-list-wrap{margin-bottom: 3em;} 
#prd-list-wrap [class^="prd-list"]{ display: block; padding: 1em 0; border-bottom: 1px solid #ddd;} 
#prd-list-wrap [class^="prd-list"]:after{display: block; content: ''; clear: both;} 
#prd-list-wrap [class^="prd-list"]:last-child{ border-bottom: 0;} 
#prd-list-wrap [class^="prd-list"] > div{float: left; } 
#prd-list-wrap .line-title{ position: relative; width: 20%; min-height: ; text-align: left; font-size: 1.1em; margin-top: 1.7em; padding-right: 15px; color: #000; font-weight: 100;} 
#prd-list-wrap .line-title:after{position: absolute; top: 0; right: -10px; width: 3px; height: 3em; display: block; background-color: #ddd; content: '';}

#prd-list-wrap .container{width: 80%; padding-left: 1%;}

#prd-list-wrap ul:after{display: block; content: ''; clear: both;}
#prd-list-wrap .prd-item{float: left; width: 25%; padding: 2em; text-align: center;}
#prd-list-wrap .prd-item a.prd-spec{display: block; }
#prd-list-wrap .prd-item .prd-spec._arrow_right:after{display: none;}
#prd-list-wrap .prd-item .prd-title{font-weight: 600; font-size: 1.1em; margin-bottom: 5px;}
#prd-list-wrap .prd-item .prd-spec:hover .prd-title{text-decoration: underline;}
#prd-list-wrap .prd-item .prd-img{ position: relative; padding: 10px; margin-bottom: 5px; }
#prd-list-wrap .prd-item .prd-img:before{position: absolute; top:0; left:0; display: block; width:100%; height: 100%; background:#000; opacity: 0; content: '';}
#prd-list-wrap .prd-item .prd-img:after{position: absolute; opacity: 0; top:50%; left:50%; margin-left: -14px; margin-top: -14px; display: block; width:28px; height: 28px; background:url(../img/common/icon-viewmore.png) 50% 50% no-repeat; background-size: 100%; content: ''; }
#prd-list-wrap .prd-item:hover .prd-img:before{opacity:.4; transition: visibility 0s linear .1s, opacity .1s ease-out;}
#prd-list-wrap .prd-item:hover .prd-img:after{opacity: 1; transition: visibility 0s linear .1s, opacity .1s ease-out;}
#prd-list-wrap .prd-item .prd-img img{display: block; max-width:320px; margin: auto; text-align: center;}
#prd-list-wrap .prd-item .prd-spec-back{display: block; width:100%; }

.fadeIn{animation: FromUpFadeIn 0.3s 0.2s 1 ease-in-out; transition: all .2s ease;}
@keyframes FromUpFadeIn {
  0% {
    opacity:  0;
    transform:translateY(-15px);
  }
  100% {
    opacity: 1;
	transform:translateY(0);
  }
}


/*
**
**      location & contact us
*/

.loc-footer{ font-size: .8725em; color: #888; padding: 5em 2em; margin: 0 !important; background: #eee;}
.loc-footer a{color: #888;}
.site-map{float: left; width: 55%;}
.site-map ul{float: left; display: inline-block; margin-right: 50px;}
.site-map ul.more li{margin-bottom: .5em;}
.site-map ul.more li>a, .site-map li.title a{font-size: 1rem; color: #000; font-weight: 600;}
.site-map li{line-height: 1.7em; }
.loc-info{float: left; width: 45%;}
.loc-info h4{color: #333; font-size: 1.25em; margin: 0 auto .75em auto;}
.loc-info p{color: #666;}
.loc-bottom > div{display: inline-block;}
.location .social{width: 35%; text-align: left; vertical-align: middle;}
.location .social a{display: inline-block; opacity: .3; transition: opacity .3s ease,transform .3s ease; padding: 10px; font-size: 0;}
.location .social a:active{opacity:.7;transform:scale(1.25)}
.location .social a img{display:inline-block;width:50px;height:auto;margin:0;padding:0}
.location .copyright{float: right; margin-top: 1.5em;}



/***서브페이지 탭***/
.jkw-sub .sub_tab { overflow: hidden; width: 800px; max-width: 100%; margin: 0 auto 70px auto; }

.jkw-sub .sub_tab li { float: left; border: 1px solid #dcdcdc; height: 70px; line-height: 70px; margin-left: -1px; }

.jkw-sub .sub_tab li:first-child { margin-left: 0; }
/*//*/
.jkw-sub .sub_tab li.active { border: 1px solid #0074b6; position: relative; z-index: 1; }

.jkw-sub .sub_tab li.active a { color: #0074b6; font-weight: bold; }

.jkw-sub .sub_tab li a { font-size: 18px; color: #666; text-align: center; display: block; line-height:70px;}

.jkw-sub .sub_tab.item1 li { width: 100%; }

.jkw-sub .sub_tab.item2 li { width: 50%; }

.jkw-sub .sub_tab.item3 { width: 1200px; }

.jkw-sub .sub_tab.item3 li { width: calc(100% / 3); }

.jkw-sub .sub_tab.item4 { width: 100%; }

.jkw-sub .sub_tab.item4 li { width: 16.67%; }

.jkw-sub .sub_tab.item5 { width: 100%; }

.jkw-sub .sub_tab.item5 li { width: 20%; }

.jkw-sub .sub_tab.item6 { width: 100%; }

.jkw-sub .sub_tab.item6 li { width: calc(100% / 6); }
.jkw-sub .sub_tab.item6 li:nth-child(6n+1){ margin-left: 0; }
.jkw-sub .sub_tab.item6 li:nth-child(n+7){ border-top:none; }

.jkw-sub .sub_tab.item7 { width: 100%; }

.jkw-sub .sub_tab.item7 li { width: calc(100% / 7); }

.jkw-sub .bold{color:#333;font-weight:700;}










/*
**
**      distributor
*/
#distMap{margin: 0; }
#distMap .sub-bannner{ height: 530px; background: url(/resources/img/sub/distributor/banner-dist.jpg) 50% 50% no-repeat; background-size: cover; background-attachment:fixed; text-align: center; color:#fff; vertical-align: middle; padding: 5em 0;}
#distMap .sub-bannner *{max-width: 616px; width: 100%; margin: auto;}
#distMap .text-wrap label{display: none;}
#distMap .formWrap ._container_big{box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.26)}
#distMap #map-canvas{width:100%; height: 648px; margin-top: -15em; margin-bottom: 2em;border: 1px solid #dcdcdc;}

#distWrap ._tab li{width: 16.6%; background: #f5f5f5; border-right: 1px solid #dcdcdc; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; overflow: auto; padding: 20px 15px;}
#distWrap ._tab li:first-child{border-left: 1px solid #dcdcdc;}
#distWrap ._tab li.on{background: #000; color:#fff;}
#distWrap ._tab li span{ cursor: pointer;}

#distWrap .cont-wrap{padding: 3em 0;}
#distWrap [class^="tab-cont"]{height: 0; opacity: 0; transform: translateY(-15px);}
#distWrap [class^="tab-cont"].on{height: auto; display: block; opacity: 1; transform: translateY(0); transition: all .8s ease;}

#distWrap .accordion{width: 100%; border-top: 1px solid #000;}
#distWrap li.acc{width: 100%; border-bottom: 1px solid #dcdcdc;}
#distWrap .acc-title{position: relative; text-align: center; border-bottom: 1px solid #dcdcdc; height: 4em; line-height: 4em;}
#distWrap .acc-title:after{position: absolute; top:50%; right:2em; width: 22px; height: 22px; margin-top: -11px; background: url(/resources/img/sub/distributor/icon-plus.png); background-size: 100%; content: '';}
#distWrap .acc-title span{display: block; width: 100%; cursor: pointer;}
#distWrap li.acc.on .acc-title:after{ margin-top: -1px; height: 2px; background: url(/resources/img/sub/distributor/icon-minus.png); background-size: 100%;}
#distWrap li.acc.on .acc-title span{background-color: #0074b6; color: #fff;}

#distWrap .acc-cont li.acc-dt{display: table; table-layout: fixed; width: 100%; border-bottom: 1px solid #dcdcdc;}
#distWrap .acc-cont li.acc-dt > div{ position: relative; display: table-cell; padding: 2em .5em; vertical-align: middle;}
#distWrap .acc-cont li.acc-dt .name{ width: 43%;font-weight: 600;}
#distWrap .acc-cont li.acc-dt .dealer{width: 25%;}
#distWrap .acc-cont li.acc-dt .tel{width: 25%;}
#distWrap .acc-cont li.acc-dt .email{width: 32%;}
#distWrap .acc-cont li.acc-dt > div:before{display: inline-block; margin-right: 15px; content: '';}
/*#distWrap .acc-cont li.acc-dt .dealer:before{width: 16px; height: 14px; background: url(/resources/img/sub/distributor/icon-dealer.png); background-size: 100%; }*/
#distWrap .acc-cont li.acc-dt .dealer:before{ background-size: 100%; }
#distWrap .acc-cont li.acc-dt .tel:before{width: 18px; height: 14px; background: url(/resources/img/sub/distributor/icon-tel.png); background-size: 100%; }
#distWrap .acc-cont li.acc-dt .email:before{width: 18px; height: 12px; background: url(/resources/img/sub/distributor/icon-email.png); background-size: 100%; }
#distWrap .acc-cont li.acc-dt span{ font-weight: 600;}
.m-contTab{display: none;}


/*
**
**      m e d i a q u e r y
**
*/
@media(max-width:1400px){
	#sub_nav{height: 68px; line-height: 68px;}
	/*#scroller{width:1440px;}*/
} 

@media(max-width:1024px){ /* iPad Pro */
	/*#scroller{width:1440px;}*/
	.site-map{display: none;}
	.loc-info{float:none; width: 100%; text-align: center;}
	#distMap #map-canvas{height: 548px;}
	#scroller li{height: 50px; line-height: 50px;}
}

@media(max-width:960px){
    .btn-wrap{margin: 20px 0;}
	.row{ margin: 0;}
    
    /*product*/
    #spec{margin: 40px 0;}
    .product #contact form > div > *{float: none; width: 100%}
    .product #contact form .help .required{width: 100%;}
    .product #contact form .number input{float: left; width:79%}
    .product #contact form .number select{float: left; }
    .product #contact form .btn-wrap{width: 100%;}
    .product #contact form .btn-wrap label{ width:100%; text-align: left;}

	#prd-list-wrap .prd-item{width: 50%; padding: 1.2em;}
	#prd-list-wrap .line-title{display: none;}
	#prd-list-wrap .container{width: 100%;}

	#distWrap ._tab{display: none;}
	.m-contTab {display:block;text-align:center;margin-bottom:0;}
	.m-contTab .current {height: 56px;line-height: 56px;color:#fff;background:#6d94c6 url(/resources/img/common/acc_arrow.png) 95% 26px no-repeat; font-size:18px;font-weight:400;cursor:pointer;transition:all .3s;}
	.m-contTab .current.on {background: #444 url(/resources/img/common/acc_arrow.png) 95% -9px no-repeat; }
	.m-contTab ul {display:none;background:#fafafa;}
	.m-contTab ul li {padding:.8em 0;border-top:1px solid #eee;cursor:pointer;font-weight:400}
	.m-contTab ul li:first-child {border-top:none}
	#distMap .sub-bannner{height: 430px;}

	#distWrap .acc-cont li.acc-dt{width: 100%; border-bottom: 1px solid #dcdcdc; padding:1em}
	#distWrap .acc-cont li.acc-dt > div{position: relative;display: block;width: 100% !important;height:2.2em;padding: 0;vertical-align: middle;text-align:center;line-height: initial;}
}

@media(max-width:767px){ /* iPad */
	/*#scroller{width:1340px;}*/

    .btn_close{ width: 25px; height: 25px;}
    .main-title{font-size: 1.8em;}    

    #leader{margin-top: 40px;}
    #leader ._table{margin-top: 0;}
    #leader ._tc{float: none; display: block; width:100%;}
    
    #float .float-cont{top:20px}
     
    #initiative .float_cont{position: static; color:#555; padding: 0; margin-top: 20px;}
    #initiative .float_cont .sub-title{color:#555;}
    #initiative .float_cont > *{margin-bottom: 5px;}
    
    /* company */
    #contact form .btn-wrap .btn-border{float: none; margin-top: 20px;}
	#contact .txt-left{ float: none; width:100%; margin: 15px 0;}
    #contact .txt-right{ float: none; width: 100%; padding-left:0;}
    #contact .form .txt-left > p{margin-bottom: 8px;}

    #spec .btn-wrap{text-align: center;}
    #spec ._container_big > div{width:100%; display: block;}
    #spec .img-wrap{ margin: 0 auto; text-align: center; margin-bottom: 40px;}
	._half > div{ float: none; width: 100%; padding: 8% 3%; }

    #cs{line-height: 1.7;}
    #cs .row .col .text-wrap{padding: 0;}
    
	#prd-banner .col{width: 100%;}
	.loc-footer{padding: 1em;}

	/*distributor*/
	#distMap .sub-bannner{background-attachment:initial;}
	#distMap #map-canvas{height: 348px;}
	#distWrap li.acc.on .acc-title:before{width: 22px; height: 22px; margin-top: -11px;}
	#distWrap .acc-title:after{width: 14px; height: 14px; margin-top: -7px;}
}

@media(max-width:480px){  
    /* company */
    #float .float-cont{position: static;line-height: 1.2em; margin-top: 10px;}
    #leader{margin-top: 30px;}
    #leader h1{text-align: center;}
    #leader img{float: none; display: block; text-align: center; max-width: 200px; padding-right:0; margin: 20px auto;}
    #map{height: 300px;}
    #btn_top{right:10px; bottom:10px;}
	/* product */
	#sub_nav{display: none;}
}