/* common */

:root {
    --main_color: #199139;
    --main_font: "Montserrat", sans-serif;
}

.container {width: 100%; max-width: 1530px; margin: 0 auto; padding: 0px 50px; box-sizing: border-box;}
.title p {font-size: 22px; font-weight: 700; font-family: var(--main_font); margin-bottom: 7px; color: var(--main_color);}
.title h3 {font-size: 48px; font-weight: 700; font-family: var(--main_font); white-space: nowrap;}
.title article {font-size: 16px; color: #181818; line-height: 1.6; margin-top: 30px;}
.mo {display: none;}


/* header */

#header {position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); width: 100%;}
#header .container {display: flex; align-items: center; justify-content: space-between; padding: 10px 0px;}
#header .black {display: none;}
#header .logo img {height: 60px;}
#header .gnb ul {display: flex; gap: 50px; align-items: center;}
#header .gnb ul li a {font-size: 20px; font-family: var(--main_font); font-weight: 600; color: #fff;}
#header .gnb ul li a:hover {color: var(--main_color);}
#header .btn_box {display: flex; justify-content: flex-end; align-items: center; gap: 15px; min-width: 100px;}
#header #btnNav {font-size: 0; line-height: 0;}
#header.on_black .black {display: block;}
#header.on_black .white {display: none;}
#header.on_black .gnb ul li a {color: #252525;}
#header.on_black .gnb ul li a:hover {color: var(--main_color);}

.side_bar {display: block; position: fixed; left: -100%; top: 0;  z-index: 10000; transition: all 0.3s; opacity: 0; width: 100%; height: 100%;}
.side_bar.on {left: 0; opacity: 1;}
.side_bar .content {position: relative; max-width: 380px; width: 100%; height: 100vh; background: #fff; z-index: 1;}
.side_bar .dimmed {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 0;}
.side_bar .top {display: flex; align-items: center; justify-content: flex-end; height: 60px; padding: 0px 20px; box-sizing: border-box;}
.side_bar .box {padding: 20px; box-sizing: border-box;}
.side_bar .gnb {display: flex; flex-direction: column; gap: 25px;}
.side_bar .gnb > li > a {font-size: 24px; font-weight: 500; display: block;} 
.side_bar .gnb > li > a:hover {color: var(--main_color);}


/* main */

#fp-nav.left {left: 70px;}
#fp-nav ul li {margin: 30px 0px;}
#fp-nav ul li a span {background: #fff; width: 8px; height: 8px; opacity: 0.7; margin: 0; transform: translate(-50%, -50%);}
#fp-nav ul li a span:hover {background: var(--main_color);}
#fp-nav ul li a span:after {display: block; content: ''; transition: all 0.3s; width: 0; height: 0; transform: translate(-50%, -50%);}
#fp-nav ul li a.active span {background: #fff; width: 15px; height: 15px; opacity: 1; margin: 0; transform: translate(-50%, -50%);}
#fp-nav ul li a.active span::after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; content: ''; border: 1px solid #fff; border-radius: 100%; width: 70px; height: 70px; transition: all 0.3s;}
#fp-nav.black ul li a span {background: #888;}
#fp-nav.black ul li a span:hover {background: var(--main_color);}
#fp-nav.black ul li a.active span {background: var(--main_color);}
#fp-nav.black ul li a.active span::after {border-color: var(--main_color);}

.main_visual {width:100%; height:100vh; overflow:hidden; position:relative;}
.main_visual video {width:100%; height:100%; object-fit:cover; display:block;}
.main_visual .wheel {position: absolute; bottom: 80px; left: calc(50% - 10px); transform: translateX(-50%); animation: 1.5s scrollUpDown linear infinite; z-index: 50;}

@keyframes scrollUpDown{
	0%,100% {transform:translateY(0);}
	50% {transform:translateY(30px);}
}

.sc_2 .container {display: flex; gap: 70px; align-items: center;}
.sc_2 .text_box {width: 100%;}
.sc_2 .text_box .title {margin-bottom: 64px;}
.sc_2 .text_box .history {position:relative; overflow:hidden;}
.sc_2 .text_box .history ul li {padding-left:42px; display:flex; align-items:center; height:50px; position:relative;}
.sc_2 .text_box .history ul li span {display:block; transition:.2s; font-size:18px; font-weight:600; line-height:1.4em; letter-spacing:-.03em; color:#898989;}
.sc_2 .text_box .history ul li.active span {color:#242424; font-size:24px;}
.sc_2 .text_box .history:before {content:""; position: absolute; left:0; top:0; width:3px; height:100%; background:#e0e0e0;}
.sc_2 .text_box .history ul li:before {content:""; position:absolute; left:0; top:50%; margin-top:-47px; width:3px; height:95px; background:#199139; border-radius:2px; opacity:0;}
.sc_2 .text_box .history ul li.active:before {opacity:1;}
.sc_2 .img_box {max-width: 750px;}
.sc_2 .img_box img {width: 100%;}

.sc_3 {background: #F3F3F3;}
.sc_3 .top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;}
.sc_3 .top .sc_3_gallery {max-width: 870px; margin: 0; padding-bottom: 40px;}
.sc_3 .top .sc_3_gallery .swiper-slide img {width: 100%;}
.sc_3 .top .sc_3_gallery .sc_3_pagination {bottom: 0; top: auto; height: 3px; background: #D9D9D9;}
.sc_3 .top .sc_3_gallery .sc_3_pagination .swiper-pagination-progressbar-fill {background: var(--main_color);}
.sc_3 .top .title {text-align: right;}
.sc_3 .bottom {display: flex; gap: 50px;}
.sc_3 .bottom .item {width: 50%;}
.sc_3 .bottom .item a {display: flex; align-items: center; transition: all 0.3s; justify-content: center; gap: 50px; border-radius: 40px; background: #fff; border: 2px solid #fff; padding: 40px; box-sizing: border-box;}
.sc_3 .bottom .item a:hover {border-color: var(--main_color);}
.sc_3 .bottom .item .img_box {max-width: 200px; text-align: center;}
.sc_3 .bottom .item .img_box img {width: auto;}
.sc_3 .bottom .item .text_box h4 {font-size: 32px; font-weight: 700; margin-bottom: 28px;}
.sc_3 .bottom .item .text_box ul li {margin-bottom: 18px; display: flex; gap: 30px;}
.sc_3 .bottom .item .text_box ul li:last-child {margin-bottom: 0;}
.sc_3 .bottom .item .text_box ul li p {font-size: 20px; font-weight: 700; color: var(--main_color); min-width: 110px;}
.sc_3 .bottom .item .text_box ul li span {font-size: 20px;}


.sc_4 {position: relative;}
.sc_4 .title {text-align: center; margin-bottom: 60px;}
.sc_4 .gallery_box > ul {display: flex; flex-wrap: wrap; gap: 20px;}
.sc_4 .gallery_box > ul > li {width: calc(33.3% - 13px);}
.sc_4 .gallery_box > ul > li .lightbox {display: none;}
.sc_4 .gallery_box > ul > li .img_box {border-radius: 25px; overflow: hidden; min-height: 265px; position: relative; margin-bottom: 15px;}
.sc_4 .gallery_box > ul > li .img_box img {position: absolute; top: 50%; left: 0; transition: .4s ease-in-out; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.sc_4 .gallery_box ul li a p {font-size: 20px; text-align: center; font-weight: bold;}

.sc_4 .gallery_box ul li .lightbox {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    padding: 40px;
    box-sizing: border-box;
}
.sc_4 .gallery_box ul li .lightbox .swiper {
    max-width: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border-radius: 35px;
}
.sc_4 .gallery_box ul li .lightbox img {
    max-width: 100%; */
    display: block;
    height: 60vh;
    width: 100%;
    object-fit: cover;
}

.sc_4 .gallery_box ul li .lightbox .swiper .caption {
    background: #555;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
}

.sc_4 .gallery_box ul li .lightbox .swiper .caption p {
    font-size: 20px; font-weight: 700; color: #fff;
}

.swiper-button-next, .swiper-button-prev {color: #fff;}


.sc_5 {background: #F3F3F3;}
.sc_5 .title {text-align: center; margin-bottom: 60px;}
.sc_5 .item_box {position: relative;}
.sc_5 .map_box {display: flex; gap: 20px;}
.sc_5 .map_box .item {width: 100%;}
.sc_5 .map_box .item img {width: 100%;}
.sc_5 .map_box .item iframe {width: 100%; height: 100%;}
.sc_5 .map_box .item iframe:focus {outline: 0 !important; outline-color: transparent !important; box-shadow: none !important;}
.sc_5 .map_box .item_1 {max-width: 630px;}
.sc_5 .map_box .item_2 {border-radius: 56px; border: 2px solid #D9D9D9; box-sizing: border-box; overflow: hidden;}
.sc_5 .explain_box {display: flex; gap: 20px; position: absolute; max-width: 1000px; right: 0; bottom: -50px;}
.sc_5 .explain_box .item {width: 100%; border-radius: 40px; padding: 45px; box-sizing: border-box; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.sc_5 .explain_box .item_1 {background: #fff;}
.sc_5 .explain_box .item_1 ul li {margin-bottom: 18px; display: flex; gap: 20px;}
.sc_5 .explain_box .item_1 ul li:last-child {margin-bottom: 0;}
.sc_5 .explain_box .item_1 ul li p {font-size: 20px; font-weight: 700; color: var(--main_color); min-width: 70px;}
.sc_5 .explain_box .item_1 ul li span {font-size: 20px;}
.sc_5 .explain_box .item_2 {background: var(--main_color);}
.sc_5 .explain_box .item_2 .inner {text-align: center;}
.sc_5 .explain_box .item_2 .inner p {font-size: 32px; font-weight: 700; margin-bottom: 10px; color: #fff;}
.sc_5 .explain_box .item_2 .inner h4 {font-size: 40px; font-weight: 700; margin-bottom: 20px; color: #fff;}
.sc_5 .explain_box .item_2 .inner article {font-size: 20px; color: #fff;}


.sc_6 .container {display: flex; gap: 150px;}
.sc_6 .title,
.sc_6 .form_box {width: 100%;}
.sc_6 .form_box .custom-cf7-form {padding: 60px; box-sizing: border-box; border: 1px solid #D9D9D9; border-radius: 40px;}
.sc_6 .form_box .custom-cf7-form input[type="text"],
.sc_6 .form_box .custom-cf7-form input[type="tel"],
.sc_6 .form_box .custom-cf7-form input[type="email"] {width: 100%; padding: 20px 0px; border-bottom: 1px solid #E8E8E8; font-size: 17px;}
.sc_6 .form_box .custom-cf7-form input[type="tel"]::placeholder,
.sc_6 .form_box .custom-cf7-form input[type="email"]::placeholder,
.sc_6 .form_box .custom-cf7-form input[type="text"]::placeholder {color: #BBB;}
.sc_6 .form_box .custom-cf7-form textarea {padding: 20px 0px;  border-bottom: 1px solid #E8E8E8; font-size: 17px; width: 100%; height: 120px; overflow-y: auto;}
.sc_6 .form_box .custom-cf7-form textarea::placeholder {color: #BBB;}

.sc_6 .form_box .custom-cf7-form .wpcf7-list-item {margin: 0;}
.sc_6 .form_box .custom-cf7-form .form-group.checkbox-group {display: flex; align-items: center; gap: 8px; color: #717171; font-size: 16px; font-weight: 500; margin-top: 25px; margin-bottom: 50px;}

.sc_6 .form_box .custom-cf7-form .submit-group {display: flex; justify-content: center; position: relative; width: fit-content; margin: 0 auto;}
.sc_6 .form_box .custom-cf7-form .submit-group input {font-size: 20px; color: #fff; font-weight: 500; width: 190px; padding: 24px 0px; border-radius: 10px; background: var(--main_color); text-align: center; transition: all 0.3s; cursor: pointer;}
.wpcf7-spinner {display: none !important;}
.wpcf7 .wpcf7-submit:disabled {background: #888 !important;}
.disabled-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: not-allowed; z-index: 10;}



/* sub */

.studio_wrap {padding: 150px 0px 150px;}
.studio_wrap .title {margin-bottom: 70px;}
.studio_wrap .img_box img {width: 100%; margin-bottom: 30px;}
.studio_wrap .img_box img:last-child {margin-bottom: 0;}



@media (max-width: 1530px) {
    .container {max-width: 100%;}
    #header .container {padding: 10px 50px;}
    #header .gnb ul li a {font-size: 16px;}
    .sc_3 .top {gap: 50px;}

    #fp-nav.left {left: 50px;}
    #fp-nav ul li a.active span::after {width: 50px; height: 50px;}
}

@media (max-width: 1280px) {

    .title h3 {font-size: 40px;}

    .container {padding: 100px 50px;}

    #fp-nav.left {left: 20px;}

    #header .gnb ul {gap: 30px;}

    .sc_2 .text_box .title {margin-bottom: 40px;}

    .sc_2 .container {flex-direction: column;}
    .sc_2 .img_box {max-width: 100%;}

    .sc_3 .top {flex-direction: column-reverse; align-items: flex-start;}
    .sc_3 .top .title {text-align: left;}
    .sc_3 .top .sc_3_gallery {max-width: 100%;}
    .sc_3 .bottom {flex-direction: column; gap: 30px;}
    .sc_3 .bottom .item {width: 100%;}

    .sc_5 .map_box {margin-bottom: 20px;}
    .sc_5 .explain_box {position: unset;}

}

@media (max-width: 1024px) {

    .mo {display: block;}

    #fp-nav ul li {margin: 20px 0px; width: 35px; height: 35px;}
    #fp-nav ul li a.active span::after {width: 40px; height: 40px;}

    .sc_5 .title,
    .title {margin-bottom: 40px;}
    .title p {font-size: 18px;}
    .sc_5 .explain_box .item_2 .inner h4,
    .title h3 {font-size: 30px;}

    .container {padding: 100px 50px;}
    #header .container {padding: 10px 50px;}

    #header .gnb {display: none;}

    .sc_3 .top {gap: 0;}

    .sc_2 .text_box .history ul li span {font-size: 16px;}
    .sc_2 .text_box .history ul li.active span {font-size: 20px;}

    .sc_5 .explain_box .item_2 .inner p,
    .sc_3 .bottom .item .text_box h4 {font-size: 20px;}
    .sc_5 .explain_box .item_2 .inner article,
    .sc_5 .explain_box .item_1 ul li p,
    .sc_3 .bottom .item .text_box ul li p {min-width: 85px; font-size: 16px;}
    .sc_5 .explain_box .item_1 ul li span,
    .sc_3 .bottom .item .text_box ul li span {font-size: 16px;}

    .sc_5 .map_box .item_1 {max-width: 100%;}
    .sc_5 .map_box .item iframe {height: 500px;}

    .sc_5 .explain_box,
    .sc_5 .map_box {flex-direction: column;}

    .sc_6 .container {flex-direction: column; gap: 50px;}
    
    .sc_4 .gallery_box > ul > li {width: calc(50% - 10px);}
    
    .sc_6 .title {margin-bottom: 0;}
    
    .sc_6 .form_box .custom-cf7-form {padding: 25px;}
    
    .sc_6 .form_box .custom-cf7-form input[type="text"], .sc_6 .form_box .custom-cf7-form input[type="tel"], .sc_6 .form_box .custom-cf7-form input[type="email"], .sc_6 .form_box .custom-cf7-form textarea {font-size: 15px;}

    .sc_6 .form_box .custom-cf7-form .submit-group input {padding: 16px;}
}

@media (max-width: 768px) {

    .container {padding: 100px 20px;}

    #header .container {padding: 10px 20px;}
    #header .logo img {height: 40px;}

    #fp-nav.left {display: none;}

    .title h3 {white-space: unset; font-size: 26px;}
    .title article {font-size: 14px;}
    .title article br {display: none;}

    .sc_2 .text_box .history ul li {padding-left: 20px;}

    .sc_3 .bottom .item a {flex-direction: column; gap: 15px; padding: 20px;}

    .sc_5 .map_box .item_2 {height: 300px;}
    .sc_5 .explain_box .item {padding: 20px;}

    .sc_5 .explain_box .item_2 .inner article, .sc_5 .explain_box .item_1 ul li p, .sc_3 .bottom .item .text_box ul li p {min-width: 55px; font-size: 14px;}
    .sc_5 .explain_box .item_1 ul li span, .sc_3 .bottom .item .text_box ul li span {font-size: 14px;}
    
    .sc_4 .gallery_box > ul > li {width: 100%;}
}