@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;}
.oh{overflow:hidden !important;}

.w100{width:100% !important;}
.w80{width:80%}
.w75{width:75%}
.w70{width:70%}
.w60{width:60%}
.w50{width:50%}
.w45{width:45%}
.w40{width:40%}
.w35{width:35%}
.w30{width:30%}
.w25{width:25%}
.w20{width:20%}
.w15{width:15%}
.w10{width:10%}
.w5{width:5%}
.max_w_none{max-width: none !important;}
.w120{width:120px !important;}
.w150{width:150px !important;}
.w180{width:180px}

/* 폰트 관련 */
.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)} 
.fontC_b_08{color:rgba(0,0,0,.8) !important}
.fontC_b_06{color:rgba(0,0,0,.6)}
.fontC_red{color:#ea6c6f;}

.fontS_09{ font-size: .9.rem !important;}
.fontS_1{ font-size: 1rem;}
.fontS_1_05{ font-size: 1.05rem;}
.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;}

.bgColor_w{background:#fff; }
.bgColor_b06{background:rgba(0,0,0,.6) !important;}
.bgColor_red{background:#a51b1b !important;}
.bgColor_gr{background: #15893f !important;}

.mg0a{margin:0 auto !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; }

.mgl5{margin-left:5px }
.mgl10 { margin-left: 10px !important;}
.mgl15 { margin-left: 15px !important;}
.mgr0 { margin-right: 0 !important;}
.mgr5 { margin-right: 5px !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;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 i{color: rgba(255,255,255,.7);}
.btn_more a:hover{background: rgba(0,0,0,1); color: rgba(255,255,255,1);}

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

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

/* ========================  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 .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 .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; text-align: center;
}

.loginWrap .loginCont .loginInput {
    width: 100%
}

.loginWrap .loginCont .loginInput .loginBox {
	margin: 10px 0;
}

.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: 6px 0;
}

.loginWrap .loginCont .findWrap a {
    color: rgba(255,255,255,1);
    font-size: .9rem;
    position: relative;
    background: #a5a9b3;
    padding: 0 10px;
    border-radius: 3px;
    line-height: 28px;
}

.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%;
	}	

}

/* =========================== 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 .loginCopy {margin: 1rem 0 0;}
   
}

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

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