/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }
.imggbox {text-align: center;}

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

/* general class set */
.txt_clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item { width: 100%; height: 100%; top: 0; left: 0; }
.nowrap_box {font-size: 0;}
.txt_num { font-family: 'Noto Sans TC', 'Noto Sans SC'; }
.flex_direction { flex-direction: column; }
.flex_wrap { flex-wrap: wrap; }


/* banner */
#banner {overflow: hidden;padding-top: 340px;}


/* abs_txt */
#banner .abs_txt {width: 100%;height: 70%;flex-direction: column;right: 0;z-index: 1;opacity: .3;display: flex;align-items: flex-end;display: none;}
#banner .abs_txt svg { margin-left: 5rem; width: 5vw; height: 4vw; }
#banner .abs_txt b {background: transparent;line-height: .8;font-weight: 500;font-size: 14vw;color: transparent;-webkit-text-stroke: 1px #eaeaea;text-stroke: 3px #bfbfb;}

/* slick */
#banner .slick-slider .slick-list{overflow: initial;}
#banner .slick-slider{}
#banner .slick-slide {min-width: 100vw;}
#banner .img_box img {width: 100%;height: 100%;object-fit: cover;}
#banner .img_box:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;content: "";background: linear-gradient(to bottom, #000c 10%, #fff0 40%);opacity: 0.5;}

#banner .info >* {font-weight: 500;opacity: 0;}
#banner .info b {line-height: 1;font-size: 1.2rem;-ms-writing-mode: tb-lr -webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;-webkit-transform: translateX(15px);transform: translateX(15px);}
#banner .info h3 {line-height: 130%;font-size: 1.6rem;font-weight: 700;-webkit-transform: translateY(15px);transform: translateY(15px);color: #2e3340;}
#banner .info p {-webkit-transform: translateY(15px);transform: translateY(15px);color: #ffffff;font-size: 2.1rem;font-weight: 700;padding: 6px 20px;display: inline-block;position: relative;}
#banner .info p:before{content:'';position:absolute;height: 30px;width: 30px;top: 7px;left: 0;background: #a72126;z-index: -1;}
#banner .info h2 form{
    font-family: 'Montserrat', sans-serif;
    font-size: 65px;
    line-height: 120%;
    font-weight: 700;
}
#banner .info h2 form:nth-child(2){
    color: #a72126;
}
#banner .slick-current .info b {opacity: 0;-webkit-transform: translateX(0);transform: translateX(0);transition-delay: .3s;-webkit-transition-delay: .3s;}
#banner .slick-current .info h3,#banner .slick-current .info h2, #banner .slick-current .info .country {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);transition-delay: .4s;-webkit-transition-delay: .4s;}
#banner .slick-current .info p {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);transition-delay: .5s;-webkit-transition-delay: .5s;}
#banner .info .country{width: 160px;position: absolute;right: 30px;-webkit-transform: translateY(15px);transform: translateY(15px);}
#banner .info h2{
    margin-bottom: 20px;
    margin-top: 20px;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    position: relative;
}

/* slick-dots */
#banner .slick-dots {text-align: right;bottom: 0vw;margin: auto 0;width: 1vw;height: 30vh;top: 0;right: 40px;position: absolute;display: flex;flex-direction: column;justify-content: center;}

/* arrow */
#banner .arrow {padding: 10px 20px;width: 100px;border-radius: 35px 0 0;top: calc(60vw - 68px);right: 0;z-index: 5;}
#banner .arrow a {margin: 5px;width: 38px;height: 38px;border: 1px #ffffff4d solid;background: #ffffff5c;border-radius: 50%;display: flex !important;justify-content: center;align-items: center;}
#banner .arrow a:before { width: 35%; height: 35%; border: #fff solid; border-width: 1px 0 0 1px; display: block; content: ""; -webkit-transform: rotate(-45deg) translate(2px, 2px); transform: rotate(-45deg) translate(2px, 2px); }
#banner .arrow a.next {background: rgb(45 45 45 / 25%);-webkit-transform: scaleX(-1);transform: scaleX(-1);}

#banner_txt{
    top: -20px;
    right: 0;
    z-index: -2;
}


/* scrollBtn */
.page-scroll a{display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color: #d1d1d1;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;font-size:12px;writing-mode:vertical-lr;padding-top:50px}
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,-100px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 60px;margin-left:0;left: 174px;z-index:201;transform:translateX(-50%);text-align:center;width:20px;position:absolute;}
.page-scroll a{font-size:12px;writing-mode:vertical-lr;text-transform:uppercase;letter-spacing:3.5px}
.page-scroll.style01 a span{width:0px;height:0px;}
.page-scroll.style01 a::before{content:"";position:absolute;background: #d1d1d1;top:220px;right: 17px;width:1px;height:30px;animation:web_menu002 ease-in-out 5s infinite;animation-direction:alternate}
.page-scroll.style01 a::after{box-sizing:border-box;content:"";position:absolute;top:130px;right:60%;width:1px;height:100px;background: #d1d1d1;opacity:.3}
.page-scroll.style01 a span{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-animation:none;animation:none;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}

/* banner_btns */
.banner_btns {position: fixed;height: 100%;display: flex;justify-content: center;align-items: center;top: 0;left: 0;z-index: 888;width: 4rem;}
.banner_btns a {display: block;padding: 10px;margin: 10px 0;width: 20px;height: 20px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;border: 1px rgb(82 82 82 / 41%) solid;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: rgb(255 255 255 / 47%);}
.banner_btns a.fb_icon {}
.banner_btns a svg {width: 18px;height: 18px;fill: #4f4f4f;}

/* 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: 230px;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: #fff;}
#apple_circle {width: 120px;height: 120px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;background-color: #a72126;}
#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 (max-width: 1690px){
	#banner .slick-slide::after{left:-180px}
}
@media screen and (min-width: 1501px){
}
@media screen and (max-width: 1500px){
	#scroll_btn:before , #scroll_btn:after { background: #fff; }
	#scroll_btn span { color: #fff; }
}
@media screen and (min-width: 1441px){
		#banner .img_box {max-width: calc(100% - 175px);margin-left: 100px;position: relative;z-index: 1;overflow: hidden;order: 1;}
	#banner .info {position: absolute;height: 100%;top: -180px;left: 15rem;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;}

}
@media screen and (max-width: 1440px){
		#banner .img_box {max-width: calc(100% - 175px);margin-left: 100px;position: relative;z-index: 1;overflow: hidden;order: 1;}
	#banner .info h2 form{
    font-size: 50px;
}
		#banner .info {position: absolute;height: 100%;top: -150px;left: 10rem;z-index: 2;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;}
#banner .info p{
    font-size: 1.5rem;
}
}
@media screen and (max-width: 1366px){
	.arrowBox{display:none}
	#banner .slick-slide::after{left:-230px}
}
@media screen and (min-width: 1281px){
	#banner_txt:after {position: absolute;width: 430px;height: 430px;background-image: url(/images/39/img-LOGO.png);background-repeat: no-repeat;background-size: contain;border-radius: 50%;top: 110px;right: 22.5vw;z-index: -1;content: "";}
	#banner .slick-slide {display: block;min-width: 30vw;}
	#banner:after{content:'';position:absolute;background-image: url(/images/39/img-bn-01.png);width: 102px;height: 18px;top: 23%;right: 0;transform: translate(-310%, -23%);}
	#banner .arrow {top: auto;bottom: 20px;right: 75px;}
	.banner_btns {width: 6rem;}
}
@media screen and (max-width: 1280px){
	#banner .item{
    display: flex;
    flex-direction: column;
}
	#banner .slick-slide::after{ display: none;}
	#banner .info {padding: 1rem 2vw 2rem;display: flex;flex-direction: column;align-items: flex-start;position: relative;top: 0;left: 0;width: 80%;margin: auto;}
	#banner .info h3 {font-size: 26px;padding: 10px 0;margin: 0;}
	#banner .info p {font-size: 20px;line-height: 160%;padding: 0 10px;color: #000;}
	#banner .info b { display: none; }
	#banner{
    margin-top: 75px;
    padding-top: 0;
}
#banner .info p:before{
    height: 15px;
    width: 15px;
    top: 1px;
    left: 0;
}
	#banner .info .country{margin-top:20px;width:260px;display: none;}
	#banner .arrow,#scrollBtn{display:none}
	#banner .img_box{
    max-width: calc(100% - 0px);
    margin-left: 0;
}
#apple_circle{display: none;}
	#banner .info h2{
    margin-bottom: 10px;
    margin-top: 10px;
}
	#banner .info h2 form{
    font-size: 30px;
}
}

@media screen and (max-width: 760px){
	#banner .img_box img { height: 80vw; }
	#banner .arrow { width: auto; top: calc(80vw - 68px); }
}
@media screen and (max-width: 640px){
	#banner .info h3 {word-spacing: 100vw;font-size: 18px;}
	#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; } }
}
@media screen and (max-width: 550px){

	#banner .img_box img {height: 70vw;}
	#banner .arrow { top: calc(100vw - 68px); }
}