@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);
/*
  danny 240328
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; font-size:10px; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; border: none; }




/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none;  background: #112341; }

.event-wrap{ width: 100%; box-sizing: border-box; padding: 0px 0px 0px 0px; overflow: hidden; position: relative; }
.event-wrap .bg_pc{ width: calc(100% - 20px); height: 100%; object-fit: cover; object-position: center top; position: absolute; left: 10px; top: 10px; pointer-events: none;   }
.box{ position: relative; margin: 0 auto; }
.box img{ width: 100%;}
.box02{ position: relative; }
.tablecloth{ display: flex; gap: 30px; justify-content: center; align-items: end; position: absolute; top: 11%; left: 50%; transform: translatex(-50%); }
.tablecloth .col-1,.tablecloth .col-2{ position: relative;}
.tablecloth a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.tablecloth .col-1 img{ width: 20vw; }
.tablecloth .col-2 img{ width: 24.67vw; }
footer{ position: relative;}
footer>img{ width: 100%;}
footer .openlink{ width: 80px; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
footer .openlink a{ width: 100%;}
footer .openlink img{ width: 100%;}
.download{ width: 80px; position: absolute; right: 5vw; top: 20px; cursor: pointer; }
.download img{ width: 100%; }
.box03{ position: relative;  margin: 40px auto 0; aspect-ratio: 1/1.1; padding: 0 0 20px 0; }
.box03 .bg{ width: 100%; }
.video-box{ position: absolute; left: 50%; top: 15%; transform: translateX(-50%); width: 90vw;  }
.video-box .video-item{ position: relative; margin: 0 0 20px 0; }
.video-box .video-item .arrow{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.iframe-box{ width: 80vw; aspect-ratio: 16/9; position: relative; overflow: hidden; margin: 0 auto; }
.iframe-box iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;clip-path: polygon(3% 0, 97% 0, 100% 7%, 100% 93%, 97% 100%, 3% 100%, 0 93%, 0 7%); }
.iframe-box video{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; clip-path: polygon(3% 0, 97% 0, 100% 7%, 100% 93%, 97% 100%, 3% 100%, 0 93%, 0 7%); object-fit: contain; }
.box06{ margin: 0 auto 0 0;}

.pc{ display: none;}
.mobile{ display: block;}



/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){


}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%; background: #112341; }

.event-wrap{ width: 100%; box-sizing: border-box; padding: 0px 0px 0px 0px; overflow: hidden; position: relative; }
.event-wrap .bg_pc{ width: calc(100% - 40px); height: 100%; object-fit: cover; object-position: center top; position: absolute; left: 20px; top: 20px; pointer-events: none;   }
.box{ position: relative; margin: 0 auto; }
.box img{ width: 100%;}
.box02{ position: relative; }
.tablecloth{ display: flex; gap: 80px; justify-content: center; align-items: end; position: absolute; top: 11%; left: 50%; transform: translatex(-50%); }
.tablecloth .col-1,.tablecloth .col-2{ position: relative;}
.tablecloth a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.tablecloth .col-1 img{ width: 7.713vw; }
.tablecloth .col-2 img{ width: 9.566vw; }
footer{ position: relative;}
footer>img{ width: 100%;}
footer .openlink{ width: auto; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); }
footer .openlink a{ width: 100%;}
footer .openlink img{ width: 100%;}
.download{ width: 168px; position: absolute; right: 5vw; top: 50px; cursor: pointer; }
.download img{ width: 100%; }
.box03{ position: relative;  margin: -30% auto 0; aspect-ratio: 1/0.8; padding: 0 0 30px 0; }
.box03 .bg{ width: 100%; }
.video-box{ position: absolute; left: 50%; top: 15%; transform: translateX(-50%); width: 60.175vw;  }
.video-box .video-item{ position: relative; margin: 0 0 50px 0; }
.video-box .video-item .arrow{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.iframe-box{ width: 50.805vw; aspect-ratio: 16/9; position: relative; overflow: hidden; margin: 0 auto; }
.iframe-box iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;clip-path: polygon(3% 0, 97% 0, 100% 7%, 100% 93%, 97% 100%, 3% 100%, 0 93%, 0 7%); }
.iframe-box video{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; clip-path: polygon(3% 0, 97% 0, 100% 7%, 100% 93%, 97% 100%, 3% 100%, 0 93%, 0 7%); object-fit: contain; }
.box06{ margin: 0 auto 0 0;}

.pc{ display: block;}
.mobile{ display:none;}

}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}