@charset "utf-8";

legend {display:block; position:absolute; top:0; left:0; width:100%; height:1px; font-size:0; line-height:0;}
.oceanplatform-main {position: relative;width: 100%;min-height: 100dvh;background: #FFF;overflow: hidden;z-index: 1;}
.main-cont-wrap {/*display: flex;flex-direction: column;height: 100%;*/padding-top: 20px;}
/* #ocean-con {flex: 1;} */
.ocean-bg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;object-fit: cover;z-index: 0;}
.ocean-bg::after {content: '';position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;background: rgba(0,0,0,.4);}
.ocean-bg video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100% + 10px);height: calc(100% + 10px);object-fit: cover;object-position: top}
/* 헤더 + 로그인/회원가입 */
#ocean-header {position: relative;display: flex;justify-content: space-between;align-items: center;z-index: 1;}
#ocean-header .header-logo > a {display: block;aspect-ratio: 220 / 56;height: 36px;background-image: url(/site/resource/oceanplatform/images/header-logo.svg);background-repeat: no-repeat;background-size: auto 100%;background-position: center;}
#ocean-header .login-box {display: flex;align-items: center;border-radius: 30px;background: rgba(25,37,59,.25);padding: 1px 4px 0;}
#ocean-header .login-box > a {position: relative;color: #FFF;padding: 8px 8px;}
#ocean-header .login-box > a::before {content: '';position: absolute;top: calc(50% - 1px);left: -1px;transform: translateY(-50%);display: block;width: 1px;height: 16px;background: rgba(255,255,255,.4);}
#ocean-header .login-box > a:first-child::before {display: none;}
#ocean-header .login-box > a:hover, .ocean-header .login-box > a:focus {text-decoration: underline;text-underline-offset: 3px;}
/* 슬로건 + 검색(인기검색어) */
#ocean-top {position: relative;z-index: 3;}
.top-wrap {padding:  30px 0 15px;}
.slogan-wrap {text-align: right;margin-bottom: 20px;}
.slogan-wrap .slogan {font-family: var(--font-type02);line-height: 1.3;color: #FFF;text-shadow: 2px 2px 6px rgba(0,0,0,.15);margin-bottom: 0;}
.slogan-wrap .slogan .point {display: block;color: #60B5FF;}
.search-wrap .search-box {background: transparent;margin-bottom: 20px;}
.search-wrap .search-box .input-box {position: relative;}
.search-wrap .search-box .input-box::before {content: '';position: absolute;left: 0;top: calc(-100% - 18px);aspect-ratio: 92/124;width: 70px;background-image: url(/site/resource/oceanplatform/images/search-back.svg);background-size: 100% auto;z-index: -1;}
.search-wrap .search-box .input-box::after {content: '';position: absolute;left: 0;top: calc(-100% - 18px);aspect-ratio: 92/101;width: 70px;background-image: url(/site/resource/oceanplatform/images/search-front.svg);background-size: 100% auto;}
.search-wrap .search-box .input-box .input-search {width: calc(100% - 36px);max-width: inherit;height: 54px;border: 2px solid var(--main-color01);border-radius: 30px;box-shadow: 0 12px 16px rgba(91,107,115,.12);padding: 8px 20px;margin: 0;}
.search-wrap .search-box .input-box .input-search::placeholder {color: #767676;}
.search-wrap .search-box .input-box .btn-search {position: absolute;right: 0;top: 0;aspect-ratio: 1/1;height: 100%;border-radius: 50%;background: linear-gradient(0, #084DAE, #1E67CE);box-shadow: 0 12px 16px rgba(30,40,80,.12);padding: 0;}
.search-wrap .search-box .input-box .btn-search::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);aspect-ratio: 1/1;width: 20px;background-image: url(/site/resource/oceanplatform/images/search-icon.svg);background-size: 100% auto;}
.search-wrap .rank-box {position: relative;}
.search-wrap .rank-box .tit-box .tit {font-family: var(--font-type02);color: #FFF;text-shadow: 3px 3px 8px rgba(0,0,0,.3);padding-left: 12px;margin-bottom: 15px;}
.search-wrap .rank-box .rank-con {position: relative;height: 54px;}
.search-wrap .rank-box .rank-slide {position: absolute;display: flex;flex-wrap: wrap;width: 100%;height: 54px;}
.search-wrap .rank-box .rank-slide .rank-swiper {top: 0;width: 100%;height: 54px;padding: 8px 20px;border: 2px solid var(--main-color01);background: #FFF;border-radius: 30px;box-shadow: 0 12px 16px rgba(91,107,115,.12);margin-left: 0;transition: .1s all ease;overflow: hidden;}
.search-wrap .rank-box .rank-slide .rank-swiper .swiper-slide {width: 100%;}
.search-wrap .rank-box .rank-slide .rank-item {position: relative;display: flex;align-items: center;width: 100%;height: 100%;font-weight: 500;color: #111;align-self: center;padding: 2px 0 0 30px;}
.search-wrap .rank-box .rank-slide .rank-item .rank-num {position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-weight: 700;color: var(--main-color01);}
.search-wrap .rank-box .rank-slide .rank-ctl {position: absolute;bottom: calc(100% + 15px);right: 15px;z-index: 1;}
.search-wrap .rank-box .rank-slide .rank-ctl .control {position: relative;}
.search-wrap .rank-box .rank-slide .rank-ctl button.play-pause.stop:before {content: '';position: absolute;left: 50%;top: 50%;display: inline-block;width: 9px;height: 12px;border-width: 0 2px;border-color: #FFF;border-style: solid;transform: translate(calc(-50% + .5px), -50%);}
.search-wrap .rank-box .rank-slide .rank-ctl button.play-pause.play:before {content: '';position: absolute;left: 50%;top: 50%;border-width: 6px 0 6px 10px;border-style: solid;border-color: transparent;border-left-color: #FFF;transform: translate(-50%, -50%);}
.search-wrap .rank-box .rank-slide .ranking {position: relative;width: 100%;z-index: 2;}
.search-wrap .rank-box .rank-slide .ranking::before {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 0;height: 2px;background: var(--main-color01);}
.search-wrap .rank-box .rank-slide .ranking .rank-more {position: absolute;bottom: 100%;right: 0;display: block;aspect-ratio: 1/1;height: 54px;border: none;background: transparent;padding: 0;z-index: 2;}
.search-wrap .rank-box .rank-slide .ranking .rank-more::before {content: '';position: absolute;top: 50%;left: calc(50% - 5px);transform: translate(-50%, -50%);aspect-ratio: 12/7;height: 7px;background-image:url(/site/resource/oceanplatform/images/rank-arr.svg);background-size: auto 100%;background-position:center;background-repeat:no-repeat;transition:transform .3s}
.search-wrap .rank-box .rank-slide .ranking .rank-inner {display: none;background: #FFF;border: 2px solid var(--main-color01);border-top: 0;padding: 0 25px 10px;}
.search-wrap .rank-box .rank-slide .ranking .rank-inner > ul {position: relative;padding: 15px 0 0;margin-bottom: 0;}
.search-wrap .rank-box .rank-slide .ranking .rank-inner .rank-item {padding: 2px 0 2px 45px;}
.search-wrap .rank-box .rank-slide .ranking .rank-inner .rank-item .rank-num {min-width: 20px;text-align: right;}
.search-wrap .rank-box .rank-slide .ranking .rank-inner .rank-item:hover, .search-wrap .rank-box .rank-slide .ranking .rank-inner .rank-item:focus {text-decoration: underline;text-underline-offset: 3px;}
.search-wrap .rank-box .rank-slide.open .rank-swiper {border-bottom: 0;border-radius: 20px 20px 0 0;}
.search-wrap .rank-box .rank-slide.open .ranking::before {width: calc(100% - 40px);transition: .5s .2s width ease;}
.search-wrap .rank-box .rank-slide.open .ranking .rank-more::before {transform: translate(-50%, -50%) rotateX(180deg);}
.search-wrap .rank-box .rank-slide.open .ranking .rank-inner {border-radius: 0 0 20px 20px;transition: .3s border-radius;}
/* 연구 + 산학연협력 + 오픈이노베이션 */
#status {position: relative;z-index: 2;}
.status-wrap {display: flex;flex-wrap: wrap;gap: 15px;padding: 15px 0 15px;}
.status-wrap .status-box {flex: 0 0 100%;}
.status-wrap .status-box .tit-box {position: relative;border-radius: 8px;box-shadow: 0 16px 24px rgba(30,30,30,.12);z-index: 1;}
.status-wrap .status-box .tit-box .tit {font-family: var(--font-type02);font-size: 20px;color: #FFF;padding: 15px 20px 14px 18px;margin-bottom: 0;}
.status-wrap .status-box .tit-box .status-tooltip {position: relative;vertical-align: text-top;padding: 0;margin-left: 3px;}
.status-wrap .status-box .tit-box .status-tooltip .bi {font-size: 18px;color: #FFF;opacity: .55;}
.status-wrap .status-box .tit-box .status-tooltip .bi + span {display: none;font-family: var(--font-type01);font-size: 15px;color: #fff;background-color: rgba(0,0,0,.85);border-radius: 8px;min-width: 250px;width: 100%;padding: 12px;}
.status-wrap .status-box .tit-box .status-tooltip:hover .bi + span, 
.status-wrap .status-box .tit-box .status-tooltip:focus .bi + span {display: block;position: absolute;top: 36px;left: -63px;text-align: center;z-index: 1;cursor: default;user-select: text;}
.status-wrap .status-box .tit-box .status-tooltip:hover .bi + span::before,
.status-wrap .status-box .tit-box .status-tooltip:focus .bi + span::before {content: "";position: absolute;border-top: 9px solid transparent;border-bottom: 9px solid #111;border-left: 7px solid transparent;border-right: 7px solid transparent;top: -18px;left: 65px;}
.status-wrap .status-box .status-con {position: relative;background: #FFF;border-radius: 8px;padding: 10px;z-index: 0;}
.status-wrap .status-box .status-con .stat-list {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 0;}
.status-wrap .status-box .status-con .stat-list > li {width: 100%;flex: 0 0 100%;}
.status-wrap .status-box .status-con .stat-list .item {position: relative;display: inline-flex;justify-content: space-between;align-items: flex-end;width: 100%;height: 100%;border-radius: 8px;padding: 12px;overflow: hidden;}
.status-wrap .status-box .status-con .stat-list .item::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;border-radius: 8px;clip-path: circle(0 at center);transition: .5s all;}
.status-wrap .status-box .status-con .stat-list .item::after {content: '';position: absolute;bottom: -100%;right: -100%;aspect-ratio: 176 / 107; height: 60px;background-image: url(/site/resource/oceanplatform/images/status-back.svg);background-repeat: no-repeat;background-size: auto 100%;transition: .5s .1s all;opacity: 0;mix-blend-mode: soft-light;}
.status-wrap .status-box .status-con .stat-list .item .con-tit {position: relative;font-weight: 600;color: #191919;margin-bottom: 0;transition: .3s .2s all;z-index: 1;}
.status-wrap .status-box .status-con .stat-list .item .con-tit.small {font-size: 100%;}
.status-wrap .status-box .status-con .stat-list .item .stat {position: relative;font-size: 14px;color: #767676;transition: .3s .2s all;z-index: 1;}
.status-wrap .status-box .status-con .stat-list .item .stat strong {font-size: 18px;font-weight: 700;margin-right: 3px;transition: .3s .2s all;}
.status-wrap .status-box .status-con .stat-list .item:hover::before, .status-wrap .status-box .status-con .stat-list .item:focus::before {clip-path: circle(100% at center);}
.status-wrap .status-box .status-con .stat-list .item:hover::after, .status-wrap .status-box .status-con .stat-list .item:focus::after {bottom: -5px;right: 5px;opacity: .25;}
.status-wrap .status-box .status-con .stat-list .item:hover .con-tit, .status-wrap .status-box .status-con .stat-list .item:focus .con-tit {color: #FFF;}
.status-wrap .status-box .status-con .stat-list .item:hover .stat, .status-wrap .status-box .status-con .stat-list .item:focus .stat {color: #FFF;}
.status-wrap .status-box.update01 .tit-box {background: var(--point-color01);}
.status-wrap .status-box.update01 .status-con .stat-list .item {background: #ECF6F2;}
.status-wrap .status-box.update01 .status-con .stat-list .item .stat strong {color: #11875A;}
.status-wrap .status-box.update01 .status-con .stat-list .item:hover::before, .status-wrap .status-box.update01 .status-con .stat-list .item:focus::before {background-color: var(--point-color01);}
.status-wrap .status-box.update02 .tit-box {background: var(--point-color02);}
.status-wrap .status-box.update02 .status-con .stat-list .item {background: #EFF6FF;}
.status-wrap .status-box.update02 .status-con .stat-list .item .stat strong {color: var(--point-color02);}
.status-wrap .status-box.update02 .status-con .stat-list .item:hover::before, .status-wrap .status-box.update02 .status-con .stat-list .item:focus::before {background-color: var(--point-color02);}
.status-wrap .status-box.update03 .tit-box {background: var(--main-color01);}
.status-wrap .status-box.update03 .status-con .stat-list .item {background: #ECF1F9;}
.status-wrap .status-box.update03 .status-con .stat-list .item .stat strong {color: var(--main-color01);}
.status-wrap .status-box.update03 .status-con .stat-list .item:hover::before, .status-wrap .status-box.update03 .status-con .stat-list .item:focus::before {background-color: var(--main-color01);}
.status-wrap .status-box.update01 .status-con .stat-list .item:hover .stat strong, .status-wrap .status-box.update01 .status-con .stat-list .item:focus .stat strong,
.status-wrap .status-box.update02 .status-con .stat-list .item:hover .stat strong, .status-wrap .status-box.update02 .status-con .stat-list .item:focus .stat strong,
.status-wrap .status-box.update03 .status-con .stat-list .item:hover .stat strong, .status-wrap .status-box.update03 .status-con .stat-list .item:focus .stat strong {color: #FFF;}


/* 해양 공공데이터 현황 */
#openapi {position: relative;padding: 15px 0 30px;z-index: 1;}
.openapi-wrap {position: relative;border-radius: 8px;background: #fff;}
.openapi-wrap .tit-box {position: relative;background: var(--point-color02);border-radius: 8px 8px 60px 8px;padding: 18px 20px 20px;}
.openapi-wrap .tit-box::before {content: '';position: absolute;bottom: 0;left: 0;width: calc(100% - 60px);height: 100%;border-radius: 0 60px 0 0;background: var(--main-color01);opacity: .2;}
.openapi-wrap .tit-box .sub-tit {position: relative;color: rgba(255,255,255,.7);margin-bottom: 2px;z-index: 1;}
.openapi-wrap .tit-box .tit {position: relative;font-family: var(--font-type02);font-size: 22px;color: #FFF;margin-bottom: 0;z-index: 1;}
.openapi-wrap .tit-box .more-btn {position: absolute;bottom: 0;right: 12px;aspect-ratio: 1/1;width: 48px;background: linear-gradient(0, #084DAE, #1E67CE);border-radius: 50%;box-shadow: 0 8px 16px rgba(30,40,80,.24);z-index: 1;}
.openapi-wrap .tit-box .more-btn::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(/site/resource/oceanplatform/images/more-btn.png);background-size: auto 100%;transition: all .5s;}
.openapi-wrap .tit-box .more-btn:hover::before, .openapi-wrap .tit-box .more-btn:focus::before {background-position: 100% 0;}
.openapi-wrap .openapi-con {padding: 16px;}
.openapi-wrap .openapi-con .api-list {display: flex;flex-wrap: wrap;justify-content: center;gap: 20px 12px;margin-bottom: 0;}
.openapi-wrap .openapi-con .api-list > li {position: relative;flex: 0 0 calc(calc(100% - 12px) / 2);display: flex;justify-content: center;}
.openapi-wrap .openapi-con .api-list > li::after {content: '';position: absolute;top: 50%;right: -8px;transform: translateY(-50%);width: 3px;height: 80%;background-image: url(/site/resource/oceanplatform/images/line-division.png);}
.openapi-wrap .openapi-con .api-list > li:nth-child(even):after, .openapi-wrap .openapi-con .api-list > li:last-child:after {display: none;}
.openapi-wrap .openapi-con .api-list .item {display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;}
.openapi-wrap .openapi-con .api-list .item .icon {display: inline-block;aspect-ratio: 1/1;width: 60px;flex: 0 0 60px;}
.openapi-wrap .openapi-con .api-list .item .icon img {width: 100%;}
.openapi-wrap .openapi-con .api-list .item .con-tit {display: flex;flex: 0 0 100%;justify-content: center;align-items: flex-end;gap: 0 6px;}
.openapi-wrap .openapi-con .api-list .item .con-tit span:not(.stat) {position: relative;bottom: 2px;font-weight: 700;color: #191919;}
.openapi-wrap .openapi-con .api-list .item .con-tit span.stat {color: #767676;}
.openapi-wrap .openapi-con .api-list .item .con-tit span.stat strong {position: relative;font-size: 20px;font-weight: 700;color: var(--point-color02);margin-right: 3px;}
.openapi-wrap .openapi-con .api-list .item .con-tit span.stat strong::before {content: '';position: absolute;bottom: 1px;left: 0;display: block;width: 0;height: 16px;background: var(--main-color01);opacity: .16;transition: width .5s;}
.openapi-wrap .openapi-con .api-list .item:hover .con-tit span.stat strong::before, .openapi-wrap .openapi-con .api-list .item:focus .con-tit span.stat strong::before {width: 100%;}
#footer {position: fixed;bottom: 0;width: 100%;z-index: 0;}
@media (min-width:400px){
    .openapi-wrap .openapi-con .api-list > li {flex: 0 0 calc(calc(100% - 24px) / 3);}
    .openapi-wrap .openapi-con .api-list > li:nth-child(even):after {display: block;}
    .openapi-wrap .openapi-con .api-list > li:nth-child(3):after, .openapi-wrap .openapi-con .api-list > li:last-child:after {display: none;}
}
@media (min-width:992px){
    .ocean-bg::after {background: rgba(0,0,0,.15);}
    #ocean-header {justify-content: center;}
    #ocean-header .header-logo > a {height: 56px;}
    #ocean-header .login-box {position: absolute;right: 0;}
    .top-wrap {padding: 60px 0 30px;}
    .slogan-wrap {text-align: left;margin-bottom: 60px;}
    .slogan-wrap .slogan {font-size: 44px;text-shadow: 2px 2px 8px rgba(0,0,0,.3);}
    .search-wrap {display: flex;flex-wrap: wrap;gap: 0 30px;align-items: flex-end;width: 100%;}
    .search-wrap .search-box {flex: calc(100% - 350px);margin-bottom: 0;}
    .search-wrap .search-box .input-box::before, .search-wrap .search-box .input-box::after {top: calc(-100% - 28px);left: 14px;width: 84px;}
    .search-wrap .search-box .input-box .input-search {font-size: 18px;width: calc(100% - 45px);height: 60px;border-radius: 40px;padding: 6px 26px 7px;}
    .search-wrap .rank-box {flex: 0 0 320px;}
    .search-wrap .rank-box .tit-box .tit {margin-bottom: 20px;}
    .search-wrap .rank-box .rank-con {height: 60px;}
    .search-wrap .rank-box .rank-slide .ranking .rank-inner {padding: 0 20px 20px;}
    .search-wrap .rank-box .rank-slide {height: 60px;}
    .search-wrap .rank-box .rank-slide .rank-swiper {height: 60px;border-radius: 40px;}
    .search-wrap .rank-box .rank-slide .ranking .rank-more::before {left: 50%;}
    .search-wrap .rank-box .rank-slide .rank-item {padding: 1px 0 0 28px;}
    .search-wrap .rank-box .rank-slide .rank-ctl {bottom: calc(100% + 20px);}
    .search-wrap .rank-box .rank-slide .ranking .rank-more {height: 60px;}
    .search-wrap .rank-box .rank-slide.open .ranking .rank-inner {padding: 0 15px 15px;}
    .status-wrap .status-box .tit-box .tit {font-size: 22px;padding: 18px 20px 17px 22px;}
    .status-wrap .status-box .status-con {padding: 15px;}
    .status-wrap .status-box .status-con .stat-list {gap: 16px 14px;}
    .status-wrap .status-box .status-con .stat-list > li {flex: 0 0 calc(calc(100% - 28px) / 3);}
    .status-wrap .status-box .status-con .stat-list > li:not(:last-child) .item {flex-direction: column;gap: 10px 0;padding: 18px 20px 14px 20px;}
    .status-wrap .status-box .status-con .stat-list .item::after {height: 88px;}
    .status-wrap .status-box .status-con .stat-list .item:hover::after, .status-wrap .status-box .status-con .stat-list .item:focus::after {right: -5px;}
    .status-wrap .status-box .status-con .stat-list .item .con-tit {font-size: 18px;align-self: flex-start;}
    .status-wrap .status-box .status-con .stat-list .item .stat {font-size: 18px;}
    .status-wrap .status-box .status-con .stat-list .item .stat strong {font-size: 24px;}
    .openapi-wrap .tit-box {padding: 20px 28px 24px;}
    .openapi-wrap .tit-box .sub-tit {font-size: 17px;margin-bottom: 4px;}
    .openapi-wrap .tit-box .tit {font-size: 24px;}
    .openapi-wrap .openapi-con {padding: 20px 24px 18px;}
    .openapi-wrap .openapi-con .api-list > li {flex: calc(calc(100% - 96px) / 5);}
    .openapi-wrap .openapi-con .api-list > li:nth-child(3):after {display: block;}
    .openapi-wrap .openapi-con .api-list .item {gap: 10px;}
    .openapi-wrap .openapi-con .api-list .item .icon {width: 72px;flex: 0 0 72px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit {gap: 0 8px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit span:not(.stat) {position: relative;bottom: 1px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit span.stat strong {font-size: 20px;margin-right: 4px;}
}
@media (min-width:1600px){
    .main-cont-wrap {padding-top: 40px;}
    .container{max-width:1500px}
    .top-wrap {display: flex;justify-content: space-between;padding: 0 0 30px;margin-top: 70px;}
    .slogan-wrap {margin-bottom: 0;}
    .slogan-wrap .slogan {font-size: 52px;text-shadow: 2px 2px 8px rgba(0,0,0,.3);}
    .search-wrap {flex: 0 0 855px;}
    .search-wrap .search-box {flex: calc(100% - 250px);}
    .search-wrap .search-box .input-box::before, .search-wrap .search-box .input-box::after {top: calc(-100% - 33px);left: 18px;width: 92px;}
    .search-wrap .search-box .input-box .input-search {height: 64px;box-shadow: 0 18px 28px rgba(30,40,80,.12);}
    .search-wrap .search-box .input-box .btn-search {box-shadow: 0 18px 28px rgba(30,40,80,.12);}
    .search-wrap .rank-box {flex: 0 0 220px;}
    .search-wrap .rank-box .rank-con {height: 64px;}
    .search-wrap .rank-box .rank-slide {height: 64px;}
    .search-wrap .rank-box .rank-slide .rank-swiper {height: 64px;}
    .search-wrap .rank-box .rank-slide .rank-item {font-size: 17px;}
    .search-wrap .rank-box .rank-slide .rank-swiper .rank-item {font-size: 18px;}
    .search-wrap .rank-box .rank-slide .ranking .rank-more {height: 64px;}
    .status-wrap {gap: 30px;padding: 80px 0 15px;}
    .status-wrap .status-box {flex: 0 0 calc(calc(100% - 60px) / 3);}
    .status-wrap .status-box .tit-box {border-radius: 12px;}
    .status-wrap .status-box .tit-box .tit {font-size: 26px;padding: 22px 22px 22px 28px;}
    .status-wrap .status-box .tit-box .status-tooltip .bi + span {font-size: 16px;line-height: 1.3;border-radius: 16px;}
    .status-wrap .status-box .tit-box .status-tooltip:hover .bi + span, .status-wrap .status-box .tit-box .status-tooltip:focus .bi + span {top: 45px;}
    .status-wrap .status-box .status-con {border-radius: 12px;padding: 20px;}
    .status-wrap .status-box .status-con .stat-list > li {flex: 1 0 calc(calc(100% - 14px) / 2);}
    .status-wrap .status-box .status-con .stat-list .item {border-radius: 12px;}
    .status-wrap .status-box .status-con .stat-list .item::after {height: 107px;}
    .status-wrap .status-box .status-con .stat-list .item .con-tit {font-size: 20px;word-break: keep-all;}
    .status-wrap .status-box .status-con .stat-list > li:last-child .item {padding: 24px 20px 23px 22px;}
    .status-wrap .status-box .status-con .stat-list > li:last-child .item:hover::after, .status-wrap .status-box .status-con .stat-list > li:last-child .item:focus::after {bottom: -12px;}
    .status-wrap .status-box .status-con .stat-list > li:last-child .item .con-tit {align-self: center;}
    .status-wrap .status-box .status-con .stat-list > li:not(:last-child) .item .con-tit {height: 45px;}
    .status-wrap .status-box .status-con .stat-list .item .con-tit.small {font-size: 18px;}
    .status-wrap .status-box .status-con .stat-list .item .stat {font-size: 20px;}
    .status-wrap .status-box .status-con .stat-list .item .stat strong {font-size: 24px;margin-right: 4px;}
    #openapi {padding: 15px 0 80px;}
    .openapi-wrap {display: flex;flex-wrap: wrap;border-radius: 14px 12px 12px 14px;}
    .openapi-wrap::after {content: '';position: absolute;bottom: 50%;left: 100%;transform: translateY(50%);aspect-ratio: 100 / 131;width: 100px;background-image: url(/site/resource/oceanplatform/images/openapi-char.svg);opacity: 0;transition: .5s all ease;z-index: 1;}
    .openapi-wrap:hover::after {left: calc(100% - 20px);opacity: 1;}
    .openapi-wrap .tit-box {flex: 0 0 350px;border-radius: 12px 90px 12px 12px;padding: 45px 42px 45px;}
    .openapi-wrap .tit-box::before {width: calc(100% - 135px);border-radius: 12px 0 120px 12px;}
    .openapi-wrap .tit-box .sub-tit {font-size: 20px;margin-bottom: 10px;}
    .openapi-wrap .tit-box .tit {font-size: 28px;}
    .openapi-wrap .tit-box .more-btn {bottom: auto;top: 24px;right: -10px;width: 54px;box-shadow: 0 18px 28px rgba(30,40,80,.24);}
    .openapi-wrap .openapi-con {flex: 0 0 calc(100% - 350px);align-content: center;}
    .openapi-wrap .openapi-con .api-list .item .icon {width: 80px;flex: 0 0 80px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit span:not(.stat) {font-size: 18px;bottom: 3px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit span.stat {font-size: 18px;}
    .openapi-wrap .openapi-con .api-list .item .con-tit span.stat strong {font-size: 24px;}
}
@media (min-width:1921px){
    .top-wrap {margin-top: 160px;}
    .status-wrap {padding: 120px 0 15px;}
}