@charset "utf-8";
#visual{position:relative;z-index:1; height: 724px}
#visual .visual-tit h2{position: absolute; left: 282px; top: 214px; animation: 1s linear 1s normal both down01;}
#visual .visual-tit > img{display: block; height: 725px;}


@media (max-width:1399px) {
    #visual .visual-tit h2{left: 58px; top: 150px;}
}

@media (max-width:991px) {
    #visual .visual-tit h2{top: 196px;}
}

@media (max-width:768px) {
    #visual .visual-tit h2{left: 18px;}
}

@media (max-width:716px) {
    #visual{height: 425px;}
    #visual .visual-tit > img{height: 425px;}
    #visual .visual-tit h2{top: 107px;}
    #visual .visual-tit h2 img{height: 60px;}
}

@keyframes down01 { 
    0% { transform: translateY(-60%); opacity: 0;}
    100% { transform: translateY(0%); opacity: 1;}
  }
#shortcut{position:relative;z-index:5;margin-top: -10.7vw;}
#shortcut .short-bx{display:flex;align-items:center;padding:0 180px;}
#shortcut .short-bx a{display:block;}
#shortcut .short-bx a + a{margin-left: 51px;}
#shortcut .short-bx a span{display: flex; justify-content: center; ; transition:all .1s; align-items: center; border-radius: 10px; box-shadow: 3px 3px 8px rgba(0,0,0,.5); width: 130px; height: 111px; background: #fff;}
#shortcut .short-bx a span img{display:block; height:58px; transition:all .2s;}
#shortcut .short-bx a:hover span img{transform: scale(1.1);}
#shortcut .short-bx a:first-child span img{margin-left: -10px;}
#shortcut .short-bx a span img.mobile-icon{display:none;}
#shortcut .short-bx a p{text-align:center;font-size:20px;color:#fff;font-weight:600;margin-top:13px;transition:all .2s;}
#shortcut .short-bx a:hover span{border: 3px solid #0092d4;}
#shortcut .short_bg{position: absolute; z-index: -1; left: 20px; top: 50px; background:rgba(0,0,0,.5); border-radius: 80px 80px 0 0; width: 100%; height: 200px;}
@media (max-width:1399px) {
    #shortcut{margin-top: -320px;}
    #shortcut .short_bg{width: 100%; left: 0;}
    #shortcut .short-bx{padding:0px;max-width:1000px;margin:0 auto; justify-content: center;}
    #shortcut .short-bx a p{font-size:15px;margin-top:13px;}
}

@media (max-width:1024px) {
    #shortcut .short-bx a span{width: 100px; height: 80px;}
    #shortcut .short-bx a span img{height: 45px;}
    #shortcut .short-bx a p{font-size:14px;margin-top:12px;}
}

@media (max-width:991px) {
    #shortcut{margin-top: -250px;}
    #shortcut .short-bx{overflow-x:auto;  padding:0 20px;margin:0 -20px;}
    #shortcut .short-bx::-webkit-scrollbar{display:none;}
    #shortcut .short-bx a:not(:first-child){margin-left: 18px;}
    #shortcut .short-bx a span{width: 100px; height: 80px;}
    #shortcut .short-bx a span img{height: 45px;}
    #shortcut .short-bx a p{font-size:14px;margin-top:12px;}
}

@media (max-width:716px) {
    #shortcut{margin-top: -170px;}
    #shortcut .short-bx{padding:0 15px;margin:0 -15px; justify-content: flex-start;}
    #shortcut .short-bx a span{width: 70px; height: 70px;}
    #shortcut .short-bx a span img{height: 35px;}
    #shortcut .short-bx a p{font-size:13px;margin-top:11px;}
    #shortcut .short_bg{top: 42px; border-radius: 0;}
}

@media (max-width:500px) {

}


#infomation{position:relative;z-index:5;margin-top: 50px; background: #0092d4;}
#infomation .info-bx{overflow:hidden;  padding:61px 24px 73px 24px;}
#infomation .info-bx .info_wrap{display: flex; flex-direction: column; justify-content: space-between;}
#infomation .tit-bx{display:flex; align-items:center; padding-right: 40px;}
#infomation .tit-bx h2{line-height:1;color:#fff;font-size:30px;font-weight:700;}
#infomation .btn-bx{display:flex;height: 47px;overflow:hidden; margin-top: 38px; position: relative;}
#infomation .btn-bx::after{content: ''; width: 702px; height: 1px; background: rgba(255,255,255,.3); position: absolute; left: 445px; top: 24px;}
#infomation .btn-bx button{display:flex; transition:all .2s;font-size: 17px;align-items:center;justify-content:center;border-radius: 10px 10px 0 0;color: #b7c4d8;;font-weight: 600; border: 3px solid #b7c4d8; border-width: 3px 3px 0 3px; width: 163px; height: 47px;}
#infomation .btn-bx button.active{color: #ffdd33; border: 3px solid #ffdd33; border-width: 3px 3px 0 3px;}
#infomation .btn-bx button + button{margin-left:17px;}
#infomation .tit-bx p{line-height:1.3;word-break:keep-all;color:#fff;font-size: 20px; margin-left: 23px; font-weight:200;}

#infomation .view-bx{margin-top:29px;}
#infomation .view-bx > div{position:relative; display:none;}
#infomation .view-bx .more{display:flex;  position:absolute; width: 80px;height: 24px; line-height: 24px; top: -62px; right: 0; color: #fff; white-space: nowrap;}
#infomation .view-bx .more img{ height: 22px;}
#infomation .view-bx .more span{display: inline-block; padding-left: 13px; font-size: 18px; font-weight: 500;}
#infomation .list{display:flex; padding-top: 11px;}
#infomation .list a{flex:1;background:#fff;border-radius:20px;box-shadow:0px 0px 8px 0px rgba(0,0,0,.05);padding:20px;transition:all .2s;position:relative;z-index:1;width:calc((100% - 105px) / 4);}
#infomation .list a:hover{box-shadow:0px 0px 12px 0px rgba(0,0,0,.5);}
#infomation .list a + a{margin-left:52px;}
#infomation .list a em{display:inline-block; height:28px; line-height:28px; padding:0 12.5px; border-radius:10px; color:#fff; font-weight: 500; font-size: 15px; background:#ffa71c;}
#infomation .list a em.v2{background: #0e864c;}
#infomation .list a em.v3{background: #0c3dc7;}
#infomation .list a > strong{display:block;margin-top:13px;line-height:1.4em;word-break:keep-all;font-size:20px;font-weight:700;height:2.8em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#infomation .list ul{margin-top: 25px;}
#infomation .list li{display:flex;align-items: flex-start;line-height: 1.3;}
#infomation .list li + li{margin-top: 5px;}
#infomation .list li img{height:16px;margin-right:7px;}
#infomation .list li strong{font-size: 16px;color:#000; font-weight: 600; margin-right:10px;letter-spacing: 1px;flex-shrink: 0;}
#infomation .list li span{font-size: 16px;color: #000;word-break: keep-all;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#infomation .list a{animation:main3 .35s 1 both ease-out;}
#infomation .list a:nth-child(2){animation-delay:.1s;}
#infomation .list a:nth-child(3){animation-delay:.2s;}
#infomation .list a:nth-child(4){animation-delay:.3s;}

@media (max-width:1399px) {
    #infomation{margin-top:27px;padding-bottom:50px;}
    #infomation .info-bx{border-radius:15px;padding: 25px 20px 0 20px;}
    #infomation .tit-bx{padding-right:20px;}
    #infomation .tit-bx h2{font-size:24px;}
    #infomation .btn-bx{height: 34px;}
    #infomation .btn-bx button{width:120px;font-size: 14px;}
    #infomation .tit-bx + p{margin-top: 6px;font-size: 14px;}
    #infomation .view-bx{margin-top:22px;}
    #infomation .list a{border-radius:15px;padding:15px;width:calc((100% - 45px) / 4);}
    #infomation .list a + a{margin-left: 15px;}
    #infomation .list a em{height:24px;line-height:24px;padding:0 10px;font-size:14px;font-weight:400;}
    #infomation .list a > strong{font-size:16px;margin-top:10px;}
    #infomation .list ul{margin-top: 15px;}
    #infomation .list li strong{font-size:13px;margin-right:8px;letter-spacing:2px;}
    #infomation .list li span{font-size:13px;}
    #infomation .list a:before{transform:scale(.8);transform-origin:100% 100%;}
    #infomation .view-bx .more{top: -48px;}
    #infomation .btn-bx::after{left: 281px; top: 18px;}
}

@media (max-width:1024px) {
    #infomation .btn-bx::after{width: 560px;}
}

@media (max-width:991px) {
    #infomation{margin-top:25px;padding-bottom:45px;}
    #infomation .info-bx{padding:20px 20px 0 20px;}
    #infomation .tit-bx h2{font-size:20px;}
    #infomation .btn-bx{height: 32px;}
    #infomation .btn-bx button{width:110px;font-size: 13px;}
    #infomation .btn-bx button + button{margin-left:10px;}
    #infomation .tit-bx p{margin-left: 15px; font-size: 15px;}
    #infomation .view-bx{margin-top:20px;}
    #infomation .list{flex-direction:column;}
    #infomation .list a{padding:13px;width:100%;}
    #infomation .list a + a{margin:10px 0 0;}
    #infomation .list a em{height:18px;line-height:18px;font-size:12px;}
    #infomation .list a > strong{font-size:14px;margin-top:7px;white-space:nowrap;display:block;height:1.4em}
    #infomation .list ul{margin-top:10px;}
    #infomation .list li + li{margin-top: 4px;}
    #infomation .list li strong{font-size:12px;letter-spacing:1px;}
    #infomation .btn-bx::after{width: 320px;}
    #infomation .view-bx .more{top: -44px;}
}

@media (max-width:768px) {
    #infomation .btn-bx::after{left: 259px;}
}

@media (max-width:716px) {
    #infomation{margin-top:25px;padding-bottom:35px;}
    #infomation .info-bx{padding:20px 15px 0 15px;}
    #infomation .tit-bx h2{font-size:18px;}
    #infomation .btn-bx{margin-top: 48px;}
    #infomation .btn-bx::after{display: none;}
    #infomation .btn-bx button{width: 100%;font-size: 12px;}
    #infomation .tit-bx + p{margin-top: 14px;padding-right:15px;}
    #infomation .view-bx{margin-top:20px;}
    #infomation .view-bx .more{top: -86px; align-items: center;}
    #infomation .view-bx .more span{font-size: 15px; }
    #infomation .list{flex-direction:column;}
    #infomation .list a{padding:13px;}
    #infomation .list a + a{margin:10px 0 0;}
    #infomation .list a em{height:18px;line-height:18px;font-size:12px;}
    #infomation .list a > strong{font-size:14px;margin-top:7px;white-space:nowrap;display:block;height:1.4em}
    #infomation .list a > strong br{display: none;}
    #infomation .list ul{margin-top: 8px;}
    #infomation .list li strong{font-size:12px;letter-spacing:1px;}
    #infomation .view-bx .more{bottom: 15px;}
    #infomation .btn-bx button + button{margin-left: 7px;}
    #infomation .info-bx .info_wrap{flex-direction: column;}
    #infomation .tit-bx{flex-direction: column; align-items: normal;}
    #infomation .tit-bx p{margin-left: 0; font-size: 14px; padding-bottom: 10px;}
}


@keyframes main1{ 
    0%{opacity:0;transform:translateY(-70%);}
    100%{opacity:1;transform:translateY(0%);}  
}

@keyframes main2{ 
    0%{width:0%;}
    100%{width:100%;} 
}

@keyframes main3{ 
    0%{opacity:0;transform:translateY(35%);}
    100%{opacity:1;transform:translateY(0%);}  
}