/* layout */
#visual {position:relative; width:100%; height:585px; text-align:center;}
#visual:after {position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; width:40px; height:40px; margin:auto; border:6px solid #DDD; border-top-color:#555; border-radius:50%; text-indent:-999px; content:''; animation:spin 1s linear infinite; z-index:190;}
#visual .slogan {display:inline-block; position:relative; top:-50px; max-width:90%; color:#FFF; letter-spacing:-1px; word-break:keep-all; vertical-align:middle; opacity:0; z-index:190; text-shadow:1px 1px #000;}
#visual .slogan p:nth-child(1) {padding:15px 0; font-family:'SUIT-Bold'; font-size:55px; line-height:70px;}
#visual .slogan p:nth-child(2) {padding:20px 0; font-family:'SUIT-Medium'; font-size:30px; line-height:40px;}
#visual .visual {overflow:hidden; width:100%; height:100%;}
#visual .img {position:absolute; top:0; left:0; overflow:hidden; width:1px; height:1px;}
#visual .img img {margin:1px; opacity:0; transform:scale(1.3); transition:opacity 1s, transform 3s;}
#visual .img.on img {opacity:1; transform:scale(1);}
#visual .img.on .slogan {top:0; opacity:1; transition:top 1s 0.5s, opacity 1s 0.5s;}
#visual .btns {display:none; position:absolute; top:0; right:-999px; bottom:0; left:-999px; width:1440px; height:0; margin:auto; z-index:190;}
#visual.loaded:after {display:none;}
#visual.loaded .img {width:100%; height:100%;}
#visual.loaded .img:before {display:inline-block; width:1px; height:100%; margin-left:-1px; vertical-align:middle; content:'';}
#visual.loaded .img img {position:absolute; top:-999px; right:-999px; bottom:-999px; left:-999px; min-width:100%; min-height:100%; margin:auto;}
#visual.loaded .btns {display:block;}
#visual .btn_prev, #visual .btn_next {float:left; overflow:hidden; width:120px; height:120px; margin:-60px 0; padding:0; border:0; border-radius:50%; background:none; -webkit-appearance:none;}
#visual .btn_next {float:right;}
#visual .btn_prev:before, #visual .btn_next:before {float:left; width:64px; height:64px; margin:28px 38px; box-shadow:inset 1px 1px 0 #B6B7B8; transform:rotate(-45deg); content:'';}
#visual .btn_next:before {margin-left:18px; transform:rotate(135deg);}
#visual .btn_stop {display:none;}
#visual .navi {position:absolute; top:250px; right:0; bottom:0; left:0; height:14px; margin:auto 0; padding:0; list-style:none; z-index:190;}
#visual .navi li {display:inline-block; height:14px; margin:0; padding:0; vertical-align:top;}
#visual .navi button {overflow:hidden; width:14px; height:14px; margin:0 7px; padding:0; border:0; border-radius:7px; background:#FFF; line-height:99px; vertical-align:top; transition:width 0.3s; -webkit-appearance:none;}
#visual .navi .on button {width:30px;}

/* content */
.main_notice {padding:105px 0; background:#2666BC;}
.main_notice .container {width:96%; max-width:1200px; margin:0 auto;}
.main_notice .container:after {display:block; clear:both; content:'';}
.main_notice .h {float:left; width:28%; word-break:keep-all;}
.main_notice .h h2 {font-weight:normal; font-family:'SUIT-SemiBold'; font-size:50px; color:#FFF; line-height:50px;}
.main_notice .h h2 b {display:block; font-size:28px; color:#77A1FA;}
.main_notice .h p {margin-top:20px; font-family:'SUIT-Regular'; font-size:20px; color:#AED4FB; line-height:30px;}
#notice {float:right; width:66.6667%; height:440px; padding:45px 50px 0; border-radius:20px; background:#FFF; box-sizing:border-box;}
#notice .tab {position:relative; height:0;}
#notice .tab h3 {position:absolute; top:0; left:0; width:4.25em; height:52px; font-weight:normal; font-family:'SUIT-Medium'; font-size:24px; color:#747373; line-height:52px; text-align:center; cursor:default;}
#notice .tab h3:after {position:absolute; bottom:-2px; left:0; width:0; height:4px; background:#2693D3; content:''; transition:width 0.3s; z-index:209;}
#notice .tab:nth-child(2) h3 {left:5em;}
#notice .tab:nth-child(3) h3 {left:10em;}
#notice .tab ul {position:absolute; top:0; left:0; overflow:hidden; width:1px; height:1px; margin:0; padding:0; list-style:none; z-index:-1;}
#notice .tab li {position:relative; overflow:hidden; height:45px; margin:0; padding:0 5em 0 5px; font-family:'SUIT-Regular'; font-size:20px; color:#000; line-height:45px; white-space:nowrap; text-overflow:ellipsis;}
#notice .tab li a {color:#000;}
#notice .tab li a:hover {color:#000;}
#notice .tab li img {display:none;}
#notice .tab .date {position:absolute; top:0; right:5px; font-size:16px; color:#999;}
#notice .tab .more {display:none; position:absolute; top:0; right:0; overflow:hidden; width:23px; height:23px; border:1px solid #C1C1C1; font-size:14px; color:transparent;}
#notice .tab .more:before, #notice .tab .more:after {position:absolute; top:11px; left:6px; width:11px; height:1px; background:#999; content:'';}
#notice .tab .more:after {top:6px; left:11px; width:1px; height:11px;}
#notice .tab.on h3 {color:#000;}
#notice .tab.on h3:after {width:100%;}
#notice .tab.on ul {top:52px; left:0; right:0; width:auto; height:auto; padding-top:30px; border-top:1px solid #C1C1C1; z-index:200;}
#notice .tab.on .more {display:block;}

.main_notice {position:relative; overflow:hidden; z-index:0;}
.main_notice .deco1, .main_notice .deco2, .main_notice .deco3, .main_notice .deco4, .main_notice .deco5, .main_notice .deco6, .main_notice .deco7, .main_notice .deco8, .main_notice .deco9 {position:absolute; z-index:-1; animation:bubble 5s linear infinite;}
.main_notice .deco1 {right:2%; bottom:-125px; width:250px; height:250px; border-radius:50%; background:#63AFE9; mix-blend-mode:multiply; opacity:0.5;}
.main_notice .deco2 {top:55px; right:10%; width:145px; height:145px; border-radius:50%; background:#63AFE9; mix-blend-mode:multiply; opacity:0.5; animation-delay:0.45s;}
.main_notice .deco3 {bottom:-50px; left:1%; width:170px; height:170px; border:30px solid #A3BBFD; border-radius:50%; opacity:0.15; animation-delay:0.1s;}
.main_notice .deco4 {bottom:-190px; left:6%; width:350px; height:350px; border:40px solid #416CD1; border-radius:50%; mix-blend-mode:multiply; opacity:0.3; animation-delay:0.23s;}
.main_notice .deco5 {bottom:-10px; right:-6%; width:200px; height:200px; border:40px solid #416CD1; border-radius:50%; mix-blend-mode:multiply; opacity:0.5; animation-delay:0.57s;}
.main_notice .deco6 {top:-170px; right:-2%; width:330px; height:330px; border:30px solid #A3BBFD; border-radius:50%; opacity:0.2; animation-delay:0.31s;}
.main_notice .deco7 {bottom:100px; left:4%; width:110px; height:110px; border-radius:50%; background:#E2321F; opacity:0.4; animation-delay:0.62s;}
.main_notice .deco8 {bottom:130px; right:-180px; width:200px; height:200px; border:20px solid #B13045; border-radius:50%; opacity:0.3; animation-delay:0.71s;}
.main_notice .deco9 {bottom:100px; left:18%; width:180px; height:180px; border:20px solid #548FD5; opacity:0.2; animation-delay:1.12s;}

@keyframes bubble {
    0% {transform:scale(1);}
    30% {transform:scale(1.03);}
    70% {transform:scale(0.97);}
    100% {transform:scale(1);}
}

.main_gallery {padding:70px 0 95px;}
.main_gallery .container {width:96%; max-width:1200px; margin:0 auto;}
.main_gallery .container:after {display:block; clear:both; content:'';}
.main_gallery .h {height:145px; line-height:100px; text-align:center;}
.main_gallery .h h2 {font-weight:normal; font-family:'SUIT-SemiBold'; font-size:50px; color:#333;}
.main_gallery .h h2 b {font-size:30px; color:#386AED;}
.main_gallery .h h2 b:before {content:'\005F\0020';}
#gallery ul {display:flex; justify-content:space-between; margin:0; padding:0; list-style:none;}
#gallery li {width:30.4167%; margin:0; padding:0; border:1px solid #B8CDE1; border-radius:20px; background:#FFF; box-shadow:5px 5px 10px rgba(0,0,0,0.1);}
#gallery .pht {width:100%; height:230px;}
#gallery .pht a {display:block; overflow:hidden; width:100%; height:230px; border-radius:20px 20px 0 0;}
#gallery .pht img {width:100%; height:100%; margin:auto!important; object-fit:cover; transition:transform 0.3s;}
#gallery li:hover .pht img {transform:scale(1.1);}
#gallery .tit {overflow:hidden; height:75px; padding:0 30px; font-family:'SUIT-Regular'; font-size:22px; color:#000; line-height:75px; white-space:nowrap; text-overflow:ellipsis;}
#gallery .tit a {color:#000;}
#gallery .tit a:hover {color:#000;}
#gallery .tit img {display:none;}

.main_gallery {position:relative; overflow:hidden; z-index:0;}
.main_gallery .deco1, .main_gallery .deco2, .main_gallery .deco3, .main_gallery .deco4, .main_gallery .deco5 {position:absolute; z-index:-1;}
.main_gallery .deco1 {left:-5%; bottom:-150px; width:400px; height:400px; border:70px solid #F3F8FC; border-radius:50%;}
.main_gallery .deco2 {left:4%; bottom:180px; width:50px; height:50px; border:15px solid #CEE6FE; border-radius:50%; mix-blend-mode:multiply; opacity:0.5;}
.main_gallery .deco3 {left:2%; bottom:120px; width:20px; height:20px; border:15px solid #CEE6FE; border-radius:50%; mix-blend-mode:multiply; opacity:0.5;}
.main_gallery .deco4 {top:-100px; right:-3%; width:300px; height:300px; border:70px solid #F3F8FC; border-radius:50%;}
.main_gallery .deco5 {top:180px; right:12%; width:40px; height:40px; border:15px solid #CEE6FE; border-radius:50%; mix-blend-mode:multiply; opacity:0.3;}

.main_banner {height:80px; padding:65px 0; background:#F3F8FC url(../design/bg_banner.png) no-repeat 0 0/auto 100%;}
#banner {position:relative; width:96%; max-width:1200px; height:80px; margin:0 auto;}
#banner .go_lft, #banner .go_rgt {position:absolute; top:19px; overflow:hidden; width:27px; height:42px; margin:0; padding:0; border:1px solid #C9C7C7; border-radius:9px; background:#FFF; cursor:pointer;}
#banner .go_lft {left:0;}
#banner .go_rgt {right:0;}
#banner .go_lft:before, #banner .go_rgt:before {float:left; width:10px; height:10px; margin:15px 10px; box-shadow:inset 2px 2px 0 #888; transform:rotate(-45deg); content:'';}
#banner .go_rgt:before {margin-left:5px; transform:rotate(135deg);}
#banner .stop {display:none;}
#banner .lst {position:absolute; top:0; left:35px; right:35px; overflow:hidden; height:80px;}
#banner ul {position:absolute; top:0; left:0; width:100%; height:80px; margin:0; padding:0; list-style:none;}
#banner li {float:left; width:20%; height:70px; margin:0 -20% 0 20%; padding:5px 0; text-align:center;}
#banner li:first-child {margin-left:0;}
#banner li img {overflow:hidden; width:208px; height:68px; border:1px solid #C9C7C7; border-radius:18px;}

/* responsive */
@media screen and (max-width:1280px) {
    #visual.loaded .btns {display:none;}

    #banner li {width:25%; margin:0 -25% 0 25%;}
}