@charset "utf-8";

.sub_inner{width: 1200px; margin: auto;}
.sub_warp{margin: 120px auto;}
@media screen and (max-width: 1240px){
    .sub_inner{width: calc(100% - 40px);}
    .sub_warp{margin: 100px auto;}
}
@media screen and (max-width: 1030px){
    .sub_warp{margin: 80px auto;}
}
@media screen and (max-width: 780px){
    .sub_warp{margin: 60px auto;}
}
@media screen and (max-width: 480px){
    .sub_warp{margin: 40px auto;}
}

/* 서브 비주얼 */
.sub_main{position: relative; height: 500px; overflow: hidden;}
.sub_main .tit{width: 100%; padding: 0 20px; text-align: center; position: absolute; top: calc(50% + 40px); left: 50%; transform: translate(-50%, -50%); color: #fff;}
.sub_main .tit h1{font-size: 55px; font-weight: 700; line-height: 1;}
.sub_main .tit p{font-size: 18px; font-weight: 300; line-height: 1.5; margin-top: 30px;}

.sub_main.sm1{background: url(/img/sub/sm1.jpg) center no-repeat; background-size: cover;}
.sub_main.sm2{background: url(/img/sub/sm2.jpg) center no-repeat; background-size: cover;}
.sub_main.sm3{background: url(/img/sub/sm3.jpg) center no-repeat; background-size: cover;}
.sub_main.sm4{background: url(/img/sub/sm4.jpg) center no-repeat; background-size: cover;}
.sub_main.sm5{background: url(/img/sub/sm5.jpg) center no-repeat; background-size: cover;}

/* 반응형 */
@media screen and (max-width: 1240px){
    .sub_main .tit h1{font-size: 50px;}
}
@media screen and (max-width: 1030px){
    .sub_main{height: 400px;}
    .sub_main .tit{top: calc(50% + 10px);}
    .sub_main .tit h1{font-size: 45px;}
    .sub_main .tit p{font-size: 16px; margin-top: 20px;}
}
@media screen and (max-width: 780px){
    .sub_main{height: 300px;}
    .sub_main .tit h1{font-size: 40px;}
}
@media screen and (max-width: 480px){
    .sub_main{height: 280px;}
    .sub_main .tit h1{font-size: 30px;}
    .sub_main .tit p{font-size: 15px;}
    .sub_main .tit p br{display: none;}
}


/* 탭 분류 */
.sub_tab{border-bottom: 1px solid #ddd;}
.sub_tab ul{display: flex;}
.sub_tab ul li{width: 50%;position: relative;}
.sub_tab ul li a{display: block; line-height: 60px; font-size: 18px; text-align: center; color: #777;}
.sub_tab ul li.on::before{content: ''; width: 100%; height: 3px; background: var(--main-color); position: absolute; bottom: 0; left: 0; z-index: 1;}
.sub_tab ul li.on a{color: #121212; font-weight: 500;}

.tab_tit{text-align: center; font-size: 40px; font-weight: 700; margin-bottom: 60px;}

/* hover */
@media screen and (min-width: 1030px) and (max-width: 3000px){
    .sub_tab ul li:hover a{color: #121212;}
}

@media screen and (max-width: 1030px){
    .sub_tab ul li a{line-height: 60px; font-size: 16px;}
    .tab_tit{font-size: 32px; margin-bottom: 40px;}
}
@media screen and (max-width: 780px){
    .sub_tab ul{width: 100%;}
    .sub_tab ul li a{line-height: 50px;}
    .tab_tit{font-size: 28px; margin-bottom: 20px;}
}
@media screen and (max-width: 480px){
    .sub_tab ul li a{font-size: 14px;}
    .tab_tit{font-size: 22px;}
}



/* 인사말 */
.greetings{position: relative;}
.greetings h1{font-size: 40px; font-weight: 700; color: var(--main-color);}
.greetings p{font-size: 18px; font-weight: 400; line-height: 2; margin-top: 50px;}
.greetings p .box{background: var(--main-color); color: #fff; padding: 3px 10px; margin-right: 3px;}
.greetings .symbol{position: absolute; bottom: -120px; right: -10px; opacity: 0.02; width: 480px;}

@media screen and (max-width: 1240px){
    .greetings h1{font-size: 35px;}
    .greetings p{margin-top: 30px;}
    .greetings .symbol{bottom: -100px; width: 380px;}
}
@media screen and (max-width: 1030px){
    .greetings h1{font-size: 28px;}
    .greetings p{font-size: 16px;}
    .greetings p br{display: none;}
    .greetings p .br{display: block; padding-top: 15px;}
    .greetings .symbol{bottom: -80px; width: 330px;}
}
@media screen and (max-width: 780px){
    .greetings h1{font-size: 25px;}
    .greetings .symbol{bottom: -60px; width: 280px;}
}
@media screen and (max-width: 480px){
    .greetings h1{font-size: 20px; line-height: 1.3;}
    .greetings p{font-size: 14px; margin-top: 20px;}
    .greetings p .box{padding: 3px 5px;}
    .greetings .symbol{bottom: -40px; width: 70%;}
}



/* 프로그램 */
.sub_pro_box .admin{text-align: right; margin-bottom: 20px;}
.sub_pro_box .admin a{background: #F0352E; color: #fff; font-size: 12px; font-weight: 500; border-radius: 5px; text-align: center;line-height: 30px; display: inline-block; padding: 0 15px;}
.sub_pro_box .admin img{width: 11px; position: relative; top: -1px; margin-right: 3px;}
.sub_pro_box .pro_editor{font-size: 18px; line-height: 1.5; font-weight: 300;}
.sub_pro_box .pro_editor img{max-width: 100%;}
.sub_pro_box .pro_banner{background: url(/img/sub/pro_banner.jpg) center no-repeat; background-size: cover; background-attachment: fixed; color: #fff; margin: 120px auto; padding: 100px 0;}
.sub_pro_box .pro_banner h1{font-size: 30px; font-weight: 700; line-height: 1.3;}
.sub_pro_box .pro_banner p{font-size: 18px; line-height: 1.5; margin-top: 30px; font-weight: 300;}

.sub_pro_box .pro_tit{text-align: center; font-size: 30px; font-weight: 700; text-transform: uppercase; margin-bottom: 30px;}
.sub_pro_box .pro_partner{margin-top: 120px;}
.sub_pro_box .part_inner{position: relative;}
.sub_pro_box .part_inner .part_next{left: auto; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0; width: 50px; height: 50px; background: #f9f9f9; border-radius: 50%;}
.sub_pro_box .part_inner .part_next::after{font-size: 12px; color: #999; font-weight: 600;}
.sub_pro_box .part_inner .part_prev{left: 0; right: auto; top: 50%; transform: translateY(-50%); margin-top: 0; width: 50px; height: 50px; background: #f9f9f9; border-radius: 50%;}
.sub_pro_box .part_inner .part_prev::after{font-size: 12px; color: #999; font-weight: 600;}
.sub_pro_box .pro_partner .part_slide{overflow: hidden; width: calc(100% - 120px); margin: auto;}
.sub_pro_box .pro_partner .part_slide .swiper-slide{border: 1px solid #eee; height: 70px; overflow: hidden;}
.sub_pro_box .pro_partner .part_slide .swiper-slide img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto auto; width: 50%;}

.sub_pro_box .pro_list ul{font-size: 0;}
.sub_pro_box .pro_list ul li{display: inline-block; width: calc(100% / 3 - 20px); margin-right: 30px; vertical-align: top;}
.sub_pro_box .pro_list ul li:nth-child(3n){margin-right: 0;}
.sub_pro_box .pro_list ul li .img{position: relative; padding-top: 100%;}
.sub_pro_box .pro_list ul li .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.sub_pro_box .pro_list ul li .txt{margin-top: 20px; text-align: center; padding: 0 20px;}
.sub_pro_box .pro_list ul li .txt h2{font-size: 14px; color: var(--main-color); font-weight: 500;}
.sub_pro_box .pro_list ul li .txt h1{font-size: 16px; margin-top: 10px; line-height: 1.5; font-weight: 600;}
.sub_pro_box .pro_list ul:nth-of-type(1){margin-bottom: 120px;}

/* hover */
@media screen and (min-width: 1030px) and (max-width: 3000px){
    .sub_pro_box .part_inner .part_next:hover::after{color: var(--main-color);}
    .sub_pro_box .part_inner .part_prev:hover::after{color: var(--main-color);}
}

/* 반응형 */
@media screen and (max-width: 1240px){
    .sub_pro_box .pro_banner{margin: 100px auto; padding: 80px 0;}
    .sub_pro_box .pro_partner{margin-top: 100px;}
    .sub_pro_box .pro_list ul li{width: calc(100% / 3 - 13.5px); margin-right: 20px;}
    .sub_pro_box .pro_list ul:nth-of-type(1){margin-bottom: 100px;}
}
@media screen and (max-width: 1030px){
    .sub_pro_box .pro_banner{margin: 80px auto; padding: 60px 0; background-attachment: inherit;}
    .sub_pro_box .pro_banner h1{font-size: 25px;}
    .sub_pro_box .pro_banner p{font-size: 16px; margin-top: 20px;}
    .sub_pro_box .pro_tit{font-size: 25px; margin-bottom: 20px;}
    .sub_pro_box .pro_partner{margin-top: 80px;}
    .sub_pro_box .pro_partner .part_slide{width: calc(100% - 100px);}
    .sub_pro_box .pro_partner .part_slide .swiper-slide{height: 60px;}
    .sub_pro_box .part_inner .part_next{width: 40px; height: 40px;}
    .sub_pro_box .part_inner .part_prev{width: 40px; height: 40px;}
    .sub_pro_box .pro_list ul li{width: calc(100% / 3 - 7px); margin-right: 10px;}
    .sub_pro_box .pro_list ul li .txt{padding: 0 10px;}
    .sub_pro_box .pro_list ul:nth-of-type(1){margin-bottom: 80px;}
}
@media screen and (max-width: 780px){
    .sub_pro_box .admin{margin-bottom: 10px;}
    .sub_pro_box .admin a{line-height: 25px; padding: 0 10px; font-size: 11px;}
    .sub_pro_box .admin img{width: 10px; margin-right: 0;}
    .sub_pro_box .pro_editor{font-size: 16px;}
    .sub_pro_box .pro_banner{margin: 60px auto; padding: 40px 0;}
    .sub_pro_box .pro_banner h1{font-size: 20px;}
    .sub_pro_box .pro_banner p{font-size: 14px; margin-top: 10px;}
    .sub_pro_box .pro_banner p br{display: none;}
    .sub_pro_box .pro_tit{font-size: 20px; margin-bottom: 10px;}
    .sub_pro_box .pro_partner{margin-top: 60px;}
    .sub_pro_box .pro_partner .part_slide .swiper-slide{height: 50px;}
    .sub_pro_box .part_inner .part_next::after{font-size: 10px;}
    .sub_pro_box .part_inner .part_prev::after{font-size: 10px;}
    .sub_pro_box .pro_list ul li{width: calc(100% / 3 - 7px); margin-right: 10px;}
    .sub_pro_box .pro_list ul li .txt{margin-top: 15px;}
    .sub_pro_box .pro_list ul li .txt h1{font-size: 14px;}
    .sub_pro_box .pro_list ul:nth-of-type(1){margin-bottom: 60px;}
}
@media screen and (max-width: 480px){
    .sub_pro_box .pro_banner h1{font-size: 18px;}
    .sub_pro_box .pro_banner{margin: 40px auto;}
    .sub_pro_box .pro_tit{font-size: 16px;}
    .sub_pro_box .pro_partner{margin-top: 40px;}
    .sub_pro_box .pro_banner h1 br{display: none;}
    .sub_pro_box .pro_partner .part_slide .swiper-slide{height: 40px;}
    .sub_pro_box .pro_partner .part_slide{width: calc(100% - 80px);}
    .sub_pro_box .part_inner .part_next{width: 30px; height: 30px;}
    .sub_pro_box .part_inner .part_prev{width: 30px; height: 30px;}
    .sub_pro_box .part_inner .part_next::after{font-size: 8px;}
    .sub_pro_box .part_inner .part_prev::after{font-size: 8px;}
    .sub_pro_box .pro_list ul li{width: calc(100% / 2 - 2.5px); margin-right: 5px; margin-top: 20px;}
    .sub_pro_box .pro_list ul li:nth-child(3n){margin-right: 5px;}
    .sub_pro_box .pro_list ul li:nth-child(2n){margin-right: 0;}
    .sub_pro_box .pro_list ul li:nth-child(1){margin-top: 0;}
    .sub_pro_box .pro_list ul li:nth-child(2){margin-top: 0;}
    .sub_pro_box .pro_list ul:nth-of-type(1){margin-bottom: 40px;}
    .sub_pro_box .pro_list ul li .txt h2{font-size: 12px;}
    .sub_pro_box .pro_list ul li .txt h1{margin-top: 5px; font-size: 12px;}
}

/* 찾아오시는 길 */
.location{display: flex; align-items: center;}
.location .map_box{width: 60%;}
.location .map_box .root_daum_roughmap{width: 100%; height: 100%;}
.location .map_box .root_daum_roughmap .wrap_map{height: 350px;}
.location .map_txt{width: 40%; padding-left: 100px;}
.location .map_txt h2{font-size: 18px; font-weight: 600; color: var(--main-color); margin-bottom: 15px;}
.location .map_txt h1{font-size: 30px; font-weight: 500;line-height: 1.5; margin-bottom: 40px;}
.location .map_txt dl{display: flex; margin-top: 10px; font-size: 16px;}
.location .map_txt dl dt{font-weight: 600;}
.location .map_txt dl dd{margin-left: 10px;}

/* 반응형 */
@media screen and (max-width: 1240px){
    .location .map_txt{padding-left: 80px;}
    .location .map_txt h1{font-size: 25px;}
}
@media screen and (max-width: 1030px){
    .location .map_txt{padding-left: 40px;}
    .location .map_txt h2{font-size: 16px;}
    .location .map_txt h1{font-size: 20px;}
    .location .map_txt dl{font-size: 14px;}
}
@media screen and (max-width: 780px){
    .location{display: block;}
    .location .map_box{width: 100%;}
    .location .map_box .root_daum_roughmap .wrap_map{height: 300px;}
    .location .map_txt{width: 100%; padding-left: 0; margin-top: 30px;}
    .location .map_txt h2{font-size: 14px; margin-bottom: 5px;}
    .location .map_txt h1{font-size: 18px; margin-bottom: 20px;}
}