@charset "utf-8";

/* header */
#sub #header.active {background:#fff; border-color:transparent;}
#sub #header.active .sitelogo a {background-image:url('../img/layout/logo-b.png');}
#sub #header.active #gnb>ul>li>a {color:#000;}
#sub #header.active #gnb>ul>li:hover>a {color:#518bd3;}
#sub #header.active .sitemap-btn span {background:#000;}


/* sub-visual */
.sub-visual {height:440px; background-repeat:no-repeat; background-size:cover; background-position:center center; padding-top:100px;}
.sub-visual .title {width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:'Poppins';}
.sub-visual .title p {font-size:20px; line-height:1.6em; color:#518bd3; font-weight:600; letter-spacing:.5em; margin-bottom:18px;}
.sub-visual .title h2 {font-size:55px; line-height:1.2em; color:#fff;}
/* lnb */
#lnb {border-bottom:1px solid #ddd;}
.lnb ul {display:flex;}
.lnb ul li {width:100%;}
.lnb ul li a {display:flex; font-size:20px; line-height:1.5em; color:#666; padding:20px 10px; justify-content:center; align-items:center; text-align:center; transition:all 0.4s; font-weight:600; position:relative;}
.lnb ul li a:hover {color:#497ec0;}
.lnb ul li.active a {color:#497ec0;}

.lnb ul li a:after {content:''; width:0; height:2px; left:50%; bottom:-1px; background:#497ec0; position:absolute; transition:all 0.4s;}
.lnb ul li.active a:after {width:100%; left:0;}
.lnb ul li a:hover:after {width:100%; left:0;}
/* common */
.real-cont {padding:100px 0 160px;}

.doc-tit {padding-top:10px; margin-bottom:56px; text-align:center;}
.doc-tit h3 {font-size:50px; line-height:1.1em; color:#000;}
/* sub 01 01 */
.introduce .txt-box {margin-bottom:56px; text-align:center;}
.introduce .txt-box h4 {font-size:30px; line-height:1.1em; color:#518bd3; font-weight:600; margin-bottom:24px;}
.introduce .txt-box p {font-size:18px; line-height:1.8em; color:#666;}
.introduce .col {border-top:1px solid #518bd3; display:flex; flex-wrap:wrap;}
.introduce .col dl {width:50%; border-bottom:1px solid #ddd; display:flex;}
.introduce .col dt {width:100%; max-width:160px; font-size:18px; line-height:1.8em; background:#f0f5fc; color:#518bd3; font-weight:700; padding:14px 20px;}
.introduce .col dd {width:1%; flex:1 1 auto; font-size:18px; line-height:1.8em; color:#666; padding:14px 20px;}
/* sub 01 02 */
.history .real-cont {padding-bottom:0;}
.history .img-box {margin-bottom:96px;}
.history .col {display:flex; position:relative; padding-bottom:300px;}
.history .col:after {content:''; width:1px; height:calc(100% - 12px); background:#ddd; position:absolute; top:12px; left:660px;}
.history .year {width:100%; max-width:660px; padding:0 70px; position:relative; text-align:right;}
.history .year .tit {position:sticky; top:100px; right:0; display:inline-block;}
.history .year.active .tit {z-index:1;}
.history .year p {font-size:40px; line-height:1.2em; color:#000; font-weight:700; margin-bottom:24px;}
.history .year h4 {font-size:100px; line-height:1.1em; color:#518bd3; text-align:left;}
.history .wrap {width:1%; flex:1 1 auto; padding-left:50px;}
.history .txt-box {margin-bottom:140px; position:relative;}
.history .txt-box:before {content:''; width:9px; height:9px; background:#518bd3; border-radius:50%; position:absolute; top:10px; left:-54px; z-index:1;}
.history .txt-box .m-year {display:none;}
.history .txt-box .txt {display:flex; margin-bottom:6px;}
.history .txt-box .txt .month {width:100%; max-width:50px; font-size:18px; line-height:1.8em; color:#000; font-weight:700;}
.history .txt-box .txt p {width:1%; flex:1 1 auto; font-size:18px; line-height:1.8em; color:#666;}
/* sub 01 03 */
.directions .maps {margin-bottom:40px;}
.directions .maps .root_daum_roughmap {width:100% !important; height:450px !important;}
.directions .maps .root_daum_roughmap .wrap_map {height:450px !important;}
.directions .maps .root_daum_roughmap .map_border {border:0 !important; width:0 !important; height:0 !important;}
.directions .txt-box {position:relative; padding-right:440px;}
.directions .txt-box .btn {position:absolute; right:0; top:0;}
.directions .txt-box .btn ul {display:flex;}
.directions .txt-box .btn ul li {padding-left:10px;}
.directions .txt-box .btn ul li a {display:block; font-size:18px; width:210px; line-height:70px; padding:0 30px; background:#f3f3f3; border-radius:35px; position:relative; overflow:hidden; z-index:1;}
.directions .txt-box .btn ul li a:before {content:''; width:40px; height:40px; background:#518bd3; border-radius:50%; z-index:5; position:absolute; top:50%; margin-top:-20px; right:20px; transition:all 0.6s;}
.directions .txt-box .btn ul li a:hover:before {width:300px; height:300px; margin-top:-150px; right:-60px;}
.directions .txt-box .btn ul li a strong {font-weight:500; font-family:'Poppins'; position:relative; z-index:10; color:#666; transition:all 0.4s;}
.directions .txt-box .btn ul li a:hover strong {color:#fff;}
.directions .txt-box .btn ul li a span {width:40px; height:40px; background:#518bd3; border-radius:50%; position:absolute; top:50%; margin-top:-20px; right:20px; z-index:10;}
.directions .txt-box .btn ul li a span:before {content:''; width:12px; height:4px; background:#fff; position:absolute; top:50%; margin-top:-2px; left:50%; margin-left:-6px;}
.directions .txt-box dl {display:flex; font-size:18px; line-height:1.8em; margin-bottom:6px;}
.directions .txt-box dt {color:#518bd3; font-weight:700; width:100%; max-width:50px;}
.directions .txt-box dd {color:#666;}
/* sub 02 list */
.product .wrap {display:flex;}
.product .menu {width:100%; max-width:300px; border-top:1px solid #ddd;}
.product .cnt {width:1%; flex:1 1 auto; padding-left:60px;}
.product .menu .inner>ul>li {border-bottom:1px solid #ddd;}
.product .menu .inner>ul>li>a {font-size:18px; line-height:1.6em; color:#000; padding:16px 20px; display:flex; align-items:center; font-weight:600; background:#fff; transition:all 0.4s; position:relative;}
.product .menu .inner>ul>li.active>a {background:#518bd3; color:#fff;}
.product .menu .inner>ul>li>a:after {content:''; width:24px; height:24px; background-image:url('../img/sub/product-menu.png'); position:absolute; top:50%; right:20px; margin-top:-12px; border-radius:50%; background-color:rgba(255,255,255,0.2); background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s;}
.product .menu .inner>ul>li.active>a:after {background-image:url('../img/sub/product-menu-on.png');}
.product .menu .depth {display:none; padding:20px 30px; background:#f7f7f7;}
.product .menu .depth li {margin-bottom:6px;}
.product .menu .depth li a {font-size:18px; line-height:1.7em; color:#666;}
.product .menu .depth li.active a {color:#518bd3;}
.product .menu .depth li a:hover {color:#518bd3;}


.product .list .title {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.product .list .title h3 {font-size:40px; line-height:1.2em; color:#000; margin-bottom:40px;}
.product .list .title .search {display:flex; margin-bottom:40px;}
.product .list .title .select-box {width:100%; max-width:110px; margin-right:30px; display:flex;}
.product .list .title .select-box select {border:1px solid #ddd; padding:0 10px; height:40px; appearance:none; width:60px; background:url('../img/sub/product-select.png') center right 10px no-repeat;}
.product .list .title .select-box button {width:50px; height:40px; background:#323232; text-align:center; font-size:16px; color:#fff; border:0;}
.product .list .title .input-box {width:100%; max-width:260px; position:relative;border-bottom:2px solid #111; padding-right:40px;}
.product .list .title .input-box input { line-height:38px; font-size:16px; color:#000; border:0;}
.product .list .title .input-box input::placeholder {font-size:16px; color:#666;}
.product .list .title .input-box button {width:38px; height:38px; background:#fff url('../img/sub/product-button.png') no-repeat; background-size:20px; background-position:center center; position:absolute; top:0; right:0; border:0; z-index:1;}
.product .list .col {display:flex; flex-wrap:wrap; margin-left:-25px;}
.product .list .col .row {width:calc(20% - 25px); margin-left:25px; margin-bottom:46px;}
.product .list .inner .img-box {border:1px solid #ddd; position:relative; margin-bottom:14px;}
.product .list .inner .img-box:after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); transition:all 0.4s; position:absolute; top:0; left:0; opacity:0;}
.product .list .inner:hover .img-box:after {opacity:1;}
.product .list .inner .img-box .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden; transition:all 0.6s;}
.product .list .inner .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.product .list .inner .txt-box {text-align:center;}
.product .list .inner .txt-box h4 {font-size:18px; line-height:1.6em; color:#000; font-weight:700; transition:all 0.4s; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.product .list .inner:hover .txt-box h4 {color:#518bd3;}
.product .list .inner .txt-box p {font-size:15px; line-height:1.8em; color:#666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
/* sub 02 view */
.product .view .title {margin-bottom:46px;}
.product .view .title h3 {font-size:40px; line-height:1.2em; color:#000;}
.product .view .col {display:flex; margin-bottom:50px;}
.product .view .col .img-box {width:100%; max-width:520px;}
.product .view .col .txt-box {width:1%; flex:1 1 auto; padding-left:70px;}
.product .view .col .img-box .orgin {margin-bottom:12px;}
.product .view .col .img-box .thumb .items {margin:0 -12px;}
.product .view .col .img-box .thumb .item {padding:0 12px;}
.product .view .col .img-box .img {position:relative;}
.product .view .col .img-box .img:after {content:''; width:100%; height:100%; border:1px solid #ddd; position:absolute; top:0; left:0; transition:all 0.4s;}
.product .view .col .thumb .item.slick-current .img:after {border:2px solid #000;}
.product .view .col .img-box .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden; transition:all 0.6s;}
.product .view .col .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.product .view .col .txt-box .tit h4 {font-size:36px; line-height:1.1em; color:#000;}
.product .view .col .txt-box .txt {padding-top:26px; margin-top:32px; border-top:1px solid #ddd;}
.product .view .col .txt-box .txt h5 {font-size:24px; line-height:1.3em; color:#518bd3; margin-bottom:12px;}
.product .view .col .txt-box .txt p {font-size:18px; line-height:1.8em; color:#666;}
.product .view .tab-cnt {padding-bottom:60px; border-bottom:1px solid #ddd;}
.product .view .tab-menu {margin-bottom:40px;}
.product .view .tab-menu ul {display:flex; text-align:center;}
.product .view .tab-menu ul li {border-right:1px solid #ddd; width:25%;}
.product .view .tab-menu ul li:last-child {border-right:0;}
.product .view .tab-menu ul li a {display:block; font-size:18px; line-height:1.6em; color:#666; font-weight:600; padding:16px 10px; background:#f5f5f5; transition:all 0.4s; border:2px solid transparent; position:relative; z-index:1;}
.product .view .tab-menu ul li.active a {background:#fff; color:#518bd3; border-color:#518bd3; box-shadow:0 0 10px rgba(147,147,147,0.35); z-index:2;}
.product .view .text-box .txt {margin-bottom:56px;}
.product .view .text-box .txt p {font-size:18px; line-height:1.8em; color:#666;}
.product .view .text-box .video {width:100%; max-width:1200px; margin:0 auto;}
.product .view .text-box .video .pic {position:relative; width:100%; padding-top:56.25%;}
.product .view .text-box .video .pic iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.product .view .down {display:flex; border:1px solid #ddd; flex-wrap:wrap;}
.product .view .down .row {border-right:1px solid #ddd; width:20%; padding:60px 20px; text-align:center;}
.product .view .down .row:last-child {border-right:0;}
.product .view .down .row p {font-size:18px; line-height:1.8em; color:#666; font-weight:600; margin-bottom:16px;}
.product .view .down .row a {display:inline-block; width:130px; font-size:14px; line-height:36px; padding:0 15px; background:#333; border-radius:18px; transition:all 0.4s; text-align:left; position:relative; color:#fff; font-weight:600; font-family:'Poppins';}
.product .view .down .row a:hover {background:#518bd3;}
.product .view .down .row a:after {content:''; width:14px; height:14px; background:url('../img/sub/product-download.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-7px; right:15px;}
.product .view .related {display:flex; flex-wrap:wrap; margin-left:-25px;}
.product .view .related .row {width:calc(20% - 25px); margin-left:25px; margin-bottom:46px;}
.product .view .related .row .inner .img-box {border:1px solid #ddd; position:relative; margin-bottom:14px;}
.product .view .related .row .inner .img-box:after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); transition:all 0.4s; position:absolute; top:0; left:0; opacity:0;}
.product .view .related .row .inner:hover .img-box:after {opacity:1;}
.product .view .related .row .inner .img-box .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden; transition:all 0.6s;}
.product .view .related .row .inner .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.product .view .related .row .inner .txt-box {text-align:center;}
.product .view .related .row .inner .txt-box h4 {font-size:18px; line-height:1.6em; color:#000; font-weight:700; transition:all 0.4s; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.product .view .related .row .inner:hover .txt-box h4 {color:#518bd3;}
.product .view .related .row .inner .txt-box p {font-size:15px; line-height:1.8em; color:#666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
/* sub 05 01 */
.service .title {margin-bottom:60px;}
.service .title .tit {text-align:center; margin-bottom:46px;}
.service .title .tit h3 {font-size:30px; line-height:1.3em; color:#518bd3; font-weight:600; margin-bottom:24px;}
.service .title .tit p {font-size:18px; line-height:1.8em; color:#555;}
.service .title .txt {background:#f0f5fc; padding:24px 20px; text-align:center;}
.service .title .txt ul {display:inline-block; text-align:left;}
.service .title .txt ul li {font-size:18px; line-height:1.8em; color:#666;}
.service .title .txt ul li strong {color:#518bd3;}
.service .col {display:flex; margin-bottom:46px;}
.service .col:last-child {margin-bottom:0;}
.service .col .tit-box {width:100%; max-width:280px; border-top:1px solid #518bd3; padding-top:40px;}
.service .col .tit-box h4 {font-size:30px; line-height:1.3em; color:#518bd3;}
.service .col .txt-box {width:1%; flex:1 1 auto; border-top:1px solid #ddd; padding-top:40px; padding-left:40px;}
.service .col .txt-box p {font-size:18px; line-height:1.8em; color:#666;}
.service .col .txt-box p strong {font-weight:700; color:#000;}
.service .col .txt-box dl {display:flex;}
.service .col .txt-box dt {width:100%; max-width:90px;}
.service .col .txt-box dd {width:1%; flex:1 1 auto;}
.service .col .txt-box ul {display:flex; margin-bottom:20px; flex-wrap:wrap;}
.service .col .txt-box ul li {width:auto; margin-top:24px; margin-right:10px; background:#f0f5fc; font-size:18px; line-height:1.8em; color:#000; font-weight:700;}
.service .col .txt-box ul li .inner {display:flex; align-items:center; padding:28px 30px;}
.service .col .txt-box ul li img {display:inline-block; margin-right:10px;}
.service .col .txt-box ul li strong {font-size:30px; line-height:1.1em; color:#518bd3; margin-left:20px;}