:root {
    --vh: 100%;
}

/*=========================================================== Common Class Style ===========================================================*/
section {position: relative;}
.section .sub-title {font-size:40px; font-family: 'Cormorant'; font-weight: bold; margin-bottom: 50px;}
.page-landing.sub-page {width: 100%; height: auto; padding: 0; margin: 80px 0 100px;}
.page-landing.sub-page .cont-container .cont-container-wrap {line-height: 1; width: 100%; max-width: var(--max-width); position: relative;}
.page-landing.sub-page .cont-container .cont-container-wrap span {width: 140px; display: inline-block; position: absolute; top: -26px; left: 50%;}
.page-landing.sub-page .cont-container .cont-container-wrap span img {width: 100%;}
.page-landing.sub-page .cont-container .cont-container-wrap b {font-size: 120px; font-weight: 900; color: #df4242; position: relative; z-index: 1; line-height: .9;}

.section-title {font-size: 100px; font-weight: 900; margin-bottom: 50px;}
.landing-title {position: relative; transition: all .4s;}
.landing-title p.title {font-size: 100px; font-weight: 900; transition: all .4s;}
.head-text p {font-size: 24px; font-weight: bold; line-height: 1.5; transition: all .4s;}

p.content-title {font-size: 38px; font-weight: bold; line-height: 1.4em; position: relative;}
p.content-subtitle {font-size: 19px; font-weight: 400; line-height: 1.8;}
@media (max-width:1023.98px){
    .page-landing.sub-page {margin: 60px 0 40px;}
    .page-landing.sub-page .landing-title p.title {font-size: 40px;}
    .head-text p {font-size: 20px;}
    p.content-title {font-size: 30px;}
    p.content-subtitle {font-size: 15px;}
}
@media (max-width:575.98px){
    .section .sub-title {font-size: 30px;margin-bottom: 40px;}
    p.content-subtitle {font-size: 13px;}
}
/*=========================================================== Common Sub Page Style ===========================================================*/
.thumb img {width: 100%;}
.content {padding-bottom: var(--cont-padding);}
@media (max-width:767.98px){.content {padding-bottom: var(--m-cont-padding);}}

.common-container {position: relative; width: 100%; height: 100%;}
.common-container .cont-container {display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; padding: 100px 0; color: #fff; font-size: 50px; font-weight: 800;}
.common-container .cont-container .cont-subtitle {position: relative;}
.common-container .cont-container .cont-subtitle p {display: inline-block; font-size: 24px; font-weight: 500; line-height: 1; position: absolute; bottom: 10px; right: 0; padding-right: 46px; cursor: pointer;}
.common-container .cont-container .cont-subtitle p::after {content: ''; background: url('/page/img/arrow-right.png') no-repeat center; background-size: cover; position: absolute; top: -1px; right: 0; width: 25px; height: 25px;}

#wrap .common-container {margin-top: var(--cont-padding);}
@media (max-width:1399.98px){.common-container .cont-container {padding: 100px 20px;}}
@media (max-width:1023.98px){
    .common-container .thumb img {object-fit: cover; min-height: 200px;}
    .common-container .cont-container {font-size: 20px; padding: 20px 20px 60px;}
    .common-container .cont-container .cont-subtitle p {font-size: 16px; bottom: -36px; padding-right: 30px;}
    .common-container .cont-container .cont-subtitle p::after {top: -2px; width: 18px; height: 18px;}
}
@media (max-width:767.98px){#wrap .common-container {margin-top: var(--m-cont-padding);}}
/*=========================================================== Main Page Style ===========================================================*/
.section.intro.main-page {
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);

    [data-head] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;

        width: 100%;
        max-width: 240px;

        padding: 0 20px;

        img {
            width: 100%;
            filter: brightness(0) invert(1);
            pointer-events: none;
            user-select: none;
        }
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        cursor: pointer;

        .swiper-wrapper {
            .swiper-slide {
                user-select: none;

                .thumb {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        pointer-events: none;
                        user-select: none;
                    }
                }
            }
        }

        .swiper-pagination {
            .swiper-pagination-bullet {
                border: 1px solid #fff;
                background-color: transparent;
                opacity: 1;
            }

            .swiper-pagination-bullet-active {
                background-color: #fff;
            }
        }
    }
}

@media screen and (max-width: 1023px) {
    .section.intro.main-page {
        [data-head] {
            max-width: 200px;
        }
    }
}
/*=========================================================== About Page Style ===========================================================*/
.about-container .cont-title {font-size: 50px; font-weight: 900; line-height: 1.2; position: relative; z-index: 1; transition: all .4s;}
.about-container .cont-subtitle {font-size: 24px; font-weight: bold; color: #888; margin-bottom: 30px; transition: all .4s;}

.about-container .content-title {font-size: 50px; font-weight: 500; line-height: 1.2; transition: all .4s;}
.about-container .content-subtitle {font-size: 24px; font-weight: 500; line-height: 1.6; transition: all .4s;}
.about-container .content-subtitle br.m {display: none;}

.about-container .thumb {margin-bottom: 50px;}

.about-container-01 .about-content-01 {display: flex; flex-direction: column;}
.about-container-01 .thumb {margin-top: -24px;}
.about-container-01 .content-subtitle {align-self: flex-end;}

.about-container-02 .cont-title {margin-bottom: 50px;}
.about-container-02 .content-subtitle {margin-bottom: 100px;}
.about-container-02 .font {display: flex; justify-content: space-between; align-items: center; line-height: 1;}
.about-container-02 .font .tiny {font-size: 24px; font-weight: 500; margin-bottom: 10px; transition: all .4s;}
.about-container-02 .font .large {font-size: 100px; font-weight: 900; transition: all .4s;}
.about-container-02 .font div:nth-child(3) .large {color: #fff; text-shadow: -1px 0 #111, 0 1px #111, 1px 0 #111, 0 -1px #111;}
.about-container-02 .font div:nth-child(2),
.about-container-02 .font div:nth-child(4) {font-size: 80px; font-weight: 600; margin-top: 20px;}

.about-container-03 .about-content-03 {display: flex; flex-direction: column;}
.about-container-03 .thumb {margin-top: -30px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-bottom: 150px;}
.about-container-03 .thumb img:last-child {position: relative; top: 150px;}
.about-container-03 .content-subtitle {align-self: flex-end;}
@media (max-width:1023.98px){
    .about-container .content-title {font-size: 30px; margin-bottom: 30px;}
    .about-container .content-subtitle {font-size: 16px;}
    .about-container .content-subtitle br.m {display: inline;}

    .about-container .cont-title {font-size: 30px;}
    .about-container .cont-subtitle {font-size: 16px; margin-bottom: 20px;}

    .about-container .thumb {margin-bottom: 20px;}

    .about-container-01 .thumb {margin-top: -18px;}

    .about-container-02 .cont-title,
    .about-container-03 .cont-title {margin-bottom: 20px;}

    .about-container-02 .content-subtitle {margin-bottom: 40px;}
    .about-container-02 .font .tiny {font-size: 12px;}
    .about-container-02 .font .large {font-size: 30px;}
    .about-container-02 .font div:nth-child(2),
    .about-container-02 .font div:nth-child(4) {display: none;}

    .about-container-03 .thumb {margin-top: 0; grid-template-columns: 1fr; gap: 20px; padding: 0;}
    .about-container-03 .thumb img:last-child {top: 0;}
}
@media (max-width:991.98px){
}
@media (max-width:767.98px){
}
@media (max-width:575.98px){
}
/*=========================================================== Board Page Style ===========================================================*/
.work-title {padding-top: 200px; }
.work-subtitle {padding-bottom: 200px; margin: 0px !important;}

.skin-wrap {min-height: auto;}
#wrap {z-index: 2; position: relative;}
#wrap .container {max-width: unset; padding: 0px;}
#wrap .content {padding: 0;}

.wrap.board-list.board_gallery,
.wrap.ct-board.board-write,
.wrap.ct-board.board-read,
.wrap.board-write.board-edit {width: 100%; max-width: var(--max-width); padding: 0; margin: 0 auto;}

.wrap.board-list.board_gallery .page-landing.board-page .cont-container {padding: 0;}

.div-cate.left {justify-content: flex-start !important;}
.div-cate.center {justify-content: center !important;}
.div-cate.right {justify-content: flex-end !important;}
.board_gallery .div-cate {margin: 0 0 50px; justify-content: center; gap: 50px;}
.board_gallery .div-cate button {width: auto; min-width: auto; height: auto; border: 0; padding: 0; color: #111; line-height: 1; font-size: 20px; font-weight: 500;}
.board_gallery .div-cate button:hover {background-color: transparent; border: 0; color: #111;}
.board_gallery .div-cate button.active {color: #111;}

.service .session-bar .info a i,
.service .session-bar .info a strong,
.service .session-bar .txt {color: #fff;}

@media (max-width: 1399.98px) {#wrap > #content > .wrap {padding: var(--padding);}}
@media (max-width: 991.98px) {.board_gallery .div-cate {gap: 16px 20px; margin: 0 0 20px !important;} .board_gallery .div-cate button {font-size: 15px;} .overlay-view.admin .overlay-view-navigation .overlay-view-prev, .overlay-view.admin .overlay-view-navigation .overlay-view-next {top: -30px;}}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {.wrap.board-list.board_gallery #postList {margin: 0 !important;}}

/* 하단 버튼 */
.aui-flex.board-btn.wrap {width:100%; padding: 0px;}
.board-btn {margin-bottom: 0px;}
.board-btn .ts-btn {margin: 0px; font-weight: 500;}
.board-btn .ts-btn .innerHover {background: #111;}
.board-reply {padding: 0px;}
@media (max-width:768px) {.board-btn {padding: 0px;}}
@media (max-width:576px) {
    
}

/* read page */
.wrap.ct-board.board-read .div-tbl {border: 0;}
.wrap.ct-board.board-read .div-tbl .tr {border: 0;}
.wrap.ct-board.board-read .div-tbl .tr .thm-subject {display:none;}
.wrap.ct-board.board-read .div-tbl .tr:first-child {display: none;}
.wrap.ct-board.board-read .board-image {border: 0;}
.aui-btn-large.btn-board.ts-btn.list-btn {border:1px solid #111; background-color: transparent; border-radius: 0; transition: all 0.3s; padding: 27px 60px; position: absolute; left: 50%; transform:translateX(-50%); height: unset; margin-top: 60px; width: unset;}
.aui-btn-large.btn-board.ts-btn.list-btn span {font-size: 40px; font-weight: 900;}
.aui-btn-large.btn-board.ts-btn.list-btn:hover, .aui-btn-large.btn-board.ts-btn.list-btn:focus, .aui-btn-large.btn-board.ts-btn.list-btn:active {color:#fff; background-color: #111;}
.aui-btn-large.btn-board.ts-btn.list-btn span:last-child {display: none;}
@media (max-width:576px) {
    .aui-btn-large.btn-board.ts-btn.list-btn {padding:10px 30px; width: 70%;}
    .aui-btn-large.btn-board.ts-btn.list-btn span {font-size: 20px;}
}

#postList .gal-item {overflow: hidden;}
#postList .gal-item .link {display: block; overflow: hidden; position: relative;}
#postList .gal-item .link span.thm img {display: block; width: 100%;}
#postList .gal-item .link::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17,17,17,.8); opacity: 0; transition: all .4s ease-in-out; z-index: 99;}
#postList .gal-item .link:hover:after {opacity: .95;}
#postList .gal-item .link .subject {display: block; background: transparent; padding: 25px; color: #fff; font-size: 22px; font-weight: bold; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; opacity: 0; transition: all .4s ease-in-out; line-height: 1; text-align: left; letter-spacing: -0.05em; user-select: none;}
#postList .gal-item .link .subject * {color: #fff;}
#postList .gal-item .link .subject .category {display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px; transition: opacity .4s;}
#postList .gal-item .link .subject .category b {font-weight: 400;}
#postList .gal-item .link .subject .title {font-size: 28px; font-weight: 600; display: inline-block; transition: opacity .4s;}
#postList .gal-item .link:hover .subject {opacity: 1;}
/*=========================================================== 4. contact page style ===========================================================*/
.contact-desc {padding:200px 0px; background-color: transparent; z-index: 2; position: relative; margin-top: 100vh;}
.contact-desc p {color:#111;}
.contact-desc p:nth-child(2) {padding-bottom:90px;}
.contact-title {padding-bottom: 25px !important; margin-bottom: 0px;}
.contact-contents {height:auto; background-color: transparent; padding: 0; padding-bottom: var(--cont-padding); position: relative; z-index: 2;}
.page-subdesc {margin-bottom: 0px;}
.contact-section-3 .eng-title{font-weight: 700; margin-bottom: var(--cont-padding); letter-spacing: 0em; color: #111; font-size: 50px; line-height: 1.2;}
.contact-section-3 .ko-title {font-weight: 500; margin-bottom: var(--cont-padding); letter-spacing: 0em; font-size: 20px; line-height: 1.5;}
.contact-section-3 .eng-input-title{font-weight: bold; letter-spacing: 0em; color: #111; font-size: 35px; display: inline-block; margin-right: 10px;}
.contact-section-3 .ko-input-title {font-weight: 600; margin-bottom: 40px; letter-spacing: 0em; font-size: 24px; line-height: 1.5em;}
    @media (max-width: 1400px) {.contact-section-3 .eng-title {font-size: 30px;}}
    @media (max-width: 768px) {
        .contact-section-3 .ko-title {margin-bottom: var(--m-cont-padding);}
        .contact-contents {padding-bottom: var(--m-cont-padding);}
        .contact-line{grid-template-columns: 1fr !important;}
    }
.contact-input {width: 100%;}
.contact-line {display: grid; grid-template-columns: 1fr 1fr; column-gap:40px;}
.contact-line-4,.contact-line-6 {grid-template-columns: 1fr;}

.contact-line .contact-box {padding-bottom: 100px;}
.contact-line div {margin: 0px; padding:0px;}
.contact-email-label {padding:0px!important; padding-bottom: 25px !important;}
.contact-email-text-box {display: grid; grid-template-columns: 1fr 1fr; gap:25px;}
.email-address-input-box {position: relative;}
.email-address-input-box::before {content: '@'; position: absolute; right:-22px; font-size: 18px;}
.contact-contents input {border:none; border-bottom:1px solid #111; box-sizing: border-box; height: 100%; padding-bottom: 10px; transition: all .4s; background: transparent;}
.contact-contents input:focus {border:none; border-bottom:1px solid #111;}
.contact-line .contact-checkbox-stage {padding-bottom: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 15px;}
    @media (max-width: 768px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr;}}
    @media all and (min-width:769px) and (max-width: 992px) {.contact-line .contact-checkbox-stage {grid-template-columns: 1fr 1fr 1fr;}}
.contact-line .contact-checkbox-stage p {font-size: 16px; font-weight: 500; text-align: center; width: 100%; padding: 0px; margin: 0px; line-height: 0px;}
.contact-line .contact-checkbox-stage .contact-checkbox-box label {width:100% !important; height: 100% !important; background-color: transparent; border:1px solid #111; border-radius: 24px; padding: 18px 0px 10px; position: relative; overflow: hidden; cursor: pointer;}
/* .contact-line .contact-checkbox-stage .contact-checkbox-box label::before {content:''; position: absolute; width:100%; height:100%; background-color: #111; z-index: -1; left:0px; bottom:-100%; transition: all 0.4s;}
.contact-line .contact-checkbox-stage .contact-checkbox-box label:hover::before {bottom:0%;} */
/* .contact-line .contact-checkbox-stage .contact-checkbox-box label:hover p {color:#fff;} */
.contact-checkbox-box .contact-cat-checkbox {height:0px; margin:0px; padding:0px;}
.contact-checkbox-box label {transition: all 0.4s;}
.contact-checkbox-box p {transition: all 0.4s;}

.contact-checkbox-box label.active {background-color: #111 !important; border:1px solid #111 !important;}
.contact-checkbox-box p.active {color:#fff !important;}

.contact-box input.contact-date {height: 27px;}

.contact-line-5 select {width:100%; border:none; border-bottom:1px solid #111; position: relative; background:url('/page/img/contact/down-arrow.png') no-repeat 98% 30%; padding-bottom: 10px;}
.contact-message-box {height: 200px; padding:15px; border:1px solid #111; transition:border 0.4s; background: transparent;}
.contact-message-box:focus{border:1px solid #111;}
.col-xs-12.agree-text-box {height:160px; border:1px solid #111; overflow-y: scroll; padding:20px; margin-bottom: 25px;}
.contact-line-6 .padding-line {position: relative; width: 100%; height: 100%;}
.contact-line-6 .padding-line::before {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: transparent; left:0; top:0; z-index: 1; border: 1px solid #111; border-bottom: 0; border-right: 0;}
.contact-line-6 .padding-line::after {content: ''; position: absolute; height:20px; width:calc(100% - 7px); background: transparent; left:0; bottom:25px; z-index: 1; border: 1px solid #111; border-top: 0; border-right: 0;}
.agree-text-box::-webkit-scrollbar {width:6px;}
.agree-text-box::-webkit-scrollbar-thumb {background: #111;}
.contact-agree-checkbox {display: block; border:1px solid #111 !important; width:20px; height:20px !important; float: left; transition: all 0.4s;}
.contact-agree-checkbox:checked {background-color: #222; border:1px solid #222 !important;}
.contact-agree-box span.agree-btn-txt {line-height: 27px; font-weight: 900;}
/* .contact-line-6 {padding-bottom: 200px;} */
.contact-line-6 p {line-height: 26px;}
.btn-submit-box {display: flex; justify-content: center; align-items: center;}
.btn-submit-box .btn {border-radius: 50%; padding:15px 15px; background-color: transparent; width: 120px; height:120px; position: relative; border: 1px solid #111; overflow: hidden;}
.btn-submit-box .btn::before {content: ''; position: absolute; bottom:-100%; width: 100%; height:100%; background-color: #111; left:0px; transition: bottom 0.4s; z-index: -1;}
.btn-submit-box .btn:hover {border: 1px solid #111;}
.btn-submit-box .btn:hover::before {bottom:0%;}
.btn-submit-box .btn:hover span {color:#fff;}
.btn-submit-box .btn span {color:#111; width:100%; height:100%; transition: all 0.4s; font-weight: 900;}

.contact-process {line-height: 1; margin-bottom: var(--cont-padding);}
.contact-process .title {font-size: 35px; font-weight: bold; margin-bottom: 10px;}
.contact-process .subtitle {font-size: 24px; font-weight: 600; margin-bottom: 50px;}
.contact-process ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px;}
.contact-process ul li {display: grid; grid-template-columns: 1fr; grid-template-rows: max-content; gap: 20px;}
.contact-process ul li h4 {font-size: 24px; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid #111;}
.contact-process ul li h3 {font-size: 20px; font-weight: bold;}
.contact-process ul li p {font-size: 14px; font-weight: 500; line-height: 1.5;}
@media (max-width:1023.98px){
    .contact-section-3 .eng-title {margin-bottom: var(--m-cont-padding);}
    .contact-section-3 .eng-input-title {font-size: 20px;}
    .contact-section-3 .ko-input-title {font-size: 16px;}

    .contact-process {margin-bottom: var(--m-cont-padding);}
    .contact-process .title {font-size: 20px;}
    .contact-process .subtitle {font-size: 16px; margin-bottom: 40px;}
    .contact-process ul {grid-template-columns: 1fr; gap: 40px;}
    .contact-process ul li {gap: 10px;}
    .contact-process ul li h4 {font-size: 20px; padding-bottom: 10px;}
    .contact-process ul li h3 {font-size: 16px;}
    .contact-process ul li p {font-size: 14px;}
}

/*=========================================================== 5. Info page style ===========================================================*/
.info-container .cont-subtitle {font-size: 50px; font-weight: bold; margin-bottom: 50px;}
.info-container .cont-map {display: grid; grid-template-columns: auto 1fr; gap: 50px; justify-content: space-between;}
.info-container .cont-map .map {width: 900px; height: 750px;}
.info-container .cont-map .map iframe {width: 100%; height: 100%;}
.info-container .cont-map .cont-info {line-height: 1;}
.info-container .cont-map .cont-info .title {font-size: 24px; font-weight: bold; color: #888; margin-bottom: 10px;}
.info-container .cont-map .cont-info .desc {font-size: 22px; font-weight: 500;}
.info-container .cont-map .cont-info .desc.first {margin-bottom: 30px;}
@media (max-width:1023.98px){
    .info-container .cont-subtitle {font-size: 30px; margin-bottom: 20px;}
    .info-container .cont-map {grid-template-columns: 1fr; gap: 40px;}
    .info-container .cont-map .map {width: 100%; height: 300px;}
    .info-container .cont-map .cont-info .title {font-size: 16px; margin-bottom: 20px;}
    .info-container .cont-map .cont-info .desc {font-size: 16px;}
    .info-container .cont-map .cont-info .desc.first {margin-bottom: 40px;}
}