@charset "utf-8";

/* main */
#main{ background: #fff; }

.main_section { position:relative; height: auto; }
.main_section .inner { max-width: 1300px; width: 100%; height: fit-content; margin: 0 auto; position: relative;}

.m_sec_tit { font-size: 3.25rem; line-height: 1.2; letter-spacing: -2px; }
.m_sec_tit span { color:#927e5e; }
  
  
/* main-visual */
.main-visual { position: relative;}
.main-visual .swiper-slide { position: relative; height: 100vh; }
.main-visual .main_title{max-width: 1820px;margin: 0 auto; padding:0 3.125rem; color: #fff;position: relative;top: 38%;transform: translate(0px, -50%);text-shadow: rgb(0 0 0 / 30%) 0px 5px 20px;}
.main_title p{ opacity: 0; transform: translateY(30px); transition: none; }
.main_title.show p{ opacity: 0; transform: translateY(30px);}
.main_title.show.animate p:nth-child(1){ animation: fadeDown 1s forwards; }
.main_title.show.animate p:nth-child(2){ animation: fadeUp 1s forwards; }

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.main-visual .thumb{ position: absolute; width:100%; height: 100%; top: 0; left: 0%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; z-index:-1;} 

.main-visual .visual_wrap { position: absolute; z-index: 3; left: calc((100% - 1720px) / 2); top: 60%; max-width: 1720px; width: 100%;}
.main-visual .cort-bx{ position: relative; width: fit-content; padding:0 2.5rem;}
.main-visual .cort-bx .pag{display: flex; gap: 1.875rem;}
.main-visual .cort-bx .pag > span {position: relative; font-size: 1.125rem; color: #fff; opacity:.5;}
.main-visual .cort-bx .pag > span.swiper-pagination-current{font-weight:600; opacity:1;}
.main-visual .cort-bx .pag > span + span::after { display: block; content: ""; width: 1px; height: .625rem; background: rgb(255 255 255 / 80%); position: absolute; top: calc((100% - .625rem) / 2); left: calc(1.875rem/-2); }

.main-visual .cort-bx a{ position: absolute; top: calc((100% - .875rem)/2); width: .875rem; height: .875rem;}
.main-visual .cort-bx .prev{left:3px; transform: rotate(-135deg);}
.main-visual .cort-bx .next{right:3px; transform: rotate(45deg);}
.main-visual .cort-bx .prev::after,
.main-visual .cort-bx .next::after { display: block; content: ""; width: .875rem; height: .875rem; border-top:2px #fff solid; border-right:2px #fff solid;}
.main-visual .cort-bx .stop{ display: none; right: -2.5rem; width: .625rem;}
.main-visual .cort-bx .stop::before { display: block; content: ""; width: 3px; height: .875rem; background:#fff; position: absolute; top:0; left:0px;}
.main-visual .cort-bx .stop::after { display: block; content: ""; width: 3px; height: .875rem; background:#fff; position: absolute; top:0; right:0px;}
.main-visual .cort-bx .play{ display: none; right: -2.5rem; width: .625rem; border-left: #fff 10px solid; border-top: transparent 8px solid; border-bottom: transparent 8px solid;}
.main-visual .cort-bx .stop.on,
.main-visual .cort-bx .play.on{ display: inline-block;}


.main_login { align-items: center; width: 40.625rem; height: 12.5rem; padding: 0 3.125rem; background: #008CD7; color: #fff; position: absolute; right: calc((100% - 1300px) / 2); bottom: -6.25rem; z-index: 10; }
.main_login p.left_txt{width:calc(100% - 3.125rem - 21.25rem); line-height:1.3;}
.main_login form{display:flex; gap:10px;}
.main_login .signup {display:flex; flex-direction: column; gap: .625rem;}
.main_login .signup input{ width: 15rem; height: 2.5rem; border-radius: 5px; border: 1px transparent solid; background: rgb(255 255 255 / 20%); color: #fff;}
.main_login .signup input::-webkit-input-placeholder {color:#fff;}
.main_login .login_bt { width: 5rem; background: #fff; border-radius: 5px; display: flex ; justify-content: center; align-items: center; }

.main_login .mypage{position: relative; width:100%; gap:6.25rem;}
.main_login .mypage:after{ display: block; content: ""; width: 2px; height: 100%; background:#fff; position: absolute; top:0; right:50%; opacity:.4;}
.main_login .mypage .link_box{width:calc(50% - 3.125rem);}
.main_login .mypage .link_box .arrow{display:block; width:1.875rem; height:.625rem; background: url('/asset/images/row_arrow.png') no-repeat 50% 50%; filter: invert(0) brightness(100); opacity:.5; transition: all 0.2s ease-in-out;}
.main_login .mypage .link_box a{gap:1.875rem;}

.main_login .mypage .link_box:hover .arrow{opacity:1;}


/* m_sec2 */
.m_sec2 {padding-top: 6.25rem;}
.m_sec2 .inner {padding: 7.5rem 0 8.75rem;}

.t_b_wrap {display: flex;position: absolute;right: calc((100% - 1720px) / 2);bottom: 5rem;z-index: 10;border-radius: 1.25rem 0;overflow: hidden;}
.t_b_wrap li a{position: relative;flex-direction: column;width:15.625rem;height: 16.25rem;padding: 2.5rem;background: #f5fbff;justify-content: space-between;}
.t_b_wrap li a::after{ display: block; content: ""; width: 100%; height: 100%; position: absolute; top:0; right:0px; background:linear-gradient(0deg, #008CD7, #29BFFF); z-index: 0; opacity:0; transition: all 0.2s ease-in-out; }
.t_b_wrap li a *{transition: all 0.2s ease-in-out; z-index: 1;}
.t_b_wrap li a > div{width:100%;}
.t_b_wrap li a .txt { height: fit-content; gap: .625rem;}
.t_b_wrap li a .arrow{display:block; width:1.875rem; height:.625rem; background: url('/asset/images/row_arrow.png') no-repeat 50% 50%; background-size: cover;}
.t_b_wrap li a .ico{width:3.75rem; height:3.75rem;}
.t_b_wrap li + li{border-left:1px #e4eafb solid;}

.t_b_wrap li:hover a{box-shadow: hsl(0deg 0% 0% / 15%) 0px 5px 10px 0px;}
.t_b_wrap li:hover a::after{opacity:1;}
.t_b_wrap li:hover a *{color:#fff !important; filter: invert(0) brightness(100);}
.t_b_wrap li:hover a .ico{opacity:.5;}



/* m_sec3 */
.m_sec3 { background-color: #F8FCFF; padding: 6.25rem 0;}
.m_sec3 .cort-bx{ display:flex ; gap: 1.25rem;}
.m_sec3 .cort-bx a{display:block;width: 3.125rem;height: 3.125rem;border:1px #000 solid;border-radius:50%;position: relative;}
.m_sec3 .cort-bx .prev{transform: rotate(-135deg);}
.m_sec3 .cort-bx .next{transform: rotate(45deg); background:#000;}
.m_sec3 .cort-bx .prev::after,
.m_sec3 .cort-bx .next::after {display: block;content: "";width: .875rem;height: .875rem;border-top: 3px #000 solid;border-right: 3px #000 solid;position: absolute;top: 55%;left: 45%;transform: translate(-50%, -50%);}
.m_sec3 .cort-bx .next::after{border-color: #fff;}

.m_sec3 .main_slide3 { margin: 3.75rem 0 -3.75rem; padding: 5rem 0 3.75rem; overflow-x: hidden; }
.m_sec3 .main_slide3 .img_box{width:100%; height:100%;}
.m_sec3 .main_slide3 .swiper-slide{height:26.25rem;transition: all 0.5s ease-in-out; box-shadow: rgb(0 0 0 / 15%) 0 5px 25px 0px;}
.m_sec3 .main_slide3 .swiper-slide-active,
.m_sec3 .main_slide3 .swiper-slide-next + .swiper-slide{margin-top:-5rem;}

.m_sec3 .main_slide3 .swiper-slide a { display: block; width: 100%; height: 100%; }



/* m_sec4 */
.m_sec4 {/*padding: 0 0 8.75rem;*/padding: 8.75rem 0 6.25rem;}
.m_sec4 .left {width: 12.5rem; position: relative;}
.m_sec4 .notice_kind { flex-direction: column; width: 100%; border-top:1px #000 solid;}
.m_sec4 .notice_kind li a {width: 100%; height: 3.125rem; color : #8e8e8e; border-bottom:1px #ddd solid; padding:0 1.875rem;}
.m_sec4 .notice_kind li a.on ,
.m_sec4 .notice_kind li a:hover { background: #000; color: #fff; }

.m_sec4 .right{width:calc(100% - 12.5rem - 15rem); margin-top: 2.5rem;}
.m_sec4 .right .notice_list {display: none;}
.m_sec4 .right .notice_list.active {display : block;}
.m_sec4 .right .notice_list .flex_box {height:6.25rem; border-top: 1px solid #CCCCCC; padding: 1.25rem; transition: all 0.2s ease-in-out;}
.m_sec4 .right .notice_list .flex_box:last-child { border-bottom: 1px solid #cccccc; }
.m_sec4 .right .notice_list .flex_box:hover {background:#f9f9f9;}
.m_sec4 .right .notice_list .flex_box .info {display: flex ; flex-direction: column; gap: .3125rem; width: calc(100% - 5rem - 8.75rem);}
.m_sec4 .right .notice_list .tag{width:4.375rem; height:1.875rem; font-size:.875rem; color:#fff; background:#ccc; border-radius:5px;}
.m_sec4 .right .notice_list .tag.notice{background:#008CD7;}
.m_sec4 .right .notice_list .tag.dong{background:#00ACB5;}



/* m_sec5 */
.m_sec5 { background-color: #f5fbff; padding: 5rem 0 6.25rem;}
.m_sec5 .swiper-pagination-bullet { width: 6px; height: 6px; background: #ddd; opacity: 1; }
.m_sec5 .swiper-pagination-bullet-active {background: #008CD7; }
.m_sec5 .pag{display: flex ; justify-content: center; gap:.625rem; position: absolute; left: 0; bottom: -1.875rem; padding: 0; width:100%;}
.m_sec5 .swiper-notification{display:none;}

.m_sec5 .left{position:relative; width:calc(100% - 26.25rem - 3.75rem);}
.m_sec5 .left .main_slide5_1 {height: calc(100% + 2.5rem); padding:1.25rem; margin:-1.25rem; overflow:hidden;}
.m_sec5 .left .main_slide5_1 li{background:#fff; border-radius:1.25rem; overflow: hidden;  box-shadow: rgb(0 0 0 / 10%) 0 0px 15px 0px;}
.m_sec5 .left .main_slide5_1 li .img_box{width:100%; height:12.5rem;}
.m_sec5 .left .main_slide5_1 li .tag{position:absolute; width:4.375rem; height:1.875rem; font-size:.875rem; color:#fff; background:#0d4e8f; border-radius:5px; margin:.875rem}
.m_sec5 .left .main_slide5_1 li .txt_wrap{position:relative; padding:1.25rem 1.875rem; gap:.625rem; height:calc(100% - 12.5rem);}
.m_sec5 .left .main_slide5_1 li .txt_wrap p{width: 100%;}


.m_sec5 .right {position:relative;  width: 26.25rem; padding:1.875rem 2.5rem; background:#fff; border-radius:1.25rem; box-shadow: rgb(0 0 0 / 10%) 0 0px 15px 0px;}
.m_sec5 .right .tit{color:#008CD7; gap:1rem;}
.m_sec5 .right .tit i{width:3.75rem; height:3.75rem; border-radius:50%; background:#008CD7;}
.m_sec5 .right .tit i img{width: 1.5rem; filter: brightness(100);}

.m_sec5 .right > .con_wrap{gap:2.5rem;}
.m_sec5 .right > .con_wrap > div {width:100%; gap:1rem;}

.m_sec5 .right .calendar ul{width: 100%; gap:.625rem;}
.m_sec5 .right .calendar li { flex: 1;}
.m_sec5 .right .calendar li a{padding: .625rem 0; border:1px #fff solid; border-radius: 5rem; color:#333;}
.m_sec5 .right .calendar li a:hover {border:1px #ccc solid;}
.m_sec5 .right .calendar li a.blue{color:#008CD7 !important;}
.m_sec5 .right .calendar li a.today,
.m_sec5 .right .calendar li a.on {border:1px #000 solid; background: #000; color:#fff;}

.m_sec5 .right .schedule{ position: relative;}
.m_sec5 .right .schedule:after{display: block;content: "";width: 100%;height: 1px;background:#ddd;position: absolute;top: -1.25rem;left: 0;}
.m_sec5 .right .schedule_list{ display: flex ; flex-direction: column; gap: 1.875rem; width:100%; overflow:hidden;}
.m_sec5 .right .schedule_list .swiper-slide ul { margin-top: 1rem; }
.m_sec5 .right .schedule_list .swiper-slide li{width: 100%; gap:.625rem;}
.m_sec5 .right .schedule_list .swiper-slide img{ width: .875rem; height: .875rem;}



/* m_sec6 */
.m_sec6 { padding: 6.25rem 0 8.75rem;}
@keyframes rolling1 { 0% { transform: translateX(0); } 50% { transform: translateX(-100%); } 50.01% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes rolling2 { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }

.m_sec6 .wrap-box {position: relative; display: flex; overflow: hidden; margin-top:3.75rem;}
.m_sec6 .wrap-box:before { content: ''; display: block; width: 8.75rem; height: 6.25rem; background: linear-gradient(90deg, #fffc 20%, transparent); position: absolute; z-index: 1; }
.m_sec6 .wrap-box:after { content: ''; display: block; width: 8.75rem; height: 6.25rem; background: linear-gradient(90deg, transparent, #fffc 80%); position: absolute; right:0; z-index: 1; }
.m_sec6 .wrap-box:nth-child(2) { background-color: antiquewhite; }
.m_sec6 .rolling-list {display: flex; }
.m_sec6 #roller1 { animation: rolling1 50s linear infinite; }
.m_sec6 #roller2 { animation: rolling2 50s linear infinite; }
.m_sec6 .rolling-list .list {border: 1px #DDDDDD solid;margin: 0 0.625rem;}
.m_sec6 .rolling-list .list a{display: flex;align-items: center;justify-content: center;width: 15rem;height: 5rem;}
.m_sec6 .rolling-list .list img{width:80%; object-fit: cover;}


.m_sec6 .wrap-box:hover #roller1,
.m_sec6 .wrap-box:hover #roller2 { animation-play-state: paused; }

/* ===============반응형=============== */

@media screen and (max-width: 1720px){
	.main-visual .visual_wrap {left: 3.125rem; max-width: 100%; width: 100%; }
	.t_b_wrap {right: 3.125rem; bottom: 2.5rem;}
}

@media screen and (max-width: 1400px){
	.main_section .inner {width: 90%;}
}


@media screen and (max-width: 1200px){
	.main-visual .main_title {top: 35%;}
	.main-visual .visual_wrap {top: 52%;}
	
	.m_sec4 .right {width: calc(100% - 22rem); }
}


@media screen and (max-width: 1024px){
	.main-visual .swiper-slide {height: 80vh; }
	
	.t_b_wrap { width: calc(100% - 6.25rem); }
	.t_b_wrap li {width:25%;}
	.t_b_wrap li a {width: 100%}
	
	.m_sec4 .inner.flex_box { flex-direction: column; }
	.m_sec4 .left{display: flex ; align-items: flex-end; justify-content: space-between;width: 100%; }
	.m_sec4 .title_wrap{ margin-top:0;}
	.m_sec4 .notice_kind { flex-direction: row;}
	.m_sec4 .notice_kind li a{ width: 7.5rem; align-items: center;}
	
	.m_sec4 .right {width: 100%;}
	
	.m_sec5 .right { width: 23rem;}
	.m_sec5 .left {width: calc(100% - 23rem - 3.75rem); }
	
	.m_sec6 .rolling-list .list a {width: 12.5rem; height: 4.2rem; }
}


@media screen and (max-width: 900px){
	.t_b_wrap { right: 0; bottom: 0; width: 100%; border-radius: 1.25rem 1.25rem 0 0;}
	.t_b_wrap li{width:25%;}
	.t_b_wrap li a {width:100%; height: 100%; min-height: 12.5rem;}
	.t_b_wrap li a .ico {height: 2.5rem; }
	
	.m_sec5 .right,
	.m_sec5 .left{ width: calc(50% - 1.25rem); }
}


@media screen and (max-width: 767px){
	.main_title p:nth-child(2) {font-size: 2.5rem; }
	
	.m_sec5 .left {margin-top:0 !important;}
}


@media screen and (max-width: 640px){
	.m_sec1 {padding-bottom: 18rem; }	
	.main-visual .swiper-slide { height: 31.25rem; }
	.main-visual .main_title { top: 50%; padding:0 1.5rem;}
	.main-visual .visual_wrap {top: 80%; left: 1.5rem;}
	
	
	.main_title p:nth-child(2) { font-size: 2rem; }
	
	.t_b_wrap{border-radius: 0;}
	.t_b_wrap li { width: 50%; border-bottom:1px #f0f0f0 solid;}
	.t_b_wrap li + li { border-left: 0px #f0f0f0 solid; }
	.t_b_wrap li:nth-child(2n) { border-left: 1px #f0f0f0 solid; }
	.t_b_wrap li a{background: #fff; flex-direction: row; align-items: end; min-height: 6.25rem; padding: 1.875rem 2.5rem;}
	.t_b_wrap li a > div { width: auto; }
	.t_b_wrap li a .ico {display: none !important;}
	
	.sec_tit span{font-size:1.125rem;}
	.sec_tit h2{font-size:2rem;}
	
	.m_sec5 .inner > .flex_box{flex-direction: column; gap:6.25rem;}
	.m_sec5 .right,
	.m_sec5 .left{ width: 100%; }
	
	.m_sec5 .right > .con_wrap > div{flex-direction: row; justify-content: space-around;}
	.m_sec5 .right .calendar ul { width: 25rem;}
	
	.m_sec6 .wrap-box {margin-top: 2.5rem; }
}


@media screen and (max-width: 480px){
	.main-visual .swiper-slide { height: 25rem; }
	.main_title p{ font-size: 1.25rem; }
	.main_title p:nth-child(2) { font-size: 1.75rem; }
	
	.m_sec4 .left {align-items: flex-start; flex-direction: column; gap: 1.875rem; }
	.m_sec4 .title_wrap {width:100%;}
	.m_sec4 .notice_kind li{width:33.33%;}
	.m_sec4 .notice_kind li a {width: 100%;}
	
	.m_sec4 .right .notice_list .flex_box {position:relative; padding-top: 3.75rem; height: 8.75rem;}
	.m_sec4 .right .notice_list .tag{position:absolute; top: 1.25rem; }
	.m_sec4 .right .notice_list .flex_box .info {gap: 0rem; width: calc(100% - 8.75rem); }
}

@media screen and (max-width: 420px){
	.m_sec5 .right > .con_wrap > div { flex-direction: column;}
	.m_sec5 .right .calendar ul { width: 100%; }
	
	.m_sec6 .rolling-list .list a { width: 10rem; height: 4.2rem; }
}