@charset "utf-8";


/********************************************************************
	Popup Style
	----------------------------------------------------------------
	Descript : 
		- 본 Style 을 적용하기 위해선, class : popup-page 을 전체 페이지에 둘러 줘야 합니다.
	----------------------------------------------------------------

*********************************************************************/
#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 101; display:none;}

.popup-page { width:80%; margin-bottom:30px; top:-200px; background:#fff; border:solid 1px #ccc; position:absolute;  box-shadow: 0px 1px 20px #333; z-index:102; display:none;}

/** Style 초기화 */
.fancybox-inner .content	{ margin: 0; }
.fancybox-inner				{ border-radius: 5px; border: 1px solid #ccc; background: #fff; }

/* popup style */
.popup-page {  _position: relative; font-family: 'Noto Sans KR', sans-serif; font-weight: 350;  }
/* .popup-page:after { content:""; display:block; height:50px; width:100%; background:url(/resource/img/common/popup/logo.png) no-repeat center #222;} */
.popup-page h3 { padding:30px 30px 30px 30px; line-height: 1.2em; font-size: 20px; font-weight:bold; background:#243b62; color:#fff;}
.popup-page h4 { margin:0.5em 0; font-size:1.3em; line-height:1.4em; color:#333}
.popup-page h4:before { content:""; display:inline-block; width:8px; height:8px; margin:0 5px 3px 0; border:4px solid #e36565; border-radius:50%; vertical-align:middle}
.popup-page h5 { margin:1em 0 0.3em; font-size:1.2em; color:#333}
.popup-page h5:before { content:""; display:inline-block; width:6px; height:6px; margin:0 4px 3px 0; border:2px solid #e36565; border-radius:50%; vertical-align:middle}
.popup-page h6 { margin:1em 0 0.3em; font-size:1em; color:#333}
.popup-page h6:before { content:""; display:inline-block; width:4px; height:4px; margin:0 4px 3px 0; border:2px solid #e36565; border-radius:50%; vertical-align:middle}

.popupCont { padding:20px; overflow:auto;overflow-scrolling:touch;-webkit-overflow-scrolling:touch; min-height:140px; max-height:650px;}
.popupCont .h4Section {margin:0 0 20px 21px;}
.popupCont .h5Section {margin:0 0 20px 15px;}
.popupCont .h6Section {margin:0 0 20px 15px;}

h3 .sTit{font-size: 14px !important; font-weight: normal !important; }

.popup-page table + table { margin-top:30px;}

.popup-page .btnArea { padding-top:20px; border-top:1px solid #ddd; }

/*** Title */
#survey_list_form		{ position: relative; }
/*
 #survey_list_form h3	{ font-size: 20px; line-height: 18px; text-align: center; padding: 20px 10px; border-bottom: 2px solid #666; }
#survey_list_form h4	{ position: relative; font-size: 14px; margin: 30px 0 10px 0; padding-left: 15px;}
#survey_list_form h4:before { content: ""; display: block; position: absolute; width: 5px; height: 5px; top: 50%; left: 0; margin-top: -2px; background: #7994c9; }
*/ 
#survey_list_form .ui-box	{ margin: 10px 0 20px 0; border: 1px solid #dadada; padding: 15px; }
#survey_list_form .ui-box.ui-scroll { height: 150px; overflow-y: auto; }

#survey_list_form input		{ max-width: 98% !important; box-sizing: border-box; }
#survey_list_form textarea	{ max-width: 98% !important; box-sizing: border-box; }
#survey_list_form .block	{ width: 100%; }

/* form */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], textarea { border:1px solid #d3d6db; border-radius:0px; vertical-align:middle; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"] { height:auto; padding:8px 5px ;}
input[type="file"] { display:inline-block; height:23px; padding:5px; border:1px solid #cccfd5; border-radius:5px; vertical-align:middle; background:#fff}
input[type="radio"], input[type="checkbox"] { margin:5px;}
input[type="radio"]:first-child, input[type="checkbox"]:first-child { margin-left:0;}
input[type="radio"] + label, input[type="checkbox"] + label { margin-right:15px;}
textarea { padding:10px;}
select { display:inline-block; height:35px; padding:5px; border:2px solid #cccfd5; border-radius:5px; vertical-align:middle;}

/*  */
.popList li { font-weight:bold; padding-bottom:5px;}
.popList li > p { margin-left:15px; font-weight:normal}

.formTb label:first-child { display:inline-block; min-width:60px; margin-right:10px; font-weight:bold;}
.formTb label:first-child:before { content:""; display:inline-block; margin:0 5px 3px 0; width:2px; height:2px; background:#666}
.formTb li { padding:3px;}

.viewList { overflow:hidden; padding-left:120px;}
.viewList:after { content:""; display:block; clear:both;}
.viewList dt, .viewList dd { padding:3px 0;}
.viewList dt { float:left; width:100px; margin-left:-120px; font-weight:bold;}
.viewList dt:before { content:""; display:inline-block; width:3px; height:3px; margin:0 4px 3px 0; background:#e36565;vertical-align:middle}

.popResult .popupCont { text-align:center;}
.popResult .popupCont > img { max-width:100%;}
.popResult .rstBox { margin-top:20px; padding:30px; border-radius:10px; background:#435188; font-size:16px; color:#fff;}

.agreeBox03 { position:relative; padding:8px 7px 10px 7px; margin:0px 0 30px 0px; background:#859ab7; text-align:center; color:#fff; vertical-align:middle; line-height:110% }
.agreeBox03:before { content:""; display:block; position:absolute; top:50%; left:0; margin-top:-3px; width:10px; height:6px; /* background:#c9c9c9; */}

.clauseBox_none { position:relative; padding:10px 10px 10px 10px;  height:170px; color:#2c4177; /* overflow-y:scroll; *//*  border:1px solid #ddd; */  box-sizing: border-box; background-color:#f0f2f8; border:2px solid #6886b9;  } 
.clauseBox_none p { margin:7px 0;}
.agreeBox_none { position:relative; padding:14px 10px 20px 10px; margin:0px 0 30px 0px; text-align:center; color:#fff; vertical-align:middle; line-height:110% }
.agreeBox_none:before { content:""; display:block; position:absolute; top:50%; left:0; margin-top:-3px; width:10px; height:6px; /* background:#c9c9c9; */}



/*** Question Item */
.quest-list > li					{ padding: 10px; border-bottom: 1px solid #eaeaea; }
.quest-list > li.odd				{ background: #fafafa; }
.quest-list > li > h5			{ line-height: 24px; }
.quest-list > li > h5 > i		{ display: block; position: relative; float: left; font-style: normal; background: #4a4f5a; color: #fff; padding: 0 5px 0 10px; margin-right: 15px; }
.quest-list > li > h5 > i:after	{ content: ""; display: block; position: absolute; top: 0px; right: -24px; border: 12px solid #4a4f5a; border-top-color: transparent; border-bottom-color: transparent; border-right-color: transparent; }
.quest-list > li > ul			{ padding: 10px 0; }
.quest-list > li > ul > li		{ line-height: 30px; }


/*** Form Table */
.table				{ width:100%; margin-top:10px; border:0; border-spacing:0; border-collapse:collapse; border-top:3px solid #61646c; border-bottom:1px solid #61646c;}
.table th,
.table td { padding:15px 10px 13px; }
.table thead th { background:url(/resource/img/common/board/line_th.gif) no-repeat 0 50% #f6f6f7; border-bottom:1px solid #61646c; }
.table thead th:first-child { background-image:none;}
.table tbody td { text-align:center; border:1px solid #d7d7d7; border-width:1px 0 0 1px;}
.table tbody tr:first-child td { border-top:none}
.table tbody td:first-child { border-left:none}
/*
.table tbody th,
.table tbody td		{ border-bottom: 1px solid #dadada; }
.table tbody th		{ background: #f9f9f9; border-right: 1px solid #dadada; }
.table tbody td		{ padding: 5px 10px; }
*/
.table fieldset.inline						{ position: relative; overflow: hidden; }
.table fieldset.inline > input[type='text']	{ padding-right: 90px; }
.table fieldset.inline > input[type='button']	{ position: absolute; top: 0; right: 0; width: 80px; background: #4a4f5a; color: #fff; border-radius: 5px; border: none; line-height: 35px; cursor: pointer; }
.table fieldset.inline > input[type='button']:hover { background: #474a52; }


/* graph */
.graph { height:14px; border:1px solid #e5e5e5; background:#fbfbfb; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); border-radius:7px}
.graphBar { display:block; height:100%; background:#e36565; border-radius:7px;
background: #787878; /* Old browsers */
background: -moz-linear-gradient(top, #787878 0%, #444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#787878), color-stop(100%,#444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #787878 0%,#444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #787878 0%,#444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #787878 0%,#444 100%); /* IE10+ */
background: linear-gradient(to bottom, #787878 0%,#444 100%); /* W3C */
}
div[class="graph"] + p { margin-top:5px; text-align:left;}


/* 본인인증 로그인 */
.loginSection .confirm { overflow:hidden; clear:both; padding:40px 30px; border-top:4px solid #e2e4e8}
.loginSection .confirmTxt { padding-right:30px;}
.loginSection .confirmTxt > li { padding-bottom:10px; font-weight:bold;}
.loginSection .confirmTxt li li { font-weight:normal}
.loginSection .confirmTxt li p { margin:7px 0;}

.confirmBlock { overflow:hidden; margin-top:20px; }
.confirmBlock h5 { color:#fff; font-size:1.3em; padding:25px 0 0 20px; margin: 0 0 0 100px;}
.confirmBlock h5:before { content:""; display:inline-block; width:3px height:3px; border:2px solid #fff; }
.confirmBlock h5:after { content:""; display:block; width:25px; height:1px; margin:13px 0; background:#fff;}
.mobileCfm, .pinCfm { float:left; position:relative; width:48%; min-height:170px; margin:0 2% 0 0; border-radius:5px; background:#6878b6}
.mobileCfm:before { float:left; content:""; display:inline-block; width:100px; min-height:170px; margin-right:20px; background:url(/resource/img/busan/sub/icon_confirm.png) no-repeat center 35px #43464d; border-radius:5px 0 0 5px;}
.confirmBlock p { padding: 0 20px; color:#fff;}
.confirmBlock .cfmBtn { position:absolute; bottom:15px; right:15px;}
.pinCfm:before { float:left; content:""; display:inline-block; width:100px; min-height:170px; margin-right:20px; background:url(/resource/img/busan/sub/icon_confirm.png) no-repeat center -133px #43464d; border-radius:5px 0 0 5px;}


/* 결제요청 */
.payment { width: 100%; border-radius: 5px; padding: 50px 30px; box-sizing: border-box; color: #fff; font-size: 24px; margin-bottom: 20px; }
.payment.pSucceed { background: url(/resource/img/common/popup/payment_succeed.png) no-repeat 95% bottom #538ebf; }
.payment.pFail { background: url(/resource/img/common/popup/payment_fail.png) no-repeat 95% bottom #666666; }
.payment .bold { font-weight: bold; }
.payment .succeed { color: #fffb86; }
.payment .fail { color: #ff9797; } 

@media all and (max-width: 1120px) {
	.popup-page { top:-100px; left:10%;}
}

@media all and (max-width: 768px) {
	.mobileCfm { margin-bottom:10px;}
	.mobileCfm, .pinCfm { float:none; width:100%;}
}

/*** 모바일일 경우 설정 */
@media all and (max-width: 640px) {
	.table.respon table,
	.table.respon tbody,
	.table.respon thead,
	.table.respon tr,
	.table.respon td,
	.table.respon th			{ display: block; }
	.table.respon tbody th	{ background: none; text-align: left; line-height: 40px; border-bottom: none; border-right: 0; }
	.table.respon tbody th:before { content: "-"; padding: 0 10px; }
	.table.respon tbody td	{ padding-bottom: 10px; border: none; }
	.table.respon tbody tr td:last-child { border-bottom: 1px solid #dadada; } 
	
	.formTb label:first-child { display:block; min-width:100%; margin:5px 0; font-weight:bold;}
	.formTb input[type="text"],
	.formTb input[type="password"],
	.formTb input[type="email"],
	.formTb input[type="number"],
	.formTb input[type="search"], 
	.formTb input[type="tel"], 
	.formTb textarea,
	.formTb select { width:100%; box-sizing:border-box;}
	
	.viewList { overflow:hidden; padding-left:0px;}
	.viewList dt { float:none; width:100%; margin-left:0; padding:0; font-weight:bold;}
	.viewList dd { padding:0 0 5px 7px;}
	
	.mobileCfm h5, .pinCfm h5 { margin:0;}
	.mobileCfm:before,
	.pinCfm:before { display:none}
	
	.popupCont {font-size:12px;}
	
}