.wrap-loading{
    z-index: 9999;
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.2); /*not in ie */
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
}
.wrap-loading div{
    position: fixed;
    top:50%;
    left:50%;
    margin-left: -21px;
    margin-top: -21px;
}
.display-none{
    display:none;
}

.wrap-loading img{
    width:50px;
}

.as_strong {
    color: #000;
    font-size: 3.2vw;
    font-weight: 600;
}

.wid150{
    width:150px;
}

.quizbtn{
    width:100%; height: 60px; border:0px; background-color: #80c269; color:white; font-weight: bold; bottom:0; }

.width100{
    width:100%;
}
@charset "UTF-8";
/*공통*/
html, body, .ui-page { height: 100%; }

body { min-width: 280px; /*overflow: hidden;*/ -webkit-text-size-adjust: 100%; /* stop ios zooming text  on orientation change */ -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

@media only screen and (orientation: portrait) and (max-width: 350px), only screen and (orientation: landscape) { html { font-size: 10px; } }

@media only screen and (orientation: portrait) and (min-width: 351px) and (max-width: 650px), only screen and (orientation: landscape) { html { font-size: 12px; } }

@media only screen and (orientation: portrait) and (min-width: 651px) { html { font-size: 24px; } }

#wrap { /*overflow:hidden;*/ line-height: 1; height: 100%; z-index: 0; position: relative; background-color: #fff; /*min-height: 64.71rem;*/ z-index: 0; word-break: keep-all; }

.clear { clear: both; }

.ui-loader { display: none; }

a { -webkit-tap-highlight-color: transparent; }

a.onTouch { -webkit-transform: scale(0.9); transform: scale(0.9); }

.vertical_wrap { display: table; width: 100%; }

.vertical_wrap .vertical_box { display: table-cell; vertical-align: middle; line-height: 1; }

.no_scroll { overflow: hidden; }

#header .go_fullmenu { position: absolute; top: 9.46667vw; left: 7.46667vw; width: 2vw; height: 2vw; z-index: 1; }

#header .go_fullmenu span.icon { position: absolute; top: 50%; left: 50%; width: 2vw; height: 2vw; margin-top: -1.93333vw; margin-left: -3.06667vw; background: url("/images/go_fullmenu.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

#header .gnb_wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; display: none; }

#header .gnb_wrap .gnb_bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 0; }

#header .gnb_wrap .gnb_inner { position: relative; z-index: 1; width: 90%; left: -100%; }

#header .gnb_wrap .gnb_inner .top_box { position: relative; height: 17.6vw; line-height: 17.6vw; background-color: #293e96; }

#header .gnb_wrap .gnb_inner .top_box a { display: block; color: #fff; font-size: 4.53333vw; padding: 0 5.86667vw; }

#header .gnb_wrap .gnb_inner .top_box a span.icon { display: inline-block; width: 4.53333vw; height: 4vw; background: url("/images/gnb_home.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; margin-right: 3.46667vw; vertical-align: middle; margin-top: -0.26667vw; }

#header .gnb_wrap .gnb_inner .top_menu { height: 12vw; line-height: 12vw; background-color: #3f5bb2; }

#header .gnb_wrap .gnb_inner .top_menu a { display: block; height: 12vw; line-height: 12vw; color: #fff; font-size: 4vw; text-align: center; }

#header .gnb_wrap .gnb_inner #nav ul li { border-top: 0.13333vw solid #2d2e2f; background-color: #1b1c1d; }

#header .gnb_wrap .gnb_inner #nav ul li:first-child { border-top: 0; }

#header .gnb_wrap .gnb_inner #nav ul li a { display: block; color: #fff; font-size: 4.26667vw; padding: 4.53333vw 5.86667vw; -webkit-transform-origin: left; transform-origin: left; }

#header .gnb_wrap .gnb_inner .close { position: absolute; top: 0; right: 0; width: 17.6vw; height: 17.6vw; z-index: 1; }

#header .gnb_wrap .gnb_inner .close span.icon { position: absolute; top: 50%; left: 50%; width: 5.33333vw; height: 5.33333vw; margin-top: -2.66667vw; margin-left: -2.66667vw; background: url("/images/gnb_close.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

#footer { position: absolute; left: 0; right: 0; text-align: center; top: 80vw; padding-bottom: 5vw; }

#footer strong { display: block; width: 14.4vw; height: 2.73333vw; background: url("/images/intro_f_logo.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; margin: 0 auto 2vw; }

#footer .copyright { font-size: 2.4vw; color: #313131; letter-spacing: -0.06667vw; font-weight: 600; }

.page_intro * { outline: none !important; }

.page_intro .intro_wrap { position: relative; background: url("/images/intro_bg.jpg") no-repeat 0 0; background-size: cover; text-indent: -99999px; height: 100%; }

.page_intro .intro_wrap h1 { position: absolute; top: 31.86667vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 30.26667vw; height: 26.26667vw; background: url("/images/intro_logo.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.page_main .main_wrap { position: relative; text-indent: 0; width: 100vw; height: 100%; }

.page_main .main_wrap h1 { position: absolute; top: 4.46667vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 12vw; height: 22.53333vw; background: url("/images/main_logo.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.page_main .main_wrap .bg_box { position: absolute; background: url("/images/main_bg.jpg") no-repeat 0 0; background-position: center -25rem; background-size: cover; background-attachment: fixed; height: 35rem; width: 100%; z-index: -100;}

.page_main .main_wrap .util_box { position: absolute; top: 48.6vw; padding: 0 10vw 0 10vw; width: 80%; }

.page_main .main_wrap .util_box .search_box { position: relative; width: 100%; }

.page_main .main_wrap .util_box .search_box .input_box label { position: absolute; top: 0; left: 0; height: 3vw; line-height: 3.7vw; font-size: 1.2vw; color: #d1d1d1; padding: 0 1.3vw; }

.page_main .main_wrap .util_box .search_box .input_box input { display: block; height: 3.5vw; line-height: 3vw; background-color: #fff; margin: 0 5rem 0 0; padding: 0 1.5vw; border: solid 1px #418274; border-radius: 5rem; width: 92%; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1.5vw; color: #898989; }

.page_main .main_wrap .util_box .search_box button { position: absolute; top: 0; right: 0; width: 3.5vw; height: 3.5vw; background-color: #418274; border: 0; margin: 0; padding: 0; border-radius: 5rem; font-size: 1.7vw; color: #fff; }

.page_main .main_wrap .util_box .quick_list { text-align: center; margin-top: 5vw; padding: 0 5vw; }

.page_main .main_wrap .util_box .quick_list ul { display: flex; flex-direction: row; justify-content: space-between; }

.page_main .main_wrap .util_box .quick_list ul li { width: 6.7vw; height: 6.7vw; }

.page_main .main_wrap .util_box .quick_list ul li a { display: block; height: 6.7vw; line-height: 6vw; -webkit-transition: ease-in-out 0.15s; transition: ease-in-out 0.15s; font-size: 1.3vw; }

.page_main .main_wrap .util_box .quick_list ul li a i { font-size: 3vw; color: #fff; }

.page_main .main_wrap .util_box .quick_list ul li a.list01 { background-color: #418274; border-radius: 20%; }

.page_main .main_wrap .util_box .quick_list ul li a.list02 { background: -webkit-gradient(linear, left top, right bottom, from(#41c9cd), to(#24a4af)); background: linear-gradient(to right bottom, #41c9cd, #24a4af); border-radius: 20%; }

.page_main .main_wrap .util_box .quick_list ul li a.list03 { background: -webkit-gradient(linear, left top, right bottom, from(#bea24f), to(#a08b32)); background: linear-gradient(to right bottom, #bea24f, #a08b32); border-radius: 20%; }

.page_main .main_wrap .util_box .quick_list ul li a.list04 { background: -webkit-gradient(linear, left top, right bottom, from(#45aedc), to(#2786bc)); background: linear-gradient(to right bottom, #45aedc, #2786bc); border-radius: 20%; }

.page_main .main_wrap .util_box .quick_list ul li a.list05 { background: -webkit-gradient(linear, left top, right bottom, from(#5c7ce0), to(#4058c4)); background: linear-gradient(to right bottom, #5c7ce0, #4058c4); border-radius: 20%; }

.page_main .main_wrap .util_box .quick_list ul li a.list06 { background: -webkit-gradient(linear, left top, right bottom, from(#947aa1), to(#7d6188)); background: linear-gradient(to right bottom, #947aa1, #7d6188); border-radius: 20%; }

.page_sub.has_f { padding-bottom: 9.73333vw; -webkit-box-sizing: border-box; box-sizing: border-box; }

.page_sub #header .go_fullmenu { top: 4.26667vw; left: 4.26667vw; }

.page_sub #header h1 { text-align: center; height: 8vw; line-height: 8vw; background-color: #007130; }

.page_sub #header h1 img { width: 30.73333vw; vertical-align: middle; }

.page_sub #footer { position: static; border-top: 1px solid #313131; height: 9.6vw; line-height: 9.6vw; background-color: #fff; }

.page_sub #footer p { font-size: 2.4vw; color: #313131; }

.page_sub .quick_list { text-align: center; margin-top: 4.5vw; padding: 0 15vw; }

.page_sub .quick_list:before { content: ''; position: absolute; height: 6vw; z-index: -1; }

.page_sub .quick_list ul { display: flex; flex-direction: row; justify-content: space-between; }

.page_sub .quick_list ul li { width: 5vw; height: 5vw; }

.page_sub .quick_list ul li a { display: block; height: 5vw; line-height: 5vw; -webkit-transition: ease-in-out 0.15s; transition: ease-in-out 0.15s; font-size: 1vw; }

.page_sub .quick_list ul li a i { font-size: 3vw; color: #fff; }

.page_sub .quick_list ul li a span.icon { display: inline-block; background: url("/images/sub_sp2.png") no-repeat 0 0; background-size: 100vw; text-indent: -99999px; vertical-align: middle; }

.page_sub .quick_list ul li a.list01 { background-color: #418274; border-radius: 20%; }

.page_sub .quick_list ul li a.list02 { background: -webkit-gradient(linear, left top, right bottom, from(#41c9cd), to(#24a4af)); background: linear-gradient(to right bottom, #41c9cd, #24a4af);  border-radius: 20%;}

.page_sub .quick_list ul li a.list03 { background: -webkit-gradient(linear, left top, right bottom, from(#bea24f), to(#a08b32)); background: linear-gradient(to right bottom, #bea24f, #a08b32);  border-radius: 20%;}

.page_sub .quick_list ul li a.list04 { background: -webkit-gradient(linear, left top, right bottom, from(#45aedc), to(#2786bc)); background: linear-gradient(to right bottom, #45aedc, #2786bc);  border-radius: 20%;}

.page_sub .quick_list ul li a.list05 { background: -webkit-gradient(linear, left top, right bottom, from(#5c7ce0), to(#4058c4)); background: linear-gradient(to right bottom, #5c7ce0, #4058c4);  border-radius: 20%;}

.page_sub .quick_list ul li a.list06 { background: -webkit-gradient(linear, left top, right bottom, from(#947aa1), to(#7d6188)); background: linear-gradient(to right bottom, #947aa1, #7d6188);  border-radius: 20%;}

.page_sub .result_list { position: relative; margin: 0vw 1.86667vw 12.8vw; }

.page_sub .result_list .item { position: relative; border: 1px solid #e1e1e1; border-radius: 1.5vw; padding-left: 19vw; margin-top: 4.66667vw; -webkit-box-shadow: 0px 0px 8px 0px #e0e0e0; box-shadow: 0px 0px 8px 0px #e0e0e0; }

.page_sub .result_list .item:first-child { margin-top: 0; }

.page_sub .result_list .item .img_box { position: absolute; top: 0; left: 0; bottom: 0; width: 19vw; height: 19vw; border-radius: 1.5vw 0 0 1.5vw; 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; overflow: hidden; }

.page_sub .result_list .item .img_box img { width: 100%; height: 100%; object-fit: cover; }

.page_sub .result_list .item .cont_box { padding: 2vw 2vw; height: 15vw; }

.page_sub .result_list .item .cont_box strong { color: #000; font-size: 1.7vw; font-weight: 600; }

.page_sub .result_list .item .cont_box p { color: #1b1b1b; font-size: 1.2vw; margin-top: 2vw; line-height: 2vw; max-height: 7.46667vw; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.page_sub .result_list .item .cont_box .bottom_util { display: inline-block; width: 100%; margin-top: 4vw; }

.page_sub .result_list .item .cont_box .bottom_util ul { float: left; font-size: 0; line-height: 0; }

.page_sub .result_list .item .cont_box .bottom_util ul li { float: left; font-size: 2.13333vw; margin-left: 0.93333vw; }

.page_sub .result_list .item .cont_box .bottom_util ul li a { display: block; border: 1px solid; border-radius: 6.66667vw; height: 4.4vw; line-height: 4.4vw; }

.page_sub .result_list .item .cont_box .bottom_util ul li a span.icon { display: inline-block; vertical-align: middle; margin: -0.26667vw 0.8vw 0 0; background: url("/images/sub_sp.png") no-repeat 0 -13.86667vw; background-size: 100vw; text-indent: -99999px; width: 2vw; height: 2.13333vw; }

.page_sub .result_list .item .cont_box .bottom_util ul li a.like { border-color: #e4519a; color: #e4519a; }

.page_sub .result_list .item .cont_box .bottom_util ul li a.dislike { border-color: #939393; color: #939393; }

.page_sub .result_list .item .cont_box .bottom_util ul li a.dislike span.icon { background-position: -3.6vw -13.86667vw; }

.page_sub .result_list .item .cont_box .bottom_util .btn_share { float: left; margin: 0.66667vw 0 0 4.53333vw; width: 3.33333vw; height: 3.86667vw; background: url("/images/sub_sp.png") no-repeat -7.06667vw -13.86667vw; background-size: 100vw; text-indent: -99999px; }

.page_sub .result_list .item .cont_box a.more { position: absolute; bottom: 1.6vw; right: 2.53333vw; width: 6.13333vw; height: 3vw; line-height: 3vw; text-align: center; background-color: #008e8f; color: #fff; font-size: 1vw; border-radius: 3vw; }

.page_sub .view_wrap { margin-bottom: 9.06667vw; }

.page_sub .view_wrap .quick_list { margin-bottom: 5.73333vw; }

.page_sub .view_wrap .view_box .img_box img { width: 100%; }

.page_sub .view_wrap .view_box .inner { position: relative; background-color: #fff; margin: -3.6vw 1.86667vw 0; padding: 5.33333vw 4vw 8.66667vw; border: 1px solid #919090; z-index: 0; }

/*.page_sub .view_wrap .view_box .cont_box { border-bottom: 1px solid #b7b7b7; padding-bottom: 5.73333vw; }*/
.page_sub .view_wrap .view_box .cont_box { padding-bottom: 5.73333vw; }

.page_sub .view_wrap .view_box .cont_box strong { font-size: 2vw; font-weight: 600; }

/*.page_sub .view_wrap .view_box .cont_box p { font-size: 2.4vw; line-height: 3.73333vw; color: #1b1b1b; margin-top: 2.93333vw; }*/
.page_sub .view_wrap .view_box .cont_box p { line-height: 2.73333vw; color: #1b1b1b; margin-top: 2.93333vw; }

.page_sub .view_wrap .view_box .cont_box .tag_box { margin-top: 3.46667vw; }

.page_sub .view_wrap .view_box .cont_box .tag_box a { display: inline-block; margin-right: 1.2vw; color: #0000ff; font-size: 2vw; }

.page_sub .view_wrap .view_box .cont_box .util_box { text-align: right; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util { display: inline-block; margin-top: 4vw; text-align: left; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul { float: left; font-size: 0; line-height: 0; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li { float: left; font-size: 2.13333vw; margin-left: 0.93333vw; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li a { display: block; border: 1px solid; border-radius: 6.66667vw; height: 4.4vw; line-height: 4.4vw; padding: 0 2.4vw; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li a span.icon { display: inline-block; vertical-align: middle; margin: -0.26667vw 0.8vw 0 0; background: url("/images/sub_sp.png") no-repeat 0 -13.86667vw; background-size: 100vw; text-indent: -99999px; width: 2vw; height: 2.13333vw; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li a.like { border-color: #e4519a; color: #e4519a; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li a.dislike { border-color: #939393; color: #939393; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util ul li a.dislike span.icon { background-position: -3.6vw -13.86667vw; }

.page_sub .view_wrap .view_box .cont_box .util_box .bottom_util .btn_share { float: left; margin: 0.66667vw 0 0 4.53333vw; width: 3.33333vw; height: 3.86667vw; background: url("/images/sub_sp.png") no-repeat -7.06667vw -13.86667vw; background-size: 100vw; text-indent: -99999px; }

.page_sub .view_wrap .view_box .etc_box { margin-top: 6.66667vw; }

.page_sub .view_wrap .view_box .etc_box strong { font-size: 3.2vw; }

.page_sub .view_wrap .view_box .etc_box ul { margin-top: 2.66667vw; display: inline-block; width: 100%; }

.page_sub .view_wrap .view_box .etc_box ul li { float: left; width: 31%; margin: 3.5% 0 0 3.5%; }

.page_sub .view_wrap .view_box .etc_box ul li:nth-child(3n-2) { margin-left: 0; }

.page_sub .view_wrap .view_box .etc_box ul li:nth-child(n):nth-child(-n+3) { margin-top: 0; }

.page_sub .view_wrap .view_box .etc_box ul li img { width: 100%; }

.page_sub .notice_wrap { position: relative; padding-bottom: 17.73333vw; }

.page_sub .notice_wrap #footer { position: absolute; bottom: -22.8vw; }

.page_sub .notice_wrap .notice_box .inner { margin: 0 2.93333vw; }

.page_sub .notice_wrap .notice_box h2 { margin-top: 8.93333vw; font-size: 4.8vw; color: #313131; font-weight: 800; text-align: center; }

.page_sub .notice_wrap .notice_box .notice_inner { margin-top: 2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item { border-bottom: 1px solid #313131; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item:first-child { border-top: 1px solid #313131; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item > a { position: relative; display: block; font-size: 4vw; padding: 4vw 0; color: #000; padding-right: 22.66667vw; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item > a strong { font-weight: 600; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item > a span { position: absolute; top: 50%; right: 0; font-size: 3.2vw; color: #000; height: 3.2vw; line-height: 3.2vw; margin-top: -1.6vw; }

.page_sub .notice_wrap .notice_box .notice_inner .item_box .item .cont_box { display: none; margin: 1.33333vw 0 2.66667vw; border: 1px solid #313131; font-size: 3.2vw; line-height: 4vw; padding: 2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box { margin-top: 11.73333vw; text-align: center; font-size: 0; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a { position: relative; display: inline-block; font-size: 3.2vw; border-radius: 0.66667vw; width: 7.2vw; height: 7.2vw; line-height: 7.2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.num { background-color: #eee; margin: 0 0.2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.num.active { background-color: #00b7ef; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.prev, .page_sub .notice_wrap .notice_box .notice_inner .pager_box a.next { text-indent: -99999px; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.prev { margin-right: 3.2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.prev:before { content: ''; position: absolute; top: 50%; left: 50%; width: auto; height: auto; margin-top: 0; margin-left: 0; border-style: solid; border-width: 3.4vw 3.46667vw 3.4vw 0; border-color: transparent #959595; margin: -3.53333vw 0 0 -1.73333vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.next { margin-left: 3.2vw; }

.page_sub .notice_wrap .notice_box .notice_inner .pager_box a.next:before { content: ''; position: absolute; top: 50%; left: 50%; width: auto; height: auto; margin-top: 0; margin-left: 0; border-style: solid; border-width: 3.4vw 0 3.46667vw 3.4vw; border-color: transparent #959595; margin: -3.53333vw 0 0 -1.73333vw; }

.page_sub.selfie_wrpper { padding-bottom: 19.86667vw; -webkit-box-sizing: border-box; box-sizing: border-box; }

.page_sub .selfie_wrap { background-color: #000; color: #fff; height: 100%; }

.page_sub .selfie_wrap .title_box { text-align: center; padding-top: 4.4vw; }

.page_sub .selfie_wrap .title_box h2 { font-size: 3.2vw; }

.page_sub .selfie_wrap .title_box ul { display: inline-block; margin-top: 3.2vw; }

.page_sub .selfie_wrap .title_box ul li { position: relative; float: left; border: 1px solid #cbcaca; border-radius: 1.33333vw; width: 24.4vw; height: 10.66667vw; font-size: 2.66667vw; line-height: 4vw; margin-left: 5.06667vw; }

.page_sub .selfie_wrap .title_box ul li:before { content: ''; position: absolute; top: 50%; left: -4.13333vw; background: url("/images/selfie_arrow.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; width: 4vw; height: 3.2vw; margin-top: -1.6vw; }

.page_sub .selfie_wrap .title_box ul li:first-child { margin-left: 0; }

.page_sub .selfie_wrap .title_box ul li:first-child:before { content: none; }

.page_sub .selfie_wrap .title_box ul li .vertical_wrap { height: 100%; }

.page_sub .selfie_wrap .frame_box { position: relative; background-color: #ababab; overflow: hidden; margin: 0 9.06667vw; margin-top: 4vw; width: 83.86667vw; height: 84.4vw; }

.page_sub .selfie_wrap .frame_box .img_box { position: relative; z-index: 0; }

.page_sub .selfie_wrap .frame_box .img_box img { width: 100%; }

.page_sub .selfie_wrap .frame_box .frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.page_sub .selfie_wrap .frame_box .frame img { width: 100%; }

.page_sub .selfie_wrap .frame_list { overflow-x: auto; overflow-y: hidden; margin: 4vw 2vw 0; }

.page_sub .selfie_wrap .frame_list .scroll_box { white-space: nowrap; }

.page_sub .selfie_wrap .frame_list .scroll_box a { position: relative; display: inline-block; margin-left: 1.73333vw; width: 18.66667vw; }

.page_sub .selfie_wrap .frame_list .scroll_box a.on:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1.33333vw solid #005223; }

.page_sub .selfie_wrap .frame_list .scroll_box a:first-child { margin-left: 0; }

.page_sub .selfie_wrap .frame_list .scroll_box a img { width: 100%; }

.page_sub .selfie_wrap .selfie_btnbox { position: absolute; bottom: 0; left: 0; right: 0; }

.page_sub .selfie_wrap .selfie_btnbox li { float: left; width: 50%; }

.page_sub .selfie_wrap .selfie_btnbox li.btn_save { background-color: #567663; }

.page_sub .selfie_wrap .selfie_btnbox li.btn_shot { background-color: #005223; }

.page_sub .selfie_wrap .selfie_btnbox li a { display: block; height: 19.86667vw; line-height: 19.86667vw; color: #fff; font-size: 6.4vw; text-align: center; }

.page_sub.page_quiz { padding-bottom: 149px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.quiz_wrap .title { text-align: center; margin-top: 5.6vw; }

.quiz_wrap .title img { width: 70.53333vw; }

.quiz_wrap .quiz_list_wrap { text-align: center; padding: 14.66667vw 0 40vw; }

.quiz_wrap .quiz_list_wrap p { font-size: 4vw; line-height: 4.8vw; }

.quiz_wrap .quiz_list_wrap ul { margin-top: 9.6vw; }

.quiz_wrap .quiz_list_wrap ul li { margin-top: 6.13333vw; }

.quiz_wrap .quiz_list_wrap ul li:first-child { margin-top: 0; }

.quiz_wrap .quiz_list_wrap ul li a { display: block; }

.quiz_wrap .quiz_list_wrap ul li a strong { display: inline-block; width: 26.8vw; height: 6.8vw; line-height: 6.8vw; border-radius: 6.66667vw; color: #313131; background-color: #80c269; font-size: 3.2vw; }

.quiz_wrap .quiz_list_wrap ul li a p { font-size: 3.2vw; margin-top: 2.13333vw; }

.quiz_wrap .quiz_box { text-align: center; border: 0.93333vw solid #f6eaa8; border-radius: 4.26667vw; margin: 7.46667vw 4.4vw 12vw; }

.quiz_wrap .quiz_box .inner { padding: 11.6vw 4.8vw 20vw; }

.quiz_wrap .quiz_box .inner > span { display: block; font-size: 3.2vw; }

.quiz_wrap .quiz_box .inner > p { font-size: 4.8vw; line-height: 6.4vw; margin-top: 6.66667vw; padding: 0 9.33333vw; text-align: left; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 { display: inline-block; margin-top: 10.66667vw; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box { float: left; margin-left: 6.66667vw; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box:first-child { margin-left: 0; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box label { position: relative; display: block; width: 26.66667vw; height: 26.66667vw; border-radius: 4vw; border: 0.4vw solid #cbc9c9; background-color: #eee; text-indent: -99999px; -webkit-transition: ease-in-out 0.15s; transition: ease-in-out 0.15s; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box label.btn_yes span.icon { position: absolute; top: 50%; left: 50%; width: 15.46667vw; height: 15.46667vw; margin-top: -7.73333vw; margin-left: -7.73333vw; background: url("/images/btn_yes.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box label.btn_no span.icon { position: absolute; top: 50%; left: 50%; width: 14.93333vw; height: 15.06667vw; margin-top: -7.53333vw; margin-left: -7.46667vw; background: url("/images/btn_no.png") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.quiz_wrap .quiz_box .inner .radio_box.input_type01 .input_box input:checked + label { background-color: #f4cd7c; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 { display: inline-block; margin-top: 10.66667vw; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 .input_box { margin-top: 8vw; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 .input_box:first-child { margin-top: 0; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 .input_box label { position: relative; padding-left: 7.2vw; -webkit-transition: ease-in-out 0.15s; transition: ease-in-out 0.15s; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 .input_box label span.icon { position: absolute; top: 50%; left: 0; border-radius: 50%; border: 0.66667vw solid #959595; width: 3.33333vw; height: 3.33333vw; margin-top: -2.33333vw; background-color: #fff; }

.quiz_wrap .quiz_box .inner .radio_box.input_type02 .input_box input:checked + label span.icon:before { content: ''; position: absolute; top: 50%; left: 50%; width: 2vw; height: 2vw; margin-top: -1vw; margin-left: -1vw; background-color: #959595; border-radius: 50%; }

.quiz_wrap .quiz_box .inner .radio_box.input_type03 { margin: 10.66667vw 2.66667vw 0; }

.quiz_wrap .quiz_box .inner .radio_box.input_type03 .input_box { position: relative; text-align: center; }

.quiz_wrap .quiz_box .inner .radio_box.input_type03 .input_box label { position: absolute; top: 0; left: 0; right: 0; text-align: center; height: 12vw; line-height: 12vw; color: #f19149; font-size: 4vw; }

.quiz_wrap .quiz_box .inner .radio_box.input_type03 .input_box input { display: block; border: 0.4vw solid #cbc9c9; border-radius: 4vw; height: 12vw; line-height: 11.46667vw; color: #f19149; font-size: 4vw; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; padding: 0; margin: 0; text-align: center; }

.quiz_wrap .quiz_box.type02 .inner > span, .quiz_wrap .quiz_box.type03 .inner > span { text-align: left; }

.quiz_wrap .quiz_box.type02 .inner > p, .quiz_wrap .quiz_box.type03 .inner > p { padding: 0; font-size: 4vw; line-height: 6.4vw; }

.quiz_wrap .quiz_result { text-align: center; padding-bottom: 20vw; }

.quiz_wrap .quiz_result p { font-size: 3.46667vw; margin-top: 13.33333vw; }

.quiz_wrap .quiz_result p strong { font-size: 6.66667vw; font-weight: 600; color: #fe0002; }

.quiz_wrap .quiz_result ul { margin-top: 13.33333vw; display: inline-block; }

.quiz_wrap .quiz_result ul li { clear: both; font-size: 4vw; color: #000; font-weight: 600; height: 9.73333vw; line-height: 9.73333vw; overflow: hidden; }

.quiz_wrap .quiz_result ul li:first-child { margin-bottom: 2.66667vw; }

.quiz_wrap .quiz_result ul li strong { position: relative; float: left; padding-left: 9.73333vw; }

.quiz_wrap .quiz_result ul li strong span.icon { position: absolute; top: 50%; left: 0; width: 6.26667vw; height: 6.26667vw; margin-top: -3.13333vw; }

.quiz_wrap .quiz_result ul li > span { float: right; text-align: right; width: 22.66667vw; }

.quiz_wrap .quiz_result ul li.right_a .left_box span.icon { background: url("/images/quiz_result_o.jpg") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.quiz_wrap .quiz_result ul li.wrong_a .left_box span.icon { background: url("/images/quiz_result_x.jpg") no-repeat 0 0; background-size: contain; text-indent: -99999px; }

.quiz_wrap .quiz_result .btn_rank { display: inline-block; margin-top: 22.66667vw; width: 51.46667vw; height: 11.73333vw; line-height: 11.73333vw; color: #fff; font-size: 5.86667vw; font-weight: 600; background-color: #298e56; }

.quiz_wrap .quiz_ranking { margin-top: 5.33333vw; padding: 0 2.8vw; }

.quiz_wrap .quiz_ranking strong { display: block; background-color: #761415; height: 10.13333vw; line-height: 10.13333vw; color: #fff; font-size: 4.53333vw; text-align: center; font-weight: 600; }

.quiz_wrap .quiz_ranking ul { margin: 2.66667vw 0; }

.quiz_wrap .quiz_ranking ul li { padding: 2.66667vw 0; text-align: left; font-size: 5.06667vw; }

.quiz_wrap .quiz_ranking ul li span { display: inline-block; }

.quiz_wrap .quiz_ranking ul li span.num { width: 5.33333vw; font-weight: 900; padding-left: 2vw; }

.quiz_wrap .quiz_ranking ul li span.name { width: 34.66667vw; padding-left: 2vw; }

.quiz_btnbox { position: absolute; bottom: 0; left: 0; right: 0; }

.quiz_btnbox li { float: left; width: 50%; }

.quiz_btnbox li.btn_prev { background-color: #796353; }

.quiz_btnbox li.btn_next { background-color: #522400; }

.quiz_btnbox li a { display: block; height: 19.86667vw; line-height: 19.86667vw; color: #fff; font-size: 6.4vw; text-align: center; }