/* banner */
#banner {width: 100%;z-index: 3;border-radius: 60px;overflow: hidden;}
#banner .item { height: 98vh; }
#banner .main-slider { }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .bgBox{filter: saturate(60%);}
#banner .item .clip:before , #banner .item .clip:after {position: absolute;width: 100%;height: 100%;background: #251f0f;top: 0;left: 0;z-index: 1;content: "";opacity: .2;}
#banner .item .clip:after{background: linear-gradient(to top,#1a1819 0%,rgb(26 24 25 / 0%) 30%);opacity: 1;}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .info {height: 100vh;bottom: 0;width: 100%;z-index: 2;}
#banner .info .txt {transition: all 0.7s ease;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-webkit-box-pack: center;justify-content: flex-end;padding: 0px 0px 0px;z-index: 2;width: 80%;height: 60%;margin: auto;position: absolute;left: 0;right: 0;bottom: 20%;}
#banner .info .txt .h3, #banner .info .txt p {font-weight: 200;color: var(--white);-webkit-transform: translateY(15px);transform: translateY(25px);}
#banner .info .txt .h3 form {letter-spacing: 1px;font-size: 120px;text-align: left;font-style: italic;line-height: 90%;margin-bottom: 30px;color: #ffffff;font-weight: 700;position: relative;font-family: "Nunito Sans", sans-serif;}
#banner .info .txt .h3 form:before{content:'';position:absolute;width: 460px;height:1px;bottom: 0px;left: 0;z-index:0;background-color: rgb(255 255 255 / 35%);transform-origin: top left;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#banner .info .txt .h3 form:nth-child(2):before{width:440px;left:70px}
#banner .info .txt .h3 form:nth-child(2){padding-left:70px;margin-left:170px}
#banner .info .txt article{text-align: center;font-family: 'Roboto', sans-serif;font-size: 22px;font-weight: 600;text-transform: uppercase;}
#banner .info .txt p {font-size: 20px;text-align: left;font-weight: 300;margin-left: 150px;letter-spacing: 6px;}
#banner a.pos_abs {z-index: 12;}
#banner .circle {bottom: 0;left: 90px;z-index: 10;width: 140px;aspect-ratio: 1/1;top: auto;}
#banner .circle span {height: 26px;background-image: url(/images/44/BN_more_shape.png);background-repeat:no-repeat;position:absolute;left: -50px;top: 40%;width: 122px;}

#banner .circle svg{fill: #fff;stroke: #fff;}
#banner .circle svg{-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);}}

/* scrollBtn */
#scrollBtn{position:absolute;align-items:center;letter-spacing:.3em;font-weight:300;font-size:12px;color:#000;left: 80px;white-space:nowrap;transform:rotate(90deg);transform-origin:top left;display:flex;bottom: 110px;padding:0px 10px;animation:godown 1s infinite linear;-webkit-animation:godown 1s infinite linear;text-transform:uppercase;z-index:10;display: none;}
#scrollBtn span{color: #000;font-size:12px;padding:13px;letter-spacing:2px}
#scrollBtn::after{content:"";width: 70px;height:1px;display:block;background: #000;margin:0px 0px}
@-webkit-keyframes banerBg { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.1); } }
@keyframes banerBg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

@-webkit-keyframes godown { 0% , 100% { padding: 0 0 0px 0px; } 50% { padding: 0px 0 0px 0px; } }
@keyframes godown { 0% , 100% { padding: 0px 0 0px 0px; } 50% { padding: 0px 0 0px 10px; } }


@media screen and (max-width: 1024px){
    #banner .info .txt p{margin-left: 60px;}
    #banner .circle span{width: 100px;background-size: contain;}
    #banner .circle{width: 90px;}
	#banner .item { height: 85vh; }
    #banner .info .txt .h3 form:nth-child(2){margin-left: 140px;}
    #banner .info .txt .h3 form{font-size: 70px;}
}
@media screen and (max-width: 640px){
    #banner .info .txt .h3 form:nth-child(2){margin-left: 40px;}
    #banner .circle{position:relative;}
    #banner{border-radius:25px}
    #banner .info .txt .h3 form{font-size: 50px;}
    #banner .info .txt{bottom:5%}
}