/* CSS Document */
html,body,#sb-site{width:100%;height:99%; text-align:left; line-height:21px; min-height:100%;position:relative;z-index:1;font-family: "source-han-sans-traditional", 'Microsoft YaHei','微軟雅黑', STXihei, '华文细黑',Arial, Helvetica, sans-serif;font-style: normal;font-weight: 400; margin:0; background-color:#FFF;}
@font-face {
font-family: 'clarkemedium';
src: url('fonts/clarke_medium_v6.3-webfont.eot');
src: url('fonts/clarke_medium_v6.3-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/clarke_medium_v6.3-webfont.woff2') format('woff2'),
url('fonts/clarke_medium_v6.3-webfont.woff') format('woff'),
url('fonts/clarke_medium_v6.3-webfont.ttf') format('truetype'),
url('fonts/clarke_medium_v6.3-webfont.svg#clarkemedium') format('svg');
font-weight: 500;
font-style: normal;
}
h1,h2,h3,p{margin:0; padding:0; }
a{text-decoration:none;cursor:pointer;}
img{border:0; }
ul{ list-style:none;}
div{-webkit-transition: all .3s; transition: all .3s;}
input, input:focus, label,select:focus{-webkit-transition: all .3s; transition: all .3s;}
select:disabled{opacity:0.3;filter: alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3; }
/* global */
#content_container{position:relative; top:0;z-index:99; margin:0 auto;overflow:hidden;}
.container{position:relative; top:0; left:0; width:1440px; margin:0 auto; padding:0;}
/* cover */
#cover{width:100%; background-size:cover;animation:fade_header ease-out 1s forwards;-webkit-animation:fade_header ease-out 1s forwards;-moz-animation:fade_header ease-out 1s forwards;-o-animation:fade_header ease-out 1s forwards;-ms-animation:fade_header ease-out 1s forwards;opacity:0;filter: alpha(opacity=0); margin-bottom:20px}
.cover_logo{ position:absolute; top:40px; left:0;}
.cover_title{ font-weight:500;font-size: 52px;color: #B0113C;letter-spacing: 2px;line-height: 70px; text-align:center; margin-top:30px;margin-bottom:10px;}
.cover_desc{ font-weight:500;font-size: 14px;color: #4A4A4A;letter-spacing: 1px;line-height: 28px; text-align:center; width:600px; margin:0 auto}
.cover_desc span{ display:inline;}
.cover_btn{ text-align:center;}
.cover_btn a.btn_all{}
.cover_btn a.btn_all:hover{}
#cover .container{ width:100%}
#cover .container .row > div { padding:0;}
.big_c { }
.big { padding:60px;}
.small { padding:30px;}
.set_much{ display:block}
.co1 {background:#E0D673;}
.co2 {background:#5B85AB;}
.co3 {background:#E77340;}
.co4 {background:#66A6D1;}
.co5 {background:#F7D096;}
.co6 {background:#5AAFB0;}
.co7 {background:#A8A8A8;}
.co8 {background:#CF8588;}
.co9 {background:#5B85AB;}
#cover .container .key-art{background: url(../images/loneliness2020_bg.png) center top no-repeat; position: relative; height: 0; background-size: 100%; padding-bottom: 33.75%;}
#cover .container .key-art span{display: block; width: 100%; background: url(../images/vaa2018_logo.png) center center no-repeat; position: absolute; height: 100%; background-size: 52%;}
/* top */
#top{width:100%; height:90px; top:0; z-index:9999; background-color:#fff; border-top:10px #B0113C solid;}
#top .container{ padding-top:0px; padding-bottom:0px; max-width: 100%;}
#top .logo{ position:absolute; top:20px; text-align:center;}
.footer{ margin:0; padding:0; list-style:none; text-align:center;}
.footer li{font-weight:400;font-size: 12px;color: #999999;letter-spacing: 0.66px; margin:0; padding:0; list-style:none; margin-top:20px; text-align:center;}
.footer a{ color: #CCCCCC}
.footer a:hover{ color: #666666}
/* btn */
a.btn_all, button.btn_all{ background: #B0113C;border-radius: 90px;font-size: 16px;color: #FFFFFF; font-weight:500;letter-spacing: 1px;line-height: 52px; width:220px; height:54px; margin:20px 10px;-webkit-transition: all .3s; transition: all .3s;cursor:pointer; display:inline-block;text-decoration:none; text-align:center;margin-bottom:60px;}
a.btn_all:hover, button.btn_all:hover{ background: #CA1848;color:#FFF;-webkit-transition: all .3s; transition: all .3s;cursor:pointer; line-height:52px;text-decoration:none;}
.icon_space{ margin-right:6px;}
.icon_start{ -webkit-transition: all .3s; transition: all .3s;}
a.btn_all:hover .icon_start{ -webkit-transition: all .3s; transition: all .3s;}
a.icon_result{background: #F58023;-webkit-transition: all .3s; transition: all .3s;}
a.icon_result:hover{background: #F2B835;-webkit-transition: all .3s; transition: all .3s;}
.icon_tick{ background:url(../images/icon_tick2.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
a.btn_all:hover .icon_tick{ background:url(../images/icon_tick2.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
.icon_cross{ background:url(../images/icon_cross2.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
a.btn_all:hover .icon_cross{ background:url(../images/icon_cross2.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
a.btn_all2{ background: #39579A;;border-radius: 90px;font-size: 16px;color: #FFFFFF; font-weight:500;letter-spacing: 1px;line-height: 52px; width:220px; height:54px; margin:20px 10px;-webkit-transition: all .3s; transition: all .3s;cursor:pointer; display:inline-block;text-decoration:none; text-align:center;margin-bottom:60px;}
a.btn_all2:hover{ background: #4469BA;color:#FFF;-webkit-transition: all .3s; transition: all .3s;cursor:pointer; line-height:52px;text-decoration:none;}
.icon_share{ background:url(../images/share2_btn.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
a.btn_all:hover .icon_share{ background:url(../images/share2_btn.png) no-repeat;-webkit-transition: all .3s; transition: all .3s;}
a.icon_reg{background: #B0113C;-webkit-transition: all .3s; transition: all .3s;}
a.icon_reg:hover{background: #CA1445;-webkit-transition: all .3s; transition: all .3s;}
/* popup */
.modal-dialog{ width:1280px; background:#FFF; z-index:9999;}
.modal-body{ padding:60px 150px 0 150px}
.modal-dialog h1{ margin-bottom:40px;font-size: 36px;color: #0B1226;letter-spacing: 1px;line-height: 70px; text-align:center;}
.modal-dialog p{ margin-bottom:40px;font-size: 18px;color: #333333;letter-spacing: 0px;line-height: 30px;}
/* question*/
.question{/*width:100%;*/ position:relative; top:0px; z-index:99;}
.question .logo{ position:absolute; top:25px; left:0px; text-align:left; height:90px;}
.question .q_padding{ padding-bottom:100px;}
.question .title{ font-weight:700;font-size: 48px;color: #B0113C;letter-spacing: 2px;line-height: 48px;padding-top:30px; padding-bottom:30px;}
.question .title_de{ font-weight:700;font-size: 12px;color: #4A4A4A;letter-spacing: 1px;line-height: 22x;padding-top:10px; padding-bottom:40px; width:500px; margin:0 auto;}
.question .base{ text-align:left;}
.question .base h1{ font-weight:700;font-size: 24px;color: #B0113C;letter-spacing: 1px;line-height: 24px; border-bottom:#B0113C 2px solid; padding-bottom:10px; padding-top:10px;}
.question .base h2{ font-weight:700;font-size: 24px;color: #B0113C;letter-spacing: 1px;line-height: 28px; padding-bottom:10px; padding-top:10px;}
.question .base h3{ font-weight:700;font-size: 18px;color: #B0113C;letter-spacing: 1px;line-height: 22px; padding-bottom:0px; padding-top:0;}
.question .base h4{ font-weight:700;font-size: 18px;color: #B0113C;letter-spacing: 1px;line-height: 24px; padding-bottom:0px; padding-top:10px;}
.question h1{ font-weight:700;font-size: 28px;color: #FFF;letter-spacing: 1px;line-height: 40px;padding-top:100px; padding-bottom:100px;}
.question h2{ font-size: 18px;color: #4A4A4A; margin-top:10px;}
.question .base ul{list-style: none;height: 100%;width: 100%;margin: 0;padding: 0; padding-top:10px; padding-bottom:40px;}
.question .base ul li{color: #4a4a4a;display: block;position: relative; width:100%;}
.question .base ul li.w200{color: #4A4A4A;display: block;position: relative;float: left;width: 200px;height: 80px;}
.question .base ul li.w300{color: #4A4A4A;display: block;position: relative;float: left;width: 400px;height: 80px;}
.question .base ul li.w500{color: #4A4A4A;display: block;position: relative;float: left;width: 500px;height: 80px;}
.question .base ul li input[type=radio]{position: absolute;visibility: hidden;}
.question .base ul li label{position: relative;font-weight: 300;font-size: 18px; line-height:22px;padding: 16px 16px 0px 50px;margin: 7px auto;z-index: 9;cursor: pointer;-webkit-transition: all 0.25s linear;}
.question .base ul li:hover label{color: #B0113C;}
.question .base ul li .check{display: block;position: absolute;border: 6px solid #CCC;border-radius: 100%;height: 36px;width: 36px;top: 15px;left: 0px;z-index: 5;transition: border .25s linear;-webkit-transition: border .25s linear;}
.question .base ul li:hover .check {border: 6px solid #B0113C;}
.question .base ul li .check::before {display: block;position: absolute;content: '';border-radius: 100%;height: 14px;width: 14px;top: 5px;left: 5px;margin: auto;transition: background 0.25s linear;-webkit-transition: background 0.25s linear;}
.question .base input[type=radio]:checked ~ .check {border: 6px solid #B0113C;}
.question .base input[type=radio]:checked ~ .check::before{background: #B0113C;}
.question .base input[type=radio]:checked ~ label{color: #B0113C;}
.question .base .select_bg{background:url(../images/selector.png) no-repeat right center #FFF; height: 48px; width:260px; z-index:99; margin-top:20px; margin-bottom:40px; background-size:48px;}
.question .base .select_bg select{border: 1px solid #ccc;background: transparent;border-radius:0;width: 260px;padding: 5px 60px 5px 20px;font-size: 18px;height: 48px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.question .checkbox_style{ float:none; position:relative; top:10px;}
.question input[type=checkbox].css-checkbox {position: absolute;z-index: -1000;left: -1000px;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: 0;}
.question input[type=checkbox].css-checkbox + label.css-label { width:36px;height: 36px;display: inline-block;background-repeat: no-repeat;background-position: 0 0;font-weight: 300;font-size: 24px;vertical-align: middle;cursor: pointer;padding-top:18px;}
.question input[type=checkbox].css-checkbox:checked + label.css-label {background-image:url(../images/checkboxed.png);transition: background 0.25s linear;-webkit-transition: background 0.25s linear; background-size:36px;}
.question label.css-label {background-image:url(../images/checkbox.png);transition: background 0.25s linear;-webkit-transition: background 0.25s linear;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-size:36px;}
.question input[type=checkbox].css-checkbox + label.css-label2 { width:100%;height: 36px;display: inline-block;background-repeat: no-repeat;background-position: 0 0;font-weight: 300;font-size: 24px;vertical-align: middle;cursor: pointer; line-height:24px;padding: 8px 0 0 50px;}
.question input[type=checkbox].css-checkbox:checked + label.css-label2 {background-image:url(../images/checkboxed.png);transition: background 0.25s linear;-webkit-transition: background 0.25s linear; background-size:36px;}
.question label.css-label2 {background-image:url(../images/checkbox.png);transition: background 0.25s linear;-webkit-transition: background 0.25s linear;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-size:36px;}
.question .voted{ opacity:0.3;filter: alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3; }
#quiz_end{ width:100%; position:relative; top:100px; z-index:99; background:#27B899;}
/* result */
/*.result{width:100%; position:relative; top:0px; z-index:99; }
.result .container{ margin-bottom:20px;}
.result .q_padding{ padding-bottom:100px;}
.result .title{ font-weight:700;font-size: 36px;color: #B0113C;letter-spacing: 2px;line-height: 48px;padding-top:30px; padding-bottom:30px;}
.result .result_img{ width:100%; max-width:512px; margin:20px auto; background:url(../images/ppl/demo_bg01.png) no-repeat center center; background-size:cover; padding:0;}
.result h1{font-weight:700;font-size: 42px;color: #000;letter-spacing: 2px;line-height: 48px;padding-top:0px; padding-bottom:10px;}
.result h2{font-weight:700;font-size: 20px;color: #000;letter-spacing: 2px;line-height: 28px;padding-top:0px; padding-bottom:10px;}
.result h3{font-weight:700;font-size: 14px;color: #000;letter-spacing: 1px;line-height: 18px;padding-top:0px; padding-bottom:10px;}
.result h4{font-weight:900;font-size: 120px;color: #000;letter-spacing: 1px;line-height: 140px;padding-top:0px; padding-bottom:10px;}
.result2{width:100%; position:relative; top:0px; z-index:99; }
.result2 .container{ width:100%;}
.result2 .chart_bg{ background-color: #B0113C; color: #fff; margin: 20px 0; padding: 20px 0}
.result2 .chart_bg h1{font-weight:700;font-size: 24px;color: #FFF;letter-spacing: 2px;line-height: 30px;padding-top:10px; padding-bottom:10px;}
.result2 #chartdiv{width:100%;height:500px;font-size: 14px; margin:10px auto; margin-bottom:20px;}
.result2 .chart_mask{ position:absolute; top:100px; background:rgba(0, 0, 0, 0.9);width:100%;height:540px;display:table; padding:0 20px; }
.result2 .chart_mask span{display:table-cell; vertical-align:middle;}
.result2 .chart_mask h1{font-weight:700;font-size: 24px;color: #FFF;letter-spacing: 1px;line-height: 30px;padding-top:30px; padding-bottom:10px; max-width:500px; margin:0 auto;}
.r_right{height:500px;display:table-cell; vertical-align:middle;padding-right: 100px; padding-top:20px;}
.result .filter{ margin:0px auto; padding:0px 0; text-align:center; margin-top:20px;}
.result .select_bg{background:url(../images/selector.png) #FFF no-repeat right center; height: 60px; width:260px; margin:0 auto}
.result .select_bg select{border: 1px solid #CCC;background: transparent;border-radius:0;width: 260px;padding: 5px 60px 5px 20px;font-size: 24px;height: 60px;-webkit-appearance: none;-moz-appearance: none;appearance: none;line-height:24px; color:#666; font-weight:normal;}
.result3 .container{ margin-bottom:30px; }
.result3 .title{ font-weight:700;font-size: 36px;color: #B0113C;letter-spacing: 2px;line-height: 48px;padding-top:30px; margin-bottom:30px;}
.result3 h1{font-weight:700;font-size: 24px;color: #000;letter-spacing: 2px;line-height: 24px;padding-top:0px; padding-bottom:10px;}
.result3 h2{font-weight:700;font-size: 14px;color: #000;letter-spacing: 2px;line-height: 14px;padding-top:0px; padding-bottom:10px;}
.result3 h3{font-weight:700;font-size: 12px;color: #000;letter-spacing: 1px;line-height: 14px;padding-top:0px; padding-bottom:20px;}
.result3 h4{font-weight:900;font-size: 36px;color: #000;letter-spacing: 1px;line-height: 36px;padding-top:0px; padding-bottom:0px;}
*/
.result-cover{
width: 100%;
position: relative;
height: 533px;
overflow: hidden;
z-index: 1;
}
.result-cover img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.result-box{
width: 800px;
max-width: 90%;
position: absolute;
top: 130px;
z-index: 2;
left: 50%;
transform: translate3d(-50%,0,0);
color:#fff;
line-height: normal;
}
.result-character{
margin:0 auto;
width: 289px;
max-width: 50%;
}
.result-character img{
width: 100%;
}
.result-type{
font-size: 55px;
font-weight: bold;
text-align: center;
line-height: 1.9;
}
.result-headline{
font-size: 27px;
text-align: center;
line-height: 1;
}
.result-text-box{
margin: 20px 0;
background: #881e22;
padding: 40px 56px 50px;
font-size: 19px;
letter-spacing: 1px;
line-height: 24px;
}
.result-text-box .result-text{
margin-bottom: 25px;
}
.result-static-text{
border:4px solid #fff;
padding:44px 26px;
font-size: 21px;
font-weight: bold;
line-height: 26px;
}
@media screen and (max-width: 1441px){
.container{ width:1280px;}
.big_c { }
.big { padding:45px;}
.small { padding:23px;}
.set_much{ display:block}
.question ul.vote li{ width:170px;}
.question ul.vote li .info{ height:260px;}
.question ul.vote li .info_bg{ width:140px; margin-bottom:10px;}
.question ul.vote li .info_img{ top:-138px;}
.question .checkbox_style{ top:20px;}
}
@media screen and (max-width: 1281px){
.container{ width:1024px;}
.big_c { }
.big { padding:30px;}
.small { padding:15px;}
.set_much{ display:block}
.r_right{padding-right: 0px; }
.cover_desc{ width:500px;}
.modal-dialog{ width:1024px; }
.modal-body{ padding:60px 150px 0 150px}
#result .result_bg{height:1000px;}
#result h4{font-size: 110px;line-height: 120px; }
}
@media screen and (max-width: 1025px){
.container{ width:960px;}
.big_c { }
.big { padding:20px;}
.small { padding:10px;}
.set_much{ display:block}
.cover_title{ font-size:36px; margin-bottom:10px}
.cover_desc{ font-size:12px; line-height:24px; }
.cover_btn{}
.cover_btn a{margin-bottom:0;}
.footer{ margin-top:0px; }
.footer li{ margin-top:20px; }
.modal-dialog{ width:960px; }
.modal-body{ padding:60px 150px 0 150px}
.question ul.vote li{ width:159px;}
.question ul.vote li .info{ height:260px;}
.question ul.vote li .info_bg{ width:132px; margin-bottom:10px;}
.question ul.vote li .info_img{ top:-132px;}
.question .checkbox_style{ top:15px;}
#result .remark_bg .container{ width:90%;}
#result .result_bg{height:950px;}
#result h4{font-size: 100px;line-height: 110px; }
#result h1{ padding-top:60px;}
}
@media screen and (max-width: 991px){
.set_much{ display:none}
}
@media screen and (max-width: 769px){
.container{width:85%;}
.big_c {}
.big { padding:15px;}
.small { padding:8px;}
.set_much{ display:none}
.cover_logo {top: 30px; left: -15px;}
.cover_title{ font-size: 48px;line-height: 70px; margin-top:50px;}
.cover_desc{ font-size: 16px;line-height: 32px; margin-top:20px; margin-bottom:20px;}
.cover_btn{width:100%; margin-left:0; text-align:center; }
.result h4{font-size: 72px;line-height: 84px; padding-bottom:0;}
.r_right{padding-top: 0px; height:auto; padding-bottom:20px;}
.footer{ margin-top:20px; }
.modal-dialog{ width:750px; }
.modal-body{ padding:30px 100px 30px 100px}
.modal-dialog h1{ margin-bottom:40px;font-size: 24px;color: #0B1226;letter-spacing: 1px;line-height: 60px; text-align:center;}
.modal-dialog p{ margin-bottom:40px;font-size: 16px;color: #333333;letter-spacing: 0px;line-height: 28px;}
.modal-dialog a.btn_all{ margin:20px auto; display:block; height:62px; line-height:56px; font-size:18px; }
.modal-dialog a.btn_all:hover{ height:62px; line-height:56px; font-size:18px}
.question .left_section{ font-size: 80px; text-align:center; width:100%;}
#result .remark_bg h2{ text-align:center;}
#result .remark_bg h3{ text-align:center;}
#result .remark_bg p{ text-align:center;}
#result .re-desc{ width:95%; }
#result .result_bg{height:940px;}
}
@media screen and (max-width: 641px){
.big_c {}
.big { padding:15px;}
.small { padding:8px;}
.set_much{ display:none}
a.btn_all{ margin:30px auto; display:block; height:62px; line-height:56px; font-size:18px}
a.btn_all:hover{ height:62px; line-height:56px; font-size:18px}
.footer{ margin-top:20px; width:100%; text-align:center; }
.footer li{ width: 100%;margin: 0 auto;margin-bottom:20px;}
.modal-dialog{ width:95%; }
.modal-body{ padding:30px 30px 30px 30px;}
.modal-dialog h1{ margin-bottom:40px;font-size: 24px;color: #0B1226;letter-spacing: 1px;line-height: 60px; text-align:center;}
.modal-dialog p{ margin-bottom:40px;font-size: 14px;color: #333333;letter-spacing: 0px;line-height: 22px;}
.modal-dialog a.btn_all{ margin:20px auto; display:block; height:62px; line-height:56px; font-size:18px; }
.modal-dialog a.btn_all:hover{ height:62px; line-height:56px; font-size:18px}
.question .title_de{ width:100%;}
.result3 h1{font-weight:700;font-size: 18px;color: #000;letter-spacing: 2px;line-height: 24px;padding-top:0px; padding-bottom:5px;}
.result3 h2{font-weight:700;font-size: 12px;color: #000;letter-spacing: 2px;line-height: 14px;padding-top:0px; padding-bottom:5px;}
.result3 h3{font-weight:700;font-size: 12px;color: #000;letter-spacing: 1px;line-height: 14px;padding-top:0px; padding-bottom:20px;}
.result3 h4{font-weight:900;font-size: 28px;color: #000;letter-spacing: 1px;line-height: 32px;padding-top:0px; padding-bottom:0px;}
#cover .container .key-art{background-size: auto 100%; padding-bottom: 75%; background-position: center center;}
#cover .container .key-art span{background-size: 88%}
.result-type{
font-size: 11vw;
}
.result-headline {
font-size: 5.5vw;
}
.result-text-box{
padding: 7vw;
font-size: 4.4vw;
line-height: 5.9vw;
}
.result-static-text{
border: 3px solid #fff;
padding: 9vw 7vw;
font-size: 5vw;
line-height: 7vw;
}
}
@media screen and (max-width: 415px){
.container{width:90%;}
.big_c { height:414px;}
.big { height:207px; padding:5px; text-align:center;}
.big img{ width:47.5%;height:100%;}
.small { height:207px; padding:6px;}
.set_much{ display:none}
.cover_logo {top: 30px; left: 0px;}
.cover_title{ font-size: 42px;line-height: 70px; margin-bottom:0px; margin-top:30px; margin-left:0; margin-right:0;text-align:center; width:100%;}
.cover_desc{ font-size: 14px;line-height: 22px; margin:15px auto;text-align:center; width:90%;}
.cover_btn{width:100%; margin-left:0; text-align:center; margin-top:30px}
.cover_btn a{width:260px;}
.footer{ margin-top:20px; }
.modal-dialog h1{ margin-bottom:20px;font-size: 18px;color: #0B1226;letter-spacing: 1px;line-height: 24px; text-align:center;}
.modal-dialog p{ margin-bottom:20px;font-size: 12px;color: #333333;letter-spacing: 0px;line-height: 22px;}
.question h1{ font-size: 18px;color: #FFF;letter-spacing: 1px;line-height: 32px;padding-top:50px; padding-bottom:50px}
.question .container{width:85%; margin-bottom:20px;}
.question ul.vote li{ width:175px;}
.question ul.vote li .info{ height:260px;}
.question ul.vote li .info_bg{ width:147px; margin-bottom:20px;}
.question ul.vote li .info_img{ top:-147px;}
.question .checkbox_style{ top:10px;}
.question .title{ text-align:center; font-size:36px;}
.question input[type=checkbox].css-checkbox {position: absolute;z-index: -1000;left: -1000px;overflow: hidden;clip: rect(0 0 0 0);height: 1px;width: 1px;margin: -1px;padding: 0;border: 0;}
.question input[type=checkbox].css-checkbox + label.css-label {height: 40px;display: inline-block;background-repeat: no-repeat;background-position: 0 0;font-weight: 300;font-size: 22px;vertical-align: middle;cursor: pointer;padding-top:10px; }
.question input[type=checkbox].css-checkbox:checked + label.css-label {background-size:contain;background-image:url(../images/checkboxed.png);transition: background 0.25s linear;-webkit-transition: background 0.25s linear;}
.question label.css-label {background-image:url(../images/checkbox.png); background-size:contain;transition: background 0.25s linear;-webkit-transition: background 0.25s linear;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.clearfix_aj1{ margin-bottom:10px;}
.clearfix_aj2{ margin-bottom:30px;}
#quiz_end{ width:100%; position:relative; top:80px; z-index:99; background:#27B899;}
#quiz_end .container{ height:160px;}
a.btn_all2{ margin-bottom:10px;}
a.btn_all2{ margin:30px auto; display:block; height:62px; line-height:62px; font-size:16px; top:-20px;}
a.btn_all2:hover{ height:62px; line-height:62px; font-size:16px}
a.btn_all{ margin:20px auto; display:block; height:62px; line-height:62px; font-size:16px; margin-bottom:20px;}
a.btn_all:hover{ height:62px; line-height:62px; font-size:16px}
.result .title_de{ width:100%;}
.chart_level img{ width:90%; height:16px;}
.result .chart_bg{ width:111%; padding: 20px 0; margin-left:-20px;}
}
@media screen and (max-width: 376px){
.big_c { height:374px;}
.big { height:187px; padding:5px; text-align:center;}
.big img{ width:47.5%;height:100%;}
.small { height:187px; padding:6px;}
.set_much{ display:none}
#result #total_chart{zoom: 72%;}
#result h3{ font-size:32px; line-height: 36px;}
#result h4{ font-size:48px; line-height: 52px;}
#result .re-desc{ font-size:14px; line-height:28px; margin-top:20px;}
.question ul.vote li{ width:158px;}
.question ul.vote li .info{ height:260px;}
.question ul.vote li .info_bg{ width:129px; margin-bottom:10px;}
.question ul.vote li .info_img{ top:-129px;}
.question .checkbox_style{ top:15px;}
.question .title{ text-align:center; font-size:32px; line-height:36px;}
.result .chart_bg{ width:112%; padding: 20px 0; margin-left:-20px;}
}
@media screen and (max-width: 321px){
.big_c { height:320px;}
.big { height:160px; padding:5px; text-align:center;}
.big img{ width:47.5%;height:100%;}
.small { height:160px; padding:6px;}
.set_much{ display:none}
.cover_title{ font-size: 34px;line-height: 40px;}
.cover_desc{ font-size:12px;}
.cover_logo {top: 20px; left: -5px;}
.cover_logo img{ width:60px; height:26px;}
.modal-dialog a.btn_all{ width:220px;}
.modal-dialog h1{ margin-bottom:10px;}
.modal-dialog p{ margin-bottom:10px;}
.question .title{ text-align:center; font-size:28px; line-height:32px;}
.question h1{ font-size: 18px; }
.question ul li label{font-weight: 300;font-size: 16px;padding: 15px 25px 15px 55px;margin: 10px auto; line-height:20px;}
.question ul li.w200{height: 60px; width:145px}
.question ul.vote li{ width:136px;}
.question ul.vote li .info{ height:260px;}
.question ul.vote li .info_bg{ width:108px; margin-bottom:0px; height:118px}
.question ul.vote li .info_img{ top:-108px;}
.question .checkbox_style{ top:0px;}
.question ul.vote li .info h2{ margin-top:10px;}
.question input[type=checkbox].css-checkbox + label.css-label {height: 40px;display: inline-block;background-repeat: no-repeat;background-position: 0 0;font-weight: 300;font-size: 16px;vertical-align: middle;cursor: pointer;padding-top:10px; }
}
@-webkit-keyframes fade_header {
0% {opacity:0;filter: alpha(opacity=0); }
100% {opacity:1;filter: alpha(opacity=100); }
}
@-moz-keyframes fade_header {
0% {opacity:0; filter: alpha(opacity=0); }
100% {opacity:1; filter: alpha(opacity=100); }
}
@-o-keyframes fade_header {
0% {opacity:0;filter: alpha(opacity=0); }
100% {opacity:1; filter: alpha(opacity=100); }
}
@-ms-keyframes fade_header {
0% {opacity:0;filter: alpha(opacity=0); }
100% {opacity:1; filter: alpha(opacity=100); }
}
@keyframes fade_header {
0% {opacity:0;filter: alpha(opacity=0); }
100% {opacity:1; filter: alpha(opacity=100); }
}