@charset "utf-8";
/* #content */
.img_box img{width: 100%; }
.swiper-container{position: relative;}
.sub_visual {width: 100%; height:450px; position: relative;
    background-image: url(../images/img_visual_bg.webp);  background-repeat: no-repeat;  background-position: center bottom; background-size: cover;
    background-attachment: fixed;background-color: rgba(0, 0, 0, 0.2); background-blend-mode: darken;}
.sub_visual .text_box {text-align: center; color: #fff;}
.sub_visual .text_box .add_text{font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 40px; font-weight: 200; line-height: 1.3; }

.container{padding-top:160px;}


.container .title_box{text-align: center}
.container .title_box h4{font-size: 64px; line-height: 1.5; font-weight: 700; color: var(--gray-color-1000); margin-top:10px;}
.container .title_box h4 strong{color:#4B47CD; }
.container .title_box .sub_title{font-size: 28px; line-height: 1.3; font-weight: 700; color:#20534F}
.container .title_box .sub_text{font-size: 26px; line-height: 1.5; font-weight: 400; color: var(--gray-color-800); letter-spacing: -1px;margin-top:36px;}

.swiper-container{position: relative;}
.container .content_box{margin-top: 80px;}
.container .inner{padding: 0 16.6%;}
.container .tab-buttons{width: 100%; display : flex; justify-content: space-between; align-items: center; box-sizing: border-box;}
.container .tab-button{width: 50%;padding: 30px 0; background: transparent;font-size: 28px; font-weight: 500; line-height: 1.5; color:#000; border-bottom: 1px solid var(--gray-color-200);box-sizing: border-box; }
.container .tab-button.active{color: var(--primary-color);border-bottom: 2px solid var(--primary-color)}
.container .tab-content {display: none;padding: 60px 0 160px;}
.container .tab-content.active {display: block;}
.container .tab-content .text_box{margin: 60px 0 30px;}
.container .tab-content .text_box h5{font-size: 36px;font-weight: 600; padding-bottom: 12px;}
.container .tab-content .text_box p{font-size: 22px;line-height: 1.5; color: var(--gray-color-800);}
.container .tab-content .inner .swiper-control{position: relative; padding-bottom: 60px; }
.container .tab-content .inner .swiper-button-wrap{position: absolute; right: 0; }
.container .swiper-scrollbar {display: block; background: #F6F6F6;  top: 3px; left:0 !important; width: 90% !important;}
.container .swiper-scrollbar-drag {background: var(--primary-color);}
.container .inner .swiper-button-prev, .container .inner .swiper-button-next {color: var(--gray-color-1000);width: 50px; height: 50px; background: #fff; border: 1px solid #DCDEE3; border-radius: 100%;}
.container .inner .swiper-button-prev{left: auto; }
.container .inner .swiper-button-next {right: auto; left: calc(100% + 58px); }
.container .swiper-button-prev:after, .container .swiper-button-next:after {font-weight: 900; font-size: 16px;}
#content .swiper-control-mobile .swiper-button-next, #content .swiper-control-mobile .swiper-button-prev {color: #fff ; opacity:1; }
#content .swiper-control-mobile .swiper-button-next{transform: translate(-100%, -100%);}
#content .swiper-control-mobile .swiper-button-prev{transform: translate(100%, -100%);}

.swiper-horizontal .swiper-pagination-bullets{display: flex;justify-content: space-between;align-items:center;width: 90%;top: 0;bottom: auto;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{flex:1; border-radius:0; margin: 0 !important; background: #F0F0F0 !important; opacity:1;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{background: #64574F !important;}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container [class*="section"] .inner{padding: 0px 12.6%;}
    .container .title_box .sub_title{font-size:24px;}
    .container .title_box h4{font-size: 54px; margin-top:8px;}

    /* content */



}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .container .section06::after{content:none;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .container .title_box .sub_text{font-size: 20px}
    /* content */
    .container .content_box{margin-top: 0;}
    .swiper-horizontal .swiper-pagination-bullets{width: 80%;}

}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .container [class*="section"] .inner{padding: 60px 5%;}

    /* content */

    .container .section04 .inner{padding: 60px 5% 0;}
    .container .swiper-scrollbar { width: 80% !important;}
    .container .inner .swiper-button-prev{left: auto; right:60px; }
    .container .inner .swiper-button-next {right:0; left: auto;; }
    .container .tab-content {display: none;padding: 0px 0 120px;}

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    .container [class*="section"] .inner{padding: 0 24px 30px;}

    .container{padding-top:60px;}
    .sub_visual {box-sizing: border-box;height: 240px;background-image: url(../images/img_visual_bg_mo.jpg);background-position: center center;background-attachment:local ;}
    .sub_visual .text_box h3{font-size: 26px; }
    .sub_visual .text_box .add_text{font-size:20px;}

    /* content */
    .container .title_box .sub_title{font-size:18px;}
    .container .title_box h4{font-size: 24px; margin-top:8px;text-wrap:balance; word-break:keep-all;}
    .container .content_box{margin-top: 30px;}
    .container .title_box .sub_text{font-size: 16px;text-wrap:balance; word-break:keep-all;margin-top: 12px;}

    .container .tab-button{font-size: 13px;}
    .container [class*="section"] .inner.tab-buttons{padding:0;}
    .container .tab-button{;padding: 16px 0; }
    .container .tab-content {padding: 30px 0 60px;}
    .container .tab-content .text_box h5{font-size: 16px;padding-bottom: 6px;}
    .container .tab-content .text_box p{font-size: 14px;}
    .container .tab-content .text_box{margin: 20px 0 0px;}
    .swiper-control{display: none;}

}