#gotop
/* BN_bg */
#BN_bg_box { background: url(/images/00/img_banner_bg.jpg) no-repeat center bottom / cover; }
#BN_bg {width: 100%;height: 100vh;top: 0;right: 0;z-index: -1;}
#BN_bg >div { width: 100%; height: 100%; }
#BN_bg .line , #banner .child { right: 0; bottom: 0; }
#BN_bg .line img { width: 100%; height: 100%; }
#BN_bg .child {bottom: 30vw;width: 200px;left: -100px;}
#BN_bg .child img { width: 60%; }
#BN_bg .cloud { width: 200px; top: 5vh; right: 100px;}
#BN_bg .earth { width: 192px; bottom: 27%; right: -4%; }
#BN_bg .rocket { width: 160px; bottom: 3%; left: 14%; }
#BN_bg .paper { width: 168px; top: 17%; right: 0; }
#BN_bg .airplane { width: 268px; bottom: 12%; right: 2%; }


/* banner */
#banner {position: relative;z-index: 10;overflow: hidden;background-image: url(/images/00/img-banner-bg.jpg);background-size: cover;background-repeat: no-repeat;}
#banner .main-slider{width: 100%;margin-left: auto;}
#banner img.dight {position: absolute;bottom: 0;left: 50%;-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);z-index: 11;min-width: 100%;width: 1920px;}
#banner .workframe {margin: 0px auto 0;position: relative;width: 500px;}
.banner_dots .workframe {margin-right: auto;position: relative;width: 80%;}
#banner .fix_txt{margin: 240px auto 0px 6.2%;width: 25vw;}
#banner .text-box { position: relative; display: flex; }
#banner .text-box h2 { display: block; line-height: 110%; letter-spacing: 1px; font-size: 80px; font-weight: 900; color: #102942; }
#banner .info_box .mt_3:before {position: absolute;width: 30px;height: 8px;background: var(--primary);bottom: -40px;content: "";left: 0px;}
#banner .item .btn {padding: 35px 100px 40px;border: 1px rgb(112 112 112 / 25%) solid;background-color: var(--primary);opacity: 1;position: absolute;right: 0;bottom: 30px;z-index: 50;display: flex;flex-direction: column;width: 40%;overflow: hidden;}
#banner .item .btn:before {content: "NCUBEC";position: absolute;right: 0px;display: block;top: -40px;line-height: 1;font-style: italic;font-weight: 700;font-size: 11vmin;letter-spacing: -2px;-webkit-text-stroke-color: #ececec;opacity: .6;white-space: nowrap;color: transparent;-webkit-text-fill-color: transparent;-webkit-text-stroke: 1px #9596cd8c;}
#banner .item .btn font:before {position: absolute;width: 3px;height: 70px;background: var(--white);display: block;top: 10px;left: -30px;z-index: 1;content: "";}
#banner .item .btn font {position: relative;font-weight: 400;color: var(--white);z-index: 2;font-size: 2.4vmin;line-height: 150%;}
#banner .item .btn span{color: var(--white);font-weight: 300;letter-spacing: 0.5px;font-size: 18px;line-height: 150%;}
#banner .item .btn font svg {margin-left: 30px;width: 18px;height: 20px;display: inline-block;fill: #ffffff;vertical-align: middle;}
#banner .item:hover .btn{border: 1px rgb(211 211 211 / 25%) solid;}
#banner .item:hover .fix_txt .btn:before {width: 100%;background: var(--primary);}
#banner .item:hover .fix_txt .btn font { color: #fff; }
#banner .item:hover .fix_txt .btn font svg  { fill: #fff; }
#banner .img_box img {min-width: 60vw;width: 60vw;min-height: 80vh;height: 80vh;margin: 110px 0px 110px auto;}
#banner .img_box video , #banner .img_box iframe { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#banner .info_box {min-width: 100vw;height: 100%;display: flex;align-items: center;}
#banner .info_box h2 {overflow: hidden;width: 0;font-weight: 800;font-size: 62px;line-height: 110%;text-underline-offset: 5px;color: var(--primary);white-space: nowrap;-webkit-transition-duration: .5s;transition-duration: .5s;}
#banner .info_box h3 {word-spacing: 1vmin;font-weight: 300;font-size: 1.8vmin;color: #242424;white-space: pre-line;-webkit-transition-duration: .5s;transition-duration: .5s;width: 300px;font-weight: 200;letter-spacing: 0.5px;}
#banner .info_box .mt_3{color: #333333;font-size: 26px;font-weight: 500;letter-spacing: 0;position: relative;padding-top: 20px;text-shadow: 0px 0px 16px rgb(255 255 255);}
#banner .banner_dots {position: absolute;width: 100vw;bottom: 60px;left: 0;display: none;}
#banner .banner_dots a { margin-right: 15px; padding: 5px 10px 5px 0; display: inline-flex; align-items: center; color: #060606; }
#banner .banner_dots a:after { margin-left: -16px; margin-top: 30px;width: 16px; height: 2px; background: #060606; display: block; content: ""; }
#banner .slick-current h2 { width: 100%; -webkit-transition-delay: .5s; transition-delay: .5s; }
#banner .slick-current h3 {-webkit-transition-delay: .7s;transition-delay: .7s;}
#banner .item .atag_item{z-index: 10;}


/* banner_btns */
.banner_btns {position: absolute;height: 100%;display: flex;justify-content: center;align-items: center;top: -100px;right: 0;}
.banner_btns a { display: block; }
.banner_btns a.fb_icon,.banner_btns a.line_icon {margin-bottom: 1rem;display: none;}
.banner_btns a svg { width: 22px; height: 22px; fill: #383838; }

/* scroll_btn */
#scroll_btn { position: absolute; display: flex; flex-direction: column; align-items: center; bottom: -260px; left: 50%; transform: translateX(-50%); }
#scroll_btn:before { position: absolute; width: 8px; height: 8px; background: #383838; bottom: 90px; left: 50%; transform: translateX(-50%); content: ""; -webkit-animation: scroll_dot 8.5s infinite forwards; animation: scroll_dot 8.5s infinite forwards; }
#scroll_btn:after { margin-top: 5px; width: 1px; height: 80px; background: #383838; display: block; content: ""; }
#scroll_btn span { line-height: 1; font-weight: 400; font-size: 14px; -webkit-animation: scroll_txt 1.5s linear infinite; animation: scroll_txt 1.5s linear infinite; }

@-webkit-keyframes scroll_dot { 0% , 100% { bottom: 90px; } 50% { bottom: 0; } }
@keyframes scroll_dot { 0% , 100% { bottom: 90px; } 50% { bottom: 0; } }
@-webkit-keyframes scroll_txt { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); } }
@keyframes scroll_txt { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
	.banner_btns {width: 5.5rem;}


@media screen and (max-width: 1560px){
	#banner .fix_txt{margin: 180px auto 0px 6.5%;}
	.banner_btns {width: 4.5rem;}
	#banner .img_box img {min-width: 65vw;width: 65vw;min-height: 70vh;height: 70vh;margin: 110px 0px 110px auto;}
#banner .info_box h2{
    font-size: 54px;
}
	#banner .info_box .mt_3{
    font-size: 22px;
}
}
@media screen and (max-width: 1441px){
	#banner .item .btn font:before{height: 50px;top: 6px;}
}
@media screen and (max-width: 1366px){
	#banner .item .btn{width: 46%;}
}
@media screen and (min-width: 1281px){
	#banner .text-box h2:nth-child(2) {position: absolute;-webkit-clip-path: inset(0 0 0 8vw);clip-path: inset(0 0 0 8vw);}
	#banner {height: 110vh;}
}

@media screen and (max-width: 1280px){
	#banner {height: 640px;}
	#banner .workframe {width: 96vw;margin: 0px auto;}
	.banner_btns {width: 54px;}
	.banner_btns a.fb_icon{top: 175px;background: #31539f;margin-bottom: 0;}
	.banner_btns .icon{top: 230px;left: 0px;background: #6d7bc1;line-height: 44px;text-align: center;width: 50px;height: 50px;right: 0px;left: auto;}
	.banner_btns .icon svg { fill: #fff; width: 20px;height: 20px;}
	#scroll_btn:before , #scroll_btn:after { background: #fff; }
	#scroll_btn span { color: #fff; }
	#banner .text-box h2:nth-child(2) {position: absolute;-webkit-clip-path: inset(0 0 0 15vw);clip-path: inset(0 0 0 15vw);}
    #scroll_btn{display: none;}
	#banner .item .btn{padding: 30px 0px 30px 50px;}
	#banner .info_box .mt_3{font-size: 20px;}
	#banner .img_box img {min-width: 60vw;width: 60vw;min-height: 60vh;height: 60vh;margin: 110px 0px 110px auto;}
	#banner .info_box h2{font-size: 48px;}
}
@media screen and (max-width: 1140px){
		#banner {height: 720px;}

}
@media screen and (min-width: 1025px){
    #banner .item .atag_item, #banner .item .img_box{width: 95%;margin-right: auto;display: block;}
}
@media screen and (max-width: 1024px){
	#apple_circle,#banner .banner_dots{display: none;}
	#banner .fix_txt .btn{margin: 90px 0 auto;}
	#banner .fix_txt .btn font{font-size: 2.2vmin;}
	#banner .item .btn font{font-size: 2vmin;}
	#banner .item .btn span{font-size: 15px;}
	#banner .fix_txt{margin: 0px auto 0px 7.5%;}
	#banner .img_box img {min-width: 60vw;width: 60vw;min-height: 60vh;height: 60vh;margin: 110px 0px 110px auto;}
	#banner .info_box h2{font-size: 52px;}
}


@media screen and (max-width: 960px){
	.scrollDownBox{display: none;}
	#banner .slick-current h2{font-size: 7vmin;}
    #banner .item{display: flex;flex-direction: column;position: relative;}
	#banner .img_box img{min-width: 100vw;width: 100vw;min-height: 70vh;height: 70vh;margin: 100px 0px 0px auto;}
	#banner .info_box,#banner .banner_dots{position: relative;}
	#banner .info_box{padding: 40px 50px 70px;}
	#banner .text-box h2:nth-child(2){-webkit-clip-path: inset(0 0 0 100vw);clip-path: inset(0 0 0 100vw);}
	#banner .fix_txt .btn{margin: 50px 0 auto;}
    #banner .info_box .mt_3{font-size: 22px;padding-top: 5px;}
	#banner .fix_txt{margin: 0px auto 0px 0%;width: 100vw;}
    #banner .item .btn{width: 100%;padding: 30px 0px 25px 40px;bottom: unset;position: relative;}
    #banner .item .btn:before{font-size: 13vmin;top: -28px;}
    #banner .item .btn font:before{top: 0;left: -20px;}
    #banner .item .btn font{font-size: 18px;letter-spacing: 0;}
    #banner .item .btn span{font-size: 16px;}
	#banner {height: -webkit-fill-available;}
}
@media screen and (max-width: 640px){
	#banner .img_box img {min-height: 70vw;height: 70vw;margin: 80px 0px 0px auto;}
	#scroll_btn:before { bottom: 5vh; }
	#scroll_btn:after { height: 7vh; }
	@-webkit-keyframes scroll_dot { 0% , 100% { bottom: 5vh; } 50% { bottom: 0; } }
	@keyframes scroll_dot { 0% , 100% { bottom: 5vh; } 50% { bottom: 0; } }
	#banner .fix_txt .btn{width: max-content;padding: 5px 20px;margin-top: 20px;}
	#banner .fix_txt .btn:after{display: none;}
	#banner .info_box .mt_3:before{bottom: -30px;}
    #banner .item .btn:before{top: -18px;}
}
@media screen and (max-width: 550px){
	#banner .workframe {margin: auto;}
	#banner .info_box h2 { font-size: 9vmin; }
	#banner .info_box h3 { font-size: 4vmin; }
    #banner .info_box{padding: 20px 30px 60px;}
}