*{margin: 0; padding: 0; box-sizing: border-box; font-family: "MiSans", sans-serif;} 
.content{ width: 100%; height: 100vh; background-image: url(../images/bg.png); background-size: 100% 100%;}

@font-face {
    font-family: "MiSans";
    src: url("../font/MiSans-Bold.woff2") format("woff2");   
    font-display: swap;
    font-weight: bold;
}
@font-face {
    font-family: "MiSans";
    src: url("../font/MiSans-Normal.woff2") format("woff2");   
    font-display: swap;
    font-weight: normal;
}
@font-face {
    font-family: "MiSans";
    src: url("../font/MiSans-Medium.woff2") format("woff2");   
    font-display: swap;
    font-weight: 600;
}

.animation{opacity: 0; transition:0.5s; -webkit-transition:0.5s;}


.start{ width: 100%; height: 100vh; position: relative; padding-top: 65vw; --display: none;}
.start .language-box{width: 18.6vw; height: 5.3vw; position: absolute; top:4.6vw; right: 2.6vw; background-color: #1c1c35; border: 1px solid #4f5262; border-radius: 5px; padding: 1.3vw; background-image: url(../images/language-icon.png),url(../images/language-arrow-icon.png); background-size: 2vw auto,1.6vw auto; background-repeat: no-repeat,no-repeat; background-position: 1.3vw 1.3vw,14.6vw 2vw; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 2vw; color: #fff;}
.start .language-box ul{ position: absolute; width: 100%; height: 24vw; background-color: #1c1c35; border: 1px solid #4f5262; border-radius: 5px; position: absolute; top: 5.3vw; display: none; opacity: 0; transition:0.2s; -webkit-transition:0.2s;}
.start .language-box ul li{list-style: none; width: 100%; height: 6vw; display: flex; align-items: center; justify-content: center;}
.start .language-box ul li.cur{background-color: #0e0e29;}
.start .top-img{ width: 100%; position: absolute; top: 0; left: 0; }
.start .title{ width: 100%; text-align: center; font-size: 7vw; color: #fff; margin-bottom: 5vw; color: #fefefe;position: relative; z-index: 2; text-shadow: 0 0 18px rgba(197,59,255,0.6); font-weight: bold; }
.start .activity-desc{width: 90%; height: 59vw; margin: 0 auto; margin-top: 3.33vw; background-color: #1c1c35; border-radius: 15px; box-shadow: 0 0 18px rgba(197,59,255,0.6); padding: 6.6vw; text-align: center; }
.start .activity-desc .activity-title{ font-size: 4.2vw; color: #ebecf5; font-weight: 600;}
.start .activity-desc .activity-title-decoration{ display: block; margin: 0 auto; width: 9.3vw; margin-top: 1vw;}
.start .activity-desc .desc{ font-size: 3.2vw; color: #c6c7d6; line-height: 150%; margin-top: 3.3vw;}
.start .activity-desc .desc span{ color: #af78ff; font-weight: bold;}
.start .start-btn{ width: 48vw; height: 15.4vw; margin: 0 auto; background-image: url(../images/generate-btn.png); background-size: 100% 100%; background-repeat: no-repeat; margin-top: 5.3vw; position: relative; font-size: 4.2vw; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600;}
.start .start-logo{width: 28.2vw; display: block; margin: 0 auto; margin-top: 7vw; }


.question{ width: 100%; height: 100vh; position: relative; padding-top: 7.3vw; display: none;}
.question .question-logo{width: 21.3vw; display: block; margin: 0 auto;}
.question .question-title{ width: 62.1vw; display: block; margin: 0 auto; margin-top: 2vw;}
.question .multiplechoice-box{ width: 90%; margin: 0 auto; margin-top: 7.7vw;}

.question .multiplechoice-box .multiplechoice-two{ display: none;}
.question .multiplechoice-box .instructions{ font-size: 4.2vw; color: #fff; font-weight: 600;}
.question .multiplechoice-box ul{display: flex; flex-wrap: wrap; margin-top: 3.3vw;}
.question .multiplechoice-box ul li{list-style: none; width: calc((100% - 2vw) / 2); min-height: 20vw; background-color: #1c1c35;border: 1px solid #4f5262;border-radius: 10px; padding: 2vw; margin-right: 2vw; margin-bottom: 2vw;}
.question .multiplechoice-box ul li:nth-child(2n){ margin-right: 0;}
.question .multiplechoice-box ul li .attr{ color: #af78ff; font-size: 3.2vw; font-weight: 600;}
.question .multiplechoice-box ul li .desc{ color: #ebecf5; font-size: 2.4vw; line-height: 150%; margin-top: 2vw;}
.question .multiplechoice-box ul li.cur{ background-color: #700dd9; border: 1px solid #9757f4;}
.question .multiplechoice-box ul li.cur .attr{ color: #fff;}
.question .multiplechoice-box ul li.repeldisabled{ background-color: #1c1c35; border: 1px solid #4f5262;}
.question .multiplechoice-box ul li.repeldisabled .attr{ color: #444455;}
.question .multiplechoice-box ul li.repeldisabled .desc{ color: #737482;}
.question .multiplechoice-box ul li.disabled{ background-color: #1c1c35; border: 1px solid #4f5262;}
.question .multiplechoice-box ul li.disabled .attr{ color: #444455;}
.question .multiplechoice-box ul li.disabled .desc{ color: #737482;}


.question .next-btn{width: 42.6vw; height: 12vw; background-color: #700dd9; box-shadow: 0 0 18px rgba(197,59,255,0.6); border-radius: 5px;color: #ebecf5; display: flex; align-items: center; justify-content: center;font-size: 3.7vw;font-weight: 600; position: absolute; bottom: 10vw; left: 50%; transform: translateX(-50%);}
.question .next-btn.disabled{ background-color: #1c1c35; box-shadow: none; cursor: not-allowed; color: #737482;}
.question .next-btn.q-btn{position: initial; margin: 0 auto; margin-top: 8vw; transform: translateX(0);}

.question .q-box{display: none;}
.question .q{ width: 90%; margin: 0 auto; margin-top: 5vw; display: none;}
.question .q .question-text{ font-size: 4.2vw; color: #fff; font-weight: 600; margin-bottom: 4vw;}
.question .q li{width: 100%; list-style: none; min-height: 10.6vw; border: 1px solid #4f5262;border-radius: 10px; padding: 4vw; margin-bottom: 2vw; background-color: #1c1c35; color: #ebecf5; display: flex; align-items: center;}
.question .q li.cur{ background-color: #700dd9; border: 1px solid #9757f4; }


.generate{height: 100vh; position: relative; padding-top: 7.3vw; display: none;}
.generate .question-logo{width: 21.3vw; display: block; margin: 0 auto;}
.generate .question-title{ width: 62.1vw; display: block; margin: 0 auto; margin-top: 2vw;}
.generate-box{width: 80%; margin: 0 auto; margin-top: 13.3vw;}
.generate-box .last-font{ width: 100%; text-align: center; font-size: 3.4vw; color: #af78ff;}
.generate-box .nickname-font{ width: 100%; text-align: center; font-size: 4.2vw; color: #fff; font-weight: 600; margin-top: 2.6vw;}
.generate-box .decoration{ display: block; margin: 0 auto; width: 9.3vw; margin-top: 2vw;}
.generate-box .avatar-list{ width: 100%; margin-top: 4vw;}
.generate-box .avatar-list ul{display: flex; flex-wrap: wrap;}
.generate-box .avatar-list li{width:24.6vw; height: 24.6vw; border-radius: 5px; background-size: 100% 100%; border: 1px solid #4f5262; border-radius: 10px; list-style: none; margin-right: 3.1vw; margin-bottom: 3.1vw; filter: grayscale(100%)}
.generate-box .avatar-list li.cur{ border: 1px solid #af78ff; filter: grayscale(0%);position: relative;}
.generate-box .avatar-list li.cur::before{ content: ""; width: 24.6vw; height: 24.6vw; background-image: url(../images/avatar-cur.png); background-size: 100% 100%; position: absolute; top: 0; right: 0;}
.generate-box .avatar-list li:nth-child(3n){ margin-right: 0;}
.generate-box .nickname-box{ width: 72vw; height: 11.3vw; display: block; margin: 0 auto; margin-top: 5vw; background-color: #1c1c35;border-radius: 10px; border: 1px solid #4f5262; text-align: center; outline: none; color: #fff;}
.generate-box .nickname-box::placeholder{ color: #737482; font-size: 3.7vw;}

.generate-box .generate-btn{width: 47.7vw; height: 15.4vw; background-image: url(../images/generate-btn.png); background-size: 100% 100%; background-repeat: no-repeat; display: flex; margin: 0 auto; margin-top: 26.6vw; color: #fefefe; font-size: 4.2vw; align-items: center; justify-content: center; font-weight: 600;}


.result{ width: 100%; display: none;}
.result .img-box{width: 100%;  padding: 13.3vw 5.3vw 8vw; background-image: url(../images/bg.png); background-size: 100% 100%; position: absolute; left: -9999px;top: -9999px;}
.result .img-box .title{ width: 70.6vw; height: 9.3vw; margin: 0 auto; background-image: url(../images/result_title_decoration_left.png),url(../images/result_title_decoration_right.png);background-repeat: no-repeat,no-repeat; background-size: auto 100%; background-position: left center , right center; font-size: 8vw; font-weight: bold; display: flex; align-items: center; justify-content: center; color: #fff;}
.result .img-box .left_title{ font-size: 4.2vw; color: #fff; font-weight: 600; margin-top: 8vw;}
.result .img-box .attr_card{width: 100%; height: 90vw; border: 2px solid #4f5262; box-shadow: #c53bff 0 0 0.8vw; border-radius: 5px; margin-top: 4vw; background-color: #0e0e29; }
.result .img-box .attr_card .top{width: 100%;background: linear-gradient(to right, #d2c8f5 0%, #e664ff 33%,#ff4164 66%, #ff5a28 100%
); height: 11vw;border-top-left-radius: 5px;border-top-right-radius: 5px; display: flex; align-items: center; margin-bottom: 2.6vw;}
.result .img-box .attr_card .top span{ font-size: 3.7vw; color: #fff; font-weight: 600; margin-left: 4vw;}
.result .img-box .attr_card .top img{width: 25.6vw; margin-left: 26.6vw;}
.result .img-box .attr_card .bottom{padding: 0 2.4vw;width: 100%; height: 72.6vw; display: flex;}
.result .img-box .attr_card .bottom .left{width: 25vw; height: 100%;}
.result .img-box .attr_card .bottom .left .avatar{width: 25vw; height: 25vw; border-radius: 5px; border: 2px solid #af78ff; background-size: 100% 100%;}
.result .img-box .attr_card .bottom .left .nickname{ width: 100%; font-size: 2.6vw; color: #fff; text-align: center; margin-top: 1.5vw;}
.result .img-box .attr_card .bottom .left .qrcode{ width: 20vw; height: 20vw; border: 2px solid #21253a;border-radius: 5px; background-image: url(../images/urlqcode.png); background-size: 100% 100%; margin: 0 auto; margin-top: 17vw;}
.result .img-box .attr_card .bottom .left p{ width: 100%; text-align: center; font-size: 2.6vw; color: #737482;}
.result .img-box .attr_card .bottom .right{ width: 57.3vw; height: 73vw; border: 2px solid #4f5262; border-radius: 5px; margin-left: 2.4vw;}
.result .img-box .attr_card .bottom .right ul{ width: 100%;}
.result .img-box .attr_card .bottom .right ul li{ width: 100%; height: 6.6vw; display: flex; align-items: center; color: #fff; font-size: 2.6vw; padding-left: 3.4vw; padding-right: 2.1vw}
.result .img-box .attr_card .bottom .right ul li .attr_name{flex: 0.6; width: 100%; height: 100%; display: flex; align-items: center; }
.result .img-box .attr_card .bottom .right ul li .attr_tag{flex: 0.4; display: flex; align-items: center; justify-content: flex-end;}
.result .img-box .attr_card .bottom .right ul li .attr_tag .a_tag{ width: 13.3vw; height: 4.6vw; display: flex; align-items: center; justify-content: center; border-radius: 2vw;}
.result .img-box .attr_card .bottom .right ul li .attr_tag .a_tag.lv0{background-color: rgba(255,122,64,0.1); color: #ff7a40;}
.result .img-box .attr_card .bottom .right ul li .attr_tag .a_tag.lv1{ background-color: rgba(255, 255, 255, 0.1); color: #fff;}
.result .img-box .attr_card .bottom .right ul li .attr_tag .a_tag.lv2{ background-color: rgba(206, 238, 110, 0.1); color: #ceee6e;}
.result .img-box .attr_card .bottom .right ul li .attr_tag .a_tag.lv3{ background-color: rgba(100, 244, 174, 0.1); color: #64f4ae;}
.result .img-box .attr_card .bottom .right ul li img{ width: 2.6vw; margin-right: 2vw;}
.result .img-box .attr_card .bottom .right ul li:nth-child(2n){background-color: #0e0e29;}
.result .img-box .attr_card .bottom .right .tag-box{ width: 100%; height: 18vw; padding:2.6vw 2vw 0; display: flex; flex-wrap: wrap;}
.result .img-box .attr_card .bottom .right .tag-box .tag{ font-size: 2.6vw; padding: 1.3vw 2.6vw; color: #fff; background-color: #700dd9; border: 1px solid #af78ff; border-radius: 1vw; margin-bottom: 1.3vw;margin-right: 1.3vw; display: block;height: 6.6vw;}

.result .img-box .tag_desc{ width: 100%; border: 2px solid #4f5262; box-shadow: #c53bff 0 0 0.8vw; border-radius: 5px; margin-top: 1.33vw; background-color: #0e0e29;}
.result .img-box .tag_desc li{list-style: none; width: 100%; padding: 2.6vw 3.3vw;}
.result .img-box .tag_desc li:nth-child(2n){background-color: #1c1c35;}
.result .img-box .tag_desc li .t{ width: 100%; display: flex; align-items: center;}
.result .img-box .tag_desc li .t .tag{font-size: 2.6vw; padding: 1.3vw 2.6vw; color: #fff; background-color: #700dd9; border: 1px solid #af78ff; border-radius: 1vw; }
.result .img-box .tag_desc li .t span{ color: #af78ff; font-size: 2.6vw; font-style: italic; margin-left: 2vw;}
.result .img-box .tag_desc li .desc{ font-size: 2.6vw; color: #9697ab; margin-top: 2vw; line-height: 150%;}

.result .final_img{ width: 100%;}