style.css

@charset "UTF-8";*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font-size:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}input::-ms-clear,input::-ms-reveal{display:none}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#000000!important}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input,textarea{border-radius:0}body{font-family:"Cinzel","Noto Serif TC",serif}h1{opacity:0;position:absolute}.lh-12{line-height:1.2;letter-spacing:0.8px}.fz-160{font-size:max(8.3vw,px(80))}.fz-64{font-size:max(3.3vw,px(32))}.fz-56{font-size:max(2.9vw,px(28))}.fz-48{font-size:px(48)}.fz-32{font-size:px(32)}.fz-24{font-size:px(24)}body{font-family:"Cinzel","Noto Serif TC",serif}h1{opacity:0;position:absolute}.lh-12{line-height:1.2;letter-spacing:0.8px}.fz-160{font-size:max(8.3vw,5rem)}.fz-64{font-size:max(3.3vw,2rem)}.fz-56{font-size:max(2.9vw,1.75rem)}.fz-48{font-size:3rem}.fz-32{font-size:2rem}.fz-24{font-size:1.5rem}nav{padding:20px 25px;position:fixed;top:0;left:0;z-index:99;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border:2px solid #242424;width:100vw;color:#242424;-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0;-webkit-transition:all 0.4s;transition:all 0.4s}nav:hover{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);background:#BFBFBF}nav.white{border:none;opacity:1;color:#e3e3e3;-webkit-transform:translateY(0);transform:translateY(0)}nav.white:hover{background:none}nav.white .nav-left .logo:after{background:#e3e3e3}nav.white .nav-right .un-log .img-container>span{color:#e3e3e3}nav.white .nav-right .logged-in .img-container{border:2px solid #e3e3e3}nav.white .nav-right .logged-in>span{border-color:#e3e3e3 transparent transparent transparent}.nav-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nav-left>a:not(:first-child),.nav-left>a:not(:last-child){margin-right:30px}.nav-left .logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nav-left .logo:after{content:"";display:inline-block;margin:0 15px;width:2px;height:65px;background:#242424;-webkit-transition:background 0.4s;transition:background 0.4s}@media only screen and (max-width:992px){.nav-left>a:not(:first-child){display:none}}.nav-right{width:320px;-ms-flex-negative:0;flex-shrink:0;position:relative}.nav-right.active .logged-in{-webkit-transform:translateY(0%);transform:translateY(0%)}.nav-right.active .un-log{-webkit-transform:translateX(400px);transform:translateX(400px)}.nav-right .un-log{position:absolute;left:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}.nav-right .un-log .img-container{position:relative;max-width:160px;width:100%;cursor:pointer}.nav-right .un-log .img-container:hover span{letter-spacing:1px}.nav-right .un-log .img-container>span{position:absolute;top:18px;left:62px;z-index:1;font-size:0.875rem;color:#242424;-webkit-transition:letter-spacing 1s color 0.4s;transition:letter-spacing 1s color 0.4s}.nav-right .un-log .img-box{position:relative}.nav-right .un-log .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:43.75%}.nav-right .un-log img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.nav-right .logged-in{position:absolute;left:0;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;cursor:pointer;-webkit-transform:translateY(-200px);transform:translateY(-200px);-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}.nav-right .logged-in:hover p{letter-spacing:1px}.nav-right .logged-in .img-container{max-width:70px;width:100%;max-height:70px;border-radius:100%;border:2px solid #242424;-webkit-transition:border 0.4s;transition:border 0.4s;overflow:hidden}.nav-right .logged-in .img-box{position:relative}.nav-right .logged-in .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:100%}.nav-right .logged-in img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.nav-right .logged-in>p{margin:0 15px;-webkit-transition:letter-spacing 1s;transition:letter-spacing 1s}.nav-right .logged-in>span{display:inline-block;width:0;height:0;border-style:solid;border-width:16px 12px 0 12px;border-color:#242424 transparent transparent transparent;-webkit-transition:border-color 0.4s;transition:border-color 0.4s}body{font-family:"Cinzel","Noto Serif TC",serif}h1{opacity:0;position:absolute}.lh-12{line-height:1.2;letter-spacing:0.8px}.fz-160{font-size:max(8.3vw,5rem)}.fz-64{font-size:max(3.3vw,2rem)}.fz-56{font-size:max(2.9vw,1.75rem)}.fz-48{font-size:3rem}.fz-32{font-size:2rem}.fz-24{font-size:1.5rem}.menu{position:absolute;width:100%;height:100vh;background:#242424}.menu .loading{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;max-width:320px}.menu .loading>p{text-align:center;color:#e3e3e3}.menu .loading>span{margin-top:15px;position:relative;display:block;width:100%;height:40px;background:#e3e3e3}.menu .loading>span:before{content:"";position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:10px;height:30px;background:#242424;-webkit-transition:width 1s;transition:width 1s;-webkit-animation:loading 3s ease-in-out;animation:loading 3s ease-in-out}@-webkit-keyframes loading{0%{width:calc(100% - 20px)}to{width:0}}@keyframes loading{0%{width:calc(100% - 20px)}to{width:0}}.menu .content{margin:100px auto 0 auto;width:100%;max-width:800px;-webkit-transform:translateY(-150%);transform:translateY(-150%)}.menu .menu-title{position:relative;padding-top:80px}.menu .menu-title>p{position:relative;z-index:1;width:100%;text-align:center;color:#844AE1}.menu .menu-title>p:before{position:absolute;top:3px;left:2px;z-index:-1;width:100%;text-align:center;display:inline-block;color:#5ab}.menu .menu-title>p:first-child{position:absolute;right:0;top:0;width:125px}.menu .menu-title>p:first-child:before{content:"4th";width:125px}.menu .menu-title>p:nth-child(2):before{content:"THE F2E"}.menu .menu-title>p:last-child:before{content:"互動式網頁設計"}.menu .menu-option{margin:100px auto 0 auto;width:100%;max-width:200px;color:#e3e3e3}.menu .menu-option>a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;overflow:hidden}.menu .menu-option>a:before{content:"";margin-right:25px;display:inline-block;width:0;height:0;border-style:solid;border-width:12.5px 0 12.5px 21.7px;border-color:transparent transparent transparent #e3e3e3;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 0.6s;transition:-webkit-transform 0.6s;transition:transform 0.6s;transition:transform 0.6s,-webkit-transform 0.6s;-webkit-animation:blink 3s ease-in-out infinite;animation:blink 3s ease-in-out infinite}@-webkit-keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.menu .menu-option>a.active:before{-webkit-transform:translateX(0);transform:translateX(0)}.menu .menu-option>a:not(:first-child){margin-top:25px}.menu .mouse{margin:85px auto 0 auto;width:40px;cursor:pointer}.menu .mouse>span{display:block;position:relative}.menu .mouse>span:first-child{width:100%;height:65px;border:2px solid rgba(227,227,227,0.6);border-radius:25px}.menu .mouse>span:first-child:before{content:"";position:absolute;top:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:rgba(227,227,227,0.6);width:2px;height:20px}.menu .mouse>span:last-child{margin:30px auto 0 auto;width:2px;height:40px;background:rgba(227,227,227,0.6);-webkit-animation:arrow 2s ease-in-out infinite;animation:arrow 2s ease-in-out infinite}@-webkit-keyframes arrow{0%,50%,to{-webkit-transform:translateY(30%);transform:translateY(30%)}25%,75%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes arrow{0%,50%,to{-webkit-transform:translateY(30%);transform:translateY(30%)}25%,75%{-webkit-transform:translateY(0);transform:translateY(0)}}.menu .mouse>span:last-child:after,.menu .mouse>span:last-child:before{content:"";position:absolute;bottom:0;left:0;width:2px;height:15px;background:rgba(227,227,227,0.6);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:bottom;transform-origin:bottom}.menu .mouse>span:last-child:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}body{font-family:"Cinzel","Noto Serif TC",serif}h1{opacity:0;position:absolute}.lh-12{line-height:1.2;letter-spacing:0.8px}.fz-160{font-size:max(8.3vw,5rem)}.fz-64{font-size:max(3.3vw,2rem)}.fz-56{font-size:max(2.9vw,1.75rem)}.fz-48{font-size:3rem}.fz-32{font-size:2rem}.fz-24{font-size:1.5rem}main{padding-top:100vh;background:#BFBFBF}main .view{padding-top:105px}main .view:nth-child(2){padding-bottom:305px}main .dialog{position:absolute;padding:0 40px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0 25px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}main .dialog-1{top:110px;left:-980px}main .dialog-2{right:-900px;bottom:300px}main .contest-text{position:absolute;top:150px;left:-1280px;max-width:1280px;width:100%}main .fight{z-index:10;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;max-width:1500px;height:600px;pointer-events:none}main .fight .chi,main .fight .ghost{position:absolute;width:100%;height:320px}main .fight .ghost{left:auto;right:300px;top:100px;max-width:960px}main .fight .ghost .img-container:first-child{top:90px;right:0}main .fight .ghost .img-container:nth-child(2){top:45px;right:200px}main .fight .ghost .img-container:nth-child(3){top:0;right:400px}main .fight .chi{left:400px;bottom:100px;max-width:640px}main .fight .chi .img-container:first-child{left:0;bottom:0}main .fight .chi .img-container:nth-child(2){left:200px;bottom:0}main .fight .img-container{position:absolute;max-width:320px;width:100%;-webkit-animation:fight 2s ease infinite;animation:fight 2s ease infinite}@-webkit-keyframes fight{0%,50%,to{-webkit-transform:translateY(10px);transform:translateY(10px)}25%,75%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fight{0%,50%,to{-webkit-transform:translateY(10px);transform:translateY(10px)}25%,75%{-webkit-transform:translateY(0);transform:translateY(0)}}main .fight .img-container .img-box{position:relative}main .fight .img-container .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:100%}main .fight .img-container .img-box img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}main .option-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}main .option-block .map,main .option-block .question{padding:25px;position:relative;color:#e3e3e3;background:#606060;border:8px solid #242424;width:calc(50% - 12.5px)}main .option-block .map>p,main .option-block .question>p{height:73px}main .option-block .map>span,main .option-block .question>span{position:absolute;left:350px;bottom:23px;opacity:0}main .option-block .answer{padding:25px;background:#e3e3e3;border:8px solid #606060;width:calc(50% - 12.5px)}main .option-block .answer>ul{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:30px 0}main .option-block .answer>ul>li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:50%;text-align:center;cursor:pointer;overflow:hidden}main .option-block .answer>ul>li:before{content:"";margin-right:25px;display:inline-block;width:0;height:0;border-style:solid;border-width:12.5px 0 12.5px 21.7px;border-color:transparent transparent transparent #e3e3e3;border-color:transparent transparent transparent #242424;-webkit-transform:translateX(-200px);transform:translateX(-200px);-webkit-transition:-webkit-transform 0.6s;transition:-webkit-transform 0.6s;transition:transform 0.6s;transition:transform 0.6s,-webkit-transform 0.6s;-webkit-animation:blink 3s ease-in-out infinite;animation:blink 3s ease-in-out infinite}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}main .option-block .answer>ul>li.active:before{-webkit-transform:translateX(0);transform:translateX(0)}main .option-block .answer>ul .cant-wait{display:none}main .option-block .answer>ul .cant-wait.show{display:block!important}main .option-block-2{display:block}main .option-block-2:before{content:"";position:absolute;top:-108px;left:-10px;background:#BFBFBF;width:100%;height:100px}main .option-block-2 .question{padding:20px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}main .option-block-2 .question>p{height:50px}main .option-block-2 .list{padding:10px;position:absolute;top:-60px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px;border:4px solid #242424;border-bottom:none;background:#e3e3e3}main .option-block-2 .list>li.active{color:#844AE1}main .option-block-2 .map{padding:20px 100px;position:relative;width:100%}main .option-block-2 .map-img{position:relative;margin:0 auto;max-width:1220px;width:100%;z-index:3}main .option-block-2 .map-img>p{position:absolute;z-index:1}main .option-block-2 .map-img>p:first-child{top:245px;left:80%}main .option-block-2 .map-img>p:nth-child(2){top:500px;left:60%}main .option-block-2 .map-img>p:nth-child(3){top:200px;left:40%}main .option-block-2 .map-img>p:nth-child(4){top:440px;left:25%}main .option-block-2 .map-img>p:nth-child(5){top:530px;left:15%}main .option-block-2 .map-img .img-box{position:relative}main .option-block-2 .map-img .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:50%}main .option-block-2 .map-img .img-box img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}main .option-block-2 .box-img{position:absolute;z-index:4;top:105px;left:67%;max-width:140px;width:100%;cursor:pointer}main .option-block-2 .box-img>p{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:4;background:#242424}main .option-block-2 .box-img .img-box{position:relative}main .option-block-2 .box-img .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:100%}main .option-block-2 .box-img .img-box img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}main .week-img{position:absolute;top:-600px;right:-800px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:800px;height:600px;cursor:pointer}main .week-pic{position:absolute;max-width:640px;width:100%;cursor:pointer}main .week-pic .img-box{position:relative}main .week-pic .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:59.25%}main .week-pic .img-box img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}main .week3{right:0;top:0;z-index:1}main .week2{right:60px;top:80px;z-index:2}main .week1{z-index:3;right:120px;top:160px}main .title-2{margin:30px auto 0 auto;height:65px;max-width:1200px;width:100%;text-align:center}main .block{margin:55px auto 0 auto;position:relative;max-width:1160px;width:100%}main .block>ul{color:#844AE1}main .block>ul:last-child{margin-top:40px}main .block>ul>li,main .block>ul>ol{color:#242424}main .block>ul>li:first-child,main .block>ul>ol:first-child{margin-top:40px}main .block>ul>li:not(:first-child),main .block>ul>ol:not(:first-child){margin-top:5px}main .block>ul>p{margin-top:5px;color:#242424}main .gold{position:absolute;bottom:0;left:0;max-width:1000px;width:100%}main .gold .img-box{position:relative}main .gold .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:20.55%}main .gold.gold-2{left:960px}main .gold.gold-3{left:1920px}body{font-family:"Cinzel","Noto Serif TC",serif}h1{opacity:0;position:absolute}.lh-12{line-height:1.2;letter-spacing:0.8px}.fz-160{font-size:max(8.3vw,5rem)}.fz-64{font-size:max(3.3vw,2rem)}.fz-56{font-size:max(2.9vw,1.75rem)}.fz-48{font-size:3rem}.fz-32{font-size:2rem}.fz-24{font-size:1.5rem}footer .view{padding-top:105px;background:#BFBFBF}footer .photo-block{position:relative;z-index:2;margin:20px auto 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:400px;width:100%}footer .god-img{position:relative;max-width:200px;width:100%;-webkit-filter:blur(10px);filter:blur(10px);overflow:hidden;-webkit-transition:-webkit-filter 0.6s;transition:-webkit-filter 0.6s;transition:filter 0.6s;transition:filter 0.6s,-webkit-filter 0.6s}footer .god-img:hover{-webkit-filter:blur(0);filter:blur(0)}footer .god-img:hover img{-webkit-transform:translate(-50%,-50%) scale(1.2);transform:translate(-50%,-50%) scale(1.2)}footer .god-img .img-box{position:relative}footer .god-img .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:100%}footer .god-img img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-transition:-webkit-transform 0.6s;transition:-webkit-transform 0.6s;transition:transform 0.6s;transition:transform 0.6s,-webkit-transform 0.6s}footer .option-block{left:0;background:#e3e3e3}footer .wrap{position:absolute;top:15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:20px;width:49%;height:calc(100% - 30px)}footer .wrap:nth-child(2){left:10px;background:#606060;opacity:0;color:#e3e3e3}footer .wrap:last-child{opacity:0;right:10px}footer .share>p{text-align:center;color:#242424}footer .share>p:first-child{color:#606060}footer .share>p:not(:first-child){margin-top:5px}footer .sponsor{margin-top:50px;opacity:0;width:100%}footer .sponsor .title{margin:0 auto;width:300px}footer .sponsor .title>span{color:#844AE1}footer .sponsor .title>span:last-child{color:#242424}footer .sponsor-photo{margin:50px auto 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:560px;width:100%}footer .sponsor-img{padding:0;position:relative;max-width:120px;width:100%}footer .sponsor-img:after{content:"凱鈿科技";position:absolute;bottom:-50px;display:block;width:100%;font-size:1.5rem;color:#242424;text-align:center}footer .sponsor-img:nth-child(2):after{content:"板塊設計"}footer .sponsor-img:last-child:after{content:"鈦坦科技"}footer .sponsor-img .img-box{position:relative}footer .sponsor-img .img-box:before{content:"";display:block;width:100%;height:0;padding-bottom:100%}footer .sponsor-img img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:cover;object-fit:cover}footer .job-apply{margin:100px auto 0 auto;display:block;background:#e3e3e3;max-width:200px;width:100%;text-align:center}.shadow-block{padding:15px;border:4px solid #242424;border-radius:8px;-webkit-box-shadow:8px 8px 0px rgba(0,0,0,0.25);box-shadow:8px 8px 0px rgba(0,0,0,0.25);background:#e3e3e3}.option-block{padding:20px;position:absolute;bottom:0;left:-100%;z-index:10;border:8px solid #242424;background:#BFBFBF;width:100%}.view{position:relative;height:100vh;overflow:hidden}
/*# sourceMappingURL=style.css.map */