@charset "UTF-8";

/* 메인비주얼 */
#mainVisual{position:relative;}
#mainVisual #mainVisuSld .sliderLi {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* height: calc(100vh - 80px); */
    height: 800px;
    background-color: #00000040;
    background-blend-mode: multiply;
}
#mainVisual #mainVisuTxtSld{position:absolute; left:50%; /*top:19vh;*/ top:11rem; width:50%; margin-left:-750px; z-index:999;}
#mainVisual .mainVisuTxt{}

#mainVisual .mainVisuTxt p {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
}
#mainVisual .mainVisuTxt p strong{font-weight:700; font-size:60px; display:block;}
#mainVisual .mainVisuTxt p img{vertical-align:middle;}
#mainVisual .mainVisuTxt p + p{margin-top:0.2em;}
#mainVisual .mainVisuTxt a{position:relative; width:160px; height:40px; padding:0 20px; font-size:16px; font-weight:400; border:1px solid #fff; background:transparent; color:#fff; line-height:38px; border-radius:30px; transition:all .2s;}
#mainVisual .mainVisuTxt a:before{position:absolute; content:""; width:2px; height:12px; background:#fff; right:25px; top:50%; margin-top:-6px; transition:all .2s;}
#mainVisual .mainVisuTxt a:after{position:absolute; content:""; width:12px; height:2px; background:#fff; right:20px; top:50%; margin-top:-1px; transition:all .2s;}
#mainVisual .mainVisuTxt a:hover{color:#4196d7; background:#fff; border-color:#fff;}
#mainVisual .mainVisuTxt a:hover:before,
#mainVisual .mainVisuTxt a:hover:after{background:#4196d7;}
#mainVisual #mainVisuTxtSld .slick-dots{font-size:0; margin-top:40px;}
#mainVisual #mainVisuTxtSld .slick-dots li{display:inline-block; margin-right:8px;}
#mainVisual #mainVisuTxtSld .slick-dots li button {
    overflow: hidden;
    text-indent: -9999px;
    width: 60px;
    height: 10px;
    border: 1px solid #fff;
    /* border-radius: 50%; */
}

#mainVisual #mainVisuTxtSld .slick-dots li.slick-active button{background:#fff;}



/* 메인 공통 */
#mainContents article{padding-bottom:130px;}
#mainContents h2.artTitle{font-size:52px; font-weight:800; color:#222; position:relative; margin-bottom: 3rem;}
 #mainContents .secTitle{position:relative; margin-bottom:1em;}
#mainContents .secTitle h4{font-size:24px; font-weight:700;}
#mainContents .secTitle a.more{position:absolute; right:0; top:0; width:120px; height:36px; line-height:34px; border:1px solid #ddd; border-radius:18px; font-size:15px; color:#666; transition:all .2s; padding:0 16px;}
#mainContents .secTitle a.more:before{position:absolute; content:""; width:12px; height:2px; background:#999; right:16px; top:50%; margin-top:-1px; transition:all .2s;}
#mainContents .secTitle a.more:after{position:absolute; content:""; width:2px; height:12px; background:#999; right:21px; top:50%; margin-top:-6px; transition:all .2s;}
#mainContents .secTitle a.more:hover{background:var(--main-color); color:#fff; border-color:var(--main-color);}
#mainContents .secTitle a.more:hover:before,
#mainContents .secTitle a.more:hover:after{background:#fff;}

.partner-list {
    margin: 6% -11px 0;
    font-size: 0;
}
.partner-list li {
    width: calc(25% - 44px);
    margin: 22px 22px;
    border: 1px solid #ccc;
    border-radius: 1rem;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    padding: 2rem 0;
}
.partner-list li img {
    max-width:80%;
    height:40px;
}


#mainContents article.about{padding-top:120px;}
#mainContents article.about p { font-size:1.5rem;}

.topImg2 {
    padding: 12% 0;
    position: relative;
    margin: 0 auto;
    width: 1500px;
   
}
.topImg2::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3rem;
    background: url("/design/default/img/main/overviewTopImg2.jpg") no-repeat center center/cover;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}



/* Product */
#mainContents article.product{padding-top:120px;}
#mainContents article.product li{width:32%; margin-right:calc(4% / 2);}
#mainContents article.product li:last-child{margin-right:0;}
#mainContents article.product li a{position:relative; overflow:hidden;}
#mainContents article.product li a:before{position:absolute; content:""; left:0; bottom:0; width:100%; height:0; background:linear-gradient(0deg, #251517, var(--main-color)); opacity:0.8; z-index:2; transition:all .3s;}
#mainContents article.product li a:after{position:absolute; content:""; left:0; top:0; width:100%; height:100%; background:linear-gradient(180deg, transparent 50%, #000 100%); opacity:0.8; z-index:1; transition:all .2s;}
#mainContents article.product li a:hover:before{height:100%;}
#mainContents article.product li a:hover:after{opacity:0;}
#mainContents article.product li a .txt{position:absolute; width:100%; left:0; bottom:50px; z-index:2; color:#fff; font-size:28px; font-weight:700; padding:0 30px 0.5em;}
#mainContents article.product li a .txt:before{position:absolute; content:""; display:block; width:30px; height:2px; background:#fff; left:30px; bottom:0;}
#mainContents article.product li a .txt:after{position:absolute; content:"→"; right:30px; display:inline-block; width:1em; height:1.6em; overflow:hidden; text-indent:-1em; opacity:0; transition:all .3s;}
#mainContents article.product li a:hover .txt:after{text-indent:0; opacity:1;}
#mainContents article.product li img {
  width:100%;  
}
/* Community */
#mainContents article.Community{ }
#mainContents article.Community .boardBox{margin-bottom:3em;}
#mainContents article.Community .boardBox > div{width:50%;}

#mainContents article.Community .notice{padding-right:30px;}
#mainContents article.Community .notice li{border-bottom:1px solid #eaeaea; padding:1.2em 0;}
#mainContents article.Community .notice li:first-child{border-top:1px solid #eaeaea;}
#mainContents article.Community .notice li:nth-child(n + 7){display:none !important;}
#mainContents article.Community .notice li a{position:relative; display:block; width:calc(100% - 100px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; transition:all .2s;}
#mainContents article.Community .notice li a i.new{display:inline-block; vertical-align:middle; width:16px; height:16px; border-radius:3px; line-height:16px; background:var(--main-color); color:#fff; font-size:12px; font-weight:700; text-align:center; font-style:normal;}
#mainContents article.Community .notice li .category{display:none;}
#mainContents article.Community .notice li time{display:block; width:100px; text-align:right; font-size:15px; color:#999; transition:all .2s;}
#mainContents article.Community .notice li a:hover,
#mainContents article.Community .notice li a:hover + time{color:var(--main-color);}

#mainContents article.Community .exmple{padding-left:30px;}
#mainContents article.Community .exmple li{float:left; width:calc((100% - 30px) / 2);}
#mainContents article.Community .exmple li:first-child{margin-right:30px;}
#mainContents article.Community .exmple li:nth-child(n + 3){display:none !important;}
#mainContents article.Community .exmple .img{display:block; position:relative; overflow:hidden; height:335px; transition:all .2s;}
#mainContents article.Community .exmple .img:before{position:absolute; content:"자세히보기"; color:#fff; font-size:15px; z-index:2; left:50%; top:50%; transform:translate(-50%, -50%); opacity:0; width:110px; padding-bottom:0.1em; border-bottom:2px solid #fff; background:url("/design/default/img/main/community_ico01.png") no-repeat right 0.3em; transition:all .2s;}
#mainContents article.Community .exmple .img img{position:absolute; left:50%; top:0; max-width:none; height:100%; transform:translateX(-50%); z-index:1; transition:all .2s;}
#mainContents article.Community .exmple dt{font-size:17px; padding:1.1em 0; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid #eaeaea;}
#mainContents article.Community .exmple dt i.new{display:inline-block; vertical-align:middle; width:16px; height:16px; border-radius:3px; line-height:16px; background:var(--main-color); color:#fff; font-size:12px; font-weight:700; text-align:center; font-style:normal;}
#mainContents article.Community .exmple a:hover .img{background:var(--main-color);}
#mainContents article.Community .exmple a:hover .img:before{opacity:1;}
#mainContents article.Community .exmple a:hover .img img{opacity:0.1;}

#mainContents article.Community .links{border-radius:20px; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,0.2); display:table; width:100%; table-layout:fixed;}
#mainContents article.Community .links > div{display:table-cell; width:50%; vertical-align:middle;}
#mainContents article.Community .links .box01{background:url("/design/default/img/main/links_bg01.png") no-repeat right bottom; background-size:cover;}
#mainContents article.Community .links .box02{/*background:#006dba;*/background:url("/design/default/img/main/links_bg02.png") no-repeat right bottom; background-size:cover;}
#mainContents article.Community .links > div a{position:relative; display:block; padding:3.5em 40px 4em; color:#fff;}
#mainContents article.Community .links > div a i{position:absolute; display:block; right:40px; top:50%; margin-top:-34.5px;}
#mainContents article.Community .links > div a p{position:relative; font-size:24px; font-weight:700; transition:all .2s; overflow:hidden;}
#mainContents article.Community .links > div a p:before{position:absolute; content:""; width:13px; height:3px; background:#fff; left:-14px; top:50%; margin-top:-7px; transform:rotate(45deg); transition:all .2s;}
#mainContents article.Community .links > div a p:after{position:absolute; content:""; width:13px; height:3px; background:#fff; left:-14px; bottom:50%; margin-bottom:-4px; transform:rotate(-45deg); transition:all .2s;}
#mainContents article.Community .links > div a span{display:block; max-width:calc(100% - 65px);}
#mainContents article.Community .links > div a:hover p{text-indent:25px;}
#mainContents article.Community .links > div a:hover p:before,
#mainContents article.Community .links > div a:hover p:after{left:0;}


.counters {    
    background: #f8f8f8;
    padding: 5rem 0;
    padding-bottom: 5rem !important;
    margin: 7em 0;
    margin-top: 0;
}

.counters .counters-wrap {
    display: flex; 
    justify-content: space-evenly;
}

.counters .counters-wrap>div {
    display: flex; 
    flex-direction: column;
}

.counters .counters-wrap label {
    font-size: 40px;
    font-weight: 800;
    color: #333;
    position: relative;
    margin-bottom: 3rem;
}

span.counter {
    display: block; 
    text-align: center; 
    font-weight: 800;
    font-size: 2rem; 
    color:#064cb5;
}




/* 온라인 문의 */
.pre-info {font-size:16px;margin-bottom:60px;}
.pre-info h3 {position:relative;border-bottom:1px solid #ddd;margin-bottom:60px;}
.pre-info h3::before {content:"";position:absolute;left:0;bottom:-1px;width:100px;height:2px;background-color:var(--main-color);}
.pre-info h3::after {content:"";position:absolute;left:100px;bottom:-1px;width:80px;height:2px;background-color:var(--main-color);}
.pre-info .bg-box {width:100%;max-width:640px;padding:20px 30px;margin:0 auto 60px;border:1px solid #ddd;border-radius:10px;background-color:#f7f7f9;box-sizing:border-box;}
.pre-info .bg-box .notice {width:100%;margin-bottom:20px;}
.pre-info .bg-box .notice li {position:relative;width:100%;font-size:1em;padding-left:10px;box-sizing:border-box;}
.pre-info .bg-box .notice li::before {content:"";position:absolute;top:9px;left:0;display:block;width:5px;height:5px;border-radius:10px;background-color:var(--main-color);}
.pre-info .bg-box p {margin-bottom:10px;}
.pre-info .bg-box .type {display:flex;flex-flow:row wrap;justify-content:flex-start;}
.pre-info .bg-box .type > li {width:200px;}
.pre-info .bg-box .type > li:not(:last-child) {margin-right:20px;}
.pre-info .bg-box .type > li .subject {color:var(--main-color);}
.pre-info .bg-box .type > li ol li {width:100%;padding-left:4px;box-sizing:border-box;}
.pre-info .stepWrap {width:100%;}
.pre-info .stepWrap .ttlWrap {margin-bottom:30px;}
.pre-info .stepWrap .ttlWrap .catch {color:#242424;font-size:2em;font-weight:700;text-align:center;}
.pre-info .stepWrap .ttlWrap .sub {display:block;color:var(--main-color);font-size:1.125em;font-weight:700;text-align:center;}
.pre-info .stepWrap .step-list {display:flex;flex-flow:row wrap;justify-content:space-between;padding:20px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.pre-info .stepWrap .step-list li {width:calc((100% / 3) - 20px);}
.pre-info .stepWrap .step-list li .icon {width:120px;height:120px;margin:0 auto 16px;border:1px solid #ddd;border-radius:10px;background-repeat:no-repeat;background-position:center;background-size:60px;box-sizing:border-box;overflow:hidden;}
.pre-info .stepWrap .step-list li:nth-child(1) .icon {background-image:url(/design/default/img/sub/icon-inquiry-1.png);}
.pre-info .stepWrap .step-list li:nth-child(2) .icon {background-image:url(/design/default/img/sub/icon-inquiry-2.png);}
.pre-info .stepWrap .step-list li:nth-child(3) .icon {background-image:url(/design/default/img/sub/icon-inquiry-3.png);}
.pre-info .stepWrap .step-list li .desc strong {display:block;font-size:1.125em;text-align:center;}
.pre-info .stepWrap .step-list li .desc span {display:block;text-align:center;white-space:pre-line;}

#online{}
.onlineWrap {}
.onlineWrap .w3 {}
.onlineWrap .w3 dl {float: left; width: calc((100% - 48px) / 3); margin-right: 24px;}
.onlineWrap .w3 dl:last-child {margin-right: 0px;}
.onlineWrap .w2 {}
.onlineWrap .w2 dl {float: left; width: calc((100% - 24px) / 2); margin-right: 24px;}
.onlineWrap .w2 dl:last-child {margin-right: 0px;}
.onlineWrap dl {margin-bottom: 1.25rem;}
.onlineWrap dl dt {margin-bottom: 0.375rem; position: relative; padding-left: 0.75rem;}
.onlineWrap dl dt:before {content:'*'; position: absolute; left: 0; top: 5px; color: #f00;}
.onlineWrap dl dt.noeq {padding-left: 0;}
.onlineWrap dl dt.noeq:before {display: none;}
.onlineWrap dl dd {}
#online input, #online textarea, #online .fileInput {border: 1px solid #ddd; width: 100%; box-sizing:border-box; padding: 10px; border-radius:5px; background: #f7f7f9;}
.agreeWrap {position: relative;}
.agreeWrap > p {display: inline-block;}
.agreeWrap .btn {padding: 0.5rem 1.25rem; border-radius: 5px; font-size: 15px; transition:all 0.2s linear; cursor: pointer;}
.agreeWrap .btn:hover {background: #054069; transition:all 0.2s linear;}
.agreeWrap .btn img {display: inline-block; vertical-align: middle; margin-top: -3px; margin-right: 7px;}
#online .agreeWrap .inchek {margin-top: 2rem; text-align: center; font-size: 17px;}
#online .agreeWrap .inchek input {width: auto;transform: scale(1.7); display: inline-block; margin-right: 0.5rem;}
.agreeWrap .btnInquire {position: absolute; right: 0; top: 0;}
.agreeWrap .btnInquire a {color: #fff;}

.txt-center { text-align: center;}
.onlineWrap .btnInquire button {
    color: #fff;
    border: none;
    font-size: 1.125rem;
    padding: 0.625rem 3rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: -0.5px;
    width: 350px;
    height: 60px;
    /* margin: 0 auto; */
}

@media (max-width:786px) {

    .onlineWrap .btnInquire button {
       width:100%
    }


}

.onlineWrap .btnInquire button img {display: inline-block; vertical-align: middle; margin-top: -6px; margin-right: 10px;;}
.popAgree {display: none;position: fixed; left: 50%; top: 50%; width: 60%; transform: translate(-50%,-50%); background: #fff; z-index: 10; border-radius: 1rem; box-sizing:border-box;}
.popAgree .popTit {padding: 1rem 1.5rem; background: #0073c2; color: #fff; font-size: 1.125rem; font-weight: 500; position: relative; border-radius:1rem 1rem 0 0}
.popAgree .popTit img {position: absolute; right: 1.5rem; top: 1.125rem; cursor: pointer; }
.popAgree .popCon {height: 500px;border: 5px solid #0073c2; border-top: none; border-radius:0 0 1rem 1rem; box-sizing:border-box; padding: 1.25rem;}
.hs-terms {border: 1px solid #ddd; width: 100%; height: 200px; overflow-y:scroll; box-sizing:border-box; padding: 1.25rem 1.5rem; border-radius:5px; background: #f5f5f5;}
#online input[type="checkbox"] {display: inline-block; width: auto; vertical-align: middle; margin-top: -1px;}
.agreeWrap .hs-terms .termsDesc {}
.agreeWrap .hs-terms .termsDesc p span {display: block; font-weight: 500;}
.agreeWrap .hs-terms .termsDesc p + p {margin-top: 1rem;}
.agreeWrap .hs-terms .box {padding: 1rem 1.5rem; background: #fff; border-radius: 1rem; margin-top: 1rem; border: 1px solid #efefef; box-sizing:border-box;}
.agreeWrap .hs-terms .box p {font-weight: 500; margin-bottom: 10px;}
.agreeWrap .hs-terms ul li + li {margin-top: 0;}