.gate{width: 100%; position: relative; overflow-x: hidden;}
.gate .gate-inner{box-sizing: border-box;position: relative; z-index: 2;}
.gate .gate-inner .gate-header{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.gate .gate-inner .gate-header .gate-logo{background: url("/res/service/img/index/gate/gate-logo.svg") no-repeat center center;background-size: cover;}

.gate .gate-inner .gate-body{width: 100%;}
.gate .gate-inner .gate-body .gate-top{width: 100%;display: flex;}
.gate .gate-inner .gate-body .gate-top .gate-box{position: relative;box-sizing: border-box;background-repeat: no-repeat!important;background-position: right bottom!important;}
.gate .gate-inner .gate-body .gate-top .gate-type_01{background-color: #013a86;background-image: url("/res/service/img/index/gate/bu-logo.png");}
.gate .gate-inner .gate-body .gate-top .gate-type_02{background-color: #fff;background-image: url("/res/service/img/index/gate/bu-img.png");}
.gate .gate-inner .gate-body .gate-top .gate-box .gate-category{font-family: 'notokr-medium';color: rgba(255, 255, 255, 0.48);}
.gate .gate-inner .gate-body .gate-top .gate-type_02 .gate-category{color: #013a86;}
.gate .gate-inner .gate-body .gate-top .gate-box .gate-title{font-family: 'notokr-bold';color: #fff; word-break: keep-all;}
.gate .gate-inner .gate-body .gate-top .gate-type_02 .gate-title{color: #000;}
.gate .gate-inner .gate-body .gate-top .gate-box .gate-move{position: absolute;box-sizing: border-box;padding: 6px 16px;display: inline-flex;align-items: center;border: 1px solid #fff;border-radius: 20px;}
.gate .gate-inner .gate-body .gate-top .gate-box .gate-move .gate-move__title{font-family: 'notokr-medium';color: #fff;margin-right: 8px;}
.gate .gate-inner .gate-body .gate-top .gate-box .gate-move .gate-move__arrow{width: 14px;height: 14px;background: url("/res/service/img/index/gate/icon-next.png")no-repeat;background-size: cover!important;}

.gate .gate-inner .gate-body .gate-top .gate-type_02 .gate-move{border: 1px solid #013a86;}
.gate .gate-inner .gate-body .gate-top .gate-type_02 .gate-move .gate-move__title{color: #013a86;}
.gate .gate-inner .gate-body .gate-top .gate-type_02 .gate-move .gate-move__arrow{background: url("/res/service/img/index/gate/icon-next-navy.png")no-repeat;}

.gate .gate-inner .gate-body .gate-top .gate-news{box-sizing: border-box;background-color: #fff;background-image: url("/res/service/img/index/gate/bu-img.png");background-repeat: no-repeat;}
.gate .gate-inner .gate-body .gate-top .gate-news .gate-news__item{width: 100%;height: 100%;}
.gate .gate-inner .gate-body .gate-top .gate-news .gate-title{font-family: 'notokr-bold';color: #013a86; word-break: keep-all;}
.gate .gate-inner .gate-body .gate-top .gate-news .gate-board__title{letter-spacing: 0;width: 100%;overflow:hidden;text-overflow:ellipsis;}
.gate .gate-inner .gate-body .gate-top .gate-news .gate-board__category{font-family: 'notokr-medium';color: #ba935f;margin-top: 8px;}

.gate .gate-inner .gate-body .gate-bot .card-box{width: 100%;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item{box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.16);}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head{width: 100%;display: flex;align-items: center;box-sizing: border-box;padding: 0 24px;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-title{font-family: 'notokr-bold';color: #fff;margin-right: 8px;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-btn{border-radius: 100%;box-sizing: border-box;border: 1px solid #fff;margin-left: auto;position: relative;cursor: pointer;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-btn::before{content: "";width: 14px;height: 14px;background: url("/res/service/img/index/gate/icon-next.png")no-repeat center center;background-size: cover;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body{width: 100%;box-sizing: border-box;background-color: #fff;border-radius: 0 30px 0 0;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con{width: 100%;box-sizing: border-box;padding: 16px;border-radius: 10px;background-color: #f5f5f5;margin-top: 8px;position: relative;display: flex;flex-direction: column;cursor: pointer;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con:first-child{margin-top: 0;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-category{font-family: 'notokr-bold';width: calc(100% - 22px);word-break: keep-all;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-ment{color: #424242;width: calc(100% - 22px);word-break: keep-all;margin-top: 4px;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-moving{width: 14px;height: 14px;background: url("/res/service/img/index/gate/icon-next-black.svg")no-repeat;background-size: cover!important;position: absolute;right: 16px;}

.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-con:hover{box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-con:hover p{color: #fff!important;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-con:hover .card-moving{background: url("/res/service/img/index/gate/icon-next.png")no-repeat;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-01{background-color: #2d405a;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-01 .card-category{color: #2d405a;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-01 .card-con:hover{background-color: #6c798b;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-02{background-color: #206e79;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-02 .card-category{color: #206e79;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-02 .card-con:hover{background-color: #6299a1;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-03{background-color: #8467c1;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-03 .card-category{color: #8467c1;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-03 .card-con:hover{background-color: #a894d3;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-04{background-color: #a83162;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-04 .card-category{color: #a83162;}
.gate .gate-inner .gate-body .gate-bot .card-box .card-item.type-04 .card-con:hover{background-color: #c26e91;}

.gate .gate-inner .gate-footer{width: 100%;}
.gate .gate-inner .gate-footer .gate-copyright{text-align: center;color: #9e9e9e;}

.gate .gate-bg{width: 100%;height: 620px;background: url("/res/service/img/index/gate/img-bg.png") no-repeat center center;background-size: cover;position: absolute;top: 0;left: 0;z-index: 1;}



@media screen and (min-width: 1240px){
    .gate{ padding-bottom: 40px;}
    .gate .gate-inner{width: 1200px;margin: 0 auto;}
    .gate .gate-inner .gate-header{padding-top: 56px;}
    .gate .gate-inner .gate-header .gate-logo{width: 127px;height: 38px;}
    .gate .gate-inner .gate-header .gate-ment{width: 802px;height: 107px;margin-top: 40px;}

    .gate .gate-inner .gate-body{margin-top: 80px;}
    .gate .gate-inner .gate-body .gate-top{align-items: stretch; justify-content: space-between;}
    .gate .gate-inner .gate-body .gate-top .gate-box{width: 384px;height: 200px;padding: 32px;background-size: 244px 168px;}
    .gate .gate-inner .gate-body .gate-top .gate-type_02{background-size: contain; width: 248px; }
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-category{font-size: 14px;line-height: 20px;margin-bottom: 8px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-title{font-size: 22px;line-height: 30px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move{bottom: 32px;right: 32px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move .gate-move__title{font-size: 14px;line-height: 20px;}

    .gate .gate-inner .gate-body .gate-top .gate-news{width: calc(100% - 408px);height: 200px;padding: 32px;background-size: 322px 200px;margin-left: 24px; background-position: right top;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-title{font-size: 14px;line-height: 20px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__title{font-size: 24px;line-height: 32px;white-space:nowrap;margin-top: 53px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__category{font-size: 16px;line-height: 23px;}

    .gate .gate-inner .gate-body .gate-bot{margin-top: 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box{display: flex;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item{width: 282px;height: 456px;margin-left: 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item:first-child{margin-left: 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head{height: 64px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-title{font-size: 18px;line-height: 25px;width: calc(100% - 36px);}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-btn{width: 28px;height: 28px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body{height: calc(100% - 64px);padding: 32px 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap{width: 100%; height: 100%; box-sizing: border-box; padding: 0 24px; overflow-y: auto;overflow-x: hidden;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap::-webkit-scrollbar {width: 12px;border-radius: 4px;background-color: transparent;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap::-webkit-scrollbar-thumb{background-color: #e0e0e0;border-radius: 6px;border: 4px solid transparent;background-clip: padding-box;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-category{font-size: 14px;line-height: 20px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-ment{font-size: 14px;line-height: 20px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-moving{top: 19px;}

    .gate .gate-inner .gate-footer{margin-top: 120px;}
    .gate .gate-inner .gate-footer .gate-copyright{font-size: 12px;line-height: 17px;}

    .gate .gate-bg{min-width: 1920px;}
}
@media screen and (max-width: 1240px) and (min-width: 768px){
    .gate{ padding-bottom: 32px;}
    .gate .gate-inner{width: 100%;padding: 0 24px;}
    .gate .gate-inner .gate-header{padding-top: 40px;}
    .gate .gate-inner .gate-header .gate-logo{width: 109px;height: 30px;}
    .gate .gate-inner .gate-header .gate-ment{width: 600px;height: 80px;margin-top: 32px;}

    .gate .gate-inner .gate-body{margin-top: 56px;}
    .gate .gate-inner .gate-body .gate-top{align-items: stretch; justify-content: space-between; flex-wrap: wrap;}
    .gate .gate-inner .gate-body .gate-top .gate-box{width: calc(50% - 8px);min-height: 160px;padding: 24px; margin-top: 16px;}
    .gate .gate-inner .gate-body .gate-top .gate-box:nth-child(-n+2){margin-top: 0;}
    .gate .gate-inner .gate-body .gate-top .gate-type_01{background-size: 178px 120px;}
    .gate .gate-inner .gate-body .gate-top .gate-type_02{background-size: 201px 140px; background-position: top right!important;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-category{font-size: 11px;line-height: 18px;margin-bottom: 4px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-title{font-size: 16px;line-height: 25px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move{bottom: 24px;right: 24px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move .gate-move__title{font-size: 12px;line-height: 18px;}

    .gate .gate-inner .gate-body .gate-top .gate-news{width: calc(100% - 278px);height: 180px;padding: 24px;background-size: 201px 140px;background-position: top right;margin-left: 16px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-title{font-size: 11px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__title{font-size: 16px;line-height: 25px;white-space:nowrap;margin-top: 61px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__category{font-size: 12px;line-height: 20px;margin-top: 8px;}

    .gate .gate-inner .gate-body .gate-bot{margin-top: 16px;}
    .gate .gate-inner .gate-body .gate-bot .card-box{display: flex; flex-wrap: wrap;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item{width: calc(50% - 8px);height: 416px;margin-left: 16px; margin-top: 16px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item:nth-child(odd){margin-left: 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item:nth-child(-n + 2){margin-top: 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head{height: 56px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-title{font-size: 16px;line-height: 23px;width: calc(100% - 32px);}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-btn{width: 24px;height: 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body{height: calc(100% - 56px);padding: 24px 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap{width: 100%; height: 100%; overflow-y: auto;overflow-x: hidden; box-sizing: border-box; padding: 0 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap::-webkit-scrollbar {width: 12px;border-radius: 4px;background-color: transparent;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap::-webkit-scrollbar-thumb{background-color: #e0e0e0;border-radius: 6px;border: 4px solid transparent;background-clip: padding-box;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-category{font-size: 12px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-ment{font-size: 12px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-moving{top: 18px;}

    .gate .gate-inner .gate-footer{margin-top: 80px;}
    .gate .gate-inner .gate-footer .gate-copyright{font-size: 10px;line-height: 15px;}
}
@media screen and (max-width: 767px){
    .gate{ padding-bottom: 32px;}
    .gate .gate-inner{width: 100%;padding: 0 20px;}
    .gate .gate-inner .gate-header{padding-top: 40px;}
    .gate .gate-inner .gate-header .gate-logo{width: 109px;height: 30px;}
    .gate .gate-inner .gate-header .gate-ment{width: 100%;margin-top: 32px;}

    .gate .gate-inner .gate-body{margin-top: 56px;}
    .gate .gate-inner .gate-body .gate-top{flex-direction: column;}
    .gate .gate-inner .gate-body .gate-top .gate-box{width: 100%;min-height: 100px;padding: 24px; margin-top: 8px;}
    .gate .gate-inner .gate-body .gate-top .gate-type_01{background-size: 175px 100px;}
    .gate .gate-inner .gate-body .gate-top .gate-type_02{background-size: 201px 100px;}
    .gate .gate-inner .gate-body .gate-top .gate-box:first-child{margin-top: 0;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-category{width: calc(100% - 108px);font-size: 11px;line-height: 18px;margin-bottom: 4px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-title{width: calc(100% - 108px); font-size: 16px;line-height: 25px;}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move{top: 50%;right: 24px;transform: translate(0,-50%);}
    .gate .gate-inner .gate-body .gate-top .gate-box .gate-move .gate-move__title{font-size: 12px;line-height: 18px;}

    .gate .gate-inner .gate-body .gate-top .gate-news{width: 100%;padding: 24px;background-size: 201px 140px;background-position: top right;margin-top: 8px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-title{font-size: 11px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__title{font-size: 16px;line-height: 25px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;margin-top: 36px;}
    .gate .gate-inner .gate-body .gate-top .gate-news .gate-board__category{font-size: 12px;line-height: 20px;margin-top: 8px;}

    .gate .gate-inner .gate-body .gate-bot{margin-top: 8px;}
    .gate .gate-inner .gate-body .gate-bot .card-box{ font-size: 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item{ display: inline-block; width: 100%; margin-top: 8px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item:first-child{margin-top: 0;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head{height: 56px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-title{font-size: 16px;line-height: 23px;width: calc(100% - 32px);}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-head .card-btn{width: 24px;height: 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body{padding: 24px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-wrap{width: 100%;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-category{font-size: 12px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-ment{font-size: 12px;line-height: 18px;}
    .gate .gate-inner .gate-body .gate-bot .card-box .card-item .card-body .card-con .card-moving{top: 18px;}

    .gate .gate-inner .gate-footer{margin-top: 80px;}
    .gate .gate-inner .gate-footer .gate-copyright{font-size: 10px;line-height: 15px;}
}