@charset "utf-8";

#sub {padding-top:100px;}
/* sub-visual */
.sub-visual {height:460px; margin-bottom:110px; background-repeat:no-repeat; background-size:cover; background-position:center center; display:flex; align-items:center; justify-content:center; text-align:center;}
.sub-visual01 {background-image:url('../img/sub/sub-visual01.jpg');}
.sub-visual02 {background-image:url('../img/sub/sub-visual02.jpg');}
.sub-visual03 {background-image:url('../img/sub/sub-visual03.jpg');}
.sub-visual04 {background-image:url('../img/sub/sub-visual04.jpg');}
.sub-visual h2 {font-size:66px; line-height:1.2em; color:#fff; font-weight:600;}
/* sub depth */
.sub-wrap {display:flex; justify-content:space-between; margin-bottom:150px;}
.sub-menu {width:100%; max-width:230px; position:relative;}
.lnb {position:sticky; top:140px;}
.lnb .lnb-title {background:url('../img/sub/lnb-title.jpg') center center no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center; padding:10px; text-align:center; border-radius:30px 0 30px 0; overflow:hidden; margin-bottom:10px; height:145px;}
.lnb .lnb-title p {font-size:26px; line-height:1.2em; color:#fff; font-weight:600;}
.lnb > ul > li {margin-bottom:10px;}
.lnb > ul > li:last-child {margin-bottom:0;}
.lnb > ul > li > a {height:60px; display:flex; align-items:center; padding:10px 25px; font-size:18px; line-height:1.5em; color:#333; border-radius:0 16px 16px 0; background-color:#f7f7f7; background-repeat:no-repeat; background-size:cover; background-position:center center; position:relative; transition:all 0.4s;}
.lnb > ul > li.active > a {background-image:url('../img/sub/lnb-on.jpg'); color:#fff;}
.lnb > ul > li > a:after {content:''; width:10px; height:10px; background-repeat:no-repeat; background-size:cover; background-position:center center; position:absolute; top:50%; margin-top:-5px; right:25px; transition:all 0.4s; background-image:url('../img/sub/lnb-arrow.png');}
.lnb > ul > li.active > a:after {background-image:url('../img/sub/lnb-arrow-on.png');}
.lnb .depth {padding:20px 20px 6px;}
.lnb .depth li a {font-size:16px; line-height:30px; font-weight:500; color:#888; position:relative; padding-left:10px; display:inline-block;}
.lnb .depth li.active a {color:#0258a8;}
.lnb .depth li a:before {content:''; width:4px; height:1px; background:#888; position:absolute; top:50%; margin-top:-1px; left:1px;}
.lnb .depth li.active a:before {background:#0258a8;}
.lnb .depth li a:after {content:''; width:100%; height:1px; background:#0258a8; position:absolute;	 bottom:6px; left:0; opacity:0;}
.lnb .depth li.active a:after {opacity:1;}
.sub-cont {width:100%; max-width:1110px; padding-left:20px;}
.sub-cont .cont-title {padding-bottom:26px; margin-bottom:76px; border-bottom:1px solid #ddd; display:flex; justify-content:space-between; align-items:flex-end;}
.sub-cont .cont-title h3 {font-size:40px; line-height:1.1em; font-weight:600; color:#000;}
.sub-cont .cont-title ul {display:flex; align-items:center;}
.sub-cont .cont-title ul img {display:block;}
.sub-cont .cont-title ul li {padding-right:30px; position:relative; font-size:16px; line-height:1.6em; color:#666;}
.sub-cont .cont-title ul li:last-child {padding-right:0;}
.sub-cont .cont-title ul li:before,
.sub-cont .cont-title ul li:after {content:''; width:4px; height:4px; position:absolute; top:50%; margin-top:-2px; border-radius:50%;}
.sub-cont .cont-title ul li:before {background:#c6c6c6; right:16px;}
.sub-cont .cont-title ul li:after {background:#aeadad; right:10px;}
.sub-cont .cont-title ul li:last-child:before,
.sub-cont .cont-title ul li:last-child:after {display:none;}
/* sub 01 01 */
.sub-wrap0101 {margin-bottom:0;}
.history {position:relative; overflow:hidden;}
.history .img-box {margin-bottom:60px; background:url('../img/sub/history.jpg') center center no-repeat; height:270px; color:#fff; border-radius:10px; overflow:hidden; display:flex; align-items:center; padding:20px 70px;}
.history .img-box p {font-size:32px; line-height:1.4em; font-weight:400;}
.history .img-box p strong {font-weight:700;}
.history .col {display:flex; padding-bottom:56px; position:relative; }
.history .col:before {content:''; width:1px; height:100%; position:absolute; top:25px; left:470px; background:#ddd;}
.history .col:last-child {padding-bottom:170px;}
.history .year {width:100%; max-width:470px; font-size:46px; font-family:'Poppins'; font-weight:600; color:#013a70; line-height:1.2em; padding:0 130px; text-align:right; position:relative;}
.history .year:before {content:''; width:100px; top:50%; height:1px; border-bottom:1px dashed #ddd; position:absolute; right:9px;}
.history .year:after {content:''; width:18px; height:18px; background:url('../img/sub/history-year.png') no-repeat; position:absolute; top:19px; right:-9px;}
.history .txt-box {width:1%; flex:1 1 auto; padding-left:50px; padding-top:14px;}
.history .txt-box .txt {display:flex; margin-bottom:12px;}
.history .txt-box .txt:last-child {margin-bottom:0;}
.history .txt-box .month {width:100%; max-width:50px; font-size:16px; line-height:1.7em; color:#333; font-weight:500;}
.history .txt-box ul {width:1%; flex:1 1 auto;}
.history .txt-box ul li {font-size:18px; line-height:1.6em; color:#666;}
/* sub 01 02 */
.directions .maps {margin-bottom:30px; border-radius:10px; overflow:hidden;}
.directions .root_daum_roughmap {width:100% !important; height:360px !important;}
.directions .root_daum_roughmap .wrap_map {height:360px !important;}
.directions .root_daum_roughmap .map_border {border:0 !important; width:0 !important; height:0 !important;}
.directions .txt-box {position:relative; padding-right:360px;}
.directions .txt-box .btns {position:absolute; top:0; right:0;}
.directions .txt-box .btns ul {display:flex; margin:0 -4px;}
.directions .txt-box .btns ul li {padding:0 4px;}
.directions .txt-box .btns ul li a {width:160px; line-height:48px; border:1px solid #013a70; border-radius:16px 0 16px 0; font-size:16px; transition:all 0.4s; position:relative; padding:0 30px;}
.directions .txt-box .btns ul li:first-child a {color:#013a70; background:#fff;}
.directions .txt-box .btns ul li:last-child a {color:#fff; background:#013a70;}
.directions .txt-box .btns ul li:first-child a:hover {color:#fff; background:#013a70;}
.directions .txt-box .btns ul li:last-child a:hover {color:#013a70; background:#fff;}
.directions .txt-box .btns ul li a:after {content:''; width:10px; height:10px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:30px; transition:all 0.4s;}
.directions .txt-box .btns ul li:first-child a:after {background-image:url('../img/sub/directions-arrow-c.png');}
.directions .txt-box .btns ul li:last-child a:after {background-image:url('../img/sub/directions-arrow-w.png');}
.directions .txt-box .btns ul li:first-child a:hover:after {background-image:url('../img/sub/directions-arrow-w.png');}
.directions .txt-box .btns ul li:last-child a:hover:after {background-image:url('../img/sub/directions-arrow-c.png');}
.directions .txt-box dl {display:flex; margin-bottom:10px; font-size:18px; line-height:1.8em;}
.directions .txt-box dl:last-child {margin-bottom:0;}
.directions .txt-box dt {width:100%; max-width:50px; font-weight:600; color:#333;}
.directions .txt-box dd {width:1%; flex:1 1 auto; color:#666;}
/* sub 02 */
.product .cnt {margin-bottom:86px;}
.product .cnt:last-child {margin-bottom:0;}
.product .tit-box {margin-bottom:36px;;}
.product .tit-box h4 {font-size:36px; line-height:1.1em; font-weight:600; color:#000;}
.product .tit-box h4 span {font-size:26px; line-height:1.4em; color:#333; font-weight:500;}
.product .tit-box p {font-size:18px; line-height:1.8em; color:#666; margin-top:12px;}
.product .col {display:flex; margin:0 -15px 86px;}
.product .col .row {width:100%; padding:0 15px;}
.product .img {border:1px solid #ddd; border-radius:10px; overflow:hidden;}
.product .tt {margin-top:4px; text-align:center; display:flex; align-items:center; border-radius:10px; justify-content:center; padding:10px 10px; background:#013a70;}
.product .tt p {font-size:18px; line-height:1.6em; color:#fff;}
.doc-tit {margin-bottom:36px;}
.doc-tit h5 {font-size:32px; line-height:1.15em; color:#333; font-weight:500; position:relative; padding-left:30px;}
.doc-tit h5:before {content:''; width:14px; height:14px; background:url('../img/sub/doc-tit.png') no-repeat; position:absolute; top:10px; left:0;}
.product  .img-box {margin-bottom:86px;}
.product  .img-box .img {margin-bottom:30px;}
.product .table-box {margin-bottom:86px;}
.product .table {display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.product .table-txt {font-size:16px; font-weight:500; line-height:1.6em; color:#888; text-align:right; padding-right:10px; margin-bottom:-26px;}
.product table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
.product table thead {background:#013a70;}
.product table thead th {font-size:18px; line-height:1.6em; color:#fff; font-weight:500; padding:12px 5px; overflow:hidden; border-right:1px solid #ddd;}
.product table thead th:last-child {border-right:0;}
.product table thead tr:first-child th:first-child {border-top-left-radius:10px;}
.product table thead tr:first-child th:last-child {border-top-right-radius:10px;}
.product table thead th.bdt {border-top:1px solid #ddd;}
.product table thead th.bdblr {border-bottom-left-radius:10px;}
.product table thead th.bdbrr {border-bottom-right-radius:10px;}
.product table tbody td {font-size:16px; line-height:1.8em; color:#666; padding:13px 5px; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.product table tbody td:last-child {border-right:0;}
.product table tbody td.bdr {border-right:1px solid #ddd;}
.product .table-tt {font-size:16px; line-height:1.6em; color:#888; font-weight:500; margin-top:14px;}
.product .ol-box {margin-bottom:86px;}
.product .ol-box ol {border-top:1px solid #013a70;}
.product .ol-box ol li {font-size:18px; line-height:1.8em; padding:15px 30px; color:#666; border-bottom:1px solid #ddd;}
/* sub 02 02 */
.pipe .origin {margin-bottom:10px; position:relative;}
.pipe .origin .item {position:relative; text-align:center; border-radius:10px; overflow:hidden;}
.pipe .origin .item img {width:100%; border:1px solid #ddd; border-radius:10px; overflow:hidden;}
.pipe .origin .item p {width:100%; height:54px; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,0.5); width:100%; padding:5px; position:absolute; left:0; bottom:0;}
.pipe .slick-arrow {width:60px; height:60px; background-color:#013a70; position:absolute; top:50%; margin-top:-30px; background-repeat:no-repeat; background-position:center center; background-size:contain; cursor:pointer; font-size:0; border:0; z-index:11; transition:all 0.4s;}
.pipe .slick-prev {background-image:url('../img/sub/pipe-prev.png'); border-radius:0 10px 10px 0; left:0;}
.pipe .slick-next {background-image:url('../img/sub/pipe-next.png'); border-radius:10px 0 0 10px; right:0;}
.pipe .slick-prev:hover {border-radius:0 15px 15px 0;}
.pipe .slick-next:hover  {border-radius:15px 0 0 15px;}
.pipe .thumb .items {margin:0 -5px;}
.pipe .thumb .item {padding:0 5px;}
.pipe .thumb .item img {border:1px solid #ddd; border-radius:5px; overflow:hidden;}