@charset "utf-8";

/* ========================== 공통 클래스 모음 =========================== */
.floL{float:left;}
.floR{float:right !important;}
.posR{position:relative;}
.posA{position:absolute;}
.t-c{text-align:center !important}
.t-r{text-align:right !important}
.t-l{text-align:left !important}
.clr{*zoom:1;}
.clr:after{ content: ""; display: block; clear:both;}
.hidden{overflow:hidden; position:absolute; top:-9999px; left:-9999px; visibility:hidden; width:0; height:0; margin:0; font-size:0; text-indent:-9999px; line-height:0; z-index:-9999;}
.text_notover{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hide{display:none;}
.bgn a{background:none !important}
.dis-Table{display: table;margin:0 auto;} 
.cursorP{cursor:pointer}
.backNone{background:none !important}
.dn{display:none !important;}
.db{display:block !important;}
.dIb{display:inline-block !important;}
.df{display:flex !important;}
.dT{display:table !important;}
.oh{overflow:hidden !important;}
.flex_align_end{display:flex !important; justify-content: end;}
.flex_align_center{display:flex !important; justify-content: center;}
.flex_align_between{display:flex !important; justify-content: space-between;}

.w100{width:100% !important;}
.w90{width:90% !important}
.w85{width:85% !important}
.w80{width:80% !important}
.w75{width:75% !important}
.w70{width:70% !important}
.w60{width:60% !important}
.w50{width:50% !important}
.w50_calc{width: calc(50% - 10px)!important;}
.w48{width:48% !important}
.w45{width:45% !important}
.w40{width:40% !important;}
.w35{width:35% !important;}
.w33{width:33.3% !important}
.w33_10{width:calc(33% - 10px) !important;}
.w30{width:30% !important}
.w25{width:25% !important}
.w20{width:20% !important}
.w15{width:15% !important}
.w10{width:10% !important}
.w5{width:5% !important}
.max_w_none{max-width: none !important;}
.w150{width:150px !important;}
.wd_100 {width: 100px !important;}
.wd_50 {width: 50px !important;}
.h100{height:100% !important;}
.min-height-auto{min-height: auto;}

/* 폰트 관련 */
.font_normal{font-family:"Pretendard Variable", Pretendard,  sans-serif !important;}
.font_mont{font-family: 'Montserrat', sans-serif;}

.light{font-weight:500;}
.medium{font-weight:600;}
.bold{font-weight:700;}

.fontC_b{color:rgba(0,0,0,1) !important;} 
.fontC_b_08{color:rgba(0,0,0,.8) !important}
.fontC_b_06{color:rgba(0,0,0,.6)}
.fontC_red{color:#c41919 !important;}
.fontC_blue{color:#213ae0 !important ;}
.fontC_w{color:rgba(255,255,255,1);}
.fontC_price{
	color: rgba(0,0,0,.5);
	font-size: 1.2rem;
	font-weight: 600;
}
.fontC_price_B{
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: rgba(0,0,0,1);
}
.fontC_pv{color: #6da133;}
.fontC_pv2{color: #148bce;}
.fontC_pv3{color: #e8421a}

.fontS_09{ font-size: .9.rem !important;}
.fontS_1{ font-size: 1rem !important;}
.fontS_1_05{ font-size: 1.05rem !important;}
.fontS_1_1{ font-size: 1.1rem;}
.fontS_1_15{ font-size: 1.15rem;}
.fontS_1_2{ font-size: 1.2rem !important;}
.fontS_1_6{ font-size: 1.6rem !important;}

.txt_line {text-decoration: line-through !important;}
.txt_verti_top{vertical-align: top;}
.txt_verti_bottom{vertical-align: bottom;}
.line40{line-height:40px !important;}
.line36{line-height:36px !important;}
.line25{line-height:25px !important;}
.border0{border:0 !important;}

.txt_line_clamp{
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	 overflow: hidden;
}

.bgColor_w{background:#fff !important; }
.bgColor_b{background:rgba(0,0,0,1) !important;}
.bgColor_b03{background:rgba(0,0,0,.3) !important;}
.bgColor_b06{background:rgba(0,0,0,.6) !important;}
.bgColor_b08{background:rgba(0,0,0,.8) !important;}
.bgColor_red{background:#a51b1b !important;}
.bgColor_blue{background:#324be6}
.bgColor_blue2{background:#1c2ea3;}
.bgColor_gr{background:#15893f;}
.bgColor_gr2{background: #f2f2f2;}

.mg0a{margin:0 auto !important;}
.mgt0{margin-top:0 !important; }
.mgt5{margin-top:5px; }
.mgt10{margin-top:10px; }
.mgt15{margin-top:15px; }
.mgt20{margin-top:20px !important; }
.mgt30{margin-top:30px !important;}
.mgt40{margin-top:40px !important; }
.mgt50{margin-top:50px !important; }

.mgb5{margin-bottom:5px !important; }
.mgb10{margin-bottom:10px !important; }
.mgb20{margin-bottom:20px !important; }
.mgb30{margin-bottom:30px !important; }
.mgb50{margin-bottom:50px !important; }

.mgl5{margin-left:5px }
.mgl10 { margin-left: 10px !important;}
.mgl15 { margin-left: 15px !important;}
.mgr0 { margin-right: 0 !important;}
.mgr5 { margin-right: 5px !important;}
.mgr10 { margin-right: 10px !important;}
.mgr80 { margin-right: 80px !important;}

.pd0{padding:0px !important;}
.pd10{padding:10px;}
.pd20{padding:20px;}
.pdr0{padding-right:0 !important;}

/* btn */
.btn_more{display: flex;justify-content: center;}
.btn_more a{display: inline-block; min-width: 120px; background: rgba(0,0,0,.85);color: rgba(255,255,255,.7);padding: 12px 30px;border-radius: 5px;margin: 0 5px;transition-duration:0.3s;    text-align: center;}
.btn_more a:hover{background: rgba(0,0,0,1); color: rgba(255,255,255,1);}

.btn_more#nbMemPop a{padding: 10px 15px; min-width: auto;}

.btn_more.pd10 a{padding: 12px 10px;}

.btn_no{}

.txt_line1{
	display: -webkit-box;   
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1
}

.img130_b_eee{width:130px; height:130px; border:1px solid #eee}

/* ========================  animation ============================= */
.fromTopIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromTopOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,-10px);opacity: 0.0;}
.fromBottomIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromBottomOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,10px);opacity: 0.0;}
.fromLeftIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromLeftOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(-10px,0);opacity: 0.0;}
.fromRightIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(0,0);opacity: 1.0;}
.fromRightOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: translate(10px, 0);opacity: 0.0;}
.scaleUpIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleUpOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.3,1.3);opacity: 0.0;}
.scaleDownIn{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(1.0,1.0);opacity: 1.0;}
.scaleDownOut{transition: transform 1.0s ease, opacity 1.0s ease;transform: scale(0.7,0.7);opacity: 0.0;}

/* =========================== login ============================= */

.loginWrap {
    width: 100%;
    height: 100%;
	background: url('../images/common/loginBg.png') no-repeat -600px 0;
}
.loginWrap.admin{background: url('../images/common/loginBg2.png') no-repeat -720px 0;}

.loginWrap .loginInner {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    box-sizing: border-box;
    color: #fff;
    background: rgba(255,255,255,1);
    overflow-x: hidden;
	border-radius:0 0 0 100px;
}

.loginWrap .loginInner:before {
	display: block; 
	width: 100px;
	height:100px;
	content: url('../images/common/bg_top.png');
}

.loginWrap .loginInner .txtBg{
	display: block;
    position: absolute;
    top: 95px;
    left: -70px;
    font-size: 5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: rgba(0, 0, 0, .1);
    transform: rotate(-90deg);
    line-height: 1;
}

.loginWrap .loginCont {
    position: absolute;
    top: 50%;
    left: 32.5%;
    width: 35%;
    box-sizing: border-box;
    color: #fff;
    overflow-x: hidden;
    transform: translate(0, -50%);
}

.loginWrap .loginCont .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 50px
}

.loginWrap .loginCont .logo a {display: block}

.loginWrap .loginCont .loginInput {width: 100%}
.loginWrap .loginCont .loginInput .loginBox {margin: 10px 0 20px;}
.loginWrap .loginCont .loginInput .loginBox input {
	width: 100%;
	color: rgba(0, 0, 0, .5);
    padding: 17px 10px;    
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    box-sizing: border-box;
}

.loginWrap .loginCont .loginInput .loginBox input+input {margin-top: 12px}
.loginWrap .loginCont .loginInput .loginBox input::-webkit-input-placeholder {color: rgba(0,0,0,.5); font-size: 1rem}
.loginWrap .loginCont .loginInput .AutoLoginBox input {
    cursor: pointer;
    width:16px;
	height: 16px;
    border:1px solid rgba(0,0,0,.2)
}

.loginWrap .loginCont .loginInput .AutoLoginBox input[type=checkbox]+label span {
    line-height: 16px;
    color: rgba(0,0,0,.5);
    font-size: 1rem;
	padding-left: 5px;
}

.loginWrap .loginCont .loginInput .loginBtn {
    display: block;
	width: 100%;
    border-radius: 3px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;    
    text-align: center;
    line-height: 50px;    
    color: #fff;
    font-size: 1rem;
    margin-top: 2.5rem;
    background-size: 300% 100%;
    transition: all .4s ease-in-out;
    background-image: linear-gradient(to right, #29529c, #1d3d8e);
}

.loginWrap .loginCont .loginInput .loginBtn:hover {opacity:0.8;}
.loginWrap .loginCont .loginInput .loginBtn:focus {outline: none}

.loginWrap .loginCont .loginInput p{
	font-size: 1em;
    color: rgba(0, 0, 0, .5);
    text-align: center;
    line-height: 1.5;
}

.loginWrap .loginCont .findWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 1.25rem 0 3.125rem
}

.loginWrap .loginCont .findWrap a {
    color: rgba(0,0,0,.5);
    font-size: 1rem;
	position: relative;
}

.loginWrap .loginCont .findWrap a:nth-child(2), 
.loginWrap .loginCont .findWrap a:nth-child(3) {padding-left: 10px; margin-left: 10px}

.loginWrap .loginCont .findWrap a:nth-child(2):after, 
.loginWrap .loginCont .findWrap a:nth-child(3):after {
    display: block;
    content: "";
    position: absolute;
    top: 20%;
    left: 0;
    width: 1px;
    height: 60%;
    background-color: rgba(0, 0, 0, .5);
}

.loginWrap .loginCont .loginCopy {
    color: rgba(0,0,0,.5);
    font-size: 0.9rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
    line-height: 22px;
    margin: 1.25rem auto;
	text-align: center
}

/* =========================== media-1080 ============================= */

@media screen and (max-width: 1080px) {
    .loginWrap {
		background: url('../images/common/loginBg.png') no-repeat 0 0;
		background-size: cover
	}

	.loginWrap .loginInner {
        top: 10%;
        left: 15%;
        background: rgba(255, 255, 255, .8);
        width: 70%;
        height: 80%;
		border-radius: 60px;
    }

	.loginWrap .loginInner:before {display:none;}

	.loginWrap .loginInner .loginCont {
		width: 70%;
        left: 15%;
        padding: 10%;
	}

	.loginWrap .loginCont .findWrap a {color: rgba(0, 0, 0, .7);}	

}

/* =========================== media-780 ============================= */

@media screen and (max-width: 780px) {
	.loginWrap .loginInner {
        left: 10%;
        width: 80%;
        border-radius: 30px;
    }

	.loginWrap .loginInner .loginCont {
		width: 90%;
        left: 5%;
        padding: 0 10px;
	}

	.loginWrap .loginCont .logo {margin-bottom: 30px;}
	.loginWrap .loginCont .logo a {width: 115px;}
	.loginWrap .loginCont .logo a img{width: 100%;}
	.loginWrap .loginCont .loginInput .loginBtn {margin-top: 1.7rem;}
	.loginWrap .loginCont .findWrap {flex-wrap: wrap;margin: 1.25rem 0 2rem;}
	.loginWrap .loginCont .loginCopy {margin: 1rem 0 0;}
   
}

/* =========================== media-540 ============================= */

@media screen and (max-width: 540px) {
   
}