@charset "utf-8";

.main_vis.vis1{background-color:#222}
.mainVisSwiper1 { position: relative; }
.mainVisSwiper1 .swiper-slide { height: 100vh; }
.mainVisSwiper1 .swiper-btn{display:flex;width:24px;aspect-ratio:1/1;text-indent:-999%;overflow:hidden;background:url('../images/main/mimg08.png') center no-repeat;cursor:pointer}
.mainVisSwiper1 .swiper-btn.swiper-next{background-image:url('../images/main/mimg07.png')}
.main_vis.vis1 .btn_pause{position:absolute;right:34px;width: 24px;aspect-ratio:1/1;background: url(../images/icon_pause2.png) no-repeat center / contain;cursor: pointer; display: block; pointer-events: auto; }
.main_vis.vis1 .btn_pause.on{background-image:url(../images/icon_play.png)}
.main_vis.vis1 .txt_wrap { max-width: 1530px; padding: 0 60px; top: 37%; transform: translate(-50%,-50%); width: 100%; pointer-events: none; text-align: left; left: 50%; position: absolute; z-index: 21; }
.main_vis_tit{ width: fit-content;color:#fff}
.main_vis_tit .subject{font-size:3rem;font-family:'KorailRound';line-height:1.2}
.main_vis_tit .subject-info{display:inline-block;font-size:1.25rem;margin-bottom:20px}
.main_vis_tit .subject strong{font-family:'KorailRound'}
.mainVisSwiper1 .swiper-page{display:flex;gap:5px;width:max-content}
.mainVisSwiper1 .swiper-pagination-bullet{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:transparent;position:relative;color:#fff;opacity:.8}
.mainVisSwiper1 .swiper-pagination-bullet-active{border:2px solid rgba(255,255,255,.15);opacity:1}
.mainVisSwiper1 .swiper-page .circle-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:calc(100% + 4px);width:calc(100% + 4px)}
.mainVisSwiper1 .swiper-page .circle{position:relative;overflow:hidden;height:50%;display:block}
.mainVisSwiper1 .swiper-page .circle::after{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-radius:50%;border:2px solid transparent}
.mainVisSwiper1 .swiper-page .swiper-pagination-bullet-active .circle.top::after{border-top-color:#fff;border-left-color:#fff;animation:spin-ct 3s 1 linear both}
.mainVisSwiper1 .swiper-page .swiper-pagination-bullet-active .circle.bottom::after{border-top-color:#fff;border-left-color:#fff;top:-30px;animation:spin-cb 3s 3s 1 linear both}

.all_box { position: absolute; top:47%; left: 50%;gap:10px;transform: translateX(-50%); z-index: 1; max-width: 1530px; padding: 0 60px; width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-top:50px}
.all_box .progress_box { position: relative; }
.all_box .swiper-control{width:92px;display:flex;align-items:center;height:24px;gap:10px;position:relative;justify-content:space-between}

.main-link-wrap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;padding:0 60px;display:flex;z-index:100;max-width:1690px;align-items:flex-end}
.main-link-wrap .item{flex:1;position:relative;padding:30px;opacity:.85;font-weight:600;color:#fff;font-size:1.25rem;height:226px;backdrop-filter:blur(50px);background-color:rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.3);transition:.3s}
.main-link-wrap .item:first-child{border-left:1px solid rgba(255,255,255,.3)}
.main-link-wrap .item::after{position:absolute;content:"";display:block;right:30px;bottom:30px;background:url('../images/main/mimg01.png') center/contain no-repeat;width:80px;aspect-ratio:1/1}
.main-link-wrap .item:focus{outline:3px dotted red;outline-offset:-2px}
.main-link-wrap .item:nth-child(2)::after{background-image:url('../images/main/mimg02.png')}
.main-link-wrap .item:nth-child(3)::after{background-image:url('../images/main/mimg03.png')}
.main-link-wrap .item:nth-child(4)::after{background-image:url('../images/main/mimg04.png')}
.main-link-wrap .item:hover{height:276px;opacity:1;background:url('../images/main/mimg05.png') top center/cover no-repeat}
.main-link-wrap .subject{display:flex;align-items:center;gap:20px}
.main-link-wrap .subject::after{width:8px;height:14px;background:url('../images/main/mimg06.png') center/contain no-repeat;content:"";opacity:0}
.main-link-wrap .item:hover .subject::after{opacity:1}

.h2-tit-con{margin-bottom:10px;color:#093e52;font-size:1.125rem;display:inline-block}
.h2-tit{font-family:'KorailRound';font-size:42px;font-weight:bold}
.h2-wrap{margin-bottom:80px}
.minner{max-width:1690px;padding-right:60px;padding-left:60px;width:100%;margin:0 auto}

/* NEWS */
.main-board{position:relative;background-color:#F7FAFC;padding:100px 0 200px 0;overflow:hidden}
.main-board .minner{display:flex;flex-wrap:wrap}
.main-board .h2-wrap{width:100%}
.main-board .notice_select_wrap{width:250px;margin-right:200px}
.main-board .notice_list_wrap{position:relative;flex-grow:1;max-width:calc(100% - 450px)}
.main-board .select_bg_wrap > ul{display:flex;flex-direction:column}
.main-board .select_bg_wrap .tab-item{display:flex;justify-content:space-between;color:#534c4c;font-size:24px;font-weight:600;padding:20px 10px;width: 100%;position:relative;border-bottom:1px solid #bfbfbfc0}
.main-board .select_bg_wrap .tab-item::after{position:absolute;bottom:-3px;left:0;width:0;transition:.3s;height:3px;background-color:var(--color-sh);content:""}
.main-board .select_bg_wrap .tab-item.selected::before{position:absolute;top:50%;transform:translateY(-50%);right:10px;color:var(--color-sh);content:"";width:10px;height:12px;background:url('../images/main/mimg09.png') center/contain no-repeat;}
.main-board .select_bg_wrap .tab-item:hover,
.main-board .select_bg_wrap .tab-item.selected{color:var(--color-sh)}
.main-board .select_bg_wrap .tab-item.selected{font-weight:bold}
.main-board .select_bg_wrap .tab-item:hover::after,
.main-board .select_bg_wrap .tab-item.selected::after{width:100%}
.main-board .notice_list_wrap > ul{display:flex;gap:24px}
.main-board .notice_list_wrap > ul > li{flex:1}
.main-board .notice_list_wrap .item{position:relative;display:block;background-color:#fff;padding:30px;border:1px solid #D7D7D7}
.main-board .btn-more{position:absolute;top:-140px;right:0}
.main-board .day{font-weight:bold;font-size:48px}
.main-board .date{opacity:.6}
.main-board .board-con{font-size:1.25rem;margin-top:80px;height:4.2em}
.main-board .marquee{bottom:100px}

.board-subject{width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.board-con{display:block;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box}
.btn-more{width:60px;aspect-ratio:1/1;border:1px solid #D7D7D7;border-radius:50%;background:url('../images/main/mimg10.png') #fff center no-repeat;text-indent:-999%;overflow:hidden;transition:.3s}
.btn-more:hover{transform:rotate(180deg);background-color:var(--color-sh);background-image:url('../images/main/mimg11.png');border-color:var(--color-sh)}
.marquee{position:absolute;width: 100%; display: flex; overflow: hidden}
.marquee .marquee-con{gap:20vw;animation:Marquee 60s linear infinite;min-width:100%;flex:none;justify-content:space-around;display:flex}
.marquee .marquee-con p{font-size:160px;color:var(--color-sh);opacity:.04;font-weight:800}

.main-overview{background:url('../images/main/mimg12.png') bottom center/cover no-repeat;padding:50px 0 250px 0}
.main-overview .minner{position:relative}
.main-overview .swiper-slide{width:1200px !important;padding:50px}
.main-overview .inner{display:flex;background:url('../images/main/mimg16.png') top right/cover no-repeat;box-shadow:10px 10px 24px rgba(0,0,0,.18)}
.main-overview .inner:hover .txt .btn-go::before{left:0}
.main-overview .img{width:50%;flex-shrink:0}
.main-overview .img img{width:100%;transform:translate(-50px, -50px)}
.main-overview .overview-inner{position:relative;margin-left:calc((100vw - 1570px) / 2)}
.main-overview .img-rotate{position:absolute;top:-50px;right:22vw;width:175px;aspect-ratio:1/1;animation:spin 20s linear infinite}
.main-overview .img-rotate img{width:100%}
.main-overview .txt{padding:50px 50px 50px 0;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.main-overview .txt .subject{font-size:58px;font-weight:700}
.main-overview .txt .btn-go{position:relative;width:42px;aspect-ratio:1/1;background-color:var(--color-sh);border-radius:50%;display:block;margin-left:10px}
.main-overview .txt .btn-go::before{background:url('../images/main/mimg17.png') center no-repeat;content:"";width:31px;height:17px;position:absolute;left:-10px;top:50%;transform:translateY(-50%);transition:.3s}
.main-overview .txt .tit{font-size:22px;font-weight:500;margin-bottom:10px}
.main-overview .swiper-control{position:absolute;right:0;top:85px;display:flex;gap:5px;align-items:center}
.main-overview .swiper-btn{width:54px;aspect-ratio:1/1;overflow:hidden;text-indent:-999%;border:1px solid rgba(0,0,0,.1);border-radius:50%;background:url('../images/main/mimg18.png') center no-repeat}
.main-overview .swiper-btn.swiper-next{background-image:url('../images/main/mimg19.png')}
.main-overview .swiper-page{display:flex;gap:5px;align-items:center;margin-right:10px}
.main-overview .swiper-pagination-bullet{width:auto;height:50px;position:relative;color:var(--color-sh);font-size:1.25rem;background:none;font-weight:500;display:flex;align-items:center;margin:0;padding:0 5px;opacity:1}
.main-overview .swiper-pagination-bullet-active::after{position:absolute;left:0;bottom:0;height:2px;background-color:var(--color-sh);content:"";width:100%}
.main-overview .swiper-btn.swiper-button-disabled{opacity:.8}

.main-news{position:relative;padding:100px 0;overflow:hidden;background:url('../images/main/mimg20.png') 0 100px no-repeat}
.main-news::before{position:absolute;width:100%;height:100%;background:url('../images/main/mimg21.png') right top no-repeat;content:""}
.main-news .minner{position:relative}
.main-news .tab-wrap{position:absolute;right:190px;top:-100px}
.main-news .tab-wrap a{position:relative;height:50px;color:var(--color-sh);font-size:1.25rem;background:none;font-weight:500;display:flex;align-items:center;padding:0 5px;opacity:1}
.main-news .tab-wrap .selected{color:var(--color-sh);opacity:1}
.main-news .tab-wrap a.selected::after{position:absolute;left:0;bottom:0;height:2px;background-color:var(--color-sh);content:"";width:100%}
.main-news .tab-wrap ul{display:flex;gap:5px;align-items:center}
.main-news .swiper-control{position:absolute;right:0;top:-100px;display:flex;gap:5px;align-items:center}
.main-news .swiper-btn{width:54px;aspect-ratio:1/1;overflow:hidden;text-indent:-999%;border:1px solid rgba(0,0,0,.1);border-radius:50%;background:url('../images/main/mimg18.png') center no-repeat}
.main-news .swiper-btn.swiper-next{background-image:url('../images/main/mimg19.png')}
.main-news .btn_pause{width:54px;aspect-ratio:1/1;overflow:hidden;text-indent:-999%;border:1px solid rgba(0,0,0,.1);border-radius:50%;background:url('../images/main/mimg22.png') center no-repeat}
.main-news .btn_pause.on{background-image:url('../images/main/mimg23.png')}
.main-news .news_cont{overflow:hidden}
.main-news .swiper_all_wrap{position:relative}
.main-news .swiper_all_wrap .swiper-button-disabled {display: none !important}
.main-news .swiper_all_wrap .item{display:flex;position:relative;width:100%;gap:10px;flex-direction:column}
.main-news .swiper_all_wrap .img_wrap{position:relative;width:100%;aspect-ratio:468/306;overflow:hidden}
.main-news .swiper_all_wrap .img_wrap img{width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.main-news .swiper_all_wrap .board-subject{font-size:1.5rem;font-weight:600;margin-top:20px}
.main-news .swiper_all_wrap .date{opacity:.6}
.main-news .badge{background-color:#005c5b;color:#fff;box-shadow:2px 2px 4px rgba(0,0,0,.2);min-width:77px;height:36px;border-radius:30px;position:absolute;bottom:80px;left:50%;align-items:center;transform:translateX(-50%);z-index:10;justify-content:center;display:flex}

:lang(en) .main_vis_tit .subject{font-size:2.4rem}

/* 반응형 */
@media screen and (max-width:1570px) {
    .main_vis.vis3 .news_wrap .news_cont {padding: 0 40px;}
    .main-overview .overview-inner{margin-left:60px}
    .main-overview .swiper-control{right:60px}
}

@media screen and (max-width: 1200px) {
    .h2-tit{font-size:1.875rem}

    .main-link-wrap .item{padding:20px;font-size:1.125rem}
    .main-link-wrap .item::after{width:60px;bottom:20px;right:20px}

    .main-board .notice_select_wrap{width:200px;margin-right:100px}
    .main-board .select_bg_wrap .tab-item{font-size:1.25rem}
    .main-board .notice_list_wrap{max-width:calc(100% - 300px)}
    .main-board .notice_list_wrap > ul{gap:20px}
    .main-board .day{font-size:1.875rem}
    .main-board .board-con{font-size:1.125rem}

    .main-overview{padding:100px 0}
    .main-overview .swiper-slide{width:80% !important}
    .main-overview .txt .subject{font-size:1.875rem}
    .main-overview .img-rotate{right:60px}
}

@media screen and (max-width:1024px) {
    .main_vis_tit .subject{font-size:42px}
    .main-link-wrap{padding:0}

    .main-board .notice_select_wrap{width:150px;margin-right:50px}
    .main-board .notice_list_wrap{max-width:calc(100% - 200px)}

    .main-overview{padding:50px 0}
    .main-overview .swiper-control{top:140px}
    .main-overview .img-rotate{width:120px;top:0}
    .main-overview .overview-inner{margin-left:20px;margin-top:20px}
    .main-overview .swiper-slide{padding:20px}
    .main-overview .inner{flex-direction:column}
    .main-overview .img{width:100%}
    .main-overview .img img{transform:translate(-20px, -20px)}
    .main-overview .txt{padding:20px}
    .main-overview .txt .subject{font-size:1.25rem}
    .main-overview .txt .tit{font-size:1.125rem}
    .main-overview .txt-box{margin-top:10px}

    :lang(en) .main_vis_tit .subject{font-size:1.875rem}
}

@media screen and (max-width:720px) {
    .h2-tit{font-size:1.5rem}
    .h2-tit-con{font-size:1rem}
    .h2-wrap{margin-bottom:20px}
    .minner{padding:0 20px}
    .btn-more{width:40px}

    /* 메인비주얼 */
    .main_vis.vis1 { overflow: hidden; }
    .main_vis.vis1 .txt_wrap { top: 160px; transform: none; left: 20px; padding: 0;max-width:calc(100% - 40px)}
    .main_vis.vis1 .btn_pause { margin-left: 0; }
    .all_box { left: 20px; top: 240px; padding: 0; transform: none;}
    .mainVisSwiper1 .swiper-pagination-bullet{width:40px;height:40px}
    .mainVisSwiper1 .swiper-page .circle::after{width:36px;height:36px}
    .mainVisSwiper1 .swiper-page .swiper-pagination-bullet-active .circle.bottom::after{top:-20px}
    .main_vis_tit .subject{font-size:1.5rem}
    .main_vis_tit .subject-info{font-size:.875rem;margin-bottom:10px}
    .main-link-wrap{flex-wrap:wrap}
    .main-link-wrap .item{flex:auto;width:50%;height:80px;font-size:1rem}
    .main-link-wrap .item::after{width:40px}
    .main-link-wrap .item:hover{height:80px}

    .main-board{padding:50px 0}
    .main-board .select_bg_wrap > ul{flex-direction:row}
    .main-board .select_bg_wrap .tab-item{font-size:1rem;padding:10px;border-color:transparent}
    .main-board .notice_select_wrap{width:100%;margin-right:0;margin-bottom:20px}
    .main-board .notice_list_wrap{max-width:100%}
    .main-board .notice_list_wrap > ul > li:nth-child(3){display:none}
    .main-board .btn-more{top:-60px}
    .main-board .notice_list_wrap > ul{gap:10px}
    .main-board .select_bg_wrap .tab-item.selected::before{display:none}
    .main-board .notice_list_wrap .item{padding:20px}
    .main-board .day{font-size:1.5rem}
    .main-board .board-con{margin-top:20px;font-size:1rem}

    .main-overview .swiper-control{right:0;top:0;position:relative;justify-content:flex-end}
    .main-overview .swiper-pagination-bullet{font-size:1rem;padding:0}
    .main-overview .swiper-btn{width:40px;background-size:6px}
    .main-overview .swiper-page{margin-right:0;gap:0}

    .main-news{padding:50px 0}
    .main-news .swiper-btn{width:40px;background-size:6px}
    .main-news .btn_pause{width:40px}
    .main-news .tab-wrap{position:relative;right:auto;top:auto;margin-bottom:20px}
    .main-news .tab-wrap ul{justify-content:flex-end;padding-right:140px}
    .main-news .tab-wrap a{font-size:1rem;height:40px}
    .main-news .swiper_all_wrap .board-subject{font-size:1.125rem;bottom:70px}
    .main-news .swiper-control{top:0}
    .main-news .badge{min-width:60px;height:30px;font-size:.875rem}

    :lang(en) .main_vis_tit .subject{font-size:1.25rem}
    :lang(en) .main_vis.vis1 .txt_wrap{top:100px}
    :lang(en) .all_box{bottom:180px;top:auto}
}

@media screen and (max-width: 480px) {
    .h2-tit{font-size:1.25rem}

    .main-link-wrap .item{padding:10px;font-size:.875rem}
    .main-link-wrap .item::after{bottom:10px;right:10px;width:36px}
    .main_vis_tit .subject{font-size:1.125rem}

    .main-overview .h2-tit br{display:none}
}

/* animation */
.line-wrap{position:absolute;width:100%;height:100%;bottom:0;left:0;z-index:10}
.line-box span.line{position:absolute;background-color:var(--color-sh);border:none}
.line-box span.line-top{width:0;height:3px;top:0;right:0}
.line-box span.line-right{width:3px;height:0;bottom:0;right:0}
.line-box span.line-bottom{width:0;height:3px;bottom:0;left:0}
.line-box span.line-left{width:3px;height:0;top:0;left:0}
.line-wrap.hover .line-box span.line-top,
.line-wrap.hover .line-box span.line-bottom,
.line-wrap:hover .line-box span.line-top,
.line-wrap:hover .line-box span.line-bottom {
    -webkit-animation: keyframes-width-box .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
    -moz-animation: keyframes-width-box .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
    animation: keyframes-width-box .8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.line-wrap.hover .line-box span.line-right,
.line-wrap.hover .line-box span.line-left,
.line-wrap:hover .line-box span.line-right,
.line-wrap:hover  .line-box span.line-left {
	-webkit-animation: keyframes-height-line 0.8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
 	-moz-animation: keyframes-height-line 0.8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
 	animation: keyframes-height-line 0.8s cubic-bezier(0.345, 0.005, 0.07, 1) 1;
 	-webkit-animation-fill-mode: forwards;
 	-moz-animation-fill-mode: forwards;
 	animation-fill-mode: forwards;
}

/* animation */
@-webkit-keyframes keyframes-width-box {
	form {
	  width: 0%;
	} to {
	  width: 100%;
	}
}
@-moz-keyframes keyframes-width-box {
form {
    width: 0%;
} to {
    width: 100%;
}
}
@keyframes keyframes-width-box {
form {
    width: 0%;
} to {
    width: 100%;
}
}

@-webkit-keyframes keyframes-height-line {
    form {
        height: 0%;
    } to {
        height: 100%;
    }
}
@-moz-keyframes keyframes-height-line {
    form {
        height: 0%;
    } to {
        height: 100%;
    }
}
@keyframes keyframes-height-line {
    form {
        height: 0%;
    } to {
        height: 100%;
    }
}
@keyframes spin-ct{
    from{
        transform:rotate(-135deg)
    }
    to{
        transform:rotate(45deg)
    }
}
@keyframes spin-cb{
    from{
        transform:rotate(45deg)
    }
    to{
        transform:rotate(225deg)
    }
}
@keyframes Marquee {0% {transform: translateX(0);} 100% {transform: translateX(calc(-100% - 30px));}}
@keyframes spin { 100% { transform:rotate(360deg); } }