@charset "utf-8";

body { background-color:#FFFFFF; }
img{border: none;}
#wrap { width: 640px; margin: 0 auto; }

#topmenu { line-height:0.8em; }

.tabTop { height: 70px; background-color:#404157; background: url("/assets/images/richad/client/iope/top_bg.gif") no-repeat; position:relative; }
.tabTop .btnBack {float:left; padding-left:30px; padding-top:20px; }
.tabTop .btnMenu {float:right; padding-right:30px; padding-top:16px; }

.main { height:797px; }
.footer { height:93px; }

.quiz { background: url("/assets/images/richad/client/iope/quiz.gif") no-repeat; height:139px; position:relative; }
.quiz .answer { position:absolute; top:56px; left:470px;}
.bottom { background: url("/assets/images/richad/client/iope/bottom.gif") no-repeat; height:105px; }
.line { background-color:#9EA3C7; height:1px; width:640px;}

.page_1 { background: url("/assets/images/richad/client/iope/1_gosoyoung.gif") no-repeat; height:623px; position:relative; }
.page_1 .dot { position:absolute; top:5px; left:260px; }

.page_2 { background: url("/assets/images/richad/client/iope/2_mirror.gif") no-repeat; height:623px; position:relative; z-index: 100}
.page_2 .touch{height: 580px;}
.page_2 .mirror { position:absolute; top:110px; left:160px; }
.page_2 .turn { position:absolute; top:480px; left:150px; z-index:2; }
.page_2 .comment { position:absolute; top:300px; left:70px; z-index:3; }
.page_2 .next{width:107px;height:25px;color: red;position:absolute; left:520px;top:580px;cursor: pointer;border:0px;z-index: 1000;}
.page_2 .mirror_comment{position:absolute;left:475px;top:445px;}
.page_3 { background: url("/assets/images/richad/client/iope/3_gosoyoung.gif") no-repeat; height:623px; position:relative; }
.page_3 .dot { position:absolute; top:190px; left:75px; }


.page_4 { background: url("/assets/images/richad/client/iope/4_retinol.gif") no-repeat; height:623px; position:relative; }
.page_4 .retinol { position:absolute; top:110px; left:60px; }
.page_4 .turn { position:absolute; top:420px; left:65px; z-index:2; }
.page_4 .touch{height: 580px;}
.page_4 .comment1{position: absolute;width: 296px;height:70px;left:280px;top:200px;opacity:1.0;}
.page_4 .comment2{position: absolute;width: 330px;height:66px;left:220px;top:200px;display: none;opacity:0.0;}
.page_4 .next{width:107px;height:25px;color: red;position:absolute; left:520px;top:580px;cursor: pointer;}
.page_4 .mirror_comment{position:absolute;left:300px;top:380px;}
.page_6 { width:640px; height:797px; position:relative;}
.page_6 .zone1 { width:321px; height:175px; float:left;}
.page_6 .zone2 { width:319px; height:175px; float:left;}
.page_6 .zone3 { width:321px; height:175px; float:left;}
.page_6 .zone4 { width:319px; height:175px; float:left;}
.page_6 .drag { background: url("/assets/images/richad/client/iope/drag_bg.gif") no-repeat; height:447px; clear:both;}
.page_6 .hand { position:absolute; top:450px; left:400px; }
.page_6 .retinol_drag { position:absolute; top:220px; left:200px; }
.page_6 #obj_retinol{position: absolute;top:100px;left: 270px;}
.movie{height:0px;width:0px;position: absolute;left: -10000000px;}
.video_stop{display: none; color:#fff; z-index:1000;}


.info { background-color:#FFF; }
.cont { height:797px; }
.titleimg { vertical-align:bottom; height:297px; margin:0; padding:0; }
.inputform { background: url("/assets/images/richad/client/iope/form.gif") no-repeat; height:388px; }

.uName { padding-left:231px; padding-top:18px; height:66px; width:338px; }
.uTel { padding-left:231px; padding-top:0px; height:99px; width:338px; }
.btnPop { width:180px; height:83px; padding-left:438px; padding-top:3px;}

.uAgree { padding-left:380px; padding-top:7px; width:260px; height:100px; }
.agree1 { padding-left:0px; padding-top:0px; height:43px; width:250px;}
.agree2 { padding-left:0px; padding-top:0px; height:40px; width:250px;}
.btnSubmit { text-align:center; padding-top:30px; }