@charset "utf-8";

/* reset */
.counsel{font-smooth:always;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;zoom:1.0}
.counsel div, .counsel aside, .counsel span, .counsel label, .counsel ul, .counsel li, .counsel h3, .counsel fieldset, .counsel p, .counsel input, .counsel button{margin:0;padding:0}
.counsel input, .counsel button{vertical-align:middle}
.counsel button{border:0 none;background-color:transparent;cursor:pointer}
.counsel fieldset, .counsel img{border:0;vertical-align:top;}
.counsel ul, .counsel li{list-style:none}
.counsel button, .counsel input{font-size:13px;color:#222;line-height:1.5;letter-spacing:-0.05em;font-family:'Lato','Noto Sans CJK KR','Noto Sans KR',Malgun Gothic,"맑은 고딕",AppleGothic,'Nanum Gothic',Dotum,"돋움",sans-serif}
.counsel a{color:#222;text-decoration:none}
.counsel a:active, .counsel a:hover{text-decoration:none}
.counsel a, .counsel a:hover, .counsel button, .counsel button:hover{cursor:pointer;-webkit-transition:all 0.1s linear;-moz-transition:all 0.1s linear;-ms-transition:all 0.1s linear;-o-transition:all 0.1s linear;transition:all 0.1s linear}
.counsel .ff_Nanum{font-family:'Roboto','Lato','Nanum Gothic','Noto Sans KR',Malgun Gothic,"맑은 고딕",AppleGothic,Dotum,"돋움",sans-serif}

/* 하단 가입상담신청 */
#sticky-cs{position:fixed;bottom:0;left:0;right:0;background-color:#e4007f;background-image:linear-gradient(-135deg,#e5247f 0%,#e4007f 100%);background-image:-webkit-linear-gradient(-135deg,#e5247f 0%,#e4007f 100%);z-index:9999}
#sticky-cs .fix-width{position:relative;margin:auto;padding:20px 0;width:1200px}
#sticky-cs .fix-width fieldsetl:after{display:block;clear:both;content:""}
.cs-input .tit{display:inline-block;position:relative;margin:0 50px 0 30px;padding:0 50px 0 75px;color:#fff;vertical-align:middle}
.cs-input .tit:before{content:'';position:absolute;top:0;bottom:0;right:0;width:1px;height:100%;background:#fff;filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25}
.cs-input .tit .icon{display:inline-block;position:absolute;top:50%;left:0;margin-top:-28px;width:56px;height:56px;border:1px solid #eee;border-radius:50%;background:url("../img/icon_call.png") no-repeat #fff 50% 50%;-webkit-background-size:53px 53px;background-size:53px 53px;box-shadow:0 2px 4px 0 rgba(0,0,0,.1)}
.cs-input .tit .icon:before{content:'';position:absolute;top:0;left:0;width:53px;height:53px;border-radius:50%;background:#fff;animation:tel-circle 2.5s infinite forwards;z-index:-1}
@keyframes tel-circle{0%{opacity:0;transform:scale(0)} 50%{opacity:0.5}	100%{opacity:0;transform:scale(1.41)}}
.cs-input .tit h3{margin:0 5px 2px 2px;font-size:14px;font-weight:500;text-align:right}
.cs-input .tit p{font-size:30px;font-weight:700;letter-spacing:0;line-height:1.1;color:#ffff00}
.cs-input .input-area{display:inline-block;vertical-align:middle}
.cs-input input[type=text]{margin-right:4px;padding:8px 12px;width:180px;height:40px;font-size:16px;line-height:20px;color:#222;border:2px solid #fff;border-radius:5px;background:#fff}
.cs-input input[type=text]#custom_tel{width:200px;margin-right:10px}
.cs-input .btn{display:inline-block;padding:0 40px;height:40px;font-size:16px;font-weight:500;color:#fff;border:1px solid #1d1f20;border-radius:5px;background:#1d1f20}
.cs-input .btn:hover{color:#1d1f20;border:1px solid #ffff00;background:#ffff00}
.cs-input .checksWrap{display:inline-block;position:relative;margin-left:50px;vertical-align:middle}
.cs-input .checksWrap .checks{position:relative;height:20px}
.cs-input .checksWrap input[type="checkbox"]{position:absolute;top:0;left:0;margin:0;padding:0;width:16px;height:16px;-webkit-appearance:none;opacity:0;filter:alpha(opacity=0);-moz-opacity:0;z-index:-1}
.cs-input .checksWrap label{display:inline-block;position:relative;overflow:hidden;color:#fff;z-index:100;cursor:pointer}
.cs-input .checksWrap label:before{content:'';display:inline-block;margin-right:4px;width:19px;height:19px;border-radius:50%;border:2px solid rgba(255,255,255,0.4);-webkit-transition:all 0.1s linear;transition:all 0.1s linear}
.cs-input .checksWrap label:hover:before{background:url("../img/icon_ck.png") no-repeat;-webkit-background-size:15px 15px;background-size:15px 15px}
.cs-input .checksWrap label.on:before, .cs-input .checksWrap label.on:focus:before, .cs-input .checksWrap label.on:hover:before{background:url("../img/icon_ck_on.png") no-repeat;border:2px solid rgba(255,255,255,0.9);-webkit-background-size:15px 15px;background-size:15px 15px}
.cs-input .checksWrap label span{display:inline-block;position:relative;top:-4.5px;font-size:13px;line-height:21px;opacity:0.8;filter:alpha(opacity=8);-moz-opacity:0.8}
.cs-input .checksWrap .btn_agree{display:inline-block;position:relative;top:-4.5px;margin:0 0 0 6px;padding:0 4px;font-size:12px;line-height:18px;color:#fff;border:1px solid rgba(255,255,255,0.4)}

/* 하단 가입상담신청 - 개인정보 수집·이용 동의 레이어 */
.checksWrap .agree_layer{position:absolute;bottom:100%;right:0;margin-bottom:30px;background:#fff;border:1px solid #e7e7e7;border-radius:4px;box-shadow:0 2px 8px 0 rgba(45,45,46,0.1);-webkit-animation-duration:0.5s;animation-duration:0.5s;display:none}
.checksWrap .agree_layer_inner{padding:20px;width:400px;font-size:13px;color:#777;word-break:keep-all;letter-spacing:-0.025em}
.checksWrap .agree_layer h3{font-weight:400;font-size:16px;color:#222;margin-bottom:6px}
.checksWrap .agree_layer p{color:#555;margin-bottom:6px}
.checksWrap .agree_layer li{position:relative;margin-top:2px;padding-left:20px}
.checksWrap .agree_layer li .num{display:inline-block;position:absolute;top:0;left:2px}

/* 하단 가입상담신청 -  전화 테두리 animation */
.-spring_x{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;animation-name:spring_x;animation-duration:3.5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:normal;-webkit-animation-name:spring_x;-webkit-animation-duration:3.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-direction:normal}
@keyframes spring_x{
	0%{transform:translate(0px,0px)}
	80%{transform:translate(0px,0px)}
	85%{transform:translate(4px,0px)}
	90%{transform:translate(0px,0px)}
	95%{transform:translate(4px,0px)}
	100%{transform:translate(0px,0px)}
}
@-webkit-keyframes spring_x{
	0%{transform:translate(0px,0px)}
	80%{transform:translate(0px,0px)}
	85%{transform:translate(0px,4px)}
	90%{transform:translate(0px,0px)}
	95%{transform:translate(0px,4px)}
	100%{transform:translate(0px,0px)}
}
.-spring_y{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;animation-name:spring_y;animation-duration:3.5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:normal;-webkit-animation-name:spring_y;-webkit-animation-duration:3.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-webkit-animation-direction:normal}
@keyframes spring_y{
	0%{transform:translate(0px,0px)}
	80%{transform:translate(0px,0px)}
	85%{transform:translate(0px,-4px)}
	90%{transform:translate(0px,0px)}
	95%{transform:translate(0px,-4px)}
	100%{transform:translate(0px,0px)}
}
@-webkit-keyframes spring_y{
	0%{transform:translate(0px,0px)}
	80%{transform:translate(0px,0px)}
	85%{transform:translate(0px,4px)}
	90%{transform:translate(0px,0px)}
	95%{transform:translate(0px,4px)}
	100%{transform:translate(0px,0px)}
}