#banner{padding-top: 110px;position: relative;}
#banner , #banner .item { overflow: hidden; position: relative; z-index: 100; }
#banner .item {background: no-repeat 50%;background-size: cover;}
#banner .item a {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#banner .txt_box {width: min(75%, 1560px);display: flex;flex-direction: column;justify-content: flex-end;padding: 0px 25px 90px;z-index: 2;pointer-events: none;margin: auto;position: absolute;top: 0px;left: 0;right: 0;bottom: 0;display: none;}
#banner .txt_box p {color: #fff;font-weight: 400;line-height: 1.4;letter-spacing: 6px;word-spacing: 100vw;font-size: 80px;font-family: 'Noto Serif TC';}
#banner .txt_box article { margin-top: 10px; text-align: left; font-weight: 100; font-size: 14px; color: #fff; }
#banner img.img_cover {height: 65vh;}

/* web_name_box */
#banner #web_name_box {bottom: 33%;}
#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: 1px;z-index: 4;}
#banner #web_name_box .ml12 .letter {display: inline-block;font-family: 'Noto Serif TC', sans-serif;font-size: 20px;color: #fff;'Noto Serif TC', font-family: sans-serif;}
#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 .txt_box p.ml3 {position: relative;text-align: left;z-index: 4;}
#banner .txt_box p.ml3 .letter {line-height: 140%;letter-spacing: 4px;font-size: 80px;color: #fff;font-weight:300;font-family: "Crimson Text", serif;font-style: italic;}

/* 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;display: none;}
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 */
.scrollDown a {
  position: absolute;
  bottom: 56px;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  width: 24px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}
.scrollDown a::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
}
.scrollDown a::after {
  content: "";
  position: absolute;
  bottom: 11px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
  -webkit-animation: arrBottom 1.2s ease-in-out infinite;
          animation: arrBottom 1.2s ease-in-out infinite;
  z-index: 1;
}

@-webkit-keyframes arrBottom {
  0%, 100% {
    -webkit-transform: translate(-50%, 0) rotate(-45deg);
            transform: translate(-50%, 0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate(-50%, 3px) rotate(-45deg);
            transform: translate(-50%, 3px) rotate(-45deg);
  }
}
@keyframes arrBottom {
  0%, 100% {
    -webkit-transform: translate(-50%, 0) rotate(-45deg);
            transform: translate(-50%, 0) rotate(-45deg);
  }
  50% {
    -webkit-transform: translate(-50%, 3px) rotate(-45deg);
            transform: translate(-50%, 3px) rotate(-45deg);
  }
}

/* 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 (max-width: 1660px) {
    #banner img.img_cover {height: 60vh;}

}
@media (max-width: 1440px) {
#banner .txt_box p{font-size: 55px;}
}
@media (max-width: 1400px) {
#banner #web_name_box .ml12 .letter{font-size:16px;}
#banner .txt_box p{font-size: 45px;}
}
@media (max-width: 1280px) {
  #banner{padding-top: 68px;}
  .scrollDown a {bottom: 30px;}
  #banner #web_name_box .ml3 .letter{font-size: 50px;}
  #banner img.img_cover {height: 60vh;}

}
@media screen and (max-width: 1024px){
  #banner{padding-top: 60px;}
  #banner #web_name_box{bottom: 27%;}
  #banner video, #banner iframe{transform: scale(1.5);}
}
@media screen and (max-width: 768px){
	#banner .txt_box,.scrollDown a {display: none;}
	#banner .slick-dots {top: auto;bottom: 50px;}
	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; }
  #banner img.img_cover {height: 35vh;}
}
@media screen and (max-width: 600px){
  #banner .slick-dots{display: none !important;}
	#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: 45vh;}
  #banner video, #banner iframe{transform: scale(1.0);}
  #banner{padding-top: 61px;}
}
@media screen and (max-width: 450px){
	#banner #web_name_box .ml12 .letter { font-size: 20px; }
}