﻿/******************************************************
*
* 공통 CSS
*
******************************************************/
* {margin:0; padding:0; border:0; font-size:16px; box-sizing:border-box; font-family: 'Noto Sans KR', sans-serif; -webkit-overflow-scrolling:touch;

}

address, caption, cite, code, dfn, em, strong, th, var {font-style :normal; font-weight:normal}
table {border-collapse:collapse;}
a { text-decoration:none; color:inherit;}
img {vertical-align:middle; border:0;}
ul, li, ol { list-style:none;}
html,body { width:100%; height:100%;}

input {
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
	border:0; border-radius:0; box-shadow: 0;
}
input[type="checkbox"] { 
	-webkit-appearance:checkbox;
       -moz-appearance:checkbox;
		-ms-appearance:checkbox;
         -o-appearance:checkbox;
            appearance:checkbox; 
		width:14px; height:14px;
}
input[type="checkbox"] + label  {
	background:url("../img/common/chk_off.png")no-repeat left top 1px;
	background-size:15px;
	padding-left:25px;
}
input[type="checkbox"]:checked + label {
	background:url("../img/common/chk_on.png")no-repeat left top 1px;
	background-size:15px;
	padding-left:25px;
}

input[type="radio"] {
	 -webkit-appearance:radio;
        -moz-appearance:radio;
		 -ms-appearance:radio;
		  -o-appearance:radio;
		  	 appearance:radio;
	width:14px; height:14px; display: none;
}

select {
	-webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
   border:0; border-radius:0; box-shadow: 0; 
}

/**** 공통 CSS END ****/



/************************************************************
*
* login CSS
*
************************************************************/
.log_wrap {width:100%; height:100%; position:relative;}

.loginForm {width:300px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center;}
.loginForm img.logo {width:300px;}

.loginForm .logInput {width:100%; margin-top:30px;}
.loginForm .logInput input {width:100%; margin-top:12px; height:50px; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px; border-radius:100px; padding-left:25px;}
.loginForm .logInput input::placeholder {font-size:18px; color:#999;}
.loginForm input.logBtn {width:100%; margin-top:12px; height:60px; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px; border-radius:100px; font-size:24px; background-color:#ff9600; color:#fff;}


.findBtn {margin-top:25px; color:#fff; font-size:18px;}

.login {width:100%; height:100%; position:relative;}

.log_tit {width:100%; position:relative; padding:15px 0px; border-bottom:1px solid #d7d7d7;}
.log_tit p {text-align: center; font-size:22px; color:#333; font-weight:400;}
.log_tit img {position:absolute; top:50%; left:20px; transform: translateY(-50%); width:8px;}

.loginBox {width:80%; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
.loginBox img.logo {width:196px; display: block; margin: 0 auto; margin-right: 69px; margin-bottom:30px;}
.loginBox .logInput {width:100%;}
.loginBox .logInput input {width:100%; height:50px; border:1px solid #d7d7d7; padding:0px 10px; font-size:18px; color:#333; font-weight:400; letter-spacing:-0.025em; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; padding-left:40px; transition:0.3s; font-weight:300;}
.loginBox .logInput input::placeholder {color:#aaa; font-size:18px;}
.loginBox .logInput input:focus {outline:none; border:1px solid #246891; transition:0.3s;}

.loginBox .logInput input[type=text] {margin-bottom:10px; background:url("../img/member/id_icon.png")no-repeat left 15px center; background-size:13px;}
.loginBox .logInput input[type=password] {background:url("../img/member/pass_icon.png")no-repeat left 15px center; background-size:12px;}
.loginBox input[type=submit] {width:100%; height:52px; margin-top:25px; background-color:#246891; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px; border-radius:100px; font-size:22px; color:#fff; font-weight:300;}
.loginBox input[type=button] {width:100%; height:52px; margin-top:25px; background-color:#246891; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px; border-radius:100px; font-size:22px; color:#fff; font-weight:300;}


.logBtnBox {width:100%; text-align: center; padding-top:15px;}
.logBtnBox p {font-size:16px; color:#666; font-weight:400; display: inline-block; vertical-align: middle; font-weight:300;}
.logBtnBox span {font-size:12px; color:#666; font-weight:400; display: inline-block; vertical-align: middle; margin:0px 3px; font-weight:100; margin-top:2.5px;}


/**** 테블릿 css ****/
@media all and (min-width:760px) and (max-width:1024px) {
.loginBox img.logo {width:210px; display: block; margin: 0 auto; margin-bottom:30px;}
}


.copyTxt {position: absolute; bottom:20px; font-size:13px; text-align: center; color:#999; word-break: keep-all; width:100%; text-align: center; left:0; letter-spacing:-0.055em; font-weight:300;}


.findPop {width:100%; height:100%; position:fixed; top:0; left:0;  z-index:999; display:none;}

.findPop .findPosition {width:100%; height:100%; position:relative;}

.findPop .findPosition .findPopBg {width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.6);}

.findPop .findPosition .findPopCon {width:90%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color:#fff; padding:30px 20px; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; border-radius:6px; display:none;}

.findPop .findPosition .findPopCon .fp_tit {width:100%; padding-bottom:12px; border-bottom:1px solid #333; position:relative; margin-bottom:20px;}
.findPop .findPosition .findPopCon .fp_tit p { font-size:20px; font-weight:600; color:#000; font-weight:500;}
.findPop .findPosition .findPopCon .fp_tit img.fpClose { width:18px; position:absolute; right:0; top:7px;}

.findPop .findPosition .findPopCon table {width:90%; max-width:340px; border:1px solid #d7d7d7; margin: auto;}
.findPop .findPosition .findPopCon table tr td {padding:12px 0px;}
.findPop .findPosition .findPopCon table tr:last-child td { border-top:1px solid #d7d7d7;}
.findPop .findPosition .findPopCon table tr td:first-child {width:70px; padding-left:10px; font-size:16px; color:#000; font-weight:600;}
.findPop .findPosition .findPopCon table tr td:last-child {padding-right:10px;}
.findPop .findPosition .findPopCon table tr td input {width:100%; height:40px; border:1px solid #d7d7d7; padding-left:10px; font-size:16px; color:#666;}


.findPop .findPosition .findPopCon .fp_input {width:100%; margin-bottom:12px;}
.findPop .findPosition .findPopCon .fp_input input {width:100%; height:46px; border:1px solid #dfdfdf; padding:0px 10px; font-size:17px; color:#333; font-weight:400; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; transition:0.3s;  font-weight:300;}
.findPop .findPosition .findPopCon .fp_input input::placeholder {color:#aaa;}
.findPop .findPosition .findPopCon .fp_input input:focus {outline: none; border:1px solid #246891; transition:0.3s;}
.findPop .findPosition .findPopCon .fp_input ul {width:100%; overflow: hidden;}
.findPop .findPosition .findPopCon .fp_input ul li {width:46%; float:left;}
.findPop .findPosition .findPopCon .fp_input ul li:nth-child(2) {width:8%; text-align: center; padding-top:7px; font-size:18px; color:#404040; font-weight:300;}

.findPop .findPosition .findPopCon input[type=button] {width:100%; height:50px; margin-top:10px; background-color:#246891; font-size:18px; color:#fff; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px;  font-weight:300;}


.fPopBtn {width:90%; max-width:340px; margin: auto; margin-top:10px; }
.fPopBtn div {width:100%; height:45px; color:#fff; font-size:22px; line-height:45px;}
.fPopBtn div.findOk {background-color:#2e3094; margin-bottom:10px;}
.fPopBtn div.findclose {background-color:#d5d5d5;}
/* login CSS END */











/************************************************************
*
* include top CSS
*
************************************************************/

.mb_wrap {width:100%; height:100%; position:relative;}


.topBtnBox {position: fixed; top:0; left:50%; transform: translateX(-50%); width:75px; background-color:#616161; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; text-align: center; z-index: 997; padding-bottom:5px; padding-top:3px; border:1px solid #DADADB; border-top:0; display: none;}
.topBtnBox p {display: inline-block; vertical-align: middle; font-size:13px; color:#fff;}
.topBtnBox img {display: inline-block; vertical-align: middle; width:12; margin-left:2px;}

#gnb_box { position:fixed; z-index:999; background-color:#fff; width:92%; height:100%; top:0; left: -110%;  overflow-y:scroll;}


div.gnb_top {color:#FFF; position:relative; padding:20px; overflow: hidden; border-bottom:2px solid #2F3187; }
div.gnb_top img.gnbBLogo{height:26px; float:left;}
div.gnb_top img.closeBtn {width:18px; margin:4px 0px; float:right;}

.lg_log_form {width:100%; padding:30px 20px; border-bottom:1px solid #ccc; background-color:#f9f9f9;}
.lg_log_form .lg_input {width:100%;}
.lg_log_form .lg_input input {width:100%; height:44px; border:1px solid #d7d7d7; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; padding:0px 12px; font-size:17px; color:#333; font-weight:300;}
.lg_log_form .lg_input input::placeholder {font-size:17px; color:#aaa;}
.lg_log_form .lg_input input:focus {outline:none; border:1px solid #3C5462;}
.lg_log_form .lg_input input[type=text] {margin-bottom:10px;}

.lg_log_form .lg_log_btn {width:100%; padding-top:15px;}
.lg_log_form .lg_log_btn div {width:100%; height:46px; display:flex; justify-content: center; align-items: center; text-align: center; font-size:18px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px; font-weight:300; background-color:#3C5462; color:#fff;}


.log_info_box {width:100%; padding:30px 20px; background-color:#f9f9f9; border-bottom:1px solid #ccc;}

.log_info_box .log_info_img {width:70px; height:70px; margin: auto;  background:url("../img/member/log_img.png")no-repeat; background-size:70px; margin-bottom:20px;}

.log_info_box p {font-size:18px; color:#404040; font-weight:400; text-align: center; line-height:26px;}
.log_info_box p span {font-size:18px; color:#000; font-weight:600;}

.log_info_box .lg_log_btn2 {width:250px; margin: auto; overflow: hidden; padding-top:20px;}
.log_info_box .lg_log_btn2 div {width:120px; height:40px; display:flex; justify-content: center; align-items: center; text-align: center; font-size:18px; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px; border-radius:100px; border:1px solid #ccc; color:#666; background-color:#fff; font-weight:300;}
.log_info_box .lg_log_btn2 a:first-child div {float:left;}
.log_info_box .lg_log_btn2 a:last-child div { float:right;}


#gnb_ul {width:100%; padding-bottom:30px;}
#gnb_ul li {width:100%; }
#gnb_ul li .gnblistBox {width:100%; position:relative; border-bottom:1px solid #ccc;}
#gnb_ul li .gnblistBox .gnblist {width:100%; padding:22px 20px; overflow: hidden; display: flex; align-items: center; font-size:18px; color:#333; font-weight:400;}


#gnb_ul li .gnblistBox .arrow {width:50px; height:46px; position: relative; position:absolute; right:0; top:50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; text-align: center;}
#gnb_ul li .gnblistBox .arrow img {width:13px; transition:all 0.3s;}
#gnb_ul li .gnblistBox .arrow.arOn img {transform:rotate(180deg); transition:all 0.3s;}


ul.sGnb {width:100%; background-color:#F8F8F8; padding:10px 25px; border-bottom:1px solid #e3e3e3; display: none;}
ul.sGnb li {width:100%;}
ul.sGnb li div {width:100%; padding:12px 0px;}

ul.sGnb li div p {color:#5c5c5c; font-size:17px; font-weight:300;}


/*


ul.gnbListUl {width:100%;}
ul.gnbListUl li {border-bottom:1px solid #d7d7d7;}
ul.gnbListUl li a div {width:100%; padding:22px 20px; overflow: hidden;}
ul.gnbListUl li a div p:first-child {float:left; font-size:20px; color:#333;}
ul.gnbListUl li a div p:last-child {float:right; font-size:16px; color:#333; margin-top:1px;}
*/
#mnav_bg {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.7); z-index:998; display: none;}



#header {width:100%; z-index:99; background-color:#EFEFEF;}
.headerTop {width:100%; background:url("../img/common/top_bg.jpg")no-repeat top center; background-size:100%;}
.headerTop .topBg {width:100%; padding-top:30px; padding-left:10px;}
.headerTop .topBg img {width:100%;}

.headerTop .headerIcon {width:100%; overflow: hidden; padding:16px 20px; text-align: center; position:relative;}
.headerTop .headerIcon img.topMenu {float:left; height:22px; margin:7px 0px;}
.headerTop .headerIcon img.topLogo {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:36px;}
.headerTop .headerIcon img.topLogo2 {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:36px;}
.headerTop .headerIcon img.logIcon {float:right; height:16px; margin:2px 0px; margin-right: 8px;}


.gnb {width:100%; padding:30px 20px; }

.gnb ul {width:100%; overflow: hidden; background-color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:5px; box-shadow:0px 5px 10px rgba(0,0,0,0.2); }

.gnb ul li {width:33.33%; border-right:1px solid #d7d7d7; float:left; padding:18px 0px;}
.gnb ul a:last-child li {border-right:0!important;}

.gnb ul li div {border-radius:100%; width:80px; height:80px; margin:0 auto; margin-bottom:10px;}
.gnb ul a:nth-child(1) li div {background:url("../img/common/gnbIcon01.png")no-repeat center left 20px; background-color:#aaa; background-size:50px;}
.gnb ul a:nth-child(2) li div {background:url("../img/common/gnbIcon02.png")no-repeat center left 20px; background-color:#aaa; background-size:45px;}
.gnb ul a:nth-child(3) li div {background:url("../img/common/gnbIcon03.png")no-repeat center left 24px; background-color:#aaa; background-size:45px;}

.gnb ul li p {font-size:16px; text-align: center; color:#aaa; font-weight:600;}

.gnb ul a:nth-child(1) li.gnbOn div {background-color:#FF9600;}
.gnb ul a:nth-child(2) li.gnbOn div {background-color:#32A8FF;}
.gnb ul a:nth-child(3) li.gnbOn div {background-color:#A1E222;}

.gnb ul a:nth-child(1) li.gnbOn p {color:#FF9600;}
.gnb ul a:nth-child(2) li.gnbOn p {color:#32A8FF;}
.gnb ul a:nth-child(3) li.gnbOn p {color:#A1E222;}


.visual {width:100%;}
.visual img {width:100%;}

ul.mGnb {width:100%; overflow: hidden; position:relative; margin-top:-40px; padding:0px 20px; padding-bottom:30px;}
ul.mGnb li {width:48.5%; float:left; text-align: center; margin-right:3%; margin-bottom:3%; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; box-shadow:0px 2px 5px rgba(0,0,0,0.18); overflow: hidden;}
ul.mGnb li:nth-child(2n) {margin-right:0;}
ul.mGnb li:nth-child(n+3) {margin-bottom:0;}
ul.mGnb li img {width:100%;}
/**** include top END ****/



/************************************************************
*
* section CSS
*
************************************************************/
.c_wrap {width:100%; position: absolute; top:0; left:0; z-index:99;}

.m_content { width:100%; background-color:#EFEFEF; padding:0px 20px; padding-bottom:30px;}

.mNotice {width:100%; background-color:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; box-shadow:0px 2px 5px rgba(0,0,0,0.18); }

.mNotice .mnTit {width:100%; overflow: hidden; padding:12px 15px;}
.mNotice .mnTit p {font-size:20px; font-weight:600; float:left; color:#0067d0;  font-weight:400;}
.mNotice .mnTit img {width:16px; float:right; margin-top:7px;}

.mNotice .mnList {width:100%;}
.mNotice .mnList .mnListBox {width:100%; border-top:1px solid #e3e3e3; padding:12px 15px; overflow: hidden;}
.mNotice .mnList .mnListBox p.mnTxt01 {font-size:18px; color:#3f3f3f; max-width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; float:left;}
.mNotice .mnList .mnListBox p.mnTxt02 {font-size:14px; color:#999; width:100%; padding-top:2px; float:left; clear: both; font-weight:300;}
.mNotice .mnList .mnListBox img {width:16px; float:left; margin-left:5px; margin-top:6px;}

/**** section END ****/


.agreeWrap {width:100%;}
.agree_tit {width:100%; position:relative; padding:15px 0px; border-bottom:1px solid #d7d7d7;}
.agree_tit p {text-align: center; font-size:22px; color:#333; font-weight:400;}
.agree_tit img {position:absolute; top:50%; left:20px; transform: translateY(-50%); width:8px;}


.agreement {width:100%; padding:20px;}
.agreement .agreeAllChk {width:100%; position:relative; padding-right:50px; padding:10px 15px; background-color:#EDF7FD; border:1px solid #e0e0e0;}
.agreement .agreeAllChk label {cursor: pointer; font-size:16px; color:#404040; }
.agreement .agreeAllChk input[type=checkbox] {
	display:none;
}
.agreement .agreeAllChk input[type=checkbox]:checked + label {
	padding:0 0 0 25px;
	background:url("../img/common/chk_on.jpg")no-repeat left top 5px;
	background-size:16px;
}
.agreement .agreeAllChk input[type=checkbox] + label {
	padding:0 0 0 25px;
	background:url("../img/common/chk_off.jpg")no-repeat left top 5px;
	background-size:16px;
}

.agreeCont {width:100%; padding-top:15px;}
.agreeCont .agreeChk {width:100%; position:relative; padding-right:50px; padding:10px 15px; background-color:#EDF7FD; border:1px solid #e0e0e0;}
.agreeCont .agreeChk label {cursor: pointer; font-size:16px; color:#404040; }
.agreeCont .agreeChk input[type=checkbox] {
	display:none;
}
.agreeCont .agreeChk input[type=checkbox]:checked + label {
	padding:0 0 0 25px;
	background:url("../img/common/chk_on.jpg")no-repeat left top 5px;
	background-size:16px;
}
.agreeCont .agreeChk input[type=checkbox] + label {
	padding:0 0 0 25px;
	background:url("../img/common/chk_off.jpg")no-repeat left top 5px;
	background-size:16px;
}
.agreeCont div.agreeChk .aDetail {position: absolute; top:50%; right:15px; transform: translateY(-50%);}
.agreeCont div.agreeChk .aDetail p {display: inline-block; vertical-align: middle; margin-right:5px; color:#333; font-size:13px;}
.agreeCont div.agreeChk .aDetail img {width:11px; display: inline-block; vertical-align: middle; transition:all 0.3s;}
.agreeCont div.agreeChk .aDetail img.detailOn {transform: rotate(180deg); transition:all 0.3s;}

.agreeContBox {width:100%; height:250px; border:1px solid #e0e0e0; border-top:0; padding:15px; display: none; overflow-y: scroll!important;}
.agreeContBox pre {font-size:15px; color:#333; font-weight:300; letter-spacing:-0.055em; text-align: left; word-break: keep-all; overflow: hidden; white-space: pre-wrap;}


.agreementBtnBox {width:150px; margin: auto; padding-top:30px;}
.agreementBtnBox div {width:100%; height:40px; display: flex; justify-content: center; align-items: center; text-align: center; font-size:18px; font-weight:300; color:#fff; background-color:#1B9FED; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border-radius:4px;}



/*** 필수약관동의 ***/
.agreeBox {overflow: hidden; width: 100%; border: solid 1px #d9d9d9; border-radius: 3px;}
.agreeBox p{font-size: 14px!important; border-bottom: solid 1px #d9d9d9; padding: 11px 8px;}
.agreeBox .agreeSb {padding: 12px; font-size: 12px;}
.agreeBox .agreeSb div {width: 100%; font-size: 12px!important; padding: 9px 0px;}
.agreeBox .agreeSb div span{float: right; font-size: 12px; border: solid 1px #d9d9d9; padding: 2px 6px; border-radius: 3px; margin-bottom: 3px;  margin-top: -3px;}
.aw_modify_btn {width: 47%!important; margin: 0 auto!important; text-align: center!important; padding: 0px 20px 20px 20px!important;}
.aw_modify_btn input {width: 100%!important; margin: 0 auto!important; text-align: center!important; height: 38px!important; background-color: #008adb!important; font-size: 16px!important;}



/************************************************************
*
* footer CSS
*
************************************************************/
.footer {width:100%; background-color:#fff; text-align: center; padding:0px 5px; padding-bottom:30px; border-top:1px solid #e3e3e3;}
.footer img.btLogo {width:180px; padding:25px 0px;}

.footer p {font-size:13px; color:#464646; line-height:23px; padding-bottom:15px; font-weight:300;}
.footer strong {font-size:12px; color:#969595; font-weight:300;}
/**** footer END ****/
