@charset "UTF-8";
/* 
	html5doctor.com Reset v1.6.1 - http://cssreset.com 
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}



*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; outline: none; }
img{ max-width:100%; display:block;}
img[src*=".svg"] { width:100%; }
html { width:100%; height:100%; text-rendering: optimizeLegibility;}
body { width:100%; min-height:100%; color:#000; font-size:16px; font-weight: 400; line-height:1.5; font-family: Roboto, 'Noto Sans TC';}

#loader{ width:100%; height:100vh; top:0; background: #ffd200; position:fixed; z-index:99999; pointer-events:none;}
#loader.loaded{ opacity:0; transition: opacity 0.6s ease-out; }

#wrap{ width:100%; height:100%; min-width: 320px; overflow-x: hidden;}

.container{ width: 90%; max-width: 375px; margin: 0 auto; padding: 30px 0 40px; position: relative;}
.container h2{ font-size: 28px; text-align: center; margin-bottom: 20px;}


.event_kv{ }
.event_kv .container{ padding: 0; }
.event_kv .bg_1{ background-color: #0092f9; padding-bottom: 15px; }
.event_kv .bg_2{ background-color: #ffbd3a; position: relative;}
.event_kv .bg_2::before{ width: 440px; height: 0; display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-top: 80px solid #0092f9; border-right: 220px solid transparent; border-left: 220px solid transparent; }
.event_kv .logo{ width: 150px; margin: 0 auto 25px;}
.event_kv .slogan{ width: 275px; margin: 0 auto; animation-delay: 0.2s;}
.event_kv .tiger{ width: 170px; margin: 0 auto 20px; animation-delay: 0.3s;}
.event_kv .note{ color: #40210f; font-size: 21.7px; font-weight: 700; text-align: center; animation-delay: 0.4s;}


.event_strategy{ background-color: #ffd101; overflow: hidden; position: relative;}
.event_strategy::before{ width: 440px; height: 0; display: block; content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-top: 80px solid #ffbd3a; border-right: 220px solid transparent; border-left: 220px solid transparent;}
.event_strategy .container{ padding: 100px 0 0;  }
.event_strategy .text{ font-size: 18px; margin-bottom: 30px; }
.event_strategy .item{ background-color: #f6f7f9; border-radius: 25px; display: flex; margin-bottom: 20px; box-shadow: #d2ac00 5px 5px 0 0; overflow: hidden;}
.event_strategy .item .i{ width: 85px; color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; transform: skewX(-5deg); left: -7px; padding-left: 5px; font-size: 40px; font-style: italic; font-weight: 700; line-height: 1;}
.event_strategy .item .i span{ font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.3;}
.event_strategy .item p{ width: 100%; padding: 15px 20px 15px 10px; font-weight: 500;}
.event_strategy .item{ border: #0092f9 solid 3px; }
.event_strategy .item_1 .i{ background-color: #0092f9; }
.event_strategy .item_1 p strong{ color: #0092f9;}
.event_strategy .item_2{ border: #00a26d solid 3px; }
.event_strategy .item_2 .i{ background-color: #00a26d; }
.event_strategy .item_2 p strong{ color: #00a26d;}
.event_strategy .pic{ display: block; width: 80%; max-width: 230px; margin: 30px auto 0;}
.event_strategy .note{}
.event_strategy .note a{ background-color: #fff; color: #096183; display: inline-block; border-radius: 5px; font-weight: bold; padding: 3px 6px; line-height: 1.3;}

.event_step{ background-color: #fffbe2;}
.event_step h3{ display: block; background-color: #ffd200; border-radius: 50px; font-size: 22px; width: 75%; padding: 6px 0; margin: 0 auto 30px; text-align: center; letter-spacing: 1px;}
.event_step .box{ background-color: #f6f7f9; border: #ffd200 solid 3px; border-radius: 25px; padding: 20px 0; margin: 0 auto 30px;}
.event_step .text{ text-align: center; /*font-size: 18px;*/ margin-bottom: 30px;}
.event_step .arrow{ width: 80px; margin: 0 auto 30px;}
.event_step .loop{ width: 110px; margin: 0 auto 30px;}
.event_step figure{ margin: 0 auto 30px;}
.event_step figure:last-child{ margin: 0 auto;}
.event_step figure img{ margin: 0 auto 15px; }
.event_step figure.step_1 img{ width: 160px; }
.event_step figure.step_2 img{ width: 160px; }
.event_step figure.step_3 img{ width: 160px; }
.event_step figure.step_4 img{ width: 160px; }
.event_step figure figcaption{ margin: 0 auto; padding-left: 15px; position: relative;}
.event_step figure.step_1 figcaption,
.event_step figure.step_2 figcaption{ width: 275px; }
.event_step figure.step_3 figcaption,
.event_step figure.step_4 figcaption{ width: 220px; }
.event_step figure figcaption::before{ content: ''; background-color: #ffd200; width: 4px; height: 90%; top: 5%; left: 0; position: absolute;}
.event_step .btn{ display: block; background-color: #ffd200; border: #fdbb39 solid 3px; border-radius: 25px; color: #000; font-size: 18px; font-weight: 700; padding: 16px 45px 16px 16px; /*text-decoration: underline;*/ position: relative;}
.event_step .btn .btn_arrow{ color: #e96820; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px;}

.event_notice{ }
.event_notice:last-child{ background-color: #f8f8f8;}
.event_notice .list{ color: #606060; margin-left: 20px; }
.event_notice .list li{ margin-bottom: 10px; }
.event_notice .list li p{ margin-bottom: 10px; }
.event_notice .list li p:last-child,
.event_notice .list li:last-child{ margin-bottom: 0; }
.event_notice .lower_roman{ list-style-type: lower-roman; margin-left: 16px; }
.event_notice .notice_flex{ display: flex; margin-bottom: 10px;}
.event_notice .notice_flex .notice_flex{ margin-bottom: 0;}
.event_notice .notice_flex .i{ width: 20px;}
.event_notice .notice_flex .t{ width: 100%;}
.event_notice .notice_flex .t{ width: 100%;}
.event_notice .link{ color: #037c87; text-decoration: underline;}


.event_download{ }
.event_download .container{ }
.event_download .logo{ width: 80px; margin: 0 auto 20px;}
.event_download .text{ text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px;}
.event_download .download{ display: flex; width: 90%; margin: 0 auto 20px; justify-content: space-between; list-style: none;}
.event_download .download li{ width: 48%;}
.event_download .download li{}
.event_download .download li img{ border-radius: 8px; height: 45px; margin: 0 auto;}
.event_download .socials { width: 90%; margin: 0 auto; align-items: center; display: flex; justify-content: space-between;}
.event_download .greeting { font-size: 16px; line-height: 24px; }
.event_download .icons .icon:first-of-type { margin-right: 8px; }
.event_download .icons .icon { font-size: 16px; line-height: 24px; display: inline-block; width: 36px;}



#btn-gotop{ background: #0006 url("../img/gotop.png") 13px 8px no-repeat; background-size: 25px auto; border-bottom-left-radius: 20px; border-top-left-radius: 20px; bottom: 32px; cursor: pointer; height: 40px; position: fixed; right: 0; width: 70px; z-index: 99;}