@charset "utf-8";
@import url('/css/reset.css'); /* 폰트와 기초값 */

:root {--main-color: #09a3d2;}
:root {--sub-color: #2b9576;}

.sct_pd{padding: 100px 0;}
.bold{font-weight: 600;}
.color_01{color: var(--main-color);}
.color_02{color: var(--sub-color);}

.inner{max-width: 1350px; margin: auto;}

.more{display: inline-block;}
.more span{display: inline-block; vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; background: rgba(9,163,210,0.1); margin-right: 10px; position: relative; overflow: hidden;}
.more span::before{content: ''; width: 20px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s; background: url(/img/main/more_02.svg) center no-repeat; background-size: 100%;}
.more span::after{content: ''; width: 20px; height: 20px; position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%); transition: all 0.3s; background: url(/img/main/more_02.svg) center no-repeat; background-size: 100%; opacity: 0;}
.more em{display: inline-block; vertical-align: middle; color: var(--main-color); font-size: 16px; font-weight: 500;}

.more_w em{color: #fff;}
.more_w span{background: rgba(255,255,255,0.1);}
.more_w span::before{background: url(/img/main/more_01.svg) center no-repeat; background-size: 100%;}
.more_w span::after{background: url(/img/main/more_01.svg) center no-repeat; background-size: 100%;}

@media screen and (min-width: 981px) and (max-width: 3000px){
    .more:hover span::before{left: 100%; opacity: 0;}
    .more:hover span::after{left: 50%; opacity: 1; transition-delay: 0.3s;}
}

/* 반응형 */
@media screen and (max-width: 1400px){
    .inner{margin: 0 20px;}
}
@media screen and (max-width: 1200px){
    .sct_pd{padding: 80px 0;}
    .more span{width: 40px; height: 40px;}
    .more span::before{width: 17px;}
    .more span::after{width: 17px;}
    .more em{font-size: 14px;}
}
@media screen and (max-width: 640px){
    .sct_pd{padding: 50px 0;}
    .more span{width: 30px; height: 30px; margin-right: 7px;}
    .more span::before{width: 15px;}
    .more span::after{width: 15px;}
    .more em{font-size: 13px;}
}

/* 상단 */
.head{position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transition: all 0.3s; border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid #ddd; background: #fff;}
.head .inner{position: relative; height: 70px;}
.head .logo{position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1; width: 150px;}
.head .menu .gnb{position: absolute; top: 0; left: 0; right: 0; font-size: 0; text-align: center;}
.head .menu .gnb>li{display: inline-block; padding: 0 40px; position: relative;}
.head .menu .gnb>li>a{display: block; line-height: 70px; font-size: 18px; font-weight: 400; position: relative;}
.head .menu .gnb>li>a>img{max-width: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; transition: all 0.3s; display: none;}
.head .menu .gnb>li>a::before{content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--main-color); transition: all 0.3s;}
.head .menu .sub{position: absolute; width: max-content; top: 120%; left: 50%; transform: translateX(-50%); padding: 20px 10px; background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.05); z-index: -10; text-align: center; opacity: 0; visibility: hidden; width: 200px; transition: all 0.5s;}
.head .menu .sub>li+li{margin-top: 15px;}
.head .menu .sub>li>a{display: block; line-height: 1.5; font-size: 15px; font-weight: 300;}
.head .menu .res_btn{position: absolute; top: 0; right: 0; margin-right: calc(-50vw + 50%); width: 285px; line-height: 70px; font-size: 18px; background: var(--main-color); color: #fff; background: linear-gradient(to right, #2ac9a4, #09a3d2); font-weight: 500; text-align: center; overflow: hidden;}
.head .menu .res_btn img{position: absolute; top: -25px; left: -20px; max-width: 90px; opacity: 0.15;}
.head .gnb li.now_on>a{color: var(--main-color)!important;}
.head .gnb li.now_on>a::before{width: 100%;}

/* 상단 hover */
@media screen and (min-width: 981px) and (max-width: 3000px){
    .head .menu .gnb>li:hover>a{color: var(--main-color);}
    .head .menu .gnb>li:hover>a::before{width: 100%;}
    .head .menu .gnb>li:hover .sub{opacity: 1; top: calc(100% + 1px);; visibility: visible;}
    .head .menu .sub>li>a:hover{color: var(--main-color); font-weight: 400;}
    
    .head .menu .res_btn:hover{text-shadow: 0 0 30px rgba(255,255,255,0.8); transition: 0.3s;}
}

/* 상단 햄버거버튼 */
.bt_menu{position: absolute; text-indent: -9999px; top: 50%; transform: translateY(-50%); right: 0; width: 20px; height: 16px; z-index: 11; display: none;}
.bt_menu span{position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background: var(--main-color); display: block; transition: all 0.3s;}
.bt_menu span:nth-child(1){top: 0px;}
.bt_menu span:nth-child(2){top: 50%; transform: translate(-50%, -50%);}
.bt_menu span:nth-child(3){bottom: 0px;}

.bt_menu.on span:nth-child(1){transform : translateX(-50%) translateY(7px) rotate(-315deg)}
.bt_menu.on span:nth-child(2){opacity : 0;}
.bt_menu.on span:nth-child(3){transform : translateX(-50%) translateY(-7px) rotate(315deg);}

/* 상단 모바일 */
.head .menu.on{left: 0; right: 0;}
.head .menu.on li.on>a{color: var(--main-color);}
.head .menu.on li.on>a>img{transform: translateY(-50%) rotate(180deg);}

/* 상단 반응형 */
@media screen and (max-width: 1400px){
    .head .menu .top li{margin-left: 25px;}
    .head .menu .top li a{font-size: 12px;}
    .head .menu .gnb>li{padding: 0 2.86vw;}
    .head .menu .sub{width: 160px;}
    .head .menu .res_btn{width: 17.14vw; font-size: 16px;}
    .head .menu .res_btn img{top: -30%; left: -10%;}
}

@media screen and (max-width: 1180px){
    .head .inner{height: 60px;}
    .head .logo{width: 120px;}
    .head .logo img.basic{display: none;}
    .head .logo img.on{display: block;}
    .bt_menu{display: block;}
    .head .menu{position: fixed; top: 0; bottom: 0; left: 100%; right: -100%; background: #fff; transition: all 0.3s; z-index: 10; padding: 130px 20px 0; overflow: hidden; overflow-y: auto;}
    .head .menu .gnb{position: relative; top: auto; left: auto; right: auto; padding: 0; text-align: left;}
    .head .menu .gnb>li{position: relative; display: block; padding: 0;}
    .head .menu .gnb>li>a{line-height: 60px; font-size: 20px; font-weight: 600;}
    .head .menu .gnb>.mob_link>a{pointer-events: none;}
    .head .menu .gnb>li>a::before{display: none;}
    .head .menu .gnb>li>a>img{display: block;}
    .head .menu .sub{position: relative; transform: inherit; top: auto; left: auto; right: auto; width: 100%; height: auto; box-shadow: none; visibility: visible; z-index: 0; display: none; padding: 15px 20px; text-align: left; opacity: 1; margin-bottom: 15px; background: #f9f9f9; transition: inherit;}
    .head .menu .sub>li+li{margin-top: 10px;}
    .head .menu .sub>li>a{line-height: 1.5;}
    .head .menu .sub>li>a br.pc {display: none}
    .head .menu .res_btn{top: 60px; right: auto; left: 20px; width: calc(100% - 40px); line-height: 50px; font-size: 16px;}
    .head .menu .res_btn img{max-width: 65px; top: -15px; left: -15px;}
}


/* 퀵메뉴 */
.top_bt{position: fixed; bottom: 20px; right: 20px; z-index: 99; width: 60px; height: 60px; border-radius: 50%; background: var(--sub-color); display: flex; align-items: center; justify-content: center; flex-direction: column; display: none; cursor: pointer;}
.top_bt img{max-width: 40%;}

/* 퀵메뉴 반응형 */
@media screen and (max-width: 640px){
    .top_bt{width: 40px; height: 40px;}
}


/* 메인 슬라이드 */
.main_slide{overflow: hidden; margin-top: 70px; position: relative;}
.main_slide .swiper-slide{background: url(/img/main/main_bg.jpg) center no-repeat; background-size: cover;}
.main_slide .inner{position: relative; height: 640px;}
.main_slide .txt{position: absolute; top: 50%; left: -50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 1s;}
.main_slide .txt h2{font-size: 20px; font-weight: 600; margin-bottom: 10px;}
.main_slide .txt h1{font-size: 50px; font-weight: 600;}
.main_slide .txt p{margin-top: 30px; font-size: 18px; font-weight: 300; line-height: 1.5; color: #666;}
.main_slide .txt a{margin-top: 50px;}
.main_slide img{position: absolute; top: 80%; transform: translateY(-50%); right: 0; margin-right: calc(-50vw + 50%); opacity: 0; visibility: hidden; transition: all 1.2s; max-width: inherit;}

.main_slide .main_pagi{bottom: 30px!important;}
.main_slide .swiper-pagination-bullet{width: 6px; height: 6px; vertical-align: middle; margin: 0 5px!important;}
.main_slide .swiper-pagination-bullet-active{width: 10px; height: 10px; border: 2px solid #000; background: rgba(0,0,0,0);}

.main_slide .swiper-slide-active .txt{opacity: 1; visibility: visible; left: 0; transition-delay: 0.2s;}
.main_slide .swiper-slide-active img{opacity: 1; visibility: visible; top: 50%; transition-delay: 0.5s;}

@media screen and (max-width: 1700px){
    .main_slide img{margin-right: calc(-50vw + 40%);}
    .main_slide img{height: 29.41vw;}
}
@media screen and (max-width: 1200px){
    .main_slide .inner{height: auto; padding-top: 70%;}
    .main_slide{margin-top: 60px;}
    .main_slide .txt{top: 10%; transform: inherit; width: 100%;}
    .main_slide .txt h2{font-size: 2.08vw;}
    .main_slide .txt h1{font-size: 4.17vw;}
    .main_slide .txt p{font-size: 1.67vw; margin-top: 2.50vw;}
    .main_slide .txt p br{display: none;}
    .main_slide .txt a{margin-top: 4.17vw;}
    .main_slide img{height: 41.67vw;}
    .main_slide .swiper-slide-active img{top: 65%;}
    .main_slide .ms_02 img{margin-right: calc(-50vw + 38%); height: 37.50vw;}
    .main_slide .ms_03 img{margin-right: calc(-50vw + 30%); height: 45.83vw;}
}
@media screen and (max-width: 640px){
    .main_slide .txt{top: 10%;}
    .main_slide .txt h2{font-size: 3.68vw; margin-bottom: 1.56vw;}
    .main_slide .txt h1{font-size: 7.03vw;}
    .main_slide .txt p{font-size: 3.68vw; margin-top: 3.13vw;}
    .main_slide img{height: 45%;}
    .main_slide .inner{padding-top: 100%;}
    .main_slide .swiper-slide-active img{top: 73%;}
    .main_slide .main_pagi{bottom: 15px!important;}
}



/* 배너 섹션 */
.sct_01 .sct_txt{text-align: center; font-size: 18px; font-weight: 300; line-height: 1.8;}
.sct_01 ul{display: flex; margin-top: 50px;}
.sct_01 ul li{width: calc(100% / 3); padding-top: calc(100% / 3 - 20px); position: relative; overflow: hidden;}
.sct_01 ul li:nth-child(1){background: url(/img/main/ban_01.jpg) center no-repeat; background-size: cover;}
.sct_01 ul li:nth-child(2){background: url(/img/main/ban_02.jpg) center no-repeat; background-size: cover;}
.sct_01 ul li:nth-child(3){background: url(/img/main/ban_03.jpg) center no-repeat; background-size: cover;}
.sct_01 ul li+li{margin-left: 30px;}
.sct_01 ul li::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));}
.sct_01 ul li::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #2ac9a4, #09a3d2); z-index: 1; opacity: 0; visibility: hidden; transition: all 0.3s;}
.sct_01 ul li a{display: block; position: relative; z-index: 2;}
.sct_01 ul li .txt{display: flex; flex-direction: column; padding: 50px; position: absolute; bottom: -100px; left: 0; width: 100%; transition: all 0.5s;}
.sct_01 ul li dl{color: #fff;}
.sct_01 ul li dl dt{font-size: 32px; font-weight: 600;}
.sct_01 ul li dl dd{margin-top: 10px; font-size: 18px; font-weight: 300; line-height: 1.5;}
.sct_01 ul li .more{ margin-top: 50px; opacity: 0; visibility: hidden;}

@media screen and (min-width: 981px) and (max-width: 3000px){
    .sct_01 ul li:hover::after{opacity: 0.95; visibility: visible;}
    .sct_01 ul li:hover .txt{bottom: 0;}
    .sct_01 ul li:hover .more{opacity: 1; visibility: visible; transition: 0.5s;}
}

@media screen and (max-width: 1400px){
    .sct_01 ul{margin-top: 30px;}
    .sct_01 ul li+li{margin-left: 10px;}
    .sct_01 ul li .txt{padding: 3.57vw; bottom: -7.14vw;}
    .sct_01 ul li dl dt{font-size: 2.14vw;}
    .sct_01 ul li dl dd{font-size: 1.43vw;}
    .sct_01 ul li .more{margin-top: 3.57vw;}
}
@media screen and (max-width: 981px){
    .sct_01 ul{flex-direction: column;}
    .sct_01 ul li{width: 100%; padding-top: 0;}
    .sct_01 ul li+li{margin-left: 0; margin-top: 10px;}
    .sct_01 ul li a{padding: 50px 30px;}
    .sct_01 ul li .txt{bottom: auto; position: relative; left: auto; padding: 0;}
    .sct_01 ul li dl dt{font-size: 28px;}
    .sct_01 ul li dl dd{font-size: 16px; margin-top: 10px;}
    .sct_01 ul li .more{margin-top: 20px; opacity: 1; visibility: visible;}
    .sct_01 ul li::before{width: 50%; height: 100%; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.7));}
}

@media screen and (max-width: 640px){
    .sct_01 .sct_txt{font-size: 14px;}
    .sct_01 .sct_txt br{display: none;}
    .sct_01 ul{margin-top: 20px;}
    .sct_01 ul li a{padding: 40px 20px;}
    .sct_01 ul li dl dt{font-size: 20px;}
    .sct_01 ul li dl dd{font-size: 14px; margin-top: 5px;}
    .sct_01 ul li .more{margin-top: 20px;}
    .sct_01 ul li::before{width: 100%; backdrop-filter: blur(5px);}
}

/* 공지사항 */
.sct_02{background: url(/img/main/notice_bg.jpg) center 100% no-repeat;}
.sct_02 .inner{position: relative;}
.sct_02 .more{position: absolute; top: 0; right: 0;}
.sct_02 h1{font-size: 32px; font-weight: 600;}
.sct_02 ul{margin-top: 30px;}
.sct_02 ul li{background: #fff; padding: 30px 30px 30px 0; transition: all 0.3s; border: 1px solid #fff;}
.sct_02 ul li+li{margin-top: 10px;}
.sct_02 ul li a{display: block; position: relative;}
.sct_02 ul .txt{margin-left: 160px; padding-left: 50px; position: relative;}
.sct_02 ul .txt::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 100%; background: #ddd;}
.sct_02 ul .txt dt{font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sct_02 ul .txt dd{font-size: 16px; font-weight: 300; color: #666; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sct_02 ul .date{position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 160px; text-align: center; color: #ccc;}
.sct_02 ul .date dt{font-size: 32px; font-weight: 600;}
.sct_02 ul .date dd{font-size: 12px; font-weight: 500;}
.sct_02 ul .date dd img{display: none;}

@media screen and (min-width: 981px) and (max-width: 3000px){
    .sct_02 ul li:hover{box-shadow: 0 0 10px rgba(0,0,0,0.1); border-color: var(--main-color);}
    .sct_02 ul li:hover .txt dt{color: var(--main-color);}
    .sct_02 ul li:hover .date{color: var(--main-color);}
}
@media screen and (max-width: 981px){
    .sct_02 h1{font-size: 28px;}
    .sct_02 ul{margin-top: 20px;}
    .sct_02 ul li{padding: 30px;}
    .sct_02 ul .txt{margin-left: 0; padding-left: 0;}
    .sct_02 ul .txt::after{display: none;}
    .sct_02 ul .txt dt{font-size: 16px;}
    .sct_02 ul .txt dd{font-size: 14px; margin-top: 5px;}
    .sct_02 ul .date{position: relative; top: auto; left: 0; width: 100%; transform: inherit; text-align: left; display: flex; align-items: center; justify-content: flex-start; flex-direction: row-reverse; margin-top: 10px;}
    .sct_02 ul .date dt{font-size: 14px; font-weight: 300; position: relative;}
    .sct_02 ul .date dd{font-size: 14px; font-weight: 300;}
    .sct_02 ul .date dt::before{content: '-';}
    .sct_02 ul .date dd img{display: inline-block; margin-right: 3px; width: 15px; opacity: 0.25; position: relative; top: -1px;}
    
}
@media screen and (max-width: 640px){
    .sct_02 h1{font-size: 20px;}
    .sct_02 ul li{padding: 20px;}
}

/* 하단 */
.foot{margin-top: 120px; border-top: 1px solid #eee;}
.foot .partner_list{display: flex; align-items: center; padding: 10px 0;}
.foot .partner_list .arrow_box{width: 175px; position: relative;}
.foot .partner_list .arrow_box p{font-size: 18px; font-weight: 500;}
.foot .partner_list .arrow_box .arrow{position: absolute; top: 16px; right: 0;}
.foot .partner_list .arrow_box .arrow li{width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #eee; position: relative; float: left;}
.foot .partner_list .arrow_box .arrow li::after{display: none;}
.foot .partner_list .arrow_box .arrow li img{max-width: 40%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto auto; opacity: 1;}
.foot .partner_list .arrow_box .arrow li:first-child{left: auto; transform: rotate(180deg);}
.foot .partner_list .arrow_box .arrow li:last-child{right: auto; margin-left: 10px;}
.foot .partner_list .arrow_box .arrow::after{content: ''; display: block; clear: both;}

.foot .partner_list .logo_box{width: calc(100% - 225px); margin-left: 50px; overflow: hidden;}
.foot .partner_list .partner_slide .swiper-slide{padding: 10px 0;}
.foot .partner_list .partner_slide .swiper-slide img{margin: auto; display: block; height: 30px;}

.ft_bg{background: #000; padding: 50px 0;}
.ft_bg .ft_logo{width: 150px; display: block; margin: auto;}
.ft_bg .ft_info{margin-top: 20px; font-size: 16px; color: rgba(255,255,255,0.7); font-weight: 300; text-align: center; line-height: 1.5;}
.ft_bg .ft_info span{display: inline-block; margin: 0 15px; width: 1px; height: 14px; background: rgba(255,255,255,0.4); vertical-align: middle; position: relative; top: 1px;}
.ft_bg .ft_sns{display: flex; align-items: center; justify-content: center; margin-top: 20px;}
.ft_bg .ft_sns a{position: relative;}
.ft_bg .ft_sns a::before{content: ''; width: 25px; height: 25px; border-radius: 50%; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}
.ft_bg .ft_sns a+a{margin-left: 10px;}
.ft_bg .ft_sns img{width: 30px; z-index: 2; position: relative;}
.ft_bg .copy{margin-top: 50px; text-align: center; font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.7);}
.ft_bg .copy2{margin-top: 30px; text-align: center; font-size: 14px; line-height: 1.5; font-weight: 500; color: rgba(255,255,255,0.3);}

/* 하단 반응형 */
@media screen and (max-width: 1200px){
    .foot{margin-top: 100px;}
}
@media screen and (max-width: 981px){
    .foot{margin-top: 80px;}
    .foot .partner_list .arrow_box{display: none;}
    .foot .partner_list .logo_box{width: 100%; margin-left: 0;}
    .foot .partner_list .partner_slide .swiper-slide{padding: 5px 0;}
    .foot .partner_list .partner_slide .swiper-slide img{height: 20px;}
    .ft_bg{padding: 40px 0;}
    .ft_bg .ft_logo{width: 120px;}
    .ft_bg .ft_info{margin-top: 10px; font-size: 14px;}
    .ft_bg .ft_info span{margin: 0 10px; height: 11px; top: -0.5px;}
    .ft_bg .ft_sns{margin-top: 10px;}
    .ft_bg .copy{margin-top: 30px; line-height: 1.5; font-size: 14px;}
}
@media screen and (max-width: 640px){
    .ft_bg .copy2 br{display: none;}
    .ft_bg .copy2{margin-top: 10px; font-size: 12px; padding: 0 10px;}
}