#wrap.ver_main {
    background: #000f30 url(../images/bg_main.jpg) no-repeat 50% 0; overflow: hidden;
    animation: displace 5s ease infinite;
}
.bg-video {position: absolute; top:0; width:100%; height:100%; opacity: 0.4; z-index: 1;}
.bg-video__content {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
@keyframes displace {
    from {background-position: 50% 0;}
    50% {background-position: 50% -20px; }
    100% {background-position: 50% 0;}
}

.main-title {color:#fff; text-align: center;}
.main-title .main-title-sm {display:block; font-size: 17px; color:#3fddff; font-family: 'Roboto'; font-weight: 300; text-transform:uppercase; letter-spacing: 0.4em}
.main-title .main-title-lg {display:block; font-size: 67px; margin-top:27px; font-family: 'Gmarket Sans'; font-weight: 500;}
.mobile-main-title-lg {display: none;}

/*-------------------------------------------------------------------
    @메인 검색창
-------------------------------------------------------------------*/
.main-search {width:490px; margin:50px auto 0 auto;}
.main-search .search-box {display: block; overflow: hidden; width: 100%; padding: 0; position: relative;}
.main-search .search-box:focus {background: #fff; border-radius: 100px;}
.main-search .search-box::after {content:''; display: block; clear: both;}
.main-search .search-box .cell {display: flex; float: left; justify-content: end;}
.main-search .search-box .cell.tit-cell {display: block; width: 80px; text-align: center;}
.main-search .search-box .cell.txt-cell {width: 100%;}
.main-search .search-box .cell.txt-cell .search-txt {
    display: block; width: 100%; height: 72px; padding: 15px 15px 15px 20px; border: 0; background-color: transparent; line-height: 72px; font-weight: 300; font-size: 1.05em; color: #fff;
    position: relative; border-radius: 100px;
}
.main-search .search-box .cell.txt-cell .search-txt:focus {color:#000;}
.main-search .search-box .cell.txt-cell .search-txt::placeholder {color:#fff !important;}
.main-search .search-box .cell.txt-cell .search-txt + .cell_line {
    position: absolute; bottom:1px; left:50%; transform: translateX(-50%); width:calc(100% - 10px); height:3px; background: #fff; transition: all 0.2s; z-index: -1;
}
.main-search .search-box .cell.txt-cell .search-txt:focus + .cell_line {top:50%; height:calc(100% - 10px); width:calc(100% - 10px); border-radius: 100px; transform: translate(-50%,-50%);}
.main-search .search-box .cell.txt-cell .search-txt:focus::placeholder {color:#000 !important;}
.main-search .search-box .cell.btn-cell {width: 70px; position: absolute; right:15px;}
.main-search .search-box .btn-submit {display: block; width: 45px; height: 45px; background: url(../images/btn_search.svg) no-repeat 50% 50%; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.main-search .search-box .search-txt:focus + .cell_line + .btn-submit {background-image: url(../images/btn_search_on.svg);}

.main-search input:autofill {
    transition: background-color 5000s ease-in-out 0s;
    /*-webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;*/
}
.main-search input:autofill:focus,
.main-search input:autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    /*-webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    -webkit-text-fill-color: #000 !important;*/
}

/*.main-search .search-box .auto-complete {display: none; position: absolute; top: 100%; left: 0; width: 100%; z-index: 99; padding: 10px 0; border: 1px solid #F4F5F9; border-radius: 8px; background-color: #ffffff; box-shadow: 3px 3px 8px 0 rgba(0,0,0,0.15);}
.main-search .search-box .auto-complete.on {display: block;}
.main-search .search-box .auto-complete .list-wrap {display: block; overflow-x: hidden; overflow-y: auto;}
.main-search .search-box .auto-complete .list-wrap > li {display: block;}
.main-search .search-box .auto-complete .list-wrap > li:last-child {border-bottom: 0;}
.main-search .search-box .auto-complete .list-wrap > li .btn-word {display: block; position: relative; padding: 5px 15px 5px 20px; font-weight: 400; font-size: 1rem; color: #000000;}
.main-search .search-box .auto-complete .list-wrap > li .btn-word::before {content:''; position: absolute; top: 12px; left: 10px; width: 4px; height: 4px; border-radius: 10px; background-color: #0a2f52;}
.main-search .search-box .auto-complete .list-wrap > li .btn-word > span {display: inline-block; vertical-align: middle;}
.main-search .search-box .auto-complete .list-wrap > li .btn-word:focus,
.main-search .search-box .auto-complete .list-wrap > li .btn-word:hover {background-color: #F4F5F9;}*/



/*메인탭슬라이드*/
.tab_wrap {margin:0 auto; padding: 180px 0 45px 0;}
.tab_wrap .tit_list {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.tab_wrap .tit_list .slick-list {overflow: unset;}
.tab_wrap .tit_list .slick-list .slick-track {
    display: flex;
    justify-content: center;
}
.tab_wrap .swipe-tab {display: inline-block; position: relative;transition: all 0.2s; text-align: center;}
.tab_wrap .swipe-tab:hover::after,
.tab_wrap .swipe-tab.active-tab::after {
    content: "";
    /*width:25px;
    height:25px;
    background:url(../images/tab_active.png) no-repeat 50% 50%;
    background-size: 100%;*/
    position: absolute;
    bottom:-5px;
    left:50%;
    transform: translateX(-50%);
    width: 8px;
    aspect-ratio: 1 / 1;
    border-radius: 1000px;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 100%);
    animation: l1 1.5s infinite;
}
@keyframes l1 {
    80% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0%);}
    100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0%);}
}
.tab_wrap .swipe-tab a {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 20px;
    margin-right: 5px;
    user-select: none;
    font-size: 1.3em;
    color: #a3b2c6;
    letter-spacing: -0.02px;
    transition: all 0.2s;
}
.tab_wrap .swipe-tab a:focus {outline-color: #fff;}
.tab_wrap .swipe-tab a:hover,
.tab_wrap .swipe-tab.active-tab a {
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
}
.tab_wrap .tab_con {
    max-width: 1800px; width: 96%;
    /* 241113아이콘스타일로변경
    margin: 45px auto 0 auto;*/
    margin: 25px auto 0 auto;
    position: relative;
}
/*.tab_wrap .tab_con .tab_list {display: none;}*/
.tab_list.slick-slide {position: relative;}

/* 슬라이드 */
.slider .inner {overflow: hidden;width: 93%;margin: 0 auto;}
.swiper-wrapper {justify-content: center;}
.slider0 .swiper-wrapper {justify-content: flex-start;}
.slide_list > div {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 1% 0 1%;
    width: calc(100% / 8);
}
/*241113아이콘스타일로변경*/
.slide_list > div > a {
    display: block;
    width:100%;
    height: 165px;
    box-sizing: border-box;
    font-size: 1.2em;
    font-weight: 500;
    color: #fff;
    background-color: rgba(8, 30, 57, 0.5);
    /*-webkit-backdrop-filter: blur(10px);*/
    backdrop-filter: blur(10px);
    line-height: 1.4em;
    position: relative;
    transition: all 0.2s;
    border-radius: 15px;
    isolation: isolate;
    padding: 25px 10px 0 25px;
    text-align: left;
    margin-top:20px;
}
.slide_list > div > a:focus {outline-color: #fff;}
.slide_list > div:hover > a {
    /*animation: moveCircle 0.4s 1 forwards;*/
    transform: translateY(-20px);
    background: linear-gradient(144deg, rgba(20,88,241,1) 50%, rgba(23,232,211,1) 100%);
}
.slide_list > div > a:after {
    content: '';
    width:50px;
    height:50px;
    display: block;
    position: absolute;
    bottom:20px;
    left:25px;
    background: url(../images/ic_ms_01.png) no-repeat 50% 50%;
    background-size: 100%;
}
.slide_list > div:hover > a:after {
    animation: moveCircle2 0.4s 1 forwards;
}
@keyframes moveCircle {
    0% {margin-top:20px;}
    100% {margin-top:0px;}
}
@keyframes moveCircle2 {
    0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}

.slide_list > div.ic_01 > a:after {background-image: url(../images/ic_ms_01.png);}
.slide_list > div.ic_02 > a:after {background-image: url(../images/ic_ms_02.png);}
.slide_list > div.ic_03 > a:after {background-image: url(../images/ic_ms_03.png);}
.slide_list > div.ic_04 > a:after {background-image: url(../images/ic_ms_04.png);}
.slide_list > div.ic_05 > a:after {background-image: url(../images/ic_ms_05.png);}
.slide_list > div.ic_06 > a:after {background-image: url(../images/ic_ms_06.png);}
.slide_list > div.ic_07 > a:after {background-image: url(../images/ic_ms_07.png);}
.slide_list > div.ic_08 > a:after {background-image: url(../images/ic_ms_08.png);}
.slide_list > div.ic_09 > a:after {background-image: url(../images/ic_ms_09.png);}
.slide_list > div.ic_10 > a:after {background-image: url(../images/ic_ms_10.png);}
.slide_list > div.ic_11 > a:after {background-image: url(../images/ic_ms_11.png);}
.slide_list > div.ic_12 > a:after {background-image: url(../images/ic_ms_12.png);}
.slide_list > div.ic_13 > a:after {background-image: url(../images/ic_ms_13.png);}
.slide_list > div.ic_14 > a:after {background-image: url(../images/ic_ms_14.png);}
.slide_list > div.ic_15 > a:after {background-image: url(../images/ic_ms_15.png);}
.slide_list > div.ic_16 > a:after {background-image: url(../images/ic_ms_16.png);}
.slide_list > div.ic_17 > a:after {background-image: url(../images/ic_ms_17.png);}
.slide_list > div.ic_18 > a:after {background-image: url(../images/ic_ms_18.png);}
.slide_list > div.ic_19 > a:after {background-image: url(../images/ic_ms_19.png);}
.slide_list > div.ic_20 > a:after {background-image: url(../images/ic_ms_20.png);}
.slide_list > div.ic_21 > a:after {background-image: url(../images/ic_ms_21.png);}

.slide_list > div.ic_01:hover > a:after {background-image: url(../images/ic_ms_01_on.png);}
.slide_list > div.ic_02:hover > a:after {background-image: url(../images/ic_ms_02_on.png);}
.slide_list > div.ic_03:hover > a:after {background-image: url(../images/ic_ms_03_on.png);}
.slide_list > div.ic_04:hover > a:after {background-image: url(../images/ic_ms_04_on.png);}
.slide_list > div.ic_05:hover > a:after {background-image: url(../images/ic_ms_05_on.png);}
.slide_list > div.ic_06:hover > a:after {background-image: url(../images/ic_ms_06_on.png);}
.slide_list > div.ic_07:hover > a:after {background-image: url(../images/ic_ms_07_on.png);}
.slide_list > div.ic_08:hover > a:after {background-image: url(../images/ic_ms_08_on.png);}
.slide_list > div.ic_09:hover > a:after {background-image: url(../images/ic_ms_09_on.png);}
.slide_list > div.ic_10:hover > a:after {background-image: url(../images/ic_ms_10_on.png);}
.slide_list > div.ic_11:hover > a:after {background-image: url(../images/ic_ms_11_on.png);}
.slide_list > div.ic_12:hover > a:after {background-image: url(../images/ic_ms_12_on.png);}
.slide_list > div.ic_13:hover > a:after {background-image: url(../images/ic_ms_13_on.png);}
.slide_list > div.ic_14:hover > a:after {background-image: url(../images/ic_ms_14_on.png);}
.slide_list > div.ic_15:hover > a:after {background-image: url(../images/ic_ms_15_on.png);}
.slide_list > div.ic_16:hover > a:after {background-image: url(../images/ic_ms_16_on.png);}
.slide_list > div.ic_17:hover > a:after {background-image: url(../images/ic_ms_17_on.png);}
.slide_list > div.ic_18:hover > a:after {background-image: url(../images/ic_ms_18_on.png);}
.slide_list > div.ic_19:hover > a:after {background-image: url(../images/ic_ms_19_on.png);}
.slide_list > div.ic_20:hover > a:after {background-image: url(../images/ic_ms_20_on.png);}
.slide_list > div.ic_21:hover > a:after {background-image: url(../images/ic_ms_21_on.png);}

/*.slide_list > div > a {
    display: block;
    width:100%;
    height: 167px;
    box-sizing: border-box;
    font-size: 1.15em;
    font-weight: 500;
    color: #fff;
    background-color: rgba(8, 30, 57, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    line-height: 1.4em;
    position: relative;
    transition: all 0.2s;
    border-radius: 15px;
    isolation: isolate;
}
.slide_list > div > a:focus {outline-color:#fff;}
.slide_list > div > a:focus,
.slide_list > div > a:hover {background: transparent; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);}
.slide_list > div > a span::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 1;
    border-radius: 15px;
}
.slide_list > div > a:after {
    background: linear-gradient(60deg, rgba(20,88,241,1) 40%, rgba(115,240,255,1) 100%);
    width:30px;
    height:30px;
    position: absolute;
    top:-20px;
    right:25px;
    z-index: 10;
    border-radius: 15px;
    opacity: 0;
    transition: all 0.2s;
}
.slide_list > div > a:focus:after,
.slide_list > div > a:hover:after {
    display: block;
    opacity: 1;
    top:0px;
    animation: moveCircle 2s 1 forwards;
}
.slide_list > div > a span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 5;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.2s;
}
.slide_list > div.ct_ocean > a span:after {background: url(../images/main_tab_01.png) no-repeat 50% 50%;}
.slide_list > div.ct_disease > a span:after {background: url(../images/main_tab_06.png) no-repeat 50% 50%;}
.slide_list > div.ct_life > a span:after {background: url(../images/main_tab_03.png) no-repeat 50% 50%;}
.slide_list > div.ct_feed > a span:after {background: url(../images/main_tab_04.png) no-repeat 50% 50%;}
.slide_list > div.ct_food > a span:after {background: url(../images/main_tab_05.png) no-repeat 50% 50%;}
.slide_list > div.ct_resource > a span:after {background: url(../images/main_tab_02.png) no-repeat 50% 50%;}
.slide_list > div.ct_research > a span:after {background: url(../images/main_tab_07.png) no-repeat 50% 50%;}
.slide_list > div > a span:after {
    content: "";
    display: block;
    width:100%;
    height:100%;
    background-size: 100%;
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background-size: cover;
    opacity: 0;
    transition: all 0.2s;
    z-index: -1;
}
.slide_list > div > a:focus span:after,
.slide_list > div > a:hover span:after {opacity: 1; animation: moveCircle 2s 1 forwards;}
@keyframes moveCircle {
    0% {border-radius: 15px;}
    100% {border-radius: 1000px;}
}
*/

.btn_prev,
.btn_next {
    display: inline-block;
    width: 35px;
    height: 48px;
    /* margin:30px 15px 0; */
    background:url('../images/btn_arrow2.svg') center center no-repeat;
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    background-size: 100%;
}
.btn_prev:focus,
.btn_next:focus {outline-color: #fff;}
.btn_prev {transform: rotateY(180deg) translateY(-50%);}
.btn_next {right:0}
.swiper-button-disabled {display: none;}

.slick-slide {
    height: 0px!important;
 }
 .slick-slide.slick-active {
    height: 100% !important;
 }


@media all and (min-width:1921px) {
    #wrap.ver_main {max-width: 100%;background-size: cover;}
    .tab_wrap .tit_list .slick-list {max-width: 1920px; margin:auto;}
    .tab_wrap .tab_con {max-width: 1800px; width: 94%;}
}

@media screen and (max-width:1820px) {

}

@media screen and (max-width:1190px) {
    .main-title .main-title-sm {font-size: 16px;}
    .main-title .main-title-lg {font-size: 55px;}
    .slide_list > div > a {font-size: 1.1em;}
}

@media screen and (max-width:900px) {
    .main-title .main-title-sm {font-size: 15px;}
    .main-title .main-title-lg {font-size: 47px;}
}

@media screen and (max-width:768px){
    #container,
    .ver_main #container {padding-top: 70px;}
    #wrap.ver_main {
        background: #002e63 url(../images/bg_main_mo.jpg) no-repeat 50% 0;
        background-size: 100%;
    }
    .main-title .main-title-sm {
        font-size: 13px;
        letter-spacing: 0;
        text-transform: unset;
    }
    .main-title .main-title-lg {display: none;}
    .mobile-main-title-lg {
        display: block;
        font-size: 2.7em;
        margin-top: 0;
        font-weight: 500;
        line-height: 1.2em;  
        margin-top:8px;
        font-family: 'Gmarket Sans';
        letter-spacing: 10px;
    }
    .mobile-main-title-lg strong {display: block; letter-spacing: 0;}

    .main-search{width: 65%; margin: 25px auto 0 auto;}
    .main-search .search-box .cell {padding:0;}
    .main-search .search-box .cell.txt-cell {font-size: 14px; padding:0;}
    .main-search .search-box .cell.txt-cell .search-txt {height: 60px; line-height: 60px;}
    .main-search .search-box .cell.txt-cell .search-txt + .cell_line {height:2px;}
    .main-search .search-box .btn-submit {width: 40px; height: 40px;right: 15px;}

    .tab_wrap {padding: 70px 0 60px 0;}
    .tab_wrap .tab_con {width: 85%; margin: 30px auto 0 auto;}

    .tab_wrap .tit_list .slick-list .slick-track {display: block;}

    .tab_wrap .tit_list {justify-content: flex-start; padding: 0; margin:0;}
    /*.tab_wrap .tit_list::-webkit-scrollbar {display: none;}*/
    .tab_wrap .swipe-tab {width: auto; flex-shrink: 0;}
    .tab_wrap .swipe-tab a {font-size: 19px; margin-bottom: 15px;}
    .tab_wrap .swipe-tab.active-tab a,
    .tab_wrap .swipe-tab a:hover {font-size: 21px;}

    .swiper-wrapper {flex-wrap: wrap; gap: 12px 4%;; justify-content: flex-start;}
    .slider .inner {width:100%;}
    .slide_list > div {padding:0; width: 47%;}
    .slide_list > div > a {
        height: 150px;
        box-sizing: border-box;
        font-size: 15px;
        margin-top: 0;
        padding: 20px 10px 0 20px;
    }
    .slide_list > div > a:hover {animation: none;}
    .slide_list > div > a:after {
        width: 45px;
        height: 45px;
        bottom: 20px;
        left: 20px;
    }
    .btn_prev, .btn_next {display: none;}
}

@media screen and (max-width:415px){

}
@media screen and (max-width:360px){
    .tab_wrap .swipe-tab a:hover, .tab_wrap .swipe-tab.active-tab a {font-size: 20px;}
    .tab_wrap .swipe-tab a {font-size: 17px;}
}


@media screen and (min-width:769px){
    .tab_wrap .swipe-tab {width: auto !important;}
}