/* banner */
#banner {position: relative;z-index: 10;background-image: url(/images/00/img-banner-bg.jpg);background-size: cover;}
#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: 20px auto;position: relative;width: 80%;}
#banner .fix_txt{margin: 70px 0 0px auto;width: 95vw;}
#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 .fix_txt:before {position: absolute;width: 48px;height: 8px;background: var(--primary);top: -30px;content: "";left: 0px;}
#banner .fix_txt .btn:after {margin-top: 5px;width: 240px;height: 2px;background: #242424;display: block;content: "";position: absolute;left: 0px;top: -30px;}
#banner .fix_txt .btn {margin: 120px 200px  auto;padding: 15px 50px;width: fit-content;border: 1px rgb(112 112 112 / 25%) solid;background-color: rgb(0 0 0 / 88%);display: block;opacity: 1;position: relative;}
#banner .fix_txt .btn:before {position: absolute;width: 0;height: 100%;background: rgb(0 0 0 / 28%);display: block;top: 0;left: 0;z-index: 1;content: "";}
#banner .fix_txt .btn font {position: relative;font-weight: 400;color: #ffffff;z-index: 2;font-size: 3vmin;}
#banner .fix_txt .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: 75vw;width: 75vw;min-height: 93vh;height: 93vh;margin: 70px 0px 0px 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: 6vmin;line-height: 120%;text-underline-offset: 5px;color: #242424;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 p{color: #242424;font-size: 1.9vmin;font-weight: 500;letter-spacing: 0;}
#banner .banner_dots { position: absolute; width: 100vw; bottom: 10px; left: 0; }
#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: 10px; width: 40px; 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: 0; left: 0; }
.banner_btns a { display: block; left: 30px;top: 360px;position: fixed;z-index: 200;}
.banner_btns a.fb_icon { margin-bottom: 1rem; top: 310px;}
.banner_btns a svg { width: 26px; height: 26px; fill: #383838; }

/* scroll_btn */
#scroll_btn{position: absolute;width: 100%;height: 100%;background: rgb(255 255 255 / 0%);left: 0;
    top: 0;}
#apple_circle {bottom: 130px;right: -190px;z-index: 2;}
#apple_circle img {width: auto;height: 30%;}
#apple_circle >div {top: 0;left: 0;}
#apple_circle >div #cText {margin: 5% 0 0 5%;width: 95%;height: 95%;}
#apple_circle >div #cText #circleText {fill: none;}
#apple_circle >div #cText text {font-family: 'Jost',sans-serif;text-transform: uppercase;letter-spacing: 11px;font-weight: 300;font-size: 20px;fill: #000;}
#apple_circle {width: 140px;height: 140px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;}
#apple_circle > div {-webkit-animation: apple_circle 50s linear infinite;animation: apple_circle 50s linear infinite;}

@-webkit-keyframes apple_circle {
	0%,100% {transform: rotate(0);-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);}
	50% {transform: rotate(1turn);-webkit-transform: rotate(1turn);-moz-transform: rotate(1turn);-ms-transform: rotate(1turn);-o-transform: rotate(1turn);}
}
@keyframes apple_circle {
	0%,100% {transform: rotate(0);-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);}
	50% {transform: rotate(1turn);-webkit-transform: rotate(1turn);-moz-transform: rotate(1turn);-ms-transform: rotate(1turn);-o-transform: rotate(1turn);}
}

@media screen and (min-width: 1501px){
    #banner .main-slider{width: calc(100% - 6rem);}
	.banner_btns { width: 6rem; background: #f3f3f3; }
	.banner_btns::after {content: "";width: 6rem;height: 50%;display: block;background-color: var(--primary);position: absolute;bottom: 0;left: 0;z-index: 0;}
	#banner .text-box h2:nth-child(2) {position: absolute;color: #fff;-webkit-clip-path: inset(0 0 0 15vw);clip-path: inset(0 0 0 15vw);}
}

@media screen and (max-width: 1500px){
	#banner .workframe {width: 96vw;margin: 0px auto;}
	.banner_btns {left: 0vmax;}
	.banner_btns a.fb_icon{top: 175px;background: #31539f;}
	.banner_btns a{top: 230px;left: 0px;background: #37a93f;line-height: 50px;text-align: center;width: 55px;height: 55px;right: 0px;left: auto;}
	.banner_btns a svg { fill: #fff; width: 25px;
    height: 25px;}
	#scroll_btn:before , #scroll_btn:after { background: #fff; }
	#scroll_btn span { color: #fff; }
	#banner .text-box h2:nth-child(2) {position: absolute;color: #fff;-webkit-clip-path: inset(0 0 0 23vw);clip-path: inset(0 0 0 23vw);}
}

@media screen and (max-width: 1024px){
	#apple_circle{display: none;}
	#banner .fix_txt .btn{margin: 90px 0 auto;}
	#banner .fix_txt .btn font{font-size: 4.1vmin;}
}

@media screen and (max-width: 960px){
	.scrollDownBox{display: none;}
	#banner .slick-current h2{font-size: 4vmin;}
    #banner .item{display: flex;flex-direction: column;}
	#banner .img_box img{min-width: 100vw;width: 100vw;min-height: 70vh;height: 70vh;margin: 72px 0px 0px auto;}
	#banner .info_box,#banner .banner_dots{position: relative;}
	#banner .info_box{padding: 60px 50px 40px;}
	#banner .banner_dots{padding: 0 60px 20px;}
	#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;}
}
@media screen and (max-width: 640px){
	#banner .img_box img {min-height: 70vw;height: 70vw;margin: 60px 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;}
}
@media screen and (max-width: 550px){
	#banner .workframe {margin: auto;}
	#banner .info_box h2 { font-size: 6vmin; }
	#banner .info_box h3 { font-size: 4vmin; }
    #banner .info_box{padding: 60px 40px 30px;}
    #banner .banner_dots{padding: 0 40px 20px;}
}