#banner , #banner .item { overflow: hidden; position: relative; z-index: 100; }
#banner .item { background: no-repeat 50% / cover; }
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(31 31 31 / 5%);top: 0;left: 0;z-index: 2;}
#banner .txt_box { width: 560px; height: auto; top: calc(50% + 40px); right: 15vw; z-index: 4; }
#banner .txt_box p { font-size: 17px; color: #fff; }
#banner .txt_box article { margin-top: 10px; text-align: left; font-weight: 100; font-size: 14px; color: #fff; }
#banner img.img_cover { height: 100vh; }

/* web_name_box */
#banner #web_name_box { top: calc(50% - 152px); }
#banner #web_name_box:before , #banner #web_name_box:after {position: absolute;width: 30px;height: 120px;background: rgb(82 10 85 / 46%)75;display: block;-webkit-transform: skew(-20deg, 0);-moz-transform: skew(-20deg, 0);transform: skew(-20deg, 0);top: -30px;left: -15px;z-index: 2;content: "";}
#banner #web_name_box:after { background: none; border: 1px #fff solid; top: -24px; left: -27px; z-index: 1; }
#banner #web_name_box .ml12 { position: relative; text-align: left; letter-spacing: 4px; text-transform: uppercase; z-index: 4; }
#banner #web_name_box .ml12 .letter { display: inline-block; font-family: 'Noto Serif TC', sans-serif; font-size: 24px; color: #fff; }
#banner #web_name_box .ml12:after { margin-left: 20px; width: 0; height: 2px; background: #fff; display: inline-block; content: ""; -webkit-animation: ml12 5s infinite alternate ease-in-out; animation: ml12 5s infinite alternate ease-in-out; opacity: 0; }
#banner #web_name_box .ml3 { position: relative; text-align: left; z-index: 4; }
#banner #web_name_box .ml3 .letter { font-family: 'Noto Serif', sans-serif; line-height: 140%; letter-spacing: 4px; font-size: 80px; color: #fff; font-weight:300;}

/* slick-dots */
#banner .slick-dots { width: auto; top: calc((100% - 60px) / 2); bottom: auto; left: 3%; transform: rotate(90deg); }
#banner .slick-dots li button { text-align: center; }
#banner .slick-dots li.slick-active button { border: 1px #fff solid; }
#banner .slick-dots li button:before { position: relative; width: 5px; height: 5px; display: inline-block; background: #fff; display: inline-block; opacity: 1; content: ""; }

/* video */
.video a , .youtube a { text-shadow:0 0 7px #fff; }
#banner video , #banner iframe {position:absolute;width: 100%;height: 99vh;transform: scale(1.4);top:0;right:0;z-index:1;}


/* svg */
svg#Capa_1 { overflow: hidden; position: absolute; width: 250px; height: 250px; border-radius: 50%; top: calc(55% - 250px); right: 10vw; }
svg#Capa_1 .cls-3 { fill: transparent; stroke-width: 0; d: path("M0 0 L-500 500"); -webkit-animation: dash 7s infinite alternate ease-in-out; animation: dash 7s infinite alternate ease-in-out; }
svg#Capa_1 .line-2 { animation-delay: .2s; }
svg#Capa_1 .line-3 { animation-delay: .4s; }
svg#Capa_1 .line-4 { animation-delay: .6s; }
svg#Capa_1 .line-5 { animation-delay: .8s; }
svg#Capa_1 .line-6 { animation-delay: 1s; }
svg#Capa_1 .line-7 { animation-delay: 1.2s; }
svg#Capa_1 .line-8 { animation-delay: 1.4s; }
svg#Capa_1 .line-9 { animation-delay: 1.6s; }
svg#Capa_1 .line-10 { animation-delay: 1.8s; }
svg#Capa_1 .line-11 { animation-delay: 2s; }
svg#Capa_1 .line-12 { animation-delay: 2.2s; }
svg#Capa_1 .line-13 { animation-delay: 2.4s; }
svg#Capa_1 .line-14 { animation-delay: 2.6s; }
svg#Capa_1 .line-15 { animation-delay: 2.8s; }
svg#Capa_1 .line-16 { animation-delay: 3s; }
svg#Capa_1 .line-17 { animation-delay: 3.2s; }
svg#Capa_1 .line-18 { animation-delay: 3.4s; }
svg#Capa_1 .line-19 { animation-delay: 3.6s; }
svg#Capa_1 .line-20 { animation-delay: 3.8s; }
svg#Capa_1 .line-21 { animation-delay: 4s; }
svg#Capa_1 .line-22 { animation-delay: 4.2s; }
svg#Capa_1 .line-23 { animation-delay: 4.4s; }
svg#Capa_1 .line-24 { animation-delay: 4.6s; }
svg#Capa_1 .line-25 { animation-delay: 4.8s; }

/* scroll_down_btn */
.scroll_down_btn { right: 6vw; bottom: 65px; }
.scroll_down_btn font { display: inline-block; color: #fff; }
.scroll_down_btn font.arrow { position: relative; width: 40px; height: 40px; border: 1px #fff solid; border-radius: 50%; }
.scroll_down_btn font.arrow:before , .scroll_down_btn font.arrow:after { position: absolute; width: 2px; height: 10px; background: #fff; display: inline-block; top: 50%; left: calc((100% - 2px) / 2); content: ""; -webkit-transform-origin: bottom; -webkit-transform: rotate(-45deg); transform-origin: bottom; transform: rotate(-45deg); -webkit-animation: arrow .5s infinite alternate ease-in-out; animation: arrow .5s infinite alternate ease-in-out; }
.scroll_down_btn font.arrow:after { -webkit-transform-origin: bottom; -webkit-transform: rotate(45deg); transform-origin: bottom; transform: rotate(45deg); }
.scroll_down_btn font.line { margin: 0 20px; width: 70px; height: 1px; background: #fff; }

/* animation */
@keyframes ml12 { 0% , 40% { width: 0; opacity: 0; } 50% , 100% { width: 40px; opacity: 1; } }
@-webkit-keyframes ml12 { 0% , 40% { width: 0; opacity: 0; } 50% , 100% { width: 40px; opacity: 1; } }
@keyframes dash { from { fill: transparent; stroke-width: 0; } to { fill: #fba546; stroke-width: 4px; } }
@-webkit-keyframes dash { from { fill: transparent; stroke-width: 0; } to { fill: #fba546; stroke-width: 4px; } }
@keyframes arrow { from { top: 50%; } to { top: calc((100% - 10px) / 2); } }
@-webkit-keyframes arrow { from { top: 50%; } to { top: calc((100% - 10px) / 2); } }

@media screen and (max-width: 1024px){
	#banner img.img_cover {height: 97vh;}
#banner video, #banner iframe{transform: scale(1.5);}
}

@media screen and (max-width: 768px){
	#banner .txt_box {width: 80%;left: 10%;right: 0;top: calc(50% + 0px);}
	#banner .slick-dots { top: auto; bottom: 30px; }
	svg#Capa_1 { opacity: .5; }
	.scroll_down_btn font.line { margin: 0 10px; width: 0; }
	#banner video , #banner iframe {width: auto;transform: scale(1.2);}
	.video a,.youtube a { text-shadow:0 0 3px #fff,0 0 3px #fff; }
}
@media screen and (max-width: 600px){
	#banner #web_name_box .ml12 .letter { font-size: 4vw; }
	#banner #web_name_box .ml12:after { display: none; }
	#banner #web_name_box .ml3 .letter { font-size: 13vw; }
	#banner img.img_cover {height: 77vh;}
#banner video, #banner iframe{transform: scale(1.0);}
}
@media screen and (max-width: 450px){
	#banner #web_name_box .ml12 .letter { font-size: 20px; }
}