@charset "utf-8";

/* common */
.color_accent0{color:#ffffff} /* 흰 */
.color_accent1{color:#10b7e0} /* 밝은 파랑 */
.color_accent2{color:#fffdab} /* 밝은 노랑 */
.color_accent3{color:#0074bc} /* 짙은 파랑1 */
.color_accent3{color:#394a79} /* 남색 */
.bgcolor_accent0{background-color:#10b7e0} /* 흰 */
.bgcolor_accent1{background-color:#10b7e0} /* 밝은 파랑 */
.bgcolor_accent2{background-color:#fffdab} /* 밝은 노랑 */
.bgcolor_accent3{background-color:#6d6e71} /* 그레이 */

/* header */
#cstmz_header{ margin-bottom: 100px; background: url(http://ryokan.ios.co.kr/customize/ryokan/img/cus_japan_bg.jpg) no-repeat 50% 0%; background-size: cover; }
#cstmz_header .container { position: relative; height: 660px;}
.header_titWrap { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);}
.header_titWrap .header_tit02 { display: block; margin-top: 50px; }

/* 진행순서 */
#cstmz_process { padding-bottom: 80px; width: 1020px; }
.process_tit { font-size: 32px; font-weight: 300; color: #353535; padding-bottom: 60px; }
.process_tit span { color: #9e6e28; }
.process_tit img { margin: 0 0 3px 10px; }

.process_list { margin-bottom: 50px;text-align:center; }
.process_list .process_number { font-family: 'Lato', sans-serif; font-size: 40px; line-height: 0.7; text-align: left; color: #b59260}
.process_list .process_box { position: relative; border: 1px solid #b59260; border-right: none; padding-top: 10px; }
.process_list .process_box:after { 
  content: " ";
  display: block;
  width: 1px;
  height: 25px;
  position: absolute;
  top: -22px;
  right: 9px;
  background: #b59260;
  transform: rotate(-45deg);
}
.process_list .process_box > div { background: #f6f2ec;  padding: 50px 0 30px; }
.process_list .process_box > div .process_bar { width: 40px; height: 2px; background: #a98045; margin: 15px auto; }
.process_list .process_box > div .process_txt1 { font-size: 20px; color: #353535; font-weight: 400; margin-bottom: 5px; }
.process_list .process_box > div .process_txt2 { font-size: 16px; color: #8c8c8c; }  

/* 입력 정보 */
#cstmz { width: 1020px; color:#999; font-weight: 400; } 
.paddingBorderType { padding: 50px 90px;border-left:1px solid #eee;border-right:1px solid #eee}
.paddingBorderType2 { padding: 50px 90px 10px 90px;border-left:1px solid #eee;border-right:1px solid #eee}

.cstmz_title { padding: 15px 0px; text-align:center; vertical-align: middle; color:#fff; font-weight:bold; font-size:20px; }
.cstmz_form_tit { padding: 0px 0px 20px 0px; font-size:24px; }
.cstmz_form_cnt { overflow: hidden; font-size:14px; }
.cstmz_form_cnt .cstmz_input{ float: left; width:calc(50% - 5px); padding:15px; border:1px solid #ddd; margin-bottom: 10px; }
.cstmz_form_cnt .cstmz_input:nth-child(2n) { margin-left: 5px; }
.cstmz_form_cnt .cstmz_input:nth-child(2n-1) { margin-right: 5px; }
.cstmz_form_cnt .cstmz_input:focus{color:#10b7e0;border-color:#10b7e0}

.cstmz_form_line, .city_area { overflow: hidden;}
.cstmz_form_line .tit, .city_area .tit{ float:left; width:140px; padding-top: 15px; color: #6d6e71; font-size: 14px;}
.cstmz_form_line .cnt, .city_area .cnt{ float:left; width: calc(100% - 140px); }

/* 여행 타입 */
.option_selector { overflow:hidden; }
.option_selector li { float:left; margin-right: 10px; margin-bottom: 10px; padding: 15px; border:1px solid #ddd ;background:url(http://ryokan.ios.co.kr/customize/ryokan/img/check_false.png) right 9px center no-repeat; cursor:pointer; }
.option_selector li:last-child { margin-right: 0; }
.option_selector li.active_option  {color:#10b7e0; border-color:#10b7e0; background-image:url(http://ryokan.ios.co.kr/customize/ryokan/img/check_true.png) }

.option_selector_multi { overflow:hidden; }
.option_selector_multi li { float:left; margin-right: 10px; margin-bottom: 10px; padding: 15px 30px 15px 15px; border:1px solid #ddd ;background:url(http://ryokan.ios.co.kr/customize/ryokan/img/check_false.png) right 9px center no-repeat; cursor:pointer; }
.option_selector_multi li:last-child { margin-right: 0; }
.option_selector_multi li.active_option_multi  {color:#10b7e0; border-color:#10b7e0; background-image:url(http://ryokan.ios.co.kr/customize/ryokan/img/check_true.png) }


#travel_type_selector li, #city_area_selector li { width: calc(20% - 8px);}
#departure_city_selector li { width:calc(33.3333% - 7px); }
#city_area_selector li:nth-child(5n) { margin-right: 0; }

#cdate1 { float:left; width:calc(50% - 5px); background:url(http://ryokan.ios.co.kr/customize/ryokan/img/btn_calendar.png) right center no-repeat}
#cdate2 { float:right; width:calc(50% - 5px); background:url(http://ryokan.ios.co.kr/customize/ryokan/img/btn_calendar.png) right center no-repeat}  

/* 여행인원 */
.selectors li { float:left; width:calc(33.33333% - 7px); margin-right: 10px; }
.selectors li:last-child {margin-right: 0;}
.selectors li .counter_selector_label { float:left; width:70px; font-size:13px;}
.selectors li .counter_selector { float:left; width:calc(100% - 70px);}
.selectors li .counter_selector .decrease { float:left; padding:10px; border:1px solid #ddd; background-color:#fbfaf9; cursor:pointer; }
.selectors li .counter_selector .increase { float:left; padding:10px; border:1px solid #ddd; background-color:#fbfaf9; cursor:pointer}
.selectors li .counter_selector .counter_view { float:left; padding:10px 10px; width:calc(100% - 72px); border:none; border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; }
.selectors li .counter_selector .increase:hover,
.selectors li .counter_selector .decrease:hover{color:#ffffff;background-color:#10b7e0;border-color:#10b7e0}

/* 희망 지역 */
#select_city_result { margin:20px 0px 20px 0px; border-top:1px solid #ddd; }
#select_city_result li { overflow: hidden; padding:20px; border-bottom:1px solid #ddd; }
#select_city_result li:nth-child(odd) {background-color:#fbfaf9}
#select_city_result li .area { float:left; width:120px; }
#select_city_result li .city { float:left; }
#select_city_result li .arrow { float:left; width:14px; height:14px; margin:4px 0px 0px 0px; padding: 0 20px; background:url(http://ryokan.ios.co.kr/customize/ryokan/img/arrow_right.png) 0px 0px no-repeat; }
#select_city_result li .delete { float:right; width:11px; height:11px; margin:6px 0px 0px 0px; background:url(http://ryokan.ios.co.kr/customize/ryokan/img/delete.png) 0px 0px no-repeat; cursor:pointer; }

/* 지도 */
#select_city_map { position:relative; margin:0px 0px 30px 0px; background-color:#daf0fe; }
.select_area_info,
.select_city_info { position:absolute; left:20px; top:20px; font-size:16px; }
#city_list { display:none; position:absolute; left:0px; top:0px; z-index:33; width:100%; }
#city_list img { background-color: rgba(255,255,255,0.8);}
#city_list_cover{display:none;position:absolute;left:0px;top:0px;z-index:32;width:100%;background-color:#ffffff;opacity:0.7}
#select_city_map_mb { display: none; padding: 30px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
#select_city_map_mb hr { margin-top: 10px; }
.btn_close_city_selector { position:absolute;right:0px;top:0px;z-index:35;width:50px;height:50px;text-align:center;line-height:100%;background-color:#394a79;color:#fff;font-size:41px;font-weight:100;cursor:pointer}

/* 선택 사항 */  
.cstmz_form_tit2 { margin:20px 0px 0px 0px; padding:20px; color:#6d6e71; font-weight:500; font-size:14px; }
.cstmz_form_cnt2 { overflow:hidden; padding:20px; background-color:#fbfaf9; font-size:14px; line-height: 1;}
.cstmz_form_cnt2 table { width:100% }
.cstmz_form_cnt2 table td { width:25% }
.cstmz_form_cnt2 label { font-weight: 500; }
#other_request { width:100% ;padding:20px; border:1px solid #ddd; height:200px}

/* checkspam */
.checkspam { overflow:hidden; width:325px; margin:30px auto; }
.checkspam .number { float:left; width:130px; }
.checkspam .inputNum { float:left; }
.checkspam .inputNum input { font-size:20px; padding:15px; width: 100%; }
.checkspam .inputNum span { display: block; margin-top: 5px; }

#btn_submit{display:block;margin:50px auto;padding:22px 110px;border:0px;color:#fff;font-size:30px}

@media only screen and (max-width: 1199px) {
  #cstmz_process, #cstmz { width: 970px; }
}
@media only screen and (max-width: 992px) {
  .header_titWrap .header_tit02 { width: 400px; }    
  #cstmz_process, #cstmz { width: 750px; }
  
  .paddingBorderType { padding: 30px; }
  .paddingBorderType2 { padding: 30px 30px 10px;}
  .cstmz_form_line .tit, .city_area .tit { width: 100px; }
  .cstmz_form_line .cnt, .city_area .cnt { width: calc(100% - 100px); }
  #select_city_map { display: none; }
  #select_city_map_mb { display: block; }
}
@media only screen and (max-width: 767px) {
  #cstmz_header { margin-bottom: 50px; }
  #cstmz_header .container { height: 250px; }
  .header_titWrap .header_tit01 { width: 215px; }
  .header_titWrap .header_tit02 { width: 230px; margin-top: 20px }
  
  #cstmz_process { width: 100%; padding-bottom: 30px; }
  #cstmz_process .row { margin-right: -5px; margin-left: -5px; }
  .process_tit { font-size: 27px; padding-bottom: 30px; }
  .process_list { padding: 0 5px; margin-bottom: 15px; }
  .process_list .process_number { font-size: 32px; line-height: 0.8; }
  .process_list .process_box > div { padding: 20px 0; }
  .process_list .process_box > div .process_icon { width: 50px; }
  .process_list .process_box > div .process_txt1 { font-size: 17px; }
  .process_list .process_box > div .process_txt2 { font-size: 13px; }
  
  #cstmz { width: 100%; }
  .paddingBorderType { padding: 20px 10px; }
  .paddingBorderType2 { padding: 20px 10px; }
  .cstmz_title { font-size: 17px; }
  .cstmz_form_tit { font-size: 20px; }
  .cstmz_form_cnt { font-size: 13px; }
  .cstmz_form_cnt .cstmz_input { padding: 8px; }
  .cstmz_form_line .tit, .city_area .tit { float: none; padding-bottom: 10px; padding-top:0; }
  .cstmz_form_line .cnt, .city_area .cnt { float: none; width: 100%; }
  .option_selector li { padding: 8px; }
  #travel_type_selector li { width: calc(33.33333333% - 8px);}
  #travel_type_selector li:nth-child(3) {margin-right: 0;}
  #city_area_selector li { width: calc(33.33333333% - 10px); }
  #city_area_selector li:nth-child(3) {margin-right: 0;}
  #city_area_selector li:nth-child(5) {margin-right: 10px;}
  .selectors li { width: 100%; margin-right: 0; margin-bottom: 10px;}
  .cstmz_form_tit2 { padding: 10px; margin: 10px 0 0 0 ;}
  .cstmz_form_cnt2 { padding: 10px; }
  .cstmz_form_cnt2 table td { width: 100%; display: block;}
  #select_city_map_mb { padding: 0 10px 20px; }
  
  .checkspam { width: 100%; }
  .checkspam .inputNum { width: 50%; }
  #btn_submit { width: 100%; padding: 20px 0; font-size: 20px; margin: 30px auto;}
}















.city_area .tit{width:100%;font-size:1.6rem;font-weight:bold;}
.city_area .tit:after{display:block;content:'';clear:both;}
.btn_toggle_map{float:right;}
.mb_map{display:none}