@charset "utf-8";

.skintest-wrap {position:relative;}
.skintest-wrap .m {}
.skintest-wrap .d {display: none;}

@media (max-width: 640px) {
  /* .m3 .depth02 li{width:33.33%;} 작업 완료 시점에서 layout.css로 이관 (3097라인) */
}
@media (min-width: 640px) {
  .skintest-wrap .m {display: none;}
  .skintest-wrap .d {display: inherit;}
}

.skintest-wrap .tit_h1,
.skintest-wrap .txt_1,
.skintest-wrap .select_box,
.skintest-wrap .btn_1,
.skintest-wrap .box_question,
.skintest-wrap .list_answer a {position:absolute; left:50%;}
.skintest-wrap select{position:absolute; left:-10000%; top:0; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0; text-indent:-10000px;}
.skintest-wrap .select_box {top:370px; width:382px; height:46px; margin-left:-191px;}
.select_wrap {position:relative;}
.select_wrap {display:inline-block;}
.select_wrap .btn_select {display:inline-block; position:relative; min-width:343px; padding:0 25px 0 10px; border:2px solid #0c1e45; background-color:#fff; font-size:16px; line-height:42px; color:#666;}
.select_wrap .btn_select:after {display:block; position:absolute; top:50%; right:10px; width:20px; height:10px; margin-top:-5px; background:url(/etc/designs/iope/iope2014/tw/zh/images/air_cushion/skin_test/bg_select_1.png) no-repeat; background-size:contain; content:'';}
.select_wrap .btn_select:after {-webkit-transition:all 0.2s cubic-bezier(0.645,0.035,0.455,1); transition:all 0.2s cubic-bezier(0.645,0.035,0.455,1);}
.select_wrap.on .btn_select:after {-webkit-transform:rotate(180deg); transform:rotate(180deg);}
.select_wrap .ul_select_list {overflow-x:hidden; overflow-y:scroll; position:absolute; top:46px; left:0; z-index:1; width:378px; height:0; background-color:#fff;}
.select_wrap.on .ul_select_list {border:2px solid #0c1e45; border-top:0;}
.select_wrap.on .ul_select_list.up {border:2px solid #0c1e45; border-bottom:0;}
.select_wrap .ul_select_list.up {top:auto; bottom:46px;}
.select_wrap .ul_select {}
.select_wrap .ul_select > li {position:relative;}
.select_wrap .ul_select li a  {display:block; padding-left:10px; border-top:1px dotted #c6cee1; background-color:#fff; font-size:16px; color:#666; line-height:35px;}
.select_wrap .ul_select li a:hover  {background-color:#fafafa;}

/* select box hide */
.step-location .select_box { display: none; }

@media screen and (max-width:640px) {
  .skintest-wrap .select_box {top:625px;}
  .select_wrap .btn_select {font-size:22px;}
  .select_wrap .ul_select li a{font-size:22px; line-height:35px;}
}

/* 질문 페이지 */
.box_question p,
.list_answer a {overflow:hidden; height:0; background-repeat:no-repeat; background-position:50% 0; text-indent:-9999px;}
.box_question {overflow:hidden; top:45%; width:500px; height:135px; margin-left:-250px;}
.box_question_1 {position:relative;}
.box_question p {width:502px; padding-top:85px;}
.box_question_1.box_north p {background-image:url(/etc/designs/iope/iope2014/tw/zh/images/air_cushion/skin_test/txt-qnorth.png);}
.box_question_1.box_south p {background-image:url(/etc/designs/iope/iope2014/tw/zh/images/air_cushion/skin_test/txt-qsouth.png);}
.box_question_1.box_skin-test-question p {background-image:url(/tw/zh/resource/img/lab/cushion-solution/txt-question.png);}
.box_question .box_0 {background-position:0 0;}
.box_question .box_1 {background-position:0 -150px;}
.box_question .box_2 {background-position:0 -300px;}
.box_question .box_3 {background-position:0 -450px;}
.box_question .box_4 {background-position:0 -600px;}
.box_question .box_5 {background-position:0 -750px;}
.box_question .box_6 {background-position:0 -900px;}
.box_question .box_7 {background-position:0 -1050px;}
.box_question .box_8 {background-position:0 -1200px;}
.box_question .box_9 {background-position:0 -1350px;}
.box_question .box_10 {background-position:0 -1500px;}
.box_question .box_11 {background-position:0 -1650px;}
.box_question .box_12 {background-position:0 -1800px;}
.box_question .box_13 {background-position:0 -1950px;}
.box_question .box_14 {background-position:0 -2100px;}
.box_question_1.box_north .box_5,
.box_question_1.box_south .box_5,
.box_question_1.box_south .box_7 {padding-top:135px;}
.box_question .ready {position:absolute; top:0;}
.box_question .r_left {left:100%;}
.box_question .r_right {right:100%;}
.list_answer.off {display:none;}
.list_answer a {display:block; padding-top:53px; background-image:url(/tw/zh/resource/img/lab/cushion-solution/btn-answer.png);background-size: 220px;}
.list_answer .li_yes a {top:65%; width:116px; margin-left:-124px; background-position:0 -6px;}
.list_answer .li_no a {top:65%; width:105px; margin-left:20px; background-position:-121px -8px;}
.list_answer .li_yes a:hover,
.list_answer .li_yes a:active {background-position:0 -60px;}
.list_answer .li_no a:hover,
.list_answer .li_no a:active {background-position:-121px -62px;}

@media screen and (max-width:640px) {
  .box_question {top: 48%; width:560px; height:135px; margin-left:-280px;}
  .box_question p {width:560px;}
  .box_question_1.box_north p {background-image:url(/etc/designs/iope/iope2014/tw/zh/images/air_cushion/skin_test/txt-qnorth-m.png);}
  .box_question_1.box_south p {background-image:url(/etc/designs/iope/iope2014/tw/zh/images/air_cushion/skin_test/txt-qsouth-m.png);}
  .box_question_1.box_skin-test-question p {background-image:url(/tw/zh/resource/img/lab/cushion-solution/txt-question-m.png);}
  .list_answer a {padding-top:47px; background-image:url(/tw/zh/resource/img/lab/cushion-solution/btn-answer-m.png);background-size: 200px;}
  .list_answer .li_yes a {top:60%; width:99px; margin-left:-113px; background-position:0 -5px;}
  .list_answer .li_no a {top:60%; width:90px; margin-left:15px; background-position:-114px -6px;}
  .list_answer .li_yes a:hover {background-position:0 -64px}
  .list_answer .li_yes a:active {background-position:0 -64px}
  .list_answer .li_no a:hover {background-position:-114px -65px}
  .list_answer .li_no a:active {background-position:-114px -65px}
}


/* 결과 페이지 */
.area_result .txt-tit{position:absolute; top:31px; left:327px;}
.area_result .btn-promo{position:absolute; bottom:0; right:0;}
.area_result .btn-set{display:none; position:absolute; top:512px; left:227px;}
.area_result .btn-set.on{display:block;}
.area_result .btn-set li{display:inline-block; margin-right:15px;}
.area_result .btn-set a{display:block; overflow:hidden; width:160px; height:46px; background:url(/tw/zh/resource/img/lib/cushion-solution/btn-result.png) no-repeat 0 0; text-indent:-9999px;}
.area_result .btn-set a:hover{background-position:0 -60px;}
.area_result .btn-set a.btn-apply{background-position:-175px 0;}
.area_result .btn-set a.btn-apply:hover{background-position:-175px -60px;}
.area_result .btn-set a.btn-youku{background-position:-350px 0;}
.area_result .btn-set a.btn-youku:hover{background-position:-350px -60px;}
.result-layer,
.apply-layer{position:fixed; width:555px; border:3px solid #0c1e45; background:#fff; z-index:1001; display:none; left:50%; top:20%; margin-left:-277px;}

/* finish_layer <<< */
.finish-layer{position:fixed; width:555px; border:3px solid #0c1e45; background:#fff; z-index:1001; display:none; left:50%; top:20%; margin-left:-277px;}

.result-layer h4,
.apply-layer h4{position:relative; padding:10px; height:20px; background:#0c1e45}
.result-layer h4 .btn_layerclose,
.apply-layer h4 .btn_layerclose{position:absolute; top:5px; right:5px}
.apply-layer h5{padding:0 30px; font-size:22px; color:#0c1e45}
.apply-layer p.notice{padding:0 30px;}
.apply-layer .cont{padding:30px 0 20px;}
.apply-layer .ipt-area{margin:20px -30px; padding: 20px 30px; background:#f7f7f7; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;}
.apply-layer .ipt-area .txt{clear:both; letter-spacing: -1px;}
.apply-layer .step2 a{position:absolute;right:30px;bottom:15px;}
.apply-layer .ipt-wrap{float:left; width:375px; }
.apply-layer .btn_ok{display:block; float:right; width:110px; height:115px; text-align:center; background:#0c1e45}
.apply-layer .btn_ok img{width:auto; height:16px; margin-top:50px}
.apply-layer h5 img{width:100%;}
.apply-layer .ipt-wrap img{width:auto; height:14px;}
.apply-layer .ipt-wrap dl{margin:12px 0; padding:20px; border-top:1px solid #8c90a1; border-bottom:1px solid #8c90a1}
.apply-layer .ipt-wrap dt{display:inline-block; width:40px; margin-bottom:10px;}
.apply-layer .ipt-wrap dt img{width:auto; height:15px}
.apply-layer .ipt-wrap dd{display:inline-block; width:320px; margin-bottom:10px;}
.apply-layer .ipt-wrap select{width:100%; height:30px; border:1px solid #cccccc}
.apply-layer .ipt-wrap input{width:100%; height:20px; padding:5px 0; border:1px solid #cccccc}
.apply-layer .ipt-wrap dd.addr01,
.apply-layer .ipt-wrap dd.addr02{width:135px}
.apply-layer .ipt-wrap dt.addr02{padding-left:4px; text-align:right;}
.apply-layer .cont li{padding:15px 30px;}

.finish-layer h4{position:relative; padding:10px; height:20px; background:#0c1e45}
.finish-layer .btn_layerclose{position:absolute; top:5px; right:5px}
.finish-layer p.notice{padding:0 30px;}
.finish-layer .cont {padding:30px 0 20px; text-align: center;}

.result-layer{width:405px; margin-left:-202px;}

.step-btn {display:none; position: relative; top: -49px; text-align: center;}
.step-btn.on {display:block;}
.step-btn .btn-prd {color: #fff; padding: 11px 38px; border-radius: 5px; font-size: 15px; margin: 0 5px; cursor: pointer;}
.step-result0 .btn-prd {background-color: #835558;}
.step-result1 .btn-prd {background-color: #7d807f;}
.step-result2 .btn-prd {background-color: #4f5452;}
.step-result3 .btn-prd {background-color: #6aa68a;}

@media only screen and (max-width: 840px) {
  .step-btn {top: -39px;}
  .step-btn .btn-prd {padding: 9px 25px;font-size: 12px;}
}
@media only screen and (max-width: 641px) {
  .step-btn {width:100%;top: -100px;}
  .step-btn .btn-prd {font-size: 24px;}
 

}

.pop_layer.air_cushion_shop {position:absolute; bottom: 100px; left: 50%; z-index:1000; width:518px; margin-left: -259px; background: #FFF; border: 3px solid #0c1e45;}
.pop_layer.air_cushion_shop .pop_header {padding:10px 0 10px 30px; color: #fff; background:#0c1e45;}
.pop_layer.air_cushion_shop .pop_header .tl {color: #fff; font-size: 16px;}
.pop_layer.air_cushion_shop .pop_header button {position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; background:url(/tw/zh/resource/img/lab/cushion-solution/ico_x.png) no-repeat; text-indent:-9999em;}
.pop_layer.air_cushion_shop .pop_cont {padding: 20px 0;}
.pop_layer.air_cushion_shop .partner_mall {overflow:hidden;}
.pop_layer.air_cushion_shop .partner_mall li {float:left; width: 25%; text-align:center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.pop_layer.air_cushion_shop .partner_mall a {display: block; margin: 0 10px;}
.pop_layer.air_cushion_shop .partner_mall span {display: block; margin-top: 5px; font-size: 12px;}

.mask {position:absolute;left:0;top:0;width:100%;height:auto;background:#000;-ms-filter: alpha(opacity=70); filter: alpha(opacity=70); opacity:0.7; -moz-opacity:0.7;z-index:101;}

@media screen and (max-width:640px) {
  .area_result .txt-tit{top:60px; left:105px;}
  .area_result .btn-set{top:964px; left:60px;}

  .apply-layer h5{font-size:32px; line-height:40px;}
  .apply-layer p.notice{padding:0 30px; font-size:22px; }
  .apply-layer{position:absolute; width:90%; left:50%; top:35%; margin-left:-291px;}
  .apply-layer img{height:auto !important;}

  .finish-layer h5{font-size:32px; line-height:40px;}
  .finish-layer p.notice{padding:0 30px; font-size:22px; }
  .finish-layer{position:absolute; width:90%; left:50%; top:35%; margin-left:-291px;}
  .finish-layer img{height:auto !important;}
.pop_layer.air_cushion_shop{width:300px; margin-left:-150px;}
.pop_layer.air_cushion_shop .partner_mall li{margin-bottom:10px; width:50%; }
}