/* 設定CSS變數 */
:root{    
    --pri01:#0E72BF; /*主色1藍*/
	--pri02:#0B96D1; /*主色2淺藍*/
    --pri03:#FB77A7; /*主色3紅*/
    --pri03a:#DB487E; /*主色3紅*/
    --pri04:#578E23; /*主色4綠*/
    --pri05:#FFF100; /*主色5黃*/
    
	--pd:2rem;     /* 通用距離 */
	--pdh:1rem;    /* 通用距離x.5 */
	--pd2:4rem;    /* 通用距離x2 */
	
	--fsXS:1rem;    /* 字體大小XS */
	--fsS:1.2rem;   /* 字體大小S */
	--fsP:1.5rem;   /* 字體大小P */
	--fsM:2rem;     /* 字體大小M */
	--fsL:2.7rem;   /* 字體大小L */
	--fsXL:3.5rem;  /* 字體大小XL */
	--fsXL2:4.5rem; /* 字體大小XXL */
	
	--vh100:100vh; /* 透過js計算真正的100vh */
	--maxW:1000px;  /* 最大內容寬度 */
	
    --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); /* 漸層 */
    
}
/* 專案CSS */
html, body{ font-size: 10px;} /* 1rem */
body *{ background-position: center; background-repeat: no-repeat;}
.container{ display: block; width: 100%; max-width: var(--maxW); margin: 0 auto;}

h1,h2,h3,h4,h5,h6,p{ line-height: 1.2; font-weight: 500;}
h1{font-size: var(--fsXL2); font-weight: 700;}
h2{font-size: var(--fsXL2); font-weight: 700;}
h3{font-size: var(--fsXL); font-weight: 700;}
h4{font-size: var(--fsL);}
h5{font-size: var(--fsM);}
h6{font-size: var(--fsP);}
p {font-size: var(--fsP);}

a{ color: var(--pri02); transition: .3s;}
a:hover{ color: var(--pri05);}

.UI span{ display: inline-block; vertical-align: middle;}

/* loadingBox */
.loadingBox {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,.6);
	z-index: 99;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	display: none;
	align-items: center;
	justify-content: center;
}
.loadingBox.on{
	display: flex;
}
.loader {
	width: 60px;
	aspect-ratio: 1;
	padding: 10px;
	box-sizing: border-box;
	display: grid;
	background: #fff;
	filter: blur(5px) contrast(10) hue-rotate(300deg);
	mix-blend-mode: darken;
}
.loader:before,
.loader:after{ 
	content: "";
	grid-area: 1/1; 
	width: 20px;
	height: 20px;
	background: #e600ff;
	animation: l7 2s infinite;
}
.loader:after{ animation-delay: -1s;}

@keyframes l7{
0%   {transform: translate(   0,0)}
25%  {transform: translate(100%,0)}
50%  {transform: translate(100%,100%)}
75%  {transform: translate(   0,100%)}
100% {transform: translate(   0,0)}
}

/* lightbox */
.lightbox{ display: none; position: fixed; width: 100%; height: 100vh; background-color: rgba(0,0,0,.8); z-index: 99; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.lightbox.on{ display: flex; align-items: center; justify-content: center;}
.lightbox .white{ background-color: #FFF; display: inline-block; border-radius: 32px; position: relative; transform: translateY(-3rem); padding:2rem 0;}
.lightbox .contain{text-align: center; width: calc(100vw - 4rem); max-width: 800px; height: auto; overflow: auto; max-height: 70vh; padding: 0 2rem; }
.lightbox a.close{ display: inline-flex; align-items: center; justify-content: center; font-size: 0; width:5rem; height:5rem; position:absolute; bottom:-6rem; left:50%; margin-left: -2.5rem; cursor:pointer; background-color: var(--pri01); border-radius: 50%;}
.lightbox a.close::before{font-size: 3.5rem; color: #FFF; font-weight: 900; }
.lightbox a.close:hover{ animation: rubberBand .8s linear 0s 1 normal;}

/* scrollbar */
.lightbox .contain {scrollbar-color: var(--pri01) #AAA;}
.lightbox .contain::-webkit-scrollbar {
  width: 2px; /* Mostly for vertical scrollbars */
  height: 0px; /* Mostly for horizontal scrollbars */
}
.lightbox .contain::-webkit-scrollbar-thumb { /* Foreground */
  background: var(--pri01);
}
.lightbox .contain::-webkit-scrollbar-track { /* Background */
  background: #AAA;
}

/* 活動辦法 */
.rulelist{ font-size: 1.6rem; font-weight: normal; width: 100%; line-height: 1.3; text-align: left;}
.rulelist .blue{ color: var(--pri02);}
.rulelist > dt,
.rulelist > dd{ margin: 0 0 1rem;}
.rulelist > dt.title{ color: var(--pri01); font-size: 2.2rem;}
.rulelist > dt{ margin-top: 2rem;}
.rulelist > dt:first-child{ margin-top: 0;}
.rulelist > dd{ padding-left:0px; word-break: break-all;}
.rulelist li{ margin-bottom: 1rem;}
.rulelist li::before{ content:"🔷 "; font-size: 1.3rem; display: inline-block; margin-left: -2rem; margin-right: 5px;}
.rulelist ul{ padding-left: 4rem;}
.rulelist li li{ /*list-style-type: lower-roman;*/ margin-left: 1rem; margin-bottom: 0;}
.rulelist li li::before{content:"⟡ "; display: inline-block; margin-left: -2rem; margin-right: 5px;}
.rulelist li > ul{ padding-left: 2rem; margin-top: 1rem; margin-bottom: 1rem;}

/* a.btn設定 */
a.btn{ min-width: 170px; padding:.8rem 2rem; background: linear-gradient(92.5deg, #0E72BF -13.42%, #47A3E2 134.22%); font-size: 1.8rem; font-weight: bold; color:#FFF; border-radius: 3rem; margin: 0 1rem;}
a.btn.disable{ background-color: var(--pri05); color: #FFF; pointer-events: none;}
a.btn:hover{ transform: scale(1.05);}

a.btn2{ font-size: 1.8rem; font-weight: bold; letter-spacing: 1px; color: var(--pri01); padding:.8rem 2rem; border-radius: 3rem; border: 1px solid var(--pri01); line-height: 1;}
a.UI.btn2::before{ margin-right: 2rem; font-size: 2.2rem;}
a.btn2:hover{ transform: scale(1.05);}

a.gotop{display: inline-block; text-align: center; font-size: 1.8rem; color: #FFF; background-color: var(--pri03); opacity: .7; position: fixed; right: var(--pd2); bottom: var(--pd2); line-height: 43px; width: 48px; height: 48px; border-radius: 50%; z-index: 89; }
a.gotop:hover{ opacity: 1; transform: scale(1.05);}

.btnbox{ display: inline-block; width: 100%; text-align: center; padding: var(--pd2);}

.btngroup{ display: inline-block; font-size: 0;}
.btngroup a.btn{ border-radius: 0; border-right: 1px solid #FFF; padding: 10px 25px; margin: 0; font-size: 18px;}
.btngroup a.btn:first-child{ border-top-left-radius: 50%; border-bottom-left-radius: 50%; padding-left: 40px; }
.btngroup a.btn:last-child{ border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-right: none; padding-right: 40px;}
.btngroup.Large a.btn{ font-size: 26px; letter-spacing: 5px; padding: 14px 40px; }
.btngroup.Large a.btn:first-child{padding-left: 50%;}
.btngroup.Large a.btn:last-child{padding-right: 50%;}

/* footer */
footer{ display: block; width: 100%; height: 129px; background-image: url(../Images/footer.jpg); background-size: auto 100%; background-position: bottom center; }
.notice{ display: block; width: fit-content; margin: 0 auto; color: #444; font-size: 1.4rem; line-height: 1.5; text-align: left; margin-bottom: var(--pd);}
.notice span{ display: block; }

/* KV */
.KV{ position: relative; font-size: 0; display: block; text-align: center; height: 600px; background-image: url(../Images/KV.jpg); background-size: 100% auto; background-position: bottom center; padding-top: var(--pd);}
.KV .container{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.KV li{ display: block; margin: 0 auto;}
.KV li::after{content: ''; display: block; padding-top: 100%;}
.KV .logo{ display: inline-block; width: 96px; position: absolute; top: 0; left: 0; background-image: url(../Images/logo.png); background-size: contain; }
.KV .title{width: 612px; background-image: url(../Images/KV_title.png); background-size: contain; animation: pulse 1.4s linear 0s infinite normal;}
.KV li.title::after{ padding-top: 30.229%;}
.KV .man{width: 616px; background-image: url(../Images/KV_man.png); background-size: contain; background-position: bottom center; animation: headShake 3s linear 0s infinite normal;}
.KV li.man::after{ padding-top: 60.503%;}
.KV a.join{ width: 200px; height: 48px; background-image: url(../Images/KV_btn.png); width: 100%; background-size: contain; position: absolute; bottom: var(--pd2); left: 50%; transform: translateX(-50%); }
.KV a.join:hover{transform: translateX(-50%) scale(1.1);}

h4{ width: 100%; height: 113px; background-position: center; background-size: auto 100%; margin-bottom: var(--pd2);}
h4 span{display: none;}
h4.hot{background-image: url(../Images/title_hot.png);}
h4.list{background-image: url(../Images/title_list.png); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--pd);}
h4.list .sort{ font-size: 0; white-space: nowrap; transition: .3s;}
h4.list .sort:hover{ transform: scale(1.1);}
h4.list .sort span,
h4.list .sort a{ font-size: 1.4rem; font-weight: normal;}
h4.list .sort span{ color: #888; display: inline-block; margin-right: 5px;}
h4.list .sort .group{ display: inline-block; padding: 4px; background-color: #F5F5F5; border-radius: 20px;}
h4.list .sort a{ color: #444; font-weight: bold; padding: 4px 12px; border-radius: 20px; transition: .3s;}
h4.list .sort.s1 a.s1,
h4.list .sort.s2 a.s2,
h4.list .sort a:hover{ background-color: var(--pri01); color: #FFF;}
h4.list .searchbox{ width: calc(100%/4 - var(--pd)); position: relative;}
h4.list .searchbox input{ font-size: 1.6rem; width: 100%; padding: 1.5rem 1.5rem 1.5rem 5rem; border-radius: 4rem; border: 1px solid #E5E5E5; transition: .3s;}
h4.list .searchbox a.search{ color: #b4b4b4; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); left: 2rem;}
h4.list .searchbox:hover input{ border-color: #333;}
h4.list .searchbox:hover a.search{ color: #333;}
h4.list .searchbox a.search:hover{ color: var(--pri03);}


.vlist{ display: block; font-size: 0; padding: 0 var(--pdh); width: 100%; position: relative;}
.vlist .item{ display: inline-block; width: calc(100%/4 - var(--pd)); height: var(--itemH); margin: 0 var(--pdh) var(--pd2); vertical-align: top; position: relative;}
.vlist .item a{ display: block; width: 100%; position: relative; margin-bottom: 1rem;}
.vlist .item .h1{ border-radius: 1.6rem; background-size: 100%; line-height: 1.2; transition: .3s; border: 1px solid rgba(0,0,0,.03); }
.vlist .item:hover .h1{ background-size: 110%; }
.vlist .item .h1::after{ content: ""; display: block; padding-top: 133.182%;}
.vlist .item .h1 .label{ font-size: 2.8rem; font-weight: 900; color: var(--pri01); position: absolute; top: -1.8rem; left: -1rem; text-shadow: 2px 2px 0px #FFFFFF;}
.vlist .item .h2,
.vlist .item .h3{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-overflow: ellipsis;}
.vlist .item .h2{ font-size: 1.8rem; /*height: calc(1.8rem * 2 * 1.2);*/ line-height: 1.2; font-weight: bold; color: #222;}
.vlist .item .h3{ font-size: 1.4rem; /*height: calc(1.4rem * 2 * 1.2);*/ line-height: 1.2; font-weight: normal; color: #444;}
.vlist .item .h4{ display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; width: 100%; position: absolute; bottom: 0;}
.vlist .item .h4 a.btn{ font-size: 1.4rem; width: auto; min-width: auto; margin: 0; text-align: center;}
.vlist .item .h4 .like{ font-size: 1.4rem; font-weight: normal; color: #888;}
.vlist .item .h4 .like::before{content: ""; width: 2rem; height: 2rem; background-image: url(../Images/icon_ticket.svg); background-size: contain; margin-right: .5rem; opacity: .3; vertical-align: middle; transition: .3s;}
.vlist .item:hover .h4 .like::before{ opacity: 1; animation: heartBeat 1s linear 0s infinite normal;}
.vlist .item .h4:hover .like::before{ opacity: 1; animation: swing 1s linear 0s 1 normal;}


/* formbox */
div.tablebox{ width: 100%;}
div.tablebox h6{ font-size: 1.6rem; font-weight: 900; text-align: left; display: block; margin: 0 0 3px;}
div.tablebox li{ font-size: 1.6rem; font-weight: 900; text-align: left; padding: 1rem;}
div.tablebox i.note{ display: block; width: 100%; font-size: 1.4rem; font-weight: normal; margin-top: 3px; color: #666; font-style: normal;}
div.tablebox input,
div.tablebox select,
div.tablebox textarea,
div.tablebox label{ width: 100%; font-size: 1.6rem; }
div.tablebox label{ display: inline-block; text-align: center; padding: 1.6rem; border: 1px solid #BCBCBC; border-radius: 1.6rem; cursor: pointer;}
div.tablebox label + i.note{ text-align: center;}
div.tablebox input,
div.tablebox textarea{ border-color: #E5E5E5; border-radius: 1.6rem; padding: 1.5rem 2rem; margin: .5rem 0; transition: .3s;}
div.tablebox input:focus,
div.tablebox textarea:focus{ border-color: #444; }
div.tablebox li.upload img{ max-width: 240px;}
div.tablebox li.upload input{ display: none;}
div.tablebox li a.reload{ width: 2rem; margin-left: 1rem;}
div.tablebox li a.reload:hover{ transform: rotate(360deg);}
div.tablebox li a.reload img{ width: 100%;}
div.tablebox li .reloadbox{ display: inline-block; vertical-align: middle;}

.formbox .tablebox input.half,
.formbox .tablebox select.half{ width: 40%;}
.validatebox{ font-size: 0; display: inline-block; margin-left: 5px; vertical-align: middle;}
.validatebox img{ height: 4.6rem; border-radius: 10px; margin-left: 10px;}

.formbox dl.agree{ width:100%; min-width: 500px; margin: 0 auto; padding: 0; display: block;}
.agree a{ color: var(--pri01); text-decoration:none; }
.agree i{font-style: normal; display: block; font-size: 1.4rem; font-weight: normal; color: #666; padding: 0;}
.agree input[type=checkbox]+Label::before{font-size: 2rem; vertical-align: middle; margin-right: 5px;}
.agree input[type=checkbox]+Label{font-size: 1.4rem; color: #222; display:flex; align-items:flex-start; text-align: left;}

div.note{width:100%; max-width: 1000px; font-size: 1.4rem; font-weight: 700; text-align: center; margin-top:30px;}
div.note span{ display: inline-block; vertical-align: middle; white-space: nowrap; margin: 2px;}
div.note a{ color: var(--pri03);}
.formbox+div.note{ margin-top: 0;}

/* 報名表單按鈕控制 */
.lightbox.rule .btnbox,
.lightbox.rule2 .btnbox{ display: none;}
.lightbox.rule.back .btnbox,
.lightbox.rule2.back .btnbox{ display: inline-block;}

.lightbox.join iframe{ width: 100%; height: 70vh;}
.lightbox.join .contain{ max-height: none; padding: 0;}
.contain.formbox{ padding: 0 2rem;}

/* brand */
.brand h4{ display: block; margin-bottom: var(--pd); height: 101px; background-size: auto 100%; background-repeat: no-repeat; background-position: center; ;}
.brand h4.intro{ background-image: url(../Images/title_brand.png); }
.brand h4.intro+p{ color: #444; font-weight: normal; line-height: 1.4; margin-bottom: var(--pd2); }
.brand h4.product{ background-image: url(../Images/title_product.png); }
.brand div.tablebox{ width: fit-content; margin: 0 auto; }
.brand div.tablebox > ul > li{ padding: 2rem 1rem; vertical-align: middle; border-bottom: 1px solid #F2F2F2;}
.brand div.tablebox > ul:last-child > li{ border-bottom: none;}
.brand div.tablebox > ul > li:nth-of-type(1){}
.brand div.tablebox > ul > li:nth-of-type(2){ text-align: left;}
.brand div.tablebox dd{ padding: .3rem;}
.brand div.tablebox dd.d1{ font-size: 1.6rem; font-weight: bold; color: var(--pri03);}
.brand div.tablebox dd.d2{ font-size: 2rem; font-weight: bold; color: #444;}
.brand div.tablebox dd.d3{ font-size: 1.4rem; font-weight: normal; line-height: 1.5; color: #444; padding-bottom: 1rem;}
.brand div.tablebox dd.d4 b{ font-size: 1.2rem; font-weight: normal; color: #FFF; background-color: var(--pri03a); padding: 6px 10px; border-radius: 8px; }

.brand .pic{ display: inline-block; width: 278px; position: relative; background-size: contain; background-repeat: no-repeat; background-position: center; }
.brand .pic::after{ content: ""; display: block; padding-top: 78.417%;}
.brand .pic.p1{ background-image: url(../Images/pd1.png); }
.brand .pic.p2{ background-image: url(../Images/pd2.png); }
.brand .pic.p3{ background-image: url(../Images/pd3.png); }
.brand .pic.p4{ background-image: url(../Images/pd4.png); }

.brand .pic::before{ content: ""; display: block; width:99px; height: 71px; position: absolute; bottom: -14px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.brand .pic.p1::before{ background-image: url(../Images/pd_icon1.png); left: -40px;}
.brand .pic.p2::before{ background-image: url(../Images/pd_icon2.png); right: -10px;}
.brand .pic.p3::before{ background-image: url(../Images/pd_icon3.png); left: -40px;}
.brand .pic.p4::before{ background-image: url(../Images/pd_icon4.png); right: -15px;}