/* index */
.recom_top {position:relative; width:100%; height:100px;}
.recom_top_logo {position:relative; width:200px; height:100px; box-sizing:border-box; background:url("../img/recom/logo_01.png") no-repeat 20px 20px;}
.recom_top_logo a {display:block; width:200px; height:100px;}
.recom_top_home {position:absolute; height:20px; right:20px; top:20px; box-sizing:border-box; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:14px; color:#000; font-weight:400; z-index:500;}
.recom_top_bt {position:absolute; width:173px; height:25px; right:80px; top:15px; box-sizing:border-box; z-index:500;}
.recom_ind_wrap {position:relative; width:690px; margin:0 auto; background:url("../img/recom/bg_01.png") no-repeat 20px 90px;}
.recom_ind_tit {position:relative; width:100%; height:45px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; letter-spacing:-2px; font-size:28px; color:#000; font-weight:800; margin-top:10px;}
.recom_ind_txt {position:relative; width:100%; height:50px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; letter-spacing:-1px; font-size:14px; color:#333; font-weight:400; line-height:140%;}
.recom_ind_selwrap {position:relative; width:100%; height:340px; margin-top:130px; box-sizing:border-box;}
.recom_ind_selwrap ul li {position:relative; float:left; width:340px; height:340px; margin-right:10px;}
.recom_ind_selwrap ul li:nth-last-child(1) {margin-right:0px;}
.recom_ind_selbox {position:relative; width:340px; height:340px; box-sizing:border-box; border-radius:120px; background:#fff; border:solid 8px #fff; cursor:pointer; color:#666;}
.recom_ind_selbox:hover {border:solid 8px #f1f1f1; color:#000;}
.recom_ind_pic1 {position:absolute; width:76px; height:76px; left:50%; top:45px; margin-left:-38px; background:url("../img/recom/pic_01.png") no-repeat;}
.recom_ind_pic2 {position:absolute; width:76px; height:76px; left:50%; top:45px; margin-left:-38px; background:url("../img/recom/pic_02.png") no-repeat;}
.recom_ind_tit2 {position:relative; width:100%; height:40px; text-align:center; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; letter-spacing:-2px; font-size:24px; font-weight:800; margin-top:20px; margin-top:150px;}
.recom_ind_txt2 {position:relative; width:100%; text-align:center; font-size:13px; color:#818181; font-weight:400; line-height:140%;}
.recom_ind_copy {position:relative; width:100%; height:20px; text-align:center; margin-top:30px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:9px; color:#fdebc6; font-weight:400;}

/* step */
.recom_wrap {position:relative; width:100%; margin:0 auto;}
.recom_wrap > ul > li {position:relative; float:left; width:220px; box-sizing:border-box;}
.recom_step_wrap {position:relative; width:100%; box-sizing:border-box; padding:30px 20px 70px 20px;}
.recom_step_num {position:relative; width:100%; height:23px; font-size:15px; color:#333;}
.recom_step_name {position:relative; width:100%; height:70px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:18px; color:#333; letter-spacing:-1px; font-weight:800;}
.recom_step_sel {position:relative; width:100%; height:52px; box-sizing:border-box; border-radius:5px; border:solid 3px #fcdb7a; margin-bottom:5px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:15px; font-weight:400; letter-spacing:-1px; text-align:center; cursor:pointer; padding-top:15px; color:#333; background:url("../img/recom/bg_02.png") no-repeat 100% 0px;}
.s_on {background:#434377 url("../img/recom/bg_02.png") no-repeat 100% -46px; border:solid 3px #434377; color:#fff;}
.recom_step_sel:hover {border:solid 3px #fff;}
.recom_step_bg {position:absolute; width:190px; height:320px; left:0px; top:400px; background:url("../img/recom/bg_03.png") no-repeat; z-index:500;}

.recom_wrap ul li.recom_lec_li {width:812px; border-right:0px; box-sizing:border-box; background:#fac321; min-height:100vh;}
.recom_lec_wrap {position:relative; width:100%; box-sizing:border-box; padding:30px 30px 70px 30px;}
.recom_lec_no {position:relative; width:100%; height:300px; box-sizing:border-box; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:18px; color:#333; letter-spacing:-1px; font-weight:800; line-height:140%; background:url("../img/recom/bg_04.png") no-repeat 0px 70px;}
.recom_lec_picwrap {position:relative; width:100%; box-sizing:border-box;}
.recom_lec_picwrap ul li {position:relative; float:left; width:173px; height:200px; margin-right:20px; cursor:pointer; color:#333; margin-bottom:15px;}
.recom_lec_picwrap ul li:hover {color:#515196;}
.recom_lec_picwrap ul li:nth-child(4n+4) {margin-right:0px;}
.recom_lec_tum {position:relative; width:173px; height:109px; border-radius:10px; box-sizing:border-box;}
.recom_lec_tumpic {position:absolute; width:27px; height:32px; left:12px;; top:0px; background:url("../img/recom/pic_03.png") no-repeat;}
.recom_lec_sbj {position:relative; width:100%; font-size:13px; line-height:130%; margin-top:11px;}
.recom_lec_info {position:relative; width:100%; font-size:12px; color:#7d600b; line-height:130%; margin-top:3px;}

.recom_list_wrap {position:relative; width:100%; box-sizing:border-box; border-top:solid 2px #d1a31a; margin-top:10px;}
.recom_list_wrap ul li {position:relative; width:100%; height:47px; line-height:46px; box-sizing:border-box; border-bottom:solid 1px #e6b31d; font-size:13px; color:#333; cursor:pointer;}
.recom_list_wrap ul li:hover {color:#515196;}
.recom_list_info {position:absolute; width:250px; height:46px; line-height:46px; right:0px; top:0px; font-size:13px; color:#333; text-align:right;}

.recom_page_wrap {position:relative; width:100%; height:30px; box-sizing:border-box; text-align:center; margin-top:30px;}
.recom_pagenum {position:relative; display:inline-block; height:30px;}
.recom_pagenum ul li {position:relative; float:left; width:30px; height:30px; line-height:30px; box-sizing:border-box; border-right:0px; border-top:solid 1px #e6b31d; border-left:solid 1px #e6b31d; border-bottom:solid 1px #e6b31d; text-align:center; cursor:pointer; color:#9f7f1f; font-size:12px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif;}
.recom_pagenum ul li:nth-child(1) {border-top-left-radius:3px; border-bottom-left-radius:3px;}
.recom_pagenum ul li:nth-last-child(1) {border-top-right-radius:3px; border-bottom-right-radius:3px; border-right:solid 1px #e6b31d;}
.recom_pagenum ul li:hover {background:#e6b31d;}
.recom_pagenum ul li.page_on {background:#e6b31d;}

.recom_wrap ul li.recom_survey_li {width:1140px; border-right:0px; box-sizing:border-box; background:#fac321; min-height:100vh;}
.recom_sur_wrap {position:relative; width:100%; box-sizing:border-box; padding:30px 30px 70px 30px;}
.recom_sur_txt {position:relative; width:100%; font-size:14px; line-height:140%; color:#6e550f; box-sizing:border-box; padding-bottom:30px;}
.recom_sur_boxwrap {position:relative; width:100%; box-sizing:border-box; border-radius:5px; background:#fff; overflow:hidden;}
.recom_sur_boxtit {position:relative; width:100%; height:82px; box-sizing:border-box; border-bottom:solid 2px #d1d1d1;}
.recom_sur_boxtit_1 {position:relative; width:450px; height:80px; line-height:80px; box-sizing:border-box; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:15px; color:#333; letter-spacing:-1px; text-align:center;}
.recom_sur_boxtit_2 {position:absolute; width:630px; height:80px; right:0px; top:0px; box-sizing:border-box; border-left:solid 1px #f0f0f0; background:url("../img/recom/bg_05.png") no-repeat;}
.recom_sur_box {position:relative; width:100%; box-sizing:border-box; border-bottom:solid 1px #f0f0f0; background:url("../img/recom/bg_06.png") repeat-y;}
.recom_sur_box:nth-last-child(1) {border-bottom:0px;}
.recom_sur_ques {position:relative; width:450px; box-sizing:border-box; padding:20px; text-align:left; line-height:140%; color:#666; font-size:13px;}
.recom_sur_ans {position:absolute; width:630px; right:0px; top:0px; box-sizing:border-box;}
.recom_sur_ans ul {width:630px; min-height:15px; background:url("../img/recom/bg_07.png") no-repeat;}
.recom_sur_ans ul li {position:relative; float:left; width:42px; box-sizing:border-box; text-align:center; padding-top:13px;}
.recom_sur_resbt {position:relative; width:100%; height:52px; box-sizing:border-box; border-radius:5px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:15px; font-weight:400; letter-spacing:-1px; text-align:center; cursor:pointer; padding-top:15px; color:#fff; background:#434377 url("../img/recom/bg_02.png") no-repeat 100% -46px; border:solid 3px #434377; margin-top:10px;}
.recom_sur_resbt:hover {background:#3d3d6d url("../img/recom/bg_02.png") no-repeat 100% -46px; border:solid 3px #3d3d6d;}
.recom_sur_redtit {position:relative; width:100%; height:32px; box-sizing:border-box; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:18px; font-weight:800; letter-spacing:-1px; background:url("../img/recom/bg_08.png") no-repeat 36px 1px;}
.recom_sur_redtit2 {position:relative; width:100%; height:32px; box-sizing:border-box; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:18px; font-weight:800; letter-spacing:-1px; background:url("../img/recom/bg_09.png") no-repeat 36px 1px; margin-top:30px;}

/* banner */
.recom_ban_wrap {position:fixed; width:233px; right:20px; top:60px; box-sizing:border-box; border-radius:10px; background:#fff url("../img/recom/bg_10.png") no-repeat 180px 0px; padding:30px; z-index:600;}
.recom_ban_tit {position:relative; width:100%; height:60px; font-family:NanumSquare,nanumbarungothic,"Nanum Gothic","¸¼Àº °íµñ","Malgun Gothic","µ¸¿ò",Dotum,sans-serif; font-size:17px; font-weight:800; letter-spacing:-1px; color:#333; line-height:120%;}
.recom_ban_picwrap {position:relative; width:100%; box-sizing:border-box;}
.recom_ban_picwrap ul li {position:relative; width:173px; cursor:pointer; color:#666; margin-bottom:25px;}
.recom_ban_picwrap ul li:nth-last-child(1) {margin-bottom:0px;}
.recom_ban_picwrap ul li:hover {color:#515196;}
.recom_ban_tum {position:relative; width:173px; height:109px; border-radius:10px; box-sizing:border-box;}
.recom_ban_tumpic {position:absolute; width:27px; height:32px; left:12px;; top:0px; background:url("../img/recom/pic_03.png") no-repeat;}
.recom_ban_sbj {position:relative; width:100%; font-size:13px; line-height:130%; margin-top:8px;}
.recom_ban_info {position:relative; width:100%; font-size:12px; color:#949494; line-height:130%; margin-top:3px;}


/* radio */
input[type=radio   ]:not(old){
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
  cursor: pointer;
}


input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -23px;
  line-height  : 28px;
}


input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 19px;
  height           : 19px;
  margin           : 1px;
  border           : 1px solid rgb(210,210,210);
  border-radius    : 50%;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
  cursor: pointer;
}



input[type=radio]:not(old):checked +  label > span > span{
  display          : block;
  width            : 20px;
  height           : 20px;
  margin-left      : -1px;
  margin-top       : -1px;	
  border           : 1px solid rgb(255,55,55);
  border-radius    : 50%;
  background       : rgb(255,55,55);
}























