@charset "UTF-8";

*{ font-family: "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-weight: normal;}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0;}
body.scrollhide{ overflow-y: hidden; height: 100vh;}
img{ display: block;}
a{ text-decoration: none;}
a.text{ position: relative; padding: 0 0 0 20px; color: #163bb5; text-decoration: none;}
a.text::before{ position: absolute; top: 2px; left: 2px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}

input, select, textarea{ font-weight: normal; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;}
input:focus, select:focus, textarea:focus{ border: none; outline: none; background: transparent;}
::placeholder { color: #000;}

::-webkit-scrollbar { width: 5px; background-color: transparent;}
::-webkit-scrollbar-thumb { background-color: #160732;}

.main{ margin: 0 auto;}
body.scrollhide .main{ pointer-events: none;}

@media (max-width:500px){
html{ font-size: 12px;}
::-webkit-scrollbar{ width: 0;}
a.text::before{ top: 1; width: 11px; height: 11px; background-size: contain;}
}


.kv{ position: relative; overflow: hidden;}

.kv_bg{ animation: kv_bg1 10s infinite linear; width: 100%;}
@keyframes kv_bg {
    0%{ filter: hue-rotate(0deg);}
    100%{ filter: hue-rotate(359deg);}
}
body.scrollhide .kv_bg{ animation-play-state: paused;}
.kv_ros01{ position: absolute; top: 5.667%; left: 16.042%; width: 67.916%;}
.kv_ros02{ position: absolute; top: 5.667%; left: 16.042%; width: 67.916%; animation: kv_ros02 5s infinite linear;}
@keyframes kv_ros02 {
    0%,31%,40%,42%,44%,60%,71%,100%{ transform: translate(0, 0);}
    1%,30.5%,40.5%,43.5%,60.5%,70.5%{ transform: translate(-8px, 0);}
}
.kv_ros03{ position: absolute; top: 5.667%; left: 16.042%; width: 67.916%; animation: kv_ros03 5s infinite linear;}
@keyframes kv_ros03 {
    0%,31%,40%,42%,44%,60%,71%,100%{ transform: translate(0, 0);}
    1%,30.5%,40.5%,43.5%,60.5%,70.5%{ transform: translate(8px, 0);}
}
.kv_ros04{ position: absolute; top: 5.667%; left: 16.042%; width: 67.916%;}
.kv_ros05{ position: absolute; top: 5.667%; left: 16.042%; width: 67.916%; animation: kv_ros03 5s infinite linear;}

.kv_ch01{ position: absolute; bottom: 0; left: 5.4167%; width: 30.625%; opacity: 0; animation: kv_ch06 0.2s forwards ease-in-out; animation-delay: 0.8s;}
.kv_ch02{ position: absolute; bottom: 0; left: 4.2187%; width: 32.864%; opacity: 0; animation: kv_ch06 0.2s forwards ease-in-out; animation-delay: 0.7s;}
.kv_ch03{ position: absolute; bottom: 0; left: 15%; width: 33.906%; opacity: 0; animation: kv_ch04 0.2s forwards ease-in-out; animation-delay: 0.7s;}
.kv_ch04{ position: absolute; bottom: 0; left: 23.854%; width: 43.802%; opacity: 0; animation: kv_ch04 0.2s forwards ease-in-out; animation-delay: 0.5s;}
@keyframes kv_ch04 {
    0%{ transform: translate(-8px, 0); filter:blur(5px); opacity: 0;}
    100%{ transform: translate(0, 0); filter:blur(0px); opacity: 1;}
}
.kv_ch05{ position: absolute; bottom: 0; left: 37.708%; width: 47.083%; opacity: 0; animation: kv_ch05 0.2s forwards ease-in-out; animation-delay: 0.1s;}
@keyframes kv_ch05 {
    0%{ transform: translate(-8px, 0) scale(1.3); filter:blur(5px); opacity: 0;}
    100%{ transform: translate(0, 0) scale(1); filter:blur(0px); opacity: 1;}
}
.kv_ch06{ position: absolute; bottom: 0; left: 52.812%; width: 35.937%; opacity: 0; animation: kv_ch06 0.2s forwards ease-in-out; animation-delay: 0.5s;}
@keyframes kv_ch06 {
    0%{ transform: translate(8px, 0); filter:blur(5px); opacity: 0;}
    100%{ transform: translate(0, 0); filter:blur(0px); opacity: 1;}
}
.kv_ch07{ position: absolute; bottom: 0; left: 68.437%; width: 30.833%; opacity: 0; animation: kv_ch04 0.2s forwards ease-in-out; animation-delay: 0.8s;}


.kv_slo01{ position: absolute; bottom: 11%; left: 30.156%; width: 39.687%; mix-blend-mode: overlay;}
.kv_slo02{ position: absolute; bottom: 11%; left: 30.156%; width: 39.687%;}
.kv_slo03{ position: absolute; bottom: 8%; left: 36.771%; width: 26.458%; animation: kv_slo03 0.2s forwards ease-in-out; animation-delay: 1s; opacity: 0;}
@keyframes kv_slo03 {
    0%{ transform: translate(0, 8px); opacity: 0;}
    100%{ transform: translate(0, 0); opacity: 1;}
}

body.scrollhide .kv_ch01,
body.scrollhide .kv_ch02,
body.scrollhide .kv_ch03,
body.scrollhide .kv_ch04,
body.scrollhide .kv_ch05,
body.scrollhide .kv_ch06,
body.scrollhide .kv_ch07,
body.scrollhide .kv_slo03{ opacity: 1;}

.kv_light{ position: absolute; top: 0; left: 0; width: 100%; transform: rotate(180deg); mix-blend-mode: overlay; animation: kv_light 3s infinite ease-in-out; animation-delay: 0.1s;}
@keyframes kv_light {
    0%{ filter: hue-rotate(0deg);}
    100%{ filter: hue-rotate(359deg);}
}

.top_icon_01{ right: 260px;}
.top_icon_02{ right: 210px;}
.top_icon_03{ right: 160px;}
.top_icon_04{ right: 110px;}
.top_icon_05{ right: 60px;}
.top_icon_06{ right: 10px;}
.kv a img{ max-width: 100%;}
.kv a[class^="top_icon_0"]{ position: absolute; top: 4%; transition: .2s;}
.kv a[class^="top_icon_0"]:hover{ filter: brightness(1.8);}

.kv_logo{ position: absolute; top: 4%; left: 1.614%;}

.ling_bottom{ position: absolute; bottom: -1px; left: 0; width: 100%;}
.ling_top{ position: absolute; top: -1px; left: 0; width: 100%;}

@media (max-width:1200px){
.top_icon_01{ right: 185px;}
.top_icon_02{ right: 150px;}
.top_icon_03{ right: 115px;}
.top_icon_04{ right: 80px;}
.top_icon_05{ right: 45px;}
.top_icon_06{ right: 10px;}
.kv a[class^="top_icon_0"]{ position: absolute; top: 4%; width: 30px;}

.kv_logo{ position: absolute; top: 4%; left: 1.614%; width: 165px;}
}

@media (max-width:768px){
.kv_ros01{ top: 8%; left: 7.5%; width: 85%;}
.kv_ros02{ top: 8%; left: 7.5%; width: 85%;}
.kv_ros03{ top: 8%; left: 7.5%; width: 85%;}
.kv_ros04{ top: 8%; left: 7.5%; width: 85%;}

.kv_ch01{ bottom: 30%; left: 6%; width: 75%;}
.kv_ch02{ bottom: -9%; left: 29%; width: 93%;}
.kv_ch03{ bottom: 12%; left: -11%; width: 100%;}
.kv_ch04{ bottom: 7%; left: 9%; width: 120%;}
.kv_ch05{ bottom: -12%; left: -7%; width: 125%;}
.kv_ch06{ bottom: -13%; left: -35%; width: 99%;}
.kv_ch07{ bottom: 38%; left: 24%; width: 80%;}

.kv_slo01{ bottom: 6%; left: 2.5%; width: 95%;}
.kv_slo02{ bottom: 6%; left: 2.5%; width: 95%;}
.kv_slo03{ bottom: 4.5%; left: 15%; width: 70%;}

.kv a[class^="top_icon_0"]{ top: 10px; width: 30px;}
.kv_logo{ top: 2%; left: 10px; width: 100px;}

.ling_bottom{ left: -25%; width: 150%;}
.ling_top{ left: -25%; width: 150%;}
}


/*--video link--*/
.video_link{ position: fixed; right: 10px; bottom: 30px; z-index: 2;}
.video_link div+div{ margin: 10px 0 0 0;}

.video_link a{ display: block; position: relative;}
.video_link a span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; transition: .3s;}
.video_link a:hover span{ width: calc(100% - 10px); height: calc(100% - 10px); left: 5px; top: 5px;}
.video_link p{ display: inline-block; margin: 0 5px; font-size: 0.75rem; transform:skewX(-20deg); background: url(../images/color_line.jpg); background-size: cover;}
.video_link p i{ display: block; padding: 3px 10px; transform:skewX(30deg);}

@media (max-width:1200px){
.video_link a img{ width: 160px;}
}

@media (max-width:500px){
.video_link{ right: 10px; bottom: 10px; opacity: 1; pointer-events: none; animation: video_link_out 0.2s forwards ease-in-out; animation-delay: 0.1s;}
@keyframes video_link_out {
    0%{ right: 10px; opacity: 1;}
    100%{ right: 0px; opacity: 0;}
}
.video_link.active{ right: 0px; opacity: 0; pointer-events: visible; animation: video_link_in 0.2s forwards ease-in-out; animation-delay: 0.1s;}
@keyframes video_link_in {
    0%{ right: 0px; opacity: 0;}
    100%{ right: 10px; opacity: 1;}
}
body.scrollhide .video_link{ visibility: hidden;}
body.scrollhide .video_link.active{ opacity: 1;}

}

/*--index news--*/
.zone_01{ margin: 0 auto; padding: 100px 20px 0; max-width: 1360px; text-align: center;}
h1{ position: relative; display: inline-block; margin: 0 0 60px; padding: 20px 0; font-size: 1rem; letter-spacing: 15px; text-indent: 15px;}
h1 span{ position: absolute; top: 15px; left: -100%; display: block; width: 300%; height: 1px; background: url(../images/color_line.jpg); background-size: cover; transition: .5s; opacity: 0;}
h1 span:nth-of-type(2){ top: auto; bottom: 15px; left: -50%; width: 200%;}
h1.active span{ top: 0; opacity: 1;}
h1.active span:nth-of-type(2){ top: auto; bottom: 0; opacity: 1;}

.zone_01 div{ display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.zone_01 div img{ max-width: 100%;}
.zone_01 div a{ width: calc((100% - 40px) / 3); color: #000; transition: 1s;}
.zone_01.new_list div a{ margin: 0 0 20px 0;}
.zone_01 div a:hover{ filter: hue-rotate(180deg);}
.zone_01 div p{ position: relative; margin: 0;}
.zone_01 div p i{ position: absolute; top: 5px; left: 50%; transform: translate(-50%,0); padding: 5px 10px; background: #fff; font-size: 0.75rem; font-style: normal;}
.zone_01 div p b{ position: absolute; bottom: 5px; left: 50%; transform: translate(-50%,0);}
.zone_01 div a span{ display: block; padding: 30px 0 0;}
.zone_01 div p i::before{ position: absolute; left: -7px; top: 0; display: block; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 8px 24px 0; border-color: transparent #fff transparent transparent;}
.zone_01 div p i::after{ position: absolute; right: -7px; top: 0; display: block; content: ""; width: 0; height: 0; border-style: solid; border-width: 24px 8px 0 0; border-color: #fff transparent transparent transparent;}

.zone_01>a{ position: relative; display: inline-flex; align-items: center; color: #000; font-size: 0.75rem; transition: 1s;}
.zone_01>a::before{ display: block; content: "MORE"; margin: 0 10px 0 0;}
.zone_01>a::after{ display: block; content: "NEWS"; margin: 0 0 0 10px;}
.zone_01>a:hover{ filter: hue-rotate(270deg);}

.zone_01 .fakeheight{ height: 60px;}

@media (max-width:1200px){
.zone_01{ padding: 60px 20px 0;}
h1{ margin: 0 0 40px;}
.zone_01 .fakeheight{ height: 30px;}
}

@media (max-width:768px){
.zone_01 div a:nth-of-type(3){ display: none;}
.zone_01.new_list a:nth-of-type(3){ display: block;}
.zone_01 div{ gap: 10px;}
.zone_01 div a{ width: calc((100% - 10px) / 2);}
}

@media (max-width:500px){
.zone_01{ padding: 30px 20px 0;}
h1{ margin: 0 0 20px; padding: 10px 0;}
h1 span{ top: 10px; left: -25%; width: 150%; height: 1px;}
h1 span:nth-of-type(2){ top: auto; bottom: 10px; left: -10%; width: 120%;}
.zone_01 div p i{ padding: 2px 5px;}
.zone_01 div p b{ width: 17px;}
.zone_01 div a span{ padding: 10px 0 0; text-align: left;}
.zone_01>a img{ width: 30px;}
.zone_01 .fakeheight{ height: 15px;}
}

/*--index 5btn--*/
.zone_02{ margin: 0 auto; padding: 80px 20px 100px; max-width: 1580px;}
.zone_02 div{ display: flex; gap: 20px;}
.zone_02 a{ position: relative; display: inline-block; overflow: hidden;}
.zone_02 a img{ max-width: 100%; transition: .5s;}
.zone_02 a img:nth-of-type(1){ position: absolute; top: 0; left: 0; z-index: 1;}
.zone_02 a:hover img:nth-of-type(2){ filter: saturate(500%);}
.zone_02 a img:nth-of-type(3){ display: none;}

@media (max-width:1200px){
.zone_02{ padding: 60px 20px 60px;}
}
@media (max-width:768px){
.zone_02 div{ gap: 10px;}
}
@media (max-width:500px){
.zone_02{ padding: 30px 20px;}
.zone_02 div{ gap: 5px; flex-wrap: wrap;}

.zone_02 a{ order: 2; width: calc((100% - 10px) / 3);}
.zone_02 a:nth-of-type(1),.zone_02 a:nth-of-type(5){ order: 1; width: calc((100% - 5px) / 2);}
.zone_02 a:nth-of-type(1) img,.zone_02 a:nth-of-type(5) img{ display: none;}
.zone_02 a:nth-of-type(1) img:nth-of-type(3),.zone_02 a:nth-of-type(5) img:nth-of-type(3){ display: block; margin: 0 0 10px;}
}

/*--index 4tab--*/
.zone_03{ position: relative; padding: 100px 0 0; background: url(../images/cover_bg01.jpg) center no-repeat; background-size: cover; overflow: hidden;}
.coverlayer{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(12,6,50,1) 0%,rgba(12,6,50,0) 90%,rgba(12,6,50,0) 100%); opacity: 0.7;}
.coverch01{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/cover_ch01.webp) no-repeat; background-position: -50px center; transition: 3s;}
.coverch01.active{ background-position: 0 center;}
.index_3tab{ position: relative; margin: 0 0 95px; text-align: center;}
.index_3tab span{ display: inline-block; margin: 0 20px; padding: 0 0 10px; border-bottom: 1px solid transparent; color: #fff; cursor: pointer;}
.index_3tab span:hover,.index_3tab span.active{ border-bottom: 1px solid #fff;}
.index_6btn{ display: flex; gap: 20px; justify-content: center; position: relative; max-width: 780px; margin: 0 auto; padding: 0 20px;}
.index_6btn a{ position: relative; display: flex; justify-content: center; width: 170px; color: #fff; transition: 1s; opacity: 0;}
.index_6btn a.active{ opacity: 1;}
.index_6btn a span{ position: absolute; bottom: 60px; padding: 0 0 5px; border-bottom: 1px solid #fff;}
.index_6btn a:hover,.index_6btn a.keep{ filter: brightness(1.5);}
.index_6btn a::after{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 1px solid #160732; box-sizing: border-box; transition: .3s;}
.index_6btn a:hover::after,.index_6btn a.keep::after{ top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff;}
.index_6btn a img{ max-width: 100%;}

@media (max-width:768px){
.zone_03{ padding: 80px 0 0;}
.coverch01{ background-size: cover;}

.index_3tab{ margin: 0 0 40px;}
.index_6btn{ gap: 10px;}
.index_6btn a{ width: 110px; text-align: center; box-sizing: border-box; font-size: 0.75rem;}
.index_6btn a span{ bottom: 40px;}
}

@media (max-width:500px){
.zone_03{ padding: 40px 0 0;}
.index_3tab{ margin: 0 0 20px;}
.index_3tab span{ padding: 0 0 5px;}
.index_6btn{ gap: 5px;}
.index_6btn a{ width: 80px; font-size: 0.6rem;}
.index_6btn a:hover::after,.index_6btn a.keep::after{ top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid #fff;}
.index_6btn a span{ bottom: 20px;}
}

/*--index intro--*/
.zone_04{ margin: 0 auto; padding: 80px 20px 100px; max-width: 1000px; text-align: center;}
.zone_04 p{ margin: 0; line-height: 2rem;}
.index_2btn{ display: flex; gap: 20px; justify-content: center; position: relative; max-width: 540px; margin: 60px auto 0; padding: 0 20px;}
.index_2btn a{ position: relative; display: flex; justify-content: center; align-items: center; background:linear-gradient(#160732, #160732); width: 260px; height: 80px; color: #fff;}
.index_2btn a:hover,.index_2btn a.keep{ background:linear-gradient(#482fc3, #160732);}
.index_2btn a::after{ position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; border: 1px solid #160732; box-sizing: border-box; transition: .3s;}
.index_2btn a:hover::after,.index_2btn a.keep::after{ top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff;}

@media (max-width:768px){
.zone_04{ padding: 60px 20px;}
.index_2btn{ gap: 10px; margin: 40px auto 0;}
.index_2btn a{ width: 180px; height: 60px; padding: 5px; text-align: center; box-sizing: border-box; font-size: 0.75rem;}
}

@media (max-width:500px){
.zone_04{ padding: 40px 20px;}
.index_2btn{ gap: 5px; margin: 20px auto 0;}
.index_2btn a{ width: 120px; height: 40px; padding: 5px; font-size: 1rem;}
.index_2btn a:hover::after,.index_2btn a.keep::after{ top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid #fff;}
}

/*--index act link--*/
.zone_05{ position: relative; padding: 100px 0 130px; background: url(../images/cover_bg02.jpg) center no-repeat; background-size: cover; overflow: hidden;}
.coverch02{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: url(../images/cover_ch02.webp) no-repeat; background-position: right -50px center; transition: 3s;}
.coverch02.active{ background-position: right center;}

.link_title{ position: relative; margin: 0 0 75px; text-align: center;}
.link_title span{ display: inline-block; margin: 0 20px; padding: 0 0 10px; border-bottom: 1px solid #fff; color: #fff;}
.link_bg{ position: relative; gap: 20px; justify-content: center; display: flex; margin: 0 auto; padding: 0 20px; max-width: 900px;}
.link_bg a{ display: inline-block; padding: 5px; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; transition: .3s;}
.link_bg a:hover{ border-image-width: 4px;}
.link_bg a img{ max-width: 100%;}

@media (max-width:768px){
.zone_05{ padding: 80px 0;}
.coverch02{ background-size: cover;}
.link_title{ margin: 0 0 40px;}
.link_bg{ gap: 10px;}
}

@media (max-width:500px){
.zone_05{ padding: 40px 0;}
.coverch02{ background-position: right -150px center;}
.coverch02.active{ background-position: right -100px center;}

.link_title{ margin: 0 0 20px;}
.link_title span{ padding: 0 0 5px;}
.link_bg{ gap: 5px;}
.link_bg a{ padding: 2px;}
.link_bg a:hover{ border-image-width: 1px;}

}

.zone_06{ position: relative; height: 280px; padding: 100px 0 130px; background: url(../images/cover_bg03.jpg) center no-repeat; background-size: cover; overflow: hidden;}
@media (max-width:768px){
.zone_06{ height: 120px;}
}
@media (max-width:500px){
.zone_06{ padding: 40px 0; height: 120px;}
}


/*--go top--*/
.go_top{ text-align: center;}
.go_top p{ position: relative; display: inline-flex; align-items: center; font-size: 0.75rem; transition: 1s; cursor: pointer;}
.go_top p::before{ display: block; content: "GO"; margin: 0 10px 0 0;}
.go_top p::after{ display: block; content: "TOP"; margin: 0 0 0 10px;}
.go_top p:hover{ filter: hue-rotate(270deg);}
@media (max-width:500px){
.go_top p img{ width: 30px;}
}





/*--彈窗--*/
.fakeimg{ position: fixed; top: 0; left: 0; transition: .3s ease-in-out; z-index: 3;}
.fakeimg.active{ transform: scale(0.8); transition: .7s ease-in-out; box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.6);}
.fakeimg.moveout{ top: -100%;}

.overlay{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: url(../images/overlay.jpg) center; background-size: cover; z-index: 2;}

.popup{ display: none; position: fixed; top: 10vh; left: 10vw; width: 80vw; height: 80vh; padding: 10px; background: url(../images/popup_bg.jpg) no-repeat #fff; background-size: cover; background-position: 0 20%; box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.6); z-index: 3; box-sizing: border-box;}
.popup.popup_mainC{ background: #fff; text-align: center;}

.close{ position: absolute; top: 20px; right: 20px; background: #f00; cursor: pointer; z-index: 9;}

@media (max-width:1200px){
.popup{ width: 90vw; height: 90vh; left: 5vw; top: 5vh;}
.popup.movein{ top: 5vh;}
.fakeimg.active{ transform: scale(0.9);}
}

@media (max-width:768px){
.popup{background-size: auto 100%; background-position: initial;}
}

@media (max-width:500px){
.close{ top: 12px; right: 12px;}
.close img{ width: 24px;}
}

.popup_info{ height: 100%; padding: 20px 80px 20px 80px; overflow-y: auto; box-sizing: border-box; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; text-align: center;}
h2{ position: relative; display: inline-block; margin: 0 0 60px; padding: 20px 0; font-size: 1rem; letter-spacing: 15px; text-indent: 15px; font-size: 1rem;}
h2 span{ position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: url(../images/color_line.jpg); background-size: cover; transition: .5s;}
.popup_info>div{ width: 50%; margin: 0 0 0 50%; text-align: left;}
.popup_info>div.w100{ width: 100%; margin: 0;}
.popup_info>div article{ margin: 0 0 50px;}
.popup_info>div.w100 article{ text-align: center;}
hr{ border: 0; border-bottom: 1px dashed #eee;}
h3{ display: inline-block; margin: 0 0 20px; padding: 10px 40px; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; font-size: 1rem;}
h4{ line-height: 40px; height: 40px; text-align: center; background: #160732; color: #fff;}
.popup_info>div p{ margin: 0 0 20px; line-height: 2em;}
.popup_info>div ol{ margin: 0 0 20px; padding: 0; list-style: none;}
.popup_info>div ol li{ position: relative; padding: 0 0 0 30px; color: #160732; line-height: 2em; list-style: none; counter-increment:li;}
.popup_info>div ol li::before{ position: absolute; left: 0; top: 7px; display: inline-block; width: 16px; line-height: 16px; content: counter(li); padding: 0; font-size: 0.75rem; background: #160732; color: #fff; text-align: center;}
.popup_info>div ol li a{ color: #163bb5;}
.popup_info>div ol li span{ color: #163bb5;}
.popup_info>div ol li+li{ margin: 10px 0 0 0;}
.popup_info>div article>i,.popup_info>div ol li i{ display: flex; align-items: flex-start; width: 100%; padding: 10px 20px; background: #eee; font-style: normal; line-height: normal; box-sizing: border-box;}
.popup_info>div article>i img,.popup_info>div ol li i img{ margin: 0 10px 0 0;}

.apply_step{ display: flex; align-items: center; margin: 0 0 20px;}
.apply_step i{ padding: 1px; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; line-height: 1.2rem;}
.apply_step span{ flex: 1; display: block; height: 1px; margin: 0 10px; background: #eee;}
.apply_step img{ max-width: 100%;}
.taiwanstep img{ max-width: 100%; margin: 20px auto 30px;}

@media (max-width:1400px){
.popup_info>div{ width: 55%; margin: 0 0 0 45%;}
}
@media (max-width:1200px){
.popup_info{ padding: 20px 60px;}
h2{ margin: 0 0 40px;}
h3{ margin: 0 0 10px;}
.popup_info>div article{ margin: 0 0 30px;}
.popup_info>div p{ margin: 0 0 10px;}
.apply_step{ margin: 0 0 10px;}
}
@media (max-width:1000px){
.popup_info>div{ width: 60%; margin: 0 0 0 40%;}
}
@media (max-width:830px){
.popup_info>div{ width: 65%; margin: 0 0 0 35%;}
}
@media (max-width:768px){
h3{ padding: 10px;}
.popup_info{ background: rgba(255,255,255,0.9); }
.popup_info>div{ width: 100%; margin: 0;}
}
@media (max-width:500px){
.popup_info{ padding: 10px;}
.popup_info>div article>i,.popup_info>div ol li i{ padding: 10px;}
.popup_info>div article>i img,.popup_info>div ol li i img{ width: 16px; margin: 0 5px 0 0;}
}


nav ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none;}
nav ul li{ position: relative; margin: 0; padding: 0 0 5px; border-bottom: 1px solid transparent; cursor: pointer; transition: .5s;}
nav ul li.active,nav ul li:hover{ color: #163bb5; border-bottom: 1px solid #163bb5;}
nav ul li a{ color: #000; text-decoration: none;}
nav ul li a.active,nav ul li a:hover{ color: #163bb5;}
nav ul li span{ position: relative; z-index: 1;}
nav ul li i{ position: absolute; top: -5px; left: 10px; width: 100%; height: 15px; background: #eee; transition: .5s;}
nav ul li.active i,nav ul li:hover i{ background: #dfe7ff;}
@media (max-width:1400px){
nav ul li{ font-size: 0.875rem;}
nav ul li i{ left: 5px;}
}
@media (max-width:768px){
nav ul li{ font-size: 0.75rem;}
nav ul li i{ height: 10px; left: 0;}
}
@media (max-width:500px){
}


/*-- form --*/
.form{ position: relative; display: flex; flex-wrap: wrap;}
.form+.form{ margin: 20px 0 0 0;}
.form b{ width: 100%; margin: 0 0 10px; padding: 0; font-size: 0.875rem;}
.form select{ width: 100%; padding: 0 0 10px 0; border-bottom: 1px solid #eee; font-size: 1rem; transition: .3s;}
.form select:focus{ border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 0 0 1px;}
.form input{ width: 100%; padding: 0 0 10px 0; border-bottom: 1px solid #eee; font-size: 1rem;}
.form input:focus{ border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 0 0 1px;}
.form i{ width: 100%; margin: 5px 0 0; font-size: 0.75rem; color: #163bb5; text-align: right; font-style: normal;}
.form label{ position: relative; margin: 0 0 20px 0; padding: 20px 20px 20px 45px; border: 1px solid #ccc; background: #f9f9f9; cursor: pointer;}
.form label span{ position: absolute; left: 20px; top: 22px; display: block; width: 15px; height: 15px; padding: 2px; border: 1px solid #eee; background: #fff; box-sizing: border-box;}
.form input[type="checkbox"]:checked+label span i{ display: block; margin: 0; background: #160732; width: 100%; height: 100%;}
input[type="checkbox"]{ display: none;}
a.form{ position: relative; display: flex; justify-content: center; align-items: center; background:linear-gradient(#160732, #160732); width: 100%; height: 80px; color: #fff;}
a.form:hover,.index_2btn a.keep{ background:linear-gradient(#482fc3, #160732);}
a.form::after{ position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; border: 1px solid #160732; box-sizing: border-box; transition: .3s;}
a.form:hover::after,.index_2btn a.keep::after{ top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff;}
a.search_btn,a.showteam_btn{ position: absolute; right: 0; padding: 2px 10px; font-size: 0.75rem; background: #160732; color: #fff; transition: .3s;}
a.search_btn:hover,a.showteam_btn:hover{ background: #482fc3;}

.form_recaptcha{ position: relative; height: 72px; margin: 0 0 20px; border: 1px solid #d3d3d3; background: url(../images/recaptcaha.jpg) right 10px no-repeat #f9f9f9 ; }
.form_recaptcha>div:not(.g-recaptcha){ position: absolute; right: 10px; bottom: 0;}
.form_recaptcha>div:not(.g-recaptcha) a{ text-decoration: none; color: #999; font-size: 12px;}
.g-recaptcha>div{ position: absolute; top: -1px; left: -1px; width: 200px !important; height: 66px !important; overflow: hidden;}
@media (max-width:768px){
a.form{ height: 60px; padding: 5px; text-align: center; box-sizing: border-box; font-size: 0.75rem;}
}

@media (max-width:500px){
.form+.form{ margin: 10px 0 0 0;}
.form b{ margin: 0 0 5px;}
.form select{ padding: 0 0 5px 0;}
.form input{ padding: 0 0 5px 0;}
.form i{ text-align: left;}
.form label{ margin: 0 0 10px; padding: 10px 10px 10px 30px;}
.form label span{ top: 11px; left: 10px;}
a.form{ height: 40px; padding: 5px; font-size: 1rem;}
a.form:hover::after,.index_2btn a.keep::after{ top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid #fff;}

.form_recaptcha{ margin: 0 0 10px;}
}


.guild{ display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 50px 10px; background: url(../images/guild_bg.jpg) no-repeat center; background-size: cover;}
.guild i{ margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #fff; font-size: 2rem; font-style: normal; font-weight: normal;}
.guild span{ font-size: 1.25rem; font-weight: normal;}
.codeN{ display: flex; border: 1px solid #eee; background: #fff;}
.codeN i{ flex: 1; padding: 10px 0; text-align: center; font-size: 0.75rem; font-style: normal;}
.codeN span{ width: 120px; padding: 10px 0; text-align: center; font-size: 0.75rem; background: #eee; cursor: pointer;}
.leader{ display: flex; justify-content: space-between;}
.leader i{ padding: 15px 0; text-align: center; font-style: normal;}
.leader span{ padding: 15px 0; text-align: center;}
.member+.member{ margin: 20px 0 0;}
.member b{ display: block; margin: 0 0 10px; font-size: 0.875rem;}
.member span{ position: relative; display: block; padding: 0 0 10px; border-bottom: 1px solid #eee;}
.member span a{ position: absolute; right: 0; padding: 2px 10px; font-size: 0.75rem; background: #160732; color: #fff; transition: .3s;}
.member span a.active{ background: #eee; color: #000;}
.member span a{ background: #482fc3;}
@media (max-width:500px){
.guild{ padding: 30px 10px;}
.member+.member{ margin: 10px 0 0;}
.member b{ margin: 0 0 5px;}
.member span{ padding: 0 0 5px;}
}

.delegations{ display: flex; gap: 20px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto 50px;}
.delegations img{ max-width: calc((100% - 80px) / 5);}
@media (max-width:768px){
.delegations{ gap: 10px; margin: 0 auto 10px;}
.delegations img{ max-width: calc((100% - 20px) / 3);}
}

.account_list{ display: flex; flex-wrap: wrap; gap: 20px;}
.account_list>div{ padding: 10px; width: calc((100% - 20px)/2); border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; box-sizing: border-box;}
.account_list>div b{ display: block; background: #eee; margin: 0 0 10px; padding: 5px 10px; text-align: center; font-size: 0.875rem;}
.account_list>div i{ position: relative; display: block; margin: 20px 0 0 0; font-style: normal;}
.account_list>div i::before{ position: absolute; content: "帳號"; bottom: 100%; left: 0; font-size: 0.75rem; color: #999;}
.account_list>div span{ position: relative; display: block; margin: 20px 0 0 0; font-style: normal;}
.account_list>div span::before{ position: absolute; content: "密碼"; bottom: 100%; left: 0; font-size: 0.75rem; color: #999;}

.team_box{ display: flex; font-size: 0.875rem; border-top: 1px solid #fff;}
.team_box:nth-last-of-type(1){ margin: 0 0 20px 0;}
.team_list_title{ display: flex; margin: 30px 0 0 0; padding: 12px 0; background: #160732; font-size: 0.875rem;}
.team_list_title div{ text-align: center; color: #fff;}
.team_list_title div:nth-of-type(1){ width: 120px;}
.team_list_title div:nth-of-type(2){ width: 60px;}
.team_list_title div:nth-of-type(3){ width: calc(60% - 90px);}
.team_list_title div:nth-of-type(4){ width: calc(40% - 90px);}

.team_area{ display: flex; justify-content: center; align-items: center; width: 120px; background: #160732; text-align: center; color: #fff;}
.team_list{ width: calc(100% - 120px);}
.team_list p{ display: flex; margin: 0 !important; background: #fff; text-align: center;}
.team_list p+p{ border-top: 1px solid #fff;}
.team_list p:nth-of-type(even){ background: #eee;}
.team_list i{ width: 60px; padding: 12px 0; border-left: 1px solid #fff; box-sizing: border-box; font-weight: normal; font-style: normal;}
.team_list b{ width: calc(60% - 19px); padding: 12px 0; border-left: 1px solid #fff; box-sizing: border-box; font-weight: normal;}
.team_list p span{ flex: 1; padding: 12px 0; border-left: 1px solid #fff; box-sizing: border-box; font-weight: normal;}
@media (max-width:768px){
.account_list{ gap: 10px;}
.account_list>div{ width: calc((100% - 10px)/2);}
.team_box:nth-last-of-type(1){ margin: 0 0 10px 0;}
.team_list_title{ font-size: 12px;}
.team_list_title div:nth-of-type(1){ width: 40px;}
.team_list_title div:nth-of-type(2){ display: none;}
.team_list_title div:nth-of-type(3){ width: calc(60% - 20px);}
.team_list_title div:nth-of-type(4){ width: calc(40% - 20px);}

.team_area{ width: 40px; font-size: 12px;}
.team_list{ width: calc(100% - 40px);}
.team_list p{ font-size: 12px;}
.team_list i{ display: none;}
.team_list b{ width: 60.42%;}
}


/*--獎勵--*/
.gift_list{ margin: 0 0 20px;}
.gift_list dl{ display: flex; align-items: center; flex-wrap: wrap; height: 40px; margin: 0; padding: 0; background: #160732; color: #fff; list-style: none;}
.gift_list dl dt{ text-align: center;}
.gift_list dl dt:nth-child(1){ width: 20%;}
.gift_list dl dt:nth-child(2){ width: 70%;}
.gift_list dl dt:nth-child(3){ width: 10%;}
.gift_list ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; background: #eee; border-top: 1px solid #fff; list-style: none;}
.gift_list ul:nth-of-type(even){ background: #fff;}
.gift_list ul li{ box-sizing: border-box;}
.gift_list ul li+li{ border-left: 1px solid #fff;}
.gift_list ul li:nth-child(1){ display: flex; justify-content: center; align-items: center; width: 20%; padding: 10px; text-align: center;}
.gift_list ul li:nth-child(2){ width: 70%; padding: 30px 20px;}
.gift_list ul li:nth-child(3){ display: flex; justify-content: center; align-items: center; width: 10%; text-align: center;}
.gift_list ul li b{ display: block; margin: 0 0 5px;}
.gift_list ul li i{ display: block; color: #b6150a; font-style: normal; font-size: 0.875rem;}
.gift_list ul li span{ display: block; font-size: 0.875rem;}
.gift_list ul li img{ max-width: 100%; border: 1px solid #ccc}
.gift_img{ max-width: 100%;}
@media (max-width:768px){
.gift_list{ margin: 0 0 10px;}
.gift_list ul li:nth-child(1){ padding: 10px;}
.gift_list ul li:nth-child(2){ padding: 10px;}
}


/*-- news info --*/
.news_info{ max-width: 1200px; margin: 0 auto; min-height: 550px; padding: 80px 20px 100px; text-align: center;}
.news_info>div{ position: relative; min-height: 513px; text-align: left;}
.news_info>div .news_bg{ position: sticky; top: 0; right: 0; max-width: 100%;}
.news_info>div>a{ position: relative; display: inline-block; z-index: 1;}
.news_info>div section{ position: relative; z-index: 1;}
.news_info>div section>img{ max-width: 100%;}
.news_info>div section>i{ display: block; max-width: 440px; height: 1px; margin: 20px 0 20px 100px; background: #eee;}
.news_info>div section>p{ margin: 0 0 5px;}
.news_info>div section>b{ padding: 3px 10px; font-size: 0.75rem; background: #eee;}

.news_info>div section>div{ margin: 50px 0; width: 55%; line-height: 2rem;}
.news_info>div section>div img{ max-width: 100%;}
@media (max-width:1000px){
.news_info>div section>div{ width: 60%;} 
}
@media (max-width:768px){
.news_info{ padding: 60px 20px;}
.news_info>div section>div{ width: 100%;}
.news_info>div .news_bg{ display: none;} 
.news_info>div section>img{ margin: 0 auto;}
.news_info>div section>i{ margin: 20px auto;}
}
@media (max-width:500px){
.news_info{ padding: 40px 20px;}
.news_info>div>a img{ width: 20px;}
.news_info>div section>div{ margin: 20px 0;}
}


/*-- schedule --*/
.schedule{ margin: 0 auto; padding: 100px 20px 60px; max-width: 1360px; text-align: center;}
.schedule article{ margin: 0 0 50px;}
.schedule nav{ margin: 0 auto; width: 520px; max-width: 100%;}
.schedule article>img{ margin: 0 auto; max-width: 100%;}
.schedule article>a{ display: inline-block; transition: .5s;}
.schedule article>a:hover{ filter: hue-rotate(60deg);}
.schedule article>i{ display: flex; align-items: flex-start; max-width: 600px; margin: 0 auto; padding: 10px 20px; background: #eee; font-style: normal; line-height: normal; box-sizing: border-box;}
.schedule article>i img{ margin: 0 10px 0 0;}

.schedule section{ display: flex; flex-wrap: wrap; gap: 20px; margin: 60px 0 30px;}

.schedule section>div{ padding: 10px; width: calc((100% - 60px)/4); border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px; box-sizing: border-box; text-align: left;}
.schedule section>div b{ display: block; background: url(../images/color_line.jpg); background-size: cover; margin: 0 0 5px; padding: 5px 10px; font-size: 0.875rem;}
.schedule section>div i{ display: inline-block; padding: 2px 10px; background: #ccc; font-size: 0.75rem; font-style: normal;}
.schedule section>div p{ font-size: 5rem; margin: 0; text-align: center;}
.schedule section>div p span{ font-size: 1rem;}

.process{ margin: 30px auto 0; padding: 0; max-width: 600px; list-style: none;}
.process li{ display: flex;}
.process li+li{ margin: 15px 0 0 0;}
.process li img{ margin: 0 15px;}
.process li div{ display: flex; align-items: center; flex: 1; padding: 0 15px; background: #eee; border: 1px solid #eee; color: #b9b9b9;}
.process li div.win{ border: 1px solid #2dbb7e; color: #0e8250;}
.process li div.left i{ width: 15px; height: 15px; margin: 0 0 0 5px; background: #2dbb7e; border-radius: 50px;}
.process li div.right{ justify-content: flex-end;}
.process li div.right i{ width: 15px; height: 15px; margin: 0 5px 0 0; background: #2dbb7e; border-radius: 50px;}
@media (max-width:1200px){
.schedule{ padding: 60px 20px 60px;}
.schedule article{ margin: 0 0 30px;}
}
@media (max-width:768px){
.schedule section{ gap: 10px; margin: 30px 0 10px;}
.schedule section>div{ width: calc((100% - 10px)/2);}
}
@media (max-width:500px){
.schedule{ padding: 30px 20px;}
.schedule section{ gap: 5px;}
.schedule section>div{ width: calc((100% - 5px)/2);}
.schedule section>div p{ line-height: 1rem; text-align: right;}

.process li { align-items: center;}
.process li img { width: 20px; margin: 0 5px;}
.process li div{ padding: 10px 5px;}
.process li div.left i, .process li div.right i{ width: 5px; height: 5px;}
}


/*-- vote --*/
.vote{ margin: 0 auto; padding: 100px 20px 60px; max-width: 1360px; text-align: center;}
.vote .top_pic{ margin: 0 auto 50px auto; max-width: 100%;}
.vote p{ margin: 0; line-height: 2rem;}
.vote_gift{ display: flex; gap: 20px; justify-content: center; margin: 50px 0 0 0;}
.vote_gift img{ max-width: 100%;}
.vote_gift i{ display: flex; align-items: flex-start; width: 100%; margin: 0 0 10px 0; padding: 10px 20px; background: #eee; font-style: normal; line-height: normal; box-sizing: border-box;}
.vote_gift i img{ margin: 0 10px 0 0;}
.vote_gift b{ display: block; margin: 10px 0 0 0; padding: 10px 20px; border-image: url(../images/color_line.jpg) 1 stretch; border-image-width: 1px;}
.vote .vote_btn{ position: relative; display: flex; justify-content: center; align-items: center; background: linear-gradient(#160732, #160732); margin: 50px auto 0; width: 600px; max-width: 100%; height: 80px; color: #fff;}
.vote .vote_btn:hover{ background:linear-gradient(#482fc3, #160732);}
.vote .vote_btn::after{ position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; border: 1px solid #160732; box-sizing: border-box; transition: .3s;}
.vote .vote_btn:hover::after{ top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #fff;}
@media (max-width:1200px){
.vote{ padding: 60px 20px 60px;}
}
@media (max-width:500px){
.vote{ padding: 30px 20px;}
.vote .top_pic{ margin: 0 auto 10px auto;}
.vote_gift{ gap: 10px; margin: 20px 0 0 0;}
.vote_gift i{ padding: 10px;}
.vote .vote_btn{ margin: 20px 0 0 0; padding: 5px; height: 40px; font-size: 1rem; box-sizing: border-box;}
.vote .vote_btn:hover::after{ top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 1px solid #fff;}

}