@charset "utf-8";

@keyframes arrow_move {
	0% { transform: translateX(0px);}
	50% { transform: translateX(-10px);}
	100% {transform: translateX(0px);}
}

@keyframes rotation {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.m_popup { position: fixed; left: 0; top: 0; width: 0; height: 0; background: transparent; z-index: 999; }
.m_popup .wrap {position: absolute; left: 0%; top: 0%; transform: translate(0%, 0%);box-shadow: rgb(0 0 0 / 10%) 0 0 10px; background: #fff;}
.m_popup .top { background: #fff; color: #333; padding: 1.25rem; }
.m_popup .top > p{width: calc(100% - 1.25rem);}
.m_popup .top .close {color: #333;}
.m_popup .con {padding: 0rem 1.25rem 1.25rem;}
.m_popup ul.tabnav {display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #0168B7; width: calc(100% - 1.25rem);}
.m_popup ul.tabnav > li {width: 100%; text-align: center; height: 2.5rem;}
.m_popup ul.tabnav > li > a {line-height: 2.5rem; width: 100%; display: block; font-size : .875rem; font-weight : 300;}
.m_popup ul.tabnav > li > a.active{ background:#fff;  color:#0168B7; font-weight: 500; border: 1px solid #0168B7; border-bottom : 0px;  border-radius : 6px  6px  0px 0px; }	


/* main */
#main{ background: #fff; }
#main section{ position: relative; height: auto; }
section .title_box{display:flex; justify-content: space-between; align-items: flex-end; width: 100%; font-size:1.125rem; color:#666; margin-bottom:3.75rem;}
section .title_box h3{font-size:2.8125rem; margin-bottom:1.25rem; color:#000; line-height:1;} 
section .title_box .more_view { display: flex; align-items: center; gap: 1.25rem; color:#666;}
section .title_box .more_view i{position: relative; width:.625rem; height:.625rem;}
section .title_box .more_view i:after {display: block; content: ""; width: 100%; height: 100%; border-top: 2px #666 solid; border-right: 2px #666 solid; transform: rotate(45deg);}
section .title_box .more_view:hover {color:#000;}
section .title_box .more_view:hover i{ animation: arrow_move 1s infinite ease-in-out;}
section .title_box .more_view:hover i:after{border-top: 2px #000 solid; border-right: 2px #000 solid;}


section .title_box .tab_box a{display:flex; justify-content: center; align-items: center; min-width:10rem; height:2.8125rem; padding:0rem 1.25rem; border-radius:5rem; border:1px #999 solid; font-size:1.125rem; color:#999;}
section .title_box .tab_box a.on{color:#fff; border:1px #0066ef solid; background:#0066ef; font-weight:600;}
section .title_box .tab_box a:hover{color:#fff; border:1px #999 solid; background:#999; font-weight:600;}

section .arrow_btn { position: absolute; bottom: 0; left: -5.625rem; z-index: 0; display: flex; justify-content: space-between; align-items: center; width: calc(100% + (5.625rem * 2));
}
section .arrow_btn a{ position: relative; display: flex; justify-content: center; align-items: center; width: 3.125rem; height: 3.125rem; background:#fff; border-radius: 50%; box-shadow: rgb(0 0 0 / 10%) 0 0 10px 0;}
section .arrow_btn a.prev{transform: rotate(230deg);}
section .arrow_btn a.next{transform: rotate(45deg);}
section .arrow_btn a:after{display: block; content: "";width: .625rem;height: .625rem;border-top:2px #000 solid;border-right:2px #000 solid;}
section .arrow_btn a:hover{background:#0066EF;}
section .arrow_btn a:hover::after{border-top:2px #fff solid;border-right:2px #fff solid;}


section .more_add_btn{display: flex; justify-content: center; align-items: center; gap:1.25rem; margin-top:2.5rem;}
section .more_add_btn i{position: relative; display:block; width:1.875rem; height:1.875rem; border-radius:50%; background:#000;}
section .more_add_btn i:before{display: block; content: ""; width: .875rem; height: 2px; background:#fff; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);}
section .more_add_btn i:after{ display: block; content: ""; width: 2px; height: .875rem; background:#fff; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);}
section .more_add_btn:hover i{ animation: rotation 2s infinite ease-in-out;}


/*popup*/
.main .f_popup { position: fixed; left: 0; top: 0; width: 0; height: 0; background: transparent; z-index: 999; }
.main .f_popup .wrap { left: 0%; top: 0%; transform: translate(0%, 0%);box-shadow: rgb(0 0 0 / 10%) 0 0 10px; }
.main .f_popup .top { background: #fff; color: #333; padding: 1.25rem; }
.main .f_popup .top > p{width: calc(100% - 1.25rem);}
.main .f_popup .top .close {color: #333;}
.main .f_popup .con {padding: 0rem 1.25rem 1.25rem;}
.main .f_popup ul.tabnav {display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #0168B7; width: calc(100% - 1.25rem);}
.main .f_popup ul.tabnav > li {width: 100%; text-align: center; height: 2.5rem;}
.main .f_popup ul.tabnav > li > a {line-height: 2.5rem; width: 100%; display: block; font-size : .875rem; font-weight : 300;}
.main .f_popup ul.tabnav > li > a.active{ background:#fff;  color:#0168B7; font-weight: 500; border: 1px solid #0168B7; border-bottom : 0px;  border-radius : 6px  6px  0px 0px; }	



/* m_sec1 */
.m_sec1 { width: 100%; transition: .3s; overflow: hidden; padding-top: 10.625rem;}
.m_sec1 .inner{max-width:calc(100% - 6.25rem); width:100%;}

.m_sec1 .main_vis {position: relative; width: 70.92%; height: 43.75rem; background: #ccc; overflow: hidden; border-radius:1.875rem;}
.m_sec1 .main_vis .thumb{width:100%; height:100%;}
.m_sec1 .main_vis .thumb img{width:100%; height:100%; object-fit: cover;}
.m_sec1 .main_vis .info_txt { position: absolute; z-index: 1; top: 50%; left: 7.5rem; transform: translate(0px, -50%); width:37.5rem; color:#fff; font-weight:300; font-size:1.25rem;}
.m_sec1 .main_vis .info_txt h3 {font-size:3.75rem; margin-bottom:1.875rem;}

.m_sec1 .main_vis .visual_wrap { position: absolute; z-index: 3; right: 3.75rem; bottom: 3.75rem; background: hsl(0deg 0% 0% / 60%); padding: 1.125rem 1.5rem; border-radius: 5rem; }
.m_sec1 .main_vis .cort-bx{position: relative;width: fit-content;padding: 0 1.875rem;}
.m_sec1 .main_vis .cort-bx .pag{display: flex; gap: 1.875rem;}
.m_sec1 .main_vis .cort-bx .pag > span {position: relative; font-size: 1.125rem; color: #fff; opacity:.5;}
.m_sec1 .main_vis .cort-bx .pag > span.swiper-pagination-current{font-weight:600; opacity:1;}
.m_sec1 .main_vis .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); }

.m_sec1 .main_vis .cort-bx a{position: absolute;top: calc((100% - .625rem)/2);width: .625rem;height: .625rem;}
.m_sec1 .main_vis .cort-bx .prev{left:3px; transform: rotate(-135deg);}
.m_sec1 .main_vis .cort-bx .next{right:3px; transform: rotate(45deg);}
.m_sec1 .main_vis .cort-bx .prev::after,
.m_sec1 .main_vis .cort-bx .next::after {display: block;content: "";width: 100%;height: 100%;border-top:2px #fff solid;border-right:2px #fff solid;}


.m_sec1 .left_menu { max-width: 26.6%; width: 100%; z-index: 2; padding-top: 1.875rem; }
.m_sec1 .left_menu div{ width: 100%; height: 100%; background: #EFF5FD; padding: 2.5rem; border-radius: 1.875rem; font-size: 1.375rem; }
.m_sec1 .left_menu div a{position: relative; width:100%;}
.m_sec1 .left_menu div a + a:after { display: block; content: ""; width: 100%; height: 1px; border-top: 2px rgb(0 104 240 / 10%) solid; position: absolute; top: -25%; }
.m_sec1 .left_menu div a i{width:4.375rem; height:4.375rem;}
.m_sec1 .left_menu div a i img{width:100%; object-fit: cover; filter: brightness(0); transition: all 0.2s ease-in-out;}
.m_sec1 .left_menu div a:hover{ font-weight:600; color:#0066EF;}
.m_sec1 .left_menu div a:hover i img{width:100%; object-fit: cover; filter: brightness(1);}



/*m_sec2*/
.m_sec2 { padding: 7.5rem 0; }
.m_sec2 .notice{position: relative; overflow: hidden; width: calc(100% + 1.25rem); padding: .625rem; margin: -.625rem; z-index: 1; }
.m_sec2 .notice .swiper-slide{padding:2.5rem 1.875rem; border:1px #ddd solid; background: #fff; border-radius:1.25rem; transition: all 0.2s ease-in-out;}
.m_sec2 .notice .swiper-slide .tag{display:flex; align-items: center; justify-content: center; height:1.875rem; border:1px #0066ef solid; border-radius:.3125rem; padding:.3125rem .625rem; color:#0066ef; font-size:.875rem;}
.m_sec2 .notice .swiper-slide .tit{font-weight:500; height:3.125rem;line-height: 1.2;}
.m_sec2 .notice .swiper-slide:hover{border:1px #000 solid; box-shadow: rgb(0 0 0 / 10%) 0 0 10px 0;}
.m_sec2 .arrow_btn {bottom: 0; height: calc(18.75rem - 1.25rem);}

/* m_sec3*/
.m_sec3 {position: relative; z-index: 0; padding: 7.5rem 0; background: radial-gradient(100% 348.43% at 76.56% 100%, #0BBEF6 0%, #0066EF 100%);}
.m_sec3:before {display: block; content: ""; width: 37.5rem; height: 13.75rem; background: url(../images/m_sec3_ico1.svg) no-repeat; background-size: cover; mix-blend-mode: overlay; position: absolute; top: 0; right: 0; z-index: -1;}
.m_sec3:after {display: block; content: ""; width: 31.25rem; height: 40.625rem; background: url(../images/m_sec3_ico2.svg) no-repeat; background-size: cover; mix-blend-mode: screen; position: absolute; left: 0; bottom: 0; z-index: -1;}

.m_sec3 .title_box *{color:#fff;}
.m_sec3 .title_box .tab_box a{border:1px #fff solid; color:#fff;}
.m_sec3 .title_box .tab_box a.on{color:#0066ef; border:1px #fff solid; background:#fff;}

.m_sec3 .calendar {display:block; width:43.75rem; height:32.5rem; padding:2.5rem 3.75rem; background:#fff; border-radius:1.875rem;}
.m_sec3 .calendar .top{gap:3.75rem;}
.m_sec3 .calendar .top a.prev{transform: rotate(230deg);}
.m_sec3 .calendar .top a.next{transform: rotate(45deg);}
.m_sec3 .calendar .top a:after{display: block; content: "";width: 100%;height: 100%;border-top:3px #000 solid;border-right:3px #000 solid;}
.m_sec3 .calendar .list { width: 100%; border-top: 2px #000 solid; padding-top: 1.25rem; }
.m_sec3 .calendar .list ul { display: flex; justify-content: space-between; align-items: center;}
.m_sec3 .calendar .list ul li {position: relative; z-index: 0;}
.m_sec3 .calendar .list ul.th li,
.m_sec3 .calendar .list ul li p {display: flex; justify-content: center; align-items: center; width: 2.8125rem;}
.m_sec3 .calendar .list ul.num + ul.num{margin-top:.875rem;}
.m_sec3 .calendar .list ul.num li p { width: 2.8125rem; height:2.8125rem;  border-radius:.625rem; cursor: pointer; transition: all 0.2s ease-in-out;}
.m_sec3 .calendar .list ul.num li.today p{background:#0066ef !important; color:#fff; border-radius:.625rem;}
.m_sec3 .calendar .list ul.num li.on{ background:#EFF5FD;}
.m_sec3 .calendar .list ul.num li.on.start{ border-radius:.625rem 0 0 .625rem;}
.m_sec3 .calendar .list ul.num li.on.end{ border-radius:0 .625rem .625rem 0;}
.m_sec3 .calendar .list ul.num li.on:after { display: block; content: ""; width: 100%; height: 100%; background: #EFF5FD; position: absolute; top: 0; left: 100%; z-index: -1; cursor: auto; }
.m_sec3 .calendar .list ul.num li.on.end:after{ display: none;}
.m_sec3 .calendar .list ul.num li.selected p { border: 1px #0066ef solid; color: #0066ef; }


.m_sec3 .date_list{display:block; width:calc(100% - 43.75rem - 3.75rem); height:32.5rem; padding:3.125rem; background:#fff; border-radius:1.875rem;}
.m_sec3 .date_list .top i{width:1.5rem; height:1.5rem;}
.m_sec3 .schedule_list{border-top:2px #000 solid;}
.m_sec3 .schedule_list li{border-bottom:1px #ccc solid;}
.m_sec3 .schedule_list li > *{height:5.625rem;}
.m_sec3 .schedule_list li i{width:5rem; height:1.875rem; border-radius:.3125rem; background:#69BF00; color:#fff;}
.m_sec3 .schedule_list li span{color:#8e8e8e;}
.m_sec3 .schedule_list li.off a > * {opacity:.3;}
.m_sec3 .schedule_list li.off i{background:#999; opacity:1;}

 
.m_sec3 .title_box .tab_box a:hover{color:#fff; border:1px #0066ef solid; background:#0066ef;}
.m_sec3 .calendar .top a{ position: relative; display: flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; opacity:.4;}
.m_sec3 .calendar .top a:hover{ opacity:1;}
.m_sec3 .calendar .list ul.num li:hover p{background:#bfd6f4; color:#fff; border-radius:.625rem;}
.m_sec3 .schedule_list li:hover{background:#f9f9f9;}



/* m_sec4 */
.link_share {display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; background: #f2f2f2; border-radius:50%;}
.link_share img {width: 1.125rem; height: 1.125rem;}

.m_sec4 { padding: 7.5rem 0; }
.m_sec4 .search_box{ background: #f5f5f5; padding: 1.875rem 0; border-radius: 1.875rem; }
.m_sec4 .search_box select{width:12.5rem; border-radius:5rem;}
.m_sec4 .search_box input{width:31.25rem; border-radius:5rem;}
.m_sec4 .search_box button{width:2.8125rem; height:2.8125rem; border-radius:50%; background:#000;}
.m_sec4 .search_box button img{width:1.5rem; height:1.5rem; filter: brightness(0) invert(1);}

.m_sec4 .people_list{overflow:hidden;}
.m_sec4 .people_list .list_wrap{ height: 38.75rem; padding:1.875rem; background: #fff; border:1px #ddd solid; border-radius:1.875rem; transition: all 0.2s ease-in-out; position: relative;}
.m_sec4 .people_list .list_wrap:hover{ border:1px #000 solid;}
.m_sec4 .people_list .profile { width: 100%; height: 13.75rem; background: #ccc; border-radius: 1.875rem; overflow: hidden;}
.m_sec4 .people_list .profile img{ width: 100%; height: 100%; object-fit: cover;}
.m_sec4 .people_list .name_box{border-bottom:1px #ddd solid;}
.m_sec4 .people_list .name_box .lang_tab li{width:3.75rem; height:2.125rem; background:#ccc; font-size:.875rem; font-weight:500; color:#fff; border-radius:5rem; cursor: pointer;}
.m_sec4 .people_list .name_box .lang_tab li.on{background:#0BBEF6;}
.m_sec4 .people_list .name_box .lang_tab li:hover{opacity:.6;}

.m_sec4 .people_list .info_list{gap:.625rem;}
.m_sec4 .people_list .info_list b{width:7.5rem; line-height: 1;}
.m_sec4 .people_list .list_wrap .link_share{position: absolute; bottom: 1.875rem; right: 1.875rem;}

.m_sec4 .arrow_btn {bottom: 20rem;}

#share_popup .icon_wrap a img{max-width: 2.5rem; width:100%;}





/* m_sec5 */
.m_sec5 { padding: 0 0 8.75rem 0; }
.m_sec5 .ask_wrap{gap:1.875rem;}
.m_sec5 .ask_wrap > div{position: relative; width:calc((100% - 1.875rem)/2); height:18.75rem; padding:3.75rem 5rem; border-radius:1.875rem; background:#EFF5FD;overflow: hidden;}
.m_sec5 .ask_wrap > div:after{ display: block; content: ""; width: 12.5rem; height: 12.5rem; background: url(../images/m_sec5_ico1.svg) no-repeat; background-size: cover; position: absolute; bottom: -1.875rem; right: 0; z-index: 0; mix-blend-mode: overlay;}
.m_sec5 .ask_wrap > div.mail_box{background:#F1F8EB;}
.m_sec5 .ask_wrap > div.mail_box:after{background:url(../images/m_sec5_ico2.svg) no-repeat; background-size: cover;}
.m_sec5 .ask_wrap p{line-height:1;}
.m_sec5 .work_time {position: relative; width: 100%; padding: 1.25rem 0; background: #f9f9f9; border-radius: 1.875rem; gap: 7.5rem; }
.m_sec5 .work_time:after{ display: block; content: ""; width: 1px; height: 1.25rem; background:#999; position: absolute; top:calc(50% - .625rem); left:50%;}



/* ===============반응형=============== */
@media screen and (max-width: 1600px){
	.m_sec1 .inner{max-width:calc(100% - 2.5rem);}
	.m_sec1 .main_vis { height: 37.5rem;}
	.m_sec1 .main_vis .info_txt { top: 45%; left: 5rem; width: 80%;}
	.m_sec1 .left_menu div {padding: 1.5rem 2.5rem; font-size: 1.25rem; }
	.m_sec1 .left_menu div a i { width: 3.75rem; height: 3.75rem; }
}

@media screen and (max-width: 1400px){
	section .arrow_btn { left: -2.5rem; width: calc(100% + 5rem); }
	section .arrow_btn a {width: 5rem;height: 5rem;padding: 0 0 1.5rem 1.5rem; box-shadow:none;}
	section .arrow_btn a:after {width: .875rem; height: .875rem;}
}

@media screen and (max-width: 1300px){
	.inner { width: calc(100% - 2.5rem); }
	section .arrow_btn { display:none; }
}

@media screen and (max-width: 1200px){
	.m_sec1 .inner{flex-direction: column;}
	.m_sec1 .main_vis {width:100%;}
	.m_sec1 .left_menu { max-width:100%; padding-top: 3.75rem; }
	.m_sec1 .left_menu h3{display:none;}
	.m_sec1 .left_menu div {flex-direction: row; }
	.m_sec1 .left_menu div a {flex-direction: column; text-align: center; }
	.m_sec1 .left_menu div a + a:after { display: none; }
	
	.m_sec3 .calendar {width: 40rem;}
	.m_sec3 .date_list {width: calc(100% - 40rem - 2.5rem);}
}



@media screen and (max-width: 1024px){
	.main .f_popup { top: 0% !important; left: 0% !important; width: 100%; height: 100%; background: rgb(0 0 0 / 20%);}
	.main .f_popup .wrap { left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: rgb(0 0 0 / 10%) 0 0 10px; width: 60%;}
	
	.m_sec1 {padding-top: 10rem;}

	.m_sec3 .schedule_list li span {display:none;}
	.m_sec3 .schedule_list li a { height: 6.25rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: .625rem; }
	.m_sec3 .schedule_list li a .fs24{font-size:1.25rem;}
	
	.m_sec5 .ask_wrap > div {padding: 3.125rem 3.75rem;}
	.m_sec5 .ask_wrap p.fs40{font-size:2rem;}
}

@media screen and (max-width: 800px){
    .m_sec3 .calendar { width: 36rem; padding: 1.875rem 2.5rem;}
	.m_sec3 .date_list { width: calc(100% - 36rem - 2.5rem); padding: 2.5rem;}

	
	.m_sec4 .people_list .info_list b { width: 8.75rem;}
}


@media screen and (max-width: 767px){
	.m_popup {left: 0 !important; top: 0 !important;  width: 100%; height: 100%;}
	.m_popup .wrap { left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: rgb(0 0 0 / 10%) 0 0 10px; }



	section .title_box h3{margin:0;}
	section .title_box span{display:none;}
	
	.m_sec1 .main_vis { height: 30rem; }
	.m_sec1 .main_vis .info_txt {left: 3.75rem;}
	.m_sec1 .main_vis .info_txt h3 { font-size: 2.5rem; margin-bottom: 1.5rem; }
	.m_sec1 .left_menu div{padding: 2.5rem 1.5rem; gap: 0; font-size: 1rem;}
	.m_sec1 .left_menu div a:nth-child(3){grid-row: 1 / span 2; height: 100%; justify-content: center !important;}
	
	.m_sec3 .calendar_wrap{ flex-direction: column; gap: 2.5rem;}
	.m_sec3 .calendar,
	.m_sec3 .date_list{width:100%;}
	.m_sec3 .calendar .list ul.num li.on:after { width: calc(100% + 3.75rem);}
	.m_sec3 .schedule_list li a { height: 5.625rem; flex-direction: row; align-items: center; justify-content: start; gap: 1.5rem; }

	.m_sec5 .ask_wrap {flex-direction: column; gap: 1.25rem;}
	.m_sec5 .ask_wrap > div { width: 100%; height: auto; }
	.m_sec5 .work_time{margin-top:1.25rem !important; gap: 3.75rem;}
	.m_sec5 .work_time:after {left: 48%; }
}


@media screen and (max-width: 640px){
	.main .f_popup .wrap {width: 80%; }
	
	section .title_box{position: relative; flex-direction: column; align-items: start; gap:2.5rem;}
	section .title_box h3 { font-size: 2.5rem;}
	section .title_box .more_view {position: absolute; right: 0; bottom:0; }
	
	.m_sec1 .left_menu{display:none;}
	.m_sec1 .main_vis .visual_wrap {padding: .625rem 1.25rem; border-radius: 5rem; }
	.m_sec2,
	.m_sec3 {padding: 5rem 0;}
	
	.m_sec3 .calendar .list ul.num li.on:after { width: calc(100% + 1.5rem); }
	
	.m_sec4 .search_box fieldset{gap:.625rem;}
	.m_sec4 .search_box input { width: calc(80% - 12.5rem - 2.8125rem - 1.25rem); border-radius: 5rem; }

} 

@media screen and (max-width: 480px){

	section .title_boxh3 { font-size: 2rem; }
	
	.m_sec1 .main_vis{ height: 24rem; }
	.m_sec1 .main_vis .info_txt { top: 40%; left: 3rem; font-size: 1rem; }
	.m_sec1 .main_vis .info_txt h3 { font-size: 2rem; margin-bottom: 1rem;}
	.m_sec1 .main_vis .visual_wrap{right: 2.5rem; bottom: 2.5rem;}
	
	.m_sec3 .calendar .list ul.num li.on:after { width: 100%; }
	
	.m_sec4 .search_box fieldset { flex-direction: column; }
	.m_sec4 .search_box select,
	.m_sec4 .search_box input,
	.m_sec4 .search_box button{width:90%; border-radius:5rem;}
	
	.m_sec5 .work_time { margin-top: 1.25rem !important; gap: 1rem; flex-direction: column; }
	.m_sec5 .work_time:after{display:none;}
	.m_sec5 .ask_wrap > div { padding: 2.5rem; }
	.m_sec5 .ask_wrap p.fs40 { font-size: 1.875rem; }
}

@media screen and (max-width: 400px){
	section .title_box .tab_box{gap:.625rem;}
	section .title_box .tab_box a {font-size: 1rem;}

	.m_sec3:after {display:none;}
}

@media screen and (max-width: 350px){
}