@charset "utf-8";

img{max-width:100%;}

/* ==========================================================================
   INPUT, SELECT, TEXTAREA
========================================================================== */
.radio_wrap input[type='radio'], .check_wrap input[type='checkbox']{opacity:0;}

/* ==========================================================================
   GRID
========================================================================== */
.col.col3_6 {width:25%;}

/* ==========================================================================
   완료페이지
========================================================================== */
.dx-customize.complete_body.ani_ico::before{top:52px !important;margin-top:0 !important;}


/* ==========================================================================
   로그인
========================================================================== */
.login-ani{width:180px;height:240px;position:absolute;right:0;top:95px;overflow:hidden;}
.login-ani .fan-qun{position:absolute;width:100%;height:100%;position:absolute;bottom:0;right:0;background:url(../images/member/bg_login_fg01.png)right bottom no-repeat;background-size:auto 92%;animation:loginFangun 6s ease infinite;;transform-origin:right bottom;transform:rotate(7deg)}
@keyframes loginFangun{
	0%{transform:rotate(7deg)}
	20%{transform:rotate(7deg)}
	40%{transform:rotate(0deg);}
	46%{background-image:url(../images/member/bg_login_fg01.png)}
	50%{background-image:url(../images/member/bg_login_fg02.png)}
	54%{background-image:url(../images/member/bg_login_fg01.png)}
	60%{transform:rotate(0deg);}
	80%{transform:rotate(7deg);}
	100%{transform:rotate(7deg);}
}
.login-ani [class*=ic-star]{position:absolute;width:30px;height:30px;background:url(../images/member/bg_login_star.png) 0 0 no-repeat;background-size:100% auto;}
.login-ani .ic-star1{top:62px;left:12px;transform:scale(0);animation:loginStar1 4s  infinite;}
@keyframes loginStar1{
	0%{transform:scale(0)}
	35%{transform:scale(0)}
	55%{transform:scale(1)}
	75%{transform:scale(0)}
	100%{transform:scale(0)}
}
.login-ani .ic-star2{top:100px;left:18px;transform:scale(0);animation:loginStar2 4s  infinite;}
@keyframes loginStar2{
	0%{transform:scale(0)}
	15%{transform:scale(0)}
	45%{transform:scale(1)}
	65%{transform:scale(0)}
	100%{transform:scale(0)}
}

/* ==========================================================================
   간편 모바일 명세서
========================================================================== */
.visual-img1{display:flex;justify-content:space-between;}
.visual-img1 .txt{font-size:17px;}
.visual-img1 .img{flex:0 0 auto;width:216px;margin-top:-102px;}

.pop_wrap.jcust{padding:40px 30px;}
.pop_wrap.jcust .popup_type01 .pop_cont{padding:0 10px;}
.pop_wrap.jcust .popup { padding-top:20px;}
.pop_wrap.jcust .pop_cont { text-align:center;}
.pop_wrap.jcust .pop_cont h3 { font-size:23px;}
.pop_wrap.jcust .i-hide {position:relative; width:24px; height:24px;display:inline-block;margin-left:7px;top:5px;background:url('../images/dx/contents/210322_pop_dw.jpg') no-repeat top center/100% auto;}
.pop_wrap.jcust .i-hide > span {position:absolute;left:-9999px;color:transparent;}
.pop_wrap.jcust .pop_cont .cont {margin-top:16px;}
.pop_wrap.jcust .pop_cont .cont.f20 {font-size:20px;}
.pop_wrap.jcust .pop_cont .cont.il {text-align:left;width:100%;max-width:282px;margin:15px auto 0;}
.pop_wrap.jcust .i-box,
.accordion_body .area .i-box {background:#f6f6f6;font-size:15px;display:flex;margin:5px 0;}
.pop_wrap.jcust .i-box > li,
.accordion_body .area .i-box > li {flex:0 1 auto;padding-top:60px;text-align:center;margin:15px 0;width:50%;}
.accordion_body .area .i-box > li{margin:15px 0 !important;}
.pop_wrap.jcust .i-box > li.and,
.accordion_body .area .i-box > li.and{background:url('../images/dx/contents/210322_and_ico.png') no-repeat top center/47px auto;}
.pop_wrap.jcust .i-box > li.ios,
.accordion_body .area .i-box > li.ios {background:url('../images/dx/contents/210322_ios_ico.png') no-repeat top center/47px auto;}

/* 기존 뷰어 페이지와 충돌나는 클래스 재정의 */
#shcWrap .page-control .page-group input{height:auto;background:transparent; border:none;line-height:100%;font-size:14px;color:#fff;}
#shcWrap .page-control .page-group input[readonly],
#shcWrap .page-control .page-groupinput[readonly]:focus{padding:0;}
#shcWrap .page-control .page-group .btn{height:auto;border-radius:0;font-size:14px;font-weight:inherit;border:none;}
#shcWrap header .btn{height:auto;border-radius:0;font-size:14px;font-weight:inherit;border:none;}
#shcWrap header .cent-cont li.cnt button{border-radius:4px;}
#shcWrap #topArea ul:after, #shcWrap #topArea ol:after{display:none;}
#shcIndex {position:absolute;z-index:9999;width:100%;text-align:center}
#shcIndex a {display:block;overflow:hidden;width:1px;height:1px;margin-bottom:-1px;text-align:center;color:#fff;white-space:nowrap}
#shcIndex a:focus,
#shcIndex a:active {width:auto;height:auto;padding:5px;background:#0989cb}
.pop_wrap.jcust .pop_cont h3{font-family:'ShinhanCard', 'sans-serif';}
#__flying_partition__ .progress{height:100px;margin:0;background:transparent;border-radius:0;box-shadow:none;}

/* ==========================================================================
   아코디언
========================================================================== */
.accordion_body .area .marker_dot > li > ul{margin-top:7px;}
.accordion_body .area .marker_dot > li > ul > li + li{margin-top:5px;}


/* ==========================================================================
   레이어 팝업
========================================================================== */
.pop_wrap .pop_cont p+p{margin-top:14px;}
.pop_wrap .popup .pop_cont{padding-top:3px}
.popup .c-section{padding-top:15px}
.popup .c-section:first-child{padding-top:0;}
.popup .c-section:last-child{padding-bottom:15px;}
.popup [class*=c-form]{margin-top:20px;}

.pop_wrap.custom01{flex-direction:column;padding:72px 50px 30px;}

@media only screen and (max-width:1100px) {
    /* ==========================================================================
    정렬
    ========================================================================== */
    .c-m-center{text-align:center !important}

    /* ==========================================================================
    GRID
    ========================================================================== */
    .col.col3_6 {width:50%;}


    /* ==========================================================================
    입력폼
    ========================================================================== */
    .form_type .ele_tit{font-size: 16px;font-weight: bold;color: #333;}


    /* ==========================================================================
    POPUP
    ========================================================================== */
    .pop_wrap .popup .pop_cont{padding-top:3px;}


    /* ==========================================================================
    로그인
    ========================================================================== */
    .login-ani{width: 140px;height: 158px;top:-8px}
    .login-ani .ic-star1{top: 38px;left: 31px;width:20px;height:20px;}
    .login-ani .ic-star2{top: 62px;left: 31px;width:16px;height:16px;}


    /* ==========================================================================
    간편 모바일 명세서
    ========================================================================== */
    .visual-img1 .img{width:150px;margin-top:0;}
}