/* COMMON */
.contents { padding-top: 80px; }
/* .contents--no-padding-top { padding-top: 2px; } */
.sub-visual-container { overflow: hidden; padding: 160px 0 60px; height: 470px; background-repeat: no-repeat; background-position: center; }
.sub-visual-wrapper{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    height: 100%;
}
.sub-visual-container .title { z-index: 2; position: relative; line-height: 1; text-align: center; font-size: 60px; font-weight: 800; color: #ffffff; letter-spacing: -0.04em; }
.sub-visual-container .title small { display: block; margin-bottom: 15px; font-size: 14px; color: #bcc5df; font-weight: 300; letter-spacing: 0.2em; }
.sv1 { background-image: url('/child/img/sub/sv1.jpg'); }
.sv2 { background-image: url('/child/img/sub/sv2.jpg'); }
.sv3 { background-image: url('/child/img/sub/sv3.jpg'); }
.sv0,
.sv4 { background-image: url('/child/img/sub/sv4.jpg'); }
@media (max-width: 1200px){
    .sub-visual-container { padding: 0 0 45px; height: 350px; }
    .sub-visual-container .title { font-size: 34px; }
    .sub-visual-container .title small { font-size: 13px; }
}
@media (max-width: 768px){
    .contents { padding-top: 60px; }
    .sub-visual-container { padding: 0; height: 180px; }
    .sub-visual-container .title { font-size: 24px; }
    .sub-visual-container .title small { margin-bottom: 10px; font-size: 11px; }
}


/* Sub Tab List */
.sub-tab-container { z-index: 2; position: relative; margin-top: -60px; }
.sub-tab-lists { display: flex; flex-wrap: wrap; margin: auto; max-width: 1200px; width: 100%; background: rgba(0,0,0,.5); }
.sub-tab-lists li { flex: 1 1; }
.sub-tab-lists .link{
    display: flex; align-items: center; justify-content: center; position: relative; padding: 4px; height: 60px;
    line-height: 1.4; text-align: center; font-size: 18px; color: rgba(255,255,255,.8); font-weight: 300;
    background-color: transparent;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.sub-tab-lists .link::before{
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%; background: #ffffff;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
    -webkit-transform-origin: bottom; transform-origin: bottom;
    -webkit-transform: scaleY(0); transform: scaleY(0);
}
.sub-tab-lists .link span { display: block; z-index: 2; position: relative; }
.sub-tab-lists .link--on { color: #272728; font-weight: 700; }
.sub-tab-lists .link--on::before{
    -webkit-transform: scaleY(1); transform: scaleY(1);
}
@media(min-width:1201px){
	.sub-tab-lists .link:not(.link--on):hover::before{
        -webkit-transform: scaleY(0.1); transform: scaleY(0.1);
    }
}
@media (max-width:1200px){
    .sub-tab-container { margin-top: -50px; }
    .sub-tab-lists .link { height: 50px; font-size: 16px; }
}
@media (max-width:768px){
    .sub-tab-container { margin-top: 0; }
    .sub-tab-lists { background: rgba(0,0,0,.9); }
    .sub-tab-lists .link { padding: 12px 10px; height: 100%; line-height: 1.3; font-size: 14px; }
}


.sub-bbs-container { padding-bottom: 100px; }
.sub-bbs-container .more { display: block; margin: 75px auto 0; width: 50px; line-height: 1; text-align: center; font-size: 14px; color: #555555; font-weight: 300; }
.sub-bbs-container .more svg { display: block; margin: 0 auto 10px; width: 28px; height: 34px; }
@media (max-width:768px){
    .sub-bbs-container { padding-bottom: 60px; }
    .sub-bbs-container .more { margin: 35px auto 0; font-size: 13px; }
    .sub-bbs-container .more svg { width: 24px; height: 30px; }
}


/* 연혁 */
.history-container{
    overflow: hidden;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin-bottom: 100px;
}
.history-container .title { width: 40%; padding-right: 30px; }
.history-container .title svg { max-width: 300px; width: 100%; height: auto; }
.history-lists { width: 60%; }
.history-list { position: relative; }
.history-list::before { position: absolute; top: 5px; left: 90px; width: 1px; height: calc(100% + 60px); background: #ebebeb; }
.history-list:not(:last-child) { margin-bottom: 54px; }
.history-list:not(:last-child):before { content: ''; }
.history-list dl { position: relative; padding: 1px 0 0 125px; }
.history-list dl::after { content: ''; position: absolute; top: 5px; left: 83px; width: 16px; height: 16px; background: #ffffff url('/child/img/icon/history-symbol.svg') no-repeat center; }
.history-list dl dt { position: absolute; top: 0; left: 0; line-height: 1; font-size: 24px; font-weight: 800; }
.history-list dl dd { position: relative; margin-bottom: 10px; padding-left: 8px; line-height: 1.4; font-size: 16px; font-weight: 300; color: #777777; }
.history-list dl dd::before { content: ''; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; background: #777777; border-radius: 50%; }
@media(max-width:1200px){
    .history-container .title svg { max-width: 290px; }
    .history-list dl::after { top: 4px; }
    .history-list dl dt { font-size: 22px; }
    .history-list dl dd { font-size: 15px; }
}
@media(max-width:768px){
    .history-container{
        -ms-flex-wrap: wrap; flex-wrap: wrap;
        margin-bottom: 60px;
    }
    .history-container .title { display: none; }
    .history-container .history-lists { width: 100%; }
    .history-list { padding-top: 30px; }
    .history-list::before { top: 5px; left: 6px; height: calc(100% + 40px); }
    .history-list:not(:last-child) { margin-bottom: 40px; }
    .history-list dl { padding-left: 24px; }
    .history-list dl::after { top: -26px; left: 0; width: 12px; height: 12px; }
    .history-list dl dt { top: -30px; left: 24px; font-size: 20px; }
    .history-list dl dd { margin-bottom: 6px; font-size: 14px; }
}


/* 인사말 */
.introduction-container { padding-bottom: 100px; }
.introduction-head { position: relative; }
.introduction-head::before { content: ''; z-index: 1; position: absolute; top: 50px; right: 0; width: 100%; height: calc(100% - 50px); background-image: linear-gradient(to left, rgba(249,249,249,1), rgba(255,255,255,0)); pointer-events: none; }
.introduction-head .container{
    z-index: 2; position: relative;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.introduction-head .right { padding-left: 30px; }
.introduction-head h1 { display: inline-block; position: relative; padding: 60px 0; line-height: 1.46; font-size: 44px; color: #414042; font-weight: 800; }
.introduction-head h1 small { display: block; margin-top: 17px; font-size: 24px; font-weight: 300; }
.introduction-head h1::before,
.introduction-head h1::after { content: ''; display: block; position: absolute; width: 40px; height: 37px; background: url('/child/img/icon/quotation-marks.svg') no-repeat center; }
.introduction-head h1::before { top: 0; left: 0; }
.introduction-head h1::after { bottom: 0; right: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.introduction-body { margin-top: 75px; }
.introduction-message { position: relative; padding-right: 400px; }
.introduction-message h2 { margin-bottom: 26px; font-size: 24px; font-weight: 800; }
.introduction-message p { margin-top: 16px; line-height: 1.72; font-size: 16px; font-weight: 300; color: #777777; }
.introduction-message .signature { display: block; position: absolute; right: 0; bottom: 3px; line-height: 1; font-size: 32px; font-weight: 800; padding-bottom: 14px; border-bottom: 1px solid #e6e6e6; }
.introduction-message .signature small { padding-right: 12px; font-size: 16px; opacity: .7; }
@media(max-width:1200px){
    .introduction-head h1 { padding: 45px 0; font-size: 30px; }
    .introduction-head h1 small { font-size: 20px; }
    .introduction-head h1::before,
    .introduction-head h1::after{
        width: 30px; height: 28px;
    }

    .introduction-message { padding-right: 380px; }
    .introduction-message h2 { font-size: 22px; }
    .introduction-message p { font-size: 15px; }
    .introduction-message .signature { font-size: 26px; }
    .introduction-message .signature small { font-size: 15px; }
}
@media(max-width:768px){
    .introduction-container { padding-bottom: 60px; }
    .introduction-head h1 { padding: 34px 0; font-size: 20px; }
    .introduction-head h1 small { padding-right: 100px; font-size: 16px; }
    .introduction-head h1::before,
    .introduction-head h1::after{
        width: 22px; height: 20px;
    }
    .introduction-head .container{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .introduction-head .right { margin-top: -80px; padding: 0; text-align: right; }
    .introduction-head .right img { max-width: 140px; }

    .introduction-body { margin-top: 55px; }
    .introduction-message { padding: 0 0 60px; }
    .introduction-message h2 { margin-bottom: 18px; font-size: 18px; }
    .introduction-message p { margin-top: 12px; line-height: 1.86; font-size: 14px; }
    .introduction-message .signature { padding-bottom: 10px; font-size: 20px; }
    .introduction-message .signature small { font-size: 13px; }
}
@media(max-width:650px){
    .introduction-head h1::after { right: 113px; }

}


/* 오시는길 */
.location-info-lists{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.location-info-list { position: relative; padding-left: 50px; line-height: 1.65; font-size: 16px; }
.location-info-list:last-child .location-info-list__icon svg { height: 30px; }
.location-info-list__title { display: block; margin-bottom: 6px; line-height: 1; font-weight: 600; }
.location-info-list__icon{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    position: absolute; top: 0; left: 0; height: 40px; fill: #8d8c8f;
}
.location-info-list__icon svg { width: auto; height: 100%; }

.map-container{ margin-top: 80px; }
.map-container iframe { display: block; width: 100%; height: 500px; }
@media(max-width:1200px){
    .location-info-list { padding-left: 45px; font-size: 15px; }
    .location-info-list__icon svg { height: 34px; }
    .location-info-list:last-child .location-info-list__icon svg { height: 24px; }
    .map-container iframe { height: 400px; }
}
@media(max-width:768px){
    .location-info-lists{
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .location-info-list:not(:last-child) { margin-bottom: 15px; }
    .location-info-list { padding-left: 42px; font-size: 13px; }
    .location-info-list__icon{
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    }
    .location-info-list__icon svg { height: 26px; }
    .location-info-list:last-child .location-info-list__icon svg { height: 21px; }
    .map-container { margin-top: 45px; }
    .map-container iframe { height: 250px; }
}


/* 온라인 견적 */
.sub-form-container { padding-bottom: 100px; }
.sub-form-info{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    margin-bottom: 80px;
}
.sub-form-info .left{
    padding-right: 30px; width: 45%;
}
.sub-form-info .title { display: inline-block; position: relative; padding-right: 170px; line-height: 1; font-size: 44px; font-weight: 800; }
.sub-form-info .title::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 150px; height: 1px; background: #414042; }
.sub-form-info p { margin-top: 28px; line-height: 1.8; font-size: 18px; color: #777777; font-weight: 300; }

.contact-box{
    position: relative;
    padding: 48px 64px 50px;
    border: 1px solid #c1c1c1;
}
.contact-box::before{
    content: ''; position: absolute; top: 5px; left: 5px;
    width: calc(100% - 10px); height: calc(100% - 10px);
    border: 1px solid #eaeaea;
    pointer-events: none;
}
.contact-box .info li { margin: 0 0 18px; font-size: 18px; font-weight: 300; letter-spacing: -0.06em; }
.contact-box .info .line { padding: 0 7px; line-height: 0.8; }
.contact-box .info b { display: inline-block; font-weight: 600; }
.contact-box .social{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin-top: 40px;
}
.contact-box .social a { display: block; margin-right: 20px; }
.contact-box .social img { display: block; }
@media (max-width:1200px){
    .sub-form-container { padding-bottom: 60px; }
    .sub-form-info .title { font-size: 34px; }
    .sub-form-info p { font-size: 16px; }
    .contact-box .info li { margin-bottom: 14px; font-size: 16px; }
}
@media (max-width:768px){
    .sub-form-info{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
         margin-bottom: 35px;
    }
    .sub-form-info .left { padding: 0 0 30px; width: 100%; }
    .sub-form-info .right { width: 100%; }
    .sub-form-info .title{
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        padding-right: 0;
        font-size: 20px;
    }
    .sub-form-info .title::after { flex: 1 1; position: static; margin-left: 15px; max-width: 150px; width: auto; }
    .sub-form-info p { margin-top: 18px; font-size: 14px; }
    .contact-box { padding: 20px 26px 28px; }
    .contact-box .info li{
        display: -webkit-box; display: -ms-flexbox; display: flex;
        margin: 10px 0; font-size: 14px;
    }
    .contact-box .social { margin-top: 26px; }
    .contact-box .social a { margin-right: 12px; width: 30px; }
}


/* Banner */
.sub-ban-container { padding: 30px 15px; border-top: 1px solid #f5f5f5; }
.sub-ban-wrapper{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    margin: auto; max-width: 1720px; width: 100%;
}
.sub-ban-title { padding-right: 70px; font-size: 30px; font-weight: 800; }
.sub-ban { width: 100vw; }
.sub-ban .swiper-slide { display: inline-block; width: auto; }
.sub-ban .image img { display: block; max-width: 170px; border: 1px solid #e6e6e6; }
@media(max-width:1200px){
    .sub-ban-title { font-size: 26px; }
    .sub-ban .image img { max-width: 130px; }
}
@media(max-width:768px){
    .sub-ban-wrapper{
        -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    }
    .sub-ban-contents { margin-left: -15px; }
    .sub-ban-title { padding: 0 0 8px; font-size: 18px; }
    .sub-ban .image img { max-width: 100px; }
    .sub-ban { padding: 0 15px !important; }
}