@charset "utf-8";

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.m_color {color: #0C82FE;}
button {cursor: pointer;}

section .inner .title_text {font-weight: 700; font-size: 90px; letter-spacing: -1px; text-align: center; margin-bottom: 30px;}
section .inner .sub_text {font-size: 30px; line-height: 1.2em; letter-spacing: -1px; text-align: center;}

/* content - 서울점 기준 */
section > .inner {padding: 150px 16.66%; box-sizing: border-box;}

.direction_top {background: #EAF2FF;}
.direction_top .inner {padding: 110px 16.66%;}
.direction_top .inner h3 {font-size: 70px; font-weight: 700; line-height: 1em; letter-spacing: -1px; text-align: center;}
.direction_top .inner .select_btn {display: none;}
.direction_top .inner .branch_tab.mo_ver {display: none;}
.direction_top .inner .branch_tab.pc_ver {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;margin-top: 70px;}
.direction_top .inner .branch_tab.pc_ver li a {display: block; border: 1px solid #0C82FE; background-color: #fff; color: #0C82FE; box-sizing: border-box;
    height: 60px; line-height: 60px; font-weight: 500; font-size: 27px; letter-spacing: -1px; text-align: center; border-radius: 10px;}
.direction_top .inner .branch_tab.pc_ver li a.on {background-color: #0C82FE; color: #fff;}


.contain .inner .title_text {font-weight: 700; font-size: 70px; line-height: 1em; letter-spacing: -1px; color: #000; text-align: center;}
.contain .inner .title_text span {display: block; font-weight: 400; font-size: 35px; line-height: 40px; margin-bottom: 20px;}

.contain .con_sub { margin-top: 100px;}
.contain .con_sub > div {position: relative;}
.contain .con_sub .tab_floor_list {display: flex; justify-content: center; gap: 20px; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 2;}
.contain .con_sub .tab_floor_list li button {font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 36px; letter-spacing: -1px;
	color:#0C82FE; background: #fff; border: 1px solid #0C82FE; border-radius: 999px; padding: 0 53px; line-height: 60px;}
.contain .con_sub .tab_floor_list li.on button {background:#0C82FE; color: #fff;}
.contain .con_sub .view_box .cover_txt {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;}
.contain .con_sub .view_box .cover_txt span {display: inline-block; color: #fff; text-align: center; font-weight: 500; font-size: 30px; letter-spacing: -1px;
    line-height: 50px; width: 300px; border-radius: 100px; background: rgba(0, 0, 0, 0.50);}

/* swiper 커스텀 */
.contain .con_sub .view_box .swiper .swiper-wrapper {margin-bottom: 30px;}
.contain .con_sub .view_box .swiper-slide img {width: 100%; border-radius: 20px;}
.contain .con_sub .view_box .swiper-button-prev {left: 20px;}
.contain .con_sub .view_box .swiper-button-next {right: 20px;}

.mySwiper2, .mySwiper4, .mySwiper6, .mySwiper8, .mySwiper10, .mySwiper12, .mySwiper14, .mySwiper16, .mySwiper18, .mySwiper20, .mySwiper22, .mySwiper24, .mySwiper26, .mySwiper28 {height: 80%;}
.mySwiper, .mySwiper3, .mySwiper5, .mySwiper7,.mySwiper9, .mySwiper11, .mySwiper13, .mySwiper15, .mySwiper17, .mySwiper19, .mySwiper21, .mySwiper23, .mySwiper25, .mySwiper27 {height: 20%; cursor: pointer;}

.mySwiper .swiper-slide,
.mySwiper3 .swiper-slide,
.mySwiper5 .swiper-slide,
.mySwiper7 .swiper-slide,
.mySwiper9 .swiper-slide,
.mySwiper11 .swiper-slide,
.mySwiper13 .swiper-slide,
.mySwiper15 .swiper-slide,
.mySwiper17 .swiper-slide,
.mySwiper19 .swiper-slide,
.mySwiper21 .swiper-slide,
.mySwiper23 .swiper-slide,
.mySwiper25 .swiper-slide,
.mySwiper27 .swiper-slide {opacity: 0.2;}

.mySwiper .swiper-slide-thumb-active, 
.mySwiper3 .swiper-slide-thumb-active, 
.mySwiper5 .swiper-slide-thumb-active, 
.mySwiper7 .swiper-slide-thumb-active,
.mySwiper9 .swiper-slide-thumb-active, 
.mySwiper11 .swiper-slide-thumb-active, 
.mySwiper13 .swiper-slide-thumb-active, 
.mySwiper15 .swiper-slide-thumb-active, 
.mySwiper17 .swiper-slide-thumb-active,
.mySwiper19 .swiper-slide-thumb-active,
.mySwiper21 .swiper-slide-thumb-active,
.mySwiper23 .swiper-slide-thumb-active,
.mySwiper25 .swiper-slide-thumb-active,
.mySwiper27 .swiper-slide-thumb-active {opacity: 1;}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section .inner .title_text {font-size: 44px;}
    section .inner .sub_text {font-size: 22px;}
    section > .inner {padding: 150px 10%;}
    
    .direction_top .inner {padding: 110px 10%;}
    .direction_top .inner .branch_tab.pc_ver li a {font-size: 30px;}
    
    .contain .inner .title_text {font-size: 44px;}
    .contain .inner .title_text span {font-size: 28px;}
    
    .contain .con_sub .tab_floor_list li button {font-size: 22px;}
    .contain .con_sub .view_box .cover_txt span {font-size: 20px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}
    .direction_top .inner {padding: 110px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}
    .direction_top .inner {padding: 110px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .inner .title_text {font-size: 42px; margin-bottom: 20px;}
    section .inner .sub_text {font-size: 14px;}
    section > .inner {padding: 80px 5%;}


    .direction_top .inner {padding: 80px 0;}
    .direction_top .inner h3 {font-size: 42px; line-height: 1em;}
    .direction_top .inner .select_btn_box {width: 50%; margin: 0 auto; position: relative;}
    .direction_top .inner .select_btn {display: block; padding: 11.5px 20px; box-sizing: border-box; background: #FFF; border-radius: 190px;
        font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: -1px; color: #0C82FE; margin-top: 30px; border: 1px solid #0C82FE; position: relative;}
    .direction_top .inner .select_btn::after {content: ''; display: inline-block; width: 24px; height: 24px; transition: all .2s;
        background: url(../images/arrow_blue_down.png) center no-repeat; background-size: contain; position: absolute; right: 20px; top: 50%; margin-top: -12px;}
    .direction_top .inner .select_btn.on::after {transform: rotate(-540deg);}
    .direction_top .inner .branch_tab.pc_ver {display: none;}
    .direction_top .inner .branch_tab.mo_ver {width: 100%; padding: 8px 7.5px; box-sizing: border-box; 
        background: #fff; border: 1px solid #0C82FE; border-radius: 10px; position: absolute; top: 62px; left: 0; z-index: 3; display: none;}
    .direction_top .inner .branch_tab.mo_ver li a {display: block; height: 50px; line-height: 50px; font-weight: 700; font-size: 18px; color: #0C82FE;
        border: none; border-radius: 8px; padding: 0 16px;}
    .direction_top .inner .branch_tab.mo_ver li a.on {background-color: #D6EAFF; color: #0C82FE;}
    
    
    .contain .inner .title_text {font-size: 34px;}
    .contain .inner .title_text span {font-size: 20px; line-height: 1em; margin-bottom: 10px;}
    
    .contain .con_sub {margin-top: 40px;}
    .contain .con_sub .tab_floor_list {gap: 10px; top: 20px;}
    .contain .con_sub .tab_floor_list li button {font-size: 18px; border-radius: 100px; padding: 0 26.5px; line-height: 30px;}
    .contain .con_sub .view_box .cover_txt {bottom: 16px;}
    .contain .con_sub .view_box .cover_txt span {font-size: 15px; line-height: 24px; width: 150px;}

    /* swiper 커스텀 */
    .contain .con_sub .view_box .swiper .swiper-wrapper {margin-bottom: 20px;}
    .contain .con_sub .view_box .swiper-slide img {border-radius: 10px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section .inner .title_text {font-size: 42px; margin-bottom: 16px;}
    section .inner .sub_text {font-size: 14px;}
    section .inner .sub_text i {display: block;}
    section > .inner {padding: 50px 5%;}

    .direction_top .inner {padding: 50px 5%;}
    .direction_top .inner h3 {font-size: 38px;}
    .direction_top .inner .select_btn_box {width: 100%;}
    .direction_top .inner .select_btn {padding: 5.5px 16px;}
    .direction_top .inner .select_btn::after {right: 16px;}
    .direction_top .inner .branch_tab.mo_ver {padding: 5.5px 7.5px; top: 50px; left: 0;}
    .direction_top .inner .branch_tab.mo_ver li a {height: 40px; line-height: 40px;}
    
    
    .contain .inner .title_text {font-size: 30px;}
    .contain .inner .title_text span {font-size: 17px; margin-bottom: 5px;}
    
    .contain .con_sub {margin-top: 30px;}
    .contain .con_sub .tab_floor_list {gap: 6px; top: 8px;}
    .contain .con_sub .tab_floor_list li button {font-size: 14px; padding: 0 26.5px; line-height: 26px;}
    .contain .con_sub .view_box .cover_txt {bottom: 8px;}
    .contain .con_sub .view_box .cover_txt span {font-size: 12px; line-height: 20px; width: 84px;}

    /* swiper 커스텀 */
    .contain .con_sub .view_box .swiper-button-prev {left: 12px;}
    .contain .con_sub .view_box .swiper-button-next {right: 12px;} 
    .contain .con_sub .view_box .swiper-button-next::after, .contain .con_sub .view_box .swiper-button-prev::after {font-size: 28px;}
    .contain .con_sub .view_box .swiper .swiper-wrapper {margin-bottom: 12px;}
}