@charset "utf-8";

/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 고객감사이벤트 Stylesheet
 * Author - moran67@hanbitsoft.co.kr 190926
 ------------------------------------------------- */

/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, select, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption {margin:0;padding:0;font-size:100%;}
img, fieldset, button {border:0;}
article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body, input, button, textarea, select, table, kbd {line-height:1.2;font-family:Malgun Gothic,'맑은고딕','돋움', dotum, Helvetica, sans-serif;font-size:12px;color:#000;}
img {vertical-align:middle;}
ol, ul {list-style:none;}
a {text-decoration:none;color:#000;}
a:hover, a:focus, a:active {text-decoration:underline;color:#0000ff;}
button, label {cursor:pointer;}
button::-moz-focus-inner, input::-moz-focus-inner {padding:0;border:0;}
table {border-collapse:collapse;border-spacing:0;}
caption, legend {width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;visibility:hidden;}

/* Reserved Class
-------------------------------------------------------------- */
.irPm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px;}
.irWa {display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1;}
.blind {overflow:hidden;position:absolute;top:0;left:-1000%;width:1px;height:1px;font-size:0;line-height:0;}
.show {display:block;}
.hide {display:none;}
.fL {float:left;}
.fR {float:right;}
.clearFix {zoom:1;}
.clearFix:after {display:block;content:'';clear:both;}
.opc {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;}

/* Style  
-------------------------------------------------------------- */
#wrap {overflow:hidden;position:relative;width:100%;min-width:1200px;}
.inner {position:relative;width:1100px;height:100%;margin:0 auto;}
#header {background:url(../images/header.jpg) no-repeat 50% 0;height:750px;overflow:hidden;}
#headerCover {position:absolute;top:0;left:0;right:0;margin:0 auto;background:url(../images/header_cover.jpg) no-repeat 50% 0;height:750px;overflow:hidden;z-index:-1;}
#header .titleBg {position:absolute;top:0;left:-1px;background:url(../images/title.png) no-repeat;width:1100px;height:378px;opacity:0;filter:alpha(opacity=0);}
#header .titleBgOver {position:absolute;top:0;left:-1px;background:url(../images/title.png) no-repeat;width:1100px;height:378px;opacity:0;filter:alpha(opacity=0);}
#header .badge.none {position:absolute;top:461px;right:-54px;background:url(../images/badge.png) no-repeat;width:270px;height:275px;z-index:2;opacity:1;}
#header .badge {position:absolute;top:461px;right:-54px;background:url(../images/badge.png) no-repeat;width:270px;height:275px;z-index:2;opacity:0;-webkit-transform:translateZ(0px) scaleY(0.2) scaleX(0.4);transform:translateZ(0px) scaleY(0.2) scaleX(0.4)-webkit-animation: badge 500ms 2.5s ease-out forwards;animation: badge 500ms 2.5s ease-out forwards;}
.bgChar00.none {position:absolute;top:254px;left:337px;background:url(../images/char00.png) no-repeat;width:593px;height:586px;z-index:3;opacity:1;}
.bgChar01.none {position:absolute;top:335px;left:747px;background:url(../images/char01.png) no-repeat;width:250px;height:444px;opacity:1;}
.bgChar02.none {position:absolute;top:340px;left:110px;background:url(../images/char02.png) no-repeat;width:416px;height:442px;opacity:1;} 
.bgChar00 {position:absolute;top:254px;top:104%;left:337px;background:url(../images/char00.png) no-repeat;width:593px;height:586px;z-index:3;opacity:0;}
.bgChar01 {position:absolute;top:335px;left:23%;background:url(../images/char01.png) no-repeat;width:250px;height:444px;opacity:0;}
.bgChar02 {position:absolute;top:340px;left:52%;background:url(../images/char02.png) no-repeat;width:416px;height:442px;opacity:0;} 

/* 로그인 */
.evt_loginbox {position: absolute;top:750px;left:0;right:0;z-index:2;}
.evt_loginbox.fixed {position:fixed;top:0;left:0;width:100%;box-shadow:0px 10px 25px #000;}
.login_before {background:url(../images/login_before.jpg) no-repeat 50% 0;height:120px;}
.login_before .btn_login {position:absolute;top:40px;left:50%;margin-left:52px;width:122px;height:40px;background:transparent;} /* 190925 수정 */
.login_after {background:url(../images/login_after.jpg) no-repeat 50% 0;height:120px;}
.login_after button {position:absolute;top:50px;width:166px;height:40px;background:transparent;}
.login_after input[type="text"] {position:absolute;top:50px;width:170px;height:40px;margin-left:-1px;border:0;font-weight:bold;font-size:14px;;text-align:center;}
.login_after .btn_rating {left:171px;}
.login_after .btn_point {left:534px;}
.login_after .btn_family {left:977px;width:122px;}
.login_after .txt_point {left:363px;}
.login_after input.txt_family {left:726px;width:250px;}

/* container */
#container {margin-top:120px;}
.cont li {position:relative;float:left;width:150px;height:220px;margin-right:8px;margin-bottom:8px;}
.cont li:nth-child(7n+0) {margin-right:0;}
.cont li .exchange_btn {display:none;position:absolute;bottom:0;left:0;background:url(../images/sp_btn.png) no-repeat 0 0;width:150px;height:38px;}
.cont li:hover .exchange_btn {display:block;}
.cont li .exchange_btn.comp {display:block;background-position:0 -39px;cursor:default;}
.cont li .evt_nonClick {display:block;position:relative;width:150px;height:220px;}
.cont li:hover .exchange_btn + .evt_nonClick {display:none;}
.cont li .exchange_btn.comp + .evt_nonClick {display:block;}
.cont00 {background:url(../images/cont00.jpg) no-repeat 50% 0;height:1466px;}
.cont00 ul {padding-top:190px;}


.cont01 {background:url(../images/cont01.jpg) no-repeat 50% 0;height:2108px;}
.cont01_0 ul {padding-top:96px;}
.cont01_1 ul {padding-top:232px;padding-left:159px;}
.cont01_2 ul {padding-top:233px;}
.cont01_2 .btn_more {display:block;position:absolute;top:681px;left:345px;width:410px;height:90px;cursor:pointer;z-index:2;}
.cont01_2 .btn_more +img {opacity:0;filter:alpha(opacity=0);visibility:hidden;position:relative;margin-top:78px;margin-left:-14px;z-index:1;}
.cont02 {background:url(../images/cont02.jpg) no-repeat 50% 0;height:1617px;}
.cont02_0 ul {padding-top:95px;padding-left:317px;}
.cont02_1 ul {padding-top:233px;}
.cont02_2 ul {padding-top:234px;padding-left:79px;}
#footer {background:url(../images/footer.jpg) no-repeat 50% 0;height:521px;}

.bgChar00 {
  -webkit-animation-name: ani_chara00;
  animation-name: ani_chara00;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: .8s;
  animation-delay: .8s;
}

.bgChar01 {
  -webkit-animation-name: ani_chara01;
  animation-name: ani_chara01;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.bgChar02 {
  -webkit-animation-name:ani_chara02;
  animation-name:ani_chara02;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

@-webkit-keyframes badge {
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) scaleY(1) scaleX(1);
            transform: translateZ(0px) scaleY(1) scaleX(1);
  }
}
@keyframes badge {
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0px) scaleY(1) scaleX(1);
            transform: translateZ(0px) scaleY(1) scaleX(1);
  }
}

@-webkit-keyframes ani_chara00 { 
  100% {
    opacity: 1;
    top: 254px;
  }
}
@keyframes ani_chara00 {
  100% {
    opacity: 1;
    top: 254px;
  }
}
@-webkit-keyframes ani_chara01 {   
  100% {
    opacity: 1;
    left: 747px;
  }
}
@keyframes ani_chara01 { 
  100% {
    opacity: 1;
    left: 747px;
  }
}  
@-webkit-keyframes ani_chara02 {
  100% {
    opacity: 1;
    left: 110px;
  }
}
@keyframes ani_chara02 {
  100% {
    opacity: 1;
    left: 110px;
  }
}

/* 회원 상세 등급표 팝업 */
#rating_Table {position:relative;background:url(../images/rating_table.jpg) no-repeat;width:500px;height:800px;}
#rating_Table .pop_close_btn {position:absolute;top:0;right:10px;width:50px;height:63px;background:transparent;}

/* 감사포인트 사용내역 팝업 */
#point_usage {position:relative;background:url(../images/popup/bg_popup.jpg) no-repeat;width:560px;height:554px;}
#point_usage .table_area {width:460px;margin:0 auto;padding-top:97px;}
#point_usage .table_area table {width:100%;text-align:center;}
#point_usage .table_area tr {height:33px;}
#point_usage .table_area th {color:#fff;border-right:1px solid #685775;}
#point_usage .table_area tbody tr {border-left:1px solid #b8b8b8;border-bottom:1px solid #b8b8b8;}
#point_usage .table_area tbody td {border-right:1px solid #b8b8b8;color:#333;}
#point_usage .table_area tbody td:first-child {font-weight:bold;}
#point_usage .paging {margin-top:18px;text-align:center;font-size:11px;color:#333;}
#point_usage .paging span {display:inline-block;vertical-align:top;width:22px;height:21px;line-height:21px;font-size:13px;color:#000;text-decoration:none;}
#point_usage .paging span.dir {font-size:0;vertical-align:top;}
#point_usage .paging strong {display:inline-block;vertical-align:top;width:22px;height:21px;line-height:21px;}
#point_usage .paging span:hover {cursor:pointer;}
#point_usage .paging span:hover,.paging strong {background:#1e0b2e;color:#fff;font-weight:bold;}
#point_usage .nolist {padding:175px 0;font-size:16px;color:#000;font-weight:bold;text-align:center;}