/* BASIC css start */
/*====================================================
상단 스와이프 시작
====================================================*/
.cate_swip { position: relative; }
.cate_swip .swiper-container { height:30px ; padding: 0px; }
.cate_swip .swiper-container .swiper-wrapper {  }
.cate_swip .swiper-container .swiper-slide {
    text-align: center;
    font-size: 11px;
    background: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: auto !important;
    padding: 0 5px;
}
.cate_swip .swiper-container .swiper-slide {color:#fff;}
.cate_swip .swiper-container .swiper-slide.on {color: #f34544;  font-weight:bold;display: block;position: relative;height: 100%;line-height: 30px;}
.cate_swip .swiper-container .swiper-slide span {color: #c70026;font-size: 10px;position: absolute;line-height: 10px;top: 3px;left: 10px;font-weight: bold;}
.cate_rse {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    float: left;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    margin-top: 5px;
    padding: 0 3px;
    background: #000;
    position: relative;
    z-index: 9;
}
/*====================================================
상단 스와이프 끝
====================================================*/


/*====================================================
상단 스와이프2 시작
====================================================*/
.cate_swip2 { position: relative; }
.cate_swip2 .swiper-container2 { height:30px ; padding: 0px; }
.cate_swip2 .swiper-container2 .swiper-wrapper {  }
.cate_swip2 .swiper-container2 .swiper-slide {
    text-align: center;
    font-size: 11px;
    background: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: auto !important;
    padding: 0 5px;
}
.cate_swip2 .swiper-container2 .swiper-slide {color:#fff;}
.cate_swip2 .swiper-container2 .swiper-slide.on {color: #f34544;  font-weight:bold;display: block;position: relative;height: 100%;line-height: 30px;}
.cate_swip2 .swiper-container2 .swiper-slide span {color: #c70026;font-size: 10px;position: absolute;line-height: 10px;top: 3px;left: 10px;font-weight: bold;}
.cate_rse {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    float: left;
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    margin-top: 5px;
    padding: 0 3px;
    background: #000;
    position: relative;
    z-index: 9;
}
/*====================================================
상단 스와이프2 끝
====================================================*/


ul.tabs.act{  position: fixed;    display: block;
    top: 60px;
    z-index: 90;
    width: 100%;}


/*====================================================
상단 탭 시작
====================================================*/
ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 35px;
	width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    background: #000;
    position: relative;
    width: 20%;
    text-align: center;
    border-bottom: 3px solid #000;
    padding: 8px 0;
}
ul.tabs li a {
    color: #fff;
font-size:13px;
padding:8px 0;
}

ul.tabs li a img {vertical-align:middle; width:9px; margin-right:2px;}
	
ul.tabs li .on{
border-bottom: 3px solid #f34544;
	color:#f34544;
	font-weight:bold;
}

.tab_container {
    border-bottom: 1px solid #484848;
    border-top: 1px solid #484848;
    clear: both;
    padding:0 13px;
    background: #000;
    overflow: hidden;
}
.tab_content {
    color:#fff;
    font-size: 11px;
    height: 30px;
    line-height: 30px;
}


/*====================================================
상단 탭 끝
====================================================*/


/*====================================================
Aside 내부 시작
====================================================*/
.aside_logo {text-align:center; margin-top:15px; margin-bottom:35px;}
.aside_logo a {}
.aside_logo a img {width:100px;}


.log_wrap {}
.log_wrap .log_bl {
    background: #000;
    width: 48%;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #000;
}
.log_wrap .log_bl a {color:#fff;}
.log_wrap .wht {
    position:relative;
    background: #fff;
    width: 49%;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border: 1px solid #dfdfdf;
}

.log_wrap .hdJoin .bonus { display:inline-block; *display:inline; zoom:1; position:absolute; top:-15px; left:50%; width:46px; height:22px; text-indent:-9999em; margin-left:-23px; background:url(http://pencafe.img4.kr/renewal/abc963011/m/bonus.png) 0 0 no-repeat; background-size:46px auto; -webkit-animation: bonus 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation: bonus 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: ease-in-out }

.log_wrap .wht a {color:#000;}

.log_comment {background:#f6f6f6; padding:15px 0; margin-top:15px;}
.log_comment .user_id {text-align:center; color:#000; font-weight:bold; font-size:11px; margin-bottom:5px;}
.log_comment .ment { text-align:center; color:#000; font-size:10px; height:14px;}


#MS_view_product li {width:50%;}
.recent_view_pd p.listName {
    font-size: 11px;
    line-height: 13px;
}

.recent_view_pd img.listPic {
    border: 1px solid #ebebeb;
}

@-webkit-keyframes bonus {
    0% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    5% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg) }
    15% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    25% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg) }
    35% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    100% { -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
}

@-ms-keyframes bonus {
    0% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    5% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg) }
    15% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    25% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg) }
    35% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
    100% { -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) }
}

/*====================================================
Aside 내부 끝
====================================================*/


/*====================================================
상단 검색 시작
====================================================*/
#HamburgerPageContent .search {height:45px; position:relative; left:0; right:0; background-color:#000; text-align:center; display:none; z-index:10;}
#HamburgerPageContent .search .searchBox {width:100%;}

#HamburgerPageContent .search .searchBox input {
    width: 95%;
    height: 30px;
    /*line-height: 35px;*/
    border-radius: 15px;
    margin-top: 6px;
    padding: 5px 20px;
    border: none;
    color:#a9a9a9;
    font-size:12px;
}


#HamburgerPageContent .search .searchBox input cursor:focus
   {font-size:5px;}


#HamburgerPageContent .search .btn_search {
    width: 16px;
    height: 16px;
    line-height: 50px;
    position: absolute;
    top: 12px;
    right: 20px;
    color: #fff;
    text-align: center;
}
#HamburgerPageContent .search .btn_search img {width:100%;}
/*====================================================
상단 검색 끝
====================================================*/


/*====================================================
카테고리메뉴 시작
====================================================*/

.SMS_All_tabmenu_content nav li {
    position: relative;
    width: 100% ;
    display: block;
    float: none;
}
.SMS_All_tabmenu_content nav li a {
    display: block;
    height: 15px;
    line-height: 15px;
    padding-right: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.SMS_All_tabmenu_content nav li .fa {position: absolute; top:0; right: 0; width: 30px; text-align: center; height: 30px; line-height:30px;}
.SMS_All_tabmenu_content nav li > ul {background-color:#f4f4f4; display:none; }
.SMS_All_tabmenu_content nav li > ul > li {
    /* border-bottom: 0px none; */
    /* border-top: 1px solid #ccc; */
    background: #fafafa;
}
.SMS_All_tabmenu_content nav li > ul > li:first-child {border-top:0px none;}
.SMS_All_tabmenu_content nav li > ul > li a { margin: 0;}
.SMS_All_tabmenu_content nav li > ul > li > ul {border-top:0px none; border-top:1px solid #e9e9e9;}
.SMS_All_tabmenu_content nav li > ul > li > ul > li {border-bottom:0px none;}
.SMS_All_tabmenu_content nav li > ul > li > ul > li a { margin: 0; background-color: #efefef;}


.cate_list {}
.cate_list li {}
.cate_list li a {font-size: 12px; border-bottom: 1px solid #e9e9e9; padding: 7px 20px; font-weight:bold;}
.cate_list2 {}
.cate_list2 li {}
.cate_list2 li a {border-bottom:none; padding: 7px 10px 7px 28px; font-weight:normal;}
.cate_list3 {} 
.cate_list3 li {}
.cate_list3 li a {border-bottom:none; padding: 7px 10px 7px 36px; font-weight:normal;}

.board_wrap {
    border-top: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

.board_wrap .left {
    width: 49.5%;
    display: inline-block;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-weight:bold;
}

.board_wrap .right {
    width: 49%;
    display: inline-block;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-weight:bold;
}

.board_wrap .one_line {width:100%; display:block; text-align: center; height: 30px; line-height: 30px; border-bottom: 1px solid #e5e5e5; font-weight:bold;}

.time_line {}
.time_line p {
    text-align: center;
    color: #979797;
    font-size: 10px;
    height: 13px;
}
    
    
/*====================================================
카테고리메뉴 끝
====================================================*/


/*====================================================
상단 55px메뉴 표준화 시작
====================================================*/
#fix_position {
    position: relative;
    display: block;
    top: 0px;
    z-index: 90;
    width: 100%;
    overflow: hidden;
    background: #000;
    height: 60px;
}

#SMS_fixed_warp {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

#SMS_fixed_warp .SMS_fixed_inner {
    /* height: 100%; */
    /* line-height: 64px; */
    padding: 0;
    text-align: center;
    /*background: #fff;*/
    padding-top: 13px;
}

#SMS_fixed_warp .SMS_fixed_inner .fixed_logo {
    width: 120px;
    margin: 0 auto;
    height: 100%;
}

#SMS_fixed_warp .SMS_fixed_inner img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

#SMS_fixed_warp .SMS_fixed_inner .small_icon {
    position: absolute;
    top: 11px;
    text-align: center;
    color: #000;
    width: 35px;
    height: 35px;
    line-height: 30px;
    font-size: 0;
}

/* 메뉴 */
#SMS_fixed_warp .SMS_fixed_inner .small_icon {
    background-repeat: no-repeat;
    background-size: 55%;
    background-position: center;
}

#SMS_fixed_warp .SMS_fixed_inner .small_icon a {
    display: block;
    width: 35px;
    height: 35px;
}

#SMS_fixed_warp .SMS_fixed_inner .m_menu {
    background-image: url('/design/pencafe/renewal2018/img/m/menu_i.png');
    left: 10px;
}

#SMS_fixed_warp .SMS_fixed_inner .m_sch {
    background-image: url('/design/pencafe/renewal2018/img/m/search_i.png');
    right: 48px;
}

#SMS_fixed_warp .SMS_fixed_inner .m_sch a b {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 15px;
    top: 2px;
    left: 50%;
    color: #fff;
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    border-radius: 18px;
    background: #383838;
    z-index: 23;
}

#SMS_fixed_warp .SMS_fixed_inner .search_fixed_btn {
    background-image: url('/design/pencafe/renewal2018/img/m/search_i.png');
    right: 50px;
}

#SMS_fixed_warp .SMS_fixed_inner .my_menu {
    background-image: url('/design/pencafe/renewal2018/img/m/cart_i.png');
    right: 10px;
}

/*====================================================
상단 55px메뉴 표준화 끝
====================================================*/

/*====================================================
햄버거메뉴 시작
====================================================*/
/* ------------ 햄버거 회원정보 끝 ------------ */

.MenuAllCon .SMS_All_tapMenu {
    overflow: hidden;
    background: #fff;
    margin-top: 15px;
    border-top: 2px solid #000;
    border-left: 1px solid #dfdfdf;
}

.MenuAllCon .SMS_All_tapMenu div {
    display: inline-block;
    float: left;
    width: 32.9%;
    height: 36px;
    line-height: 35px;
    font-size: 11px;
    color: #9c9c9c;
    text-align: center;
    border-right: 1px solid #dfdfdf;
    background: #f6f6f6;
    border-bottom: 1px solid #dfdfdf;
}

.MenuAllCon .SMS_All_tapMenu div.SelMenu {
    font-weight: bold;
    color: #000;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #fff;
}

.MenuAllCon .SMS_All_tabmenu_content .tab_box {
    /* padding: 0 10px 10px; */
    background: #fff;
}

.MenuAllCon .SMS_All_tabmenu_content .tab_box a {
}

.MenuAllCon .SMS_All_tabmenu_content .base_menu {
    overflow: hidden;
    margin-top:10px;
}

.MenuAllCon .SMS_All_tabmenu_content .base_menu.SMSwidth100 li {
    width: 100%;
    clear: both;
}

.MenuAllCon .SMS_All_tabmenu_content .base_menu li a {
    display: block;
    color: #000;
}

.MenuAllCon .SMS_All_tabmenu_content .base_menu:last-child li:last-child a {
    border-bottom: none;
}

/* ----------- 서브메뉴 시작 ----------- */
.MenuAllCon .SMS_All_tabmenu_content .Cate_SubMenu {
    overflow: hidden;
    padding: 10px 0;
    background: #fff;
}

.MenuAllCon .SMS_All_tabmenu_content .Cate_SubMenu .subM_r {
    border-radius: 2px;
    overflow: hidden;
}

.MenuAllCon .SMS_All_tabmenu_content .Cate_SubMenu .subM_r div {
    display: inline-block;
    float: left;
    width: 50%;
    height: 37px;
    line-height: 37px;
    font-size: 13px;
    color: #959595;
    text-align: center;
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.MenuAllCon .SMS_All_tabmenu_content .Cate_SubMenu .subM_r div.Sel_subMenu {
    font-weight: bold;
    background: #fff;
    color: #F76363;
    border: 1px solid #F76363;
}

.MenuAllCon .SMS_All_tabmenu_content .tabSub_box .tabSub_box_inner {
    border: 1px solid #ddd;
    overflow: hidden;
}

/* ----------- 서브메뉴 끝 ----------- */
.MenuAllCon .SMS_All_CopyRight {
    overflow: hidden;
    margin-top:20px;
}

.MenuAllCon .SMS_All_CopyRight ul {text-align:center;}

.MenuAllCon .SMS_All_CopyRight ul li {
    display: inline-block;
    width: 25%;
    line-height: 28px;
    text-align: center;
}

.MenuAllCon .SMS_All_CopyRight ul li a {
    display: block;
    font-size: 11px;
    color: #979797;
    background: url(/design/pencafe/renewal2018/img/m/aside_bar.gif) right;
    background-repeat: no-repeat;
}

.MenuAllCon .SMS_All_CopyRight ul li:last-child a {
    background:none;
}

/* --------------------- 최근본상품 시작 --------------------- */
.MenuAllCon .Q_menu_hamburger {
    width: 100%;
    display: inline-block;
}

.MenuAllCon .Q_menu_hamburger ul {
    display: block;
    padding: 5px;
}

.MenuAllCon .Q_menu_hamburger ul > li {
    width: 50%;
    float: left;
    border-radius: 3px;
    padding: 4px !important;
    border: none !important;
    margin: 0;
    line-height: 0 !important;
}

.MenuAllCon .Q_menu_hamburger ul li img {
    width: 100%;
}

.MenuAllCon .Q_text_header {
    width: 95%;
    margin: 0 auto;
    padding: 6px 0;
    font-size: 12px;
    color: #494949;
    line-height: 19px;
    overflow: hidden;
    text-align: center;
    background: #E8E8E8;
    border: 1px solid #E2E2E2;
    border-radius: 3px;
}

.MenuAllCon .Q_menu_hamburger ul > li .name {
    display: block;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0px 10px 0 0;
}

#BasementRight.BasementOpen {
    visibility: visible;
    -webkit-animation: RightBasementOpenAnimation 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes RightBasementOffAnimation {
    0% {
        -webkit-transform: translate(-0px,0px);
        transform: translate(0px,0px);
    }

    100% {
        -webkit-transform: translate(900px,0px);
        transform: translate(900px,0px);
    }
}

#BasementRight.BasementOff {
    visibility: visible;
    -webkit-animation: RightBasementOffAnimation 800ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

#BasementRight {
    position: fixed;
    top: 0px;
    right: -290px;
    visibility: hidden;
    overflow: hidden;
    overflow-x: hidden;
    width: 290px;
    height: 100% !important;
    z-index: 9999;
    background: #fff;
    overflow: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}

#BasementRight::-webkit-scrollbar {
    width: 0 !important
}

@-webkit-keyframes RightBasementOpenAnimation {
    0% {
        -webkit-transform: translate(290px,0px);
        transform: translate(290px,0px);
    }

    100% {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px);
    }
}

#SMS_HamburgerClose_right {
    display: none;
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100% !important;
    top: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1001;
    display: none;
}

#SMS_HamburgerClose_right p {
    position: absolute;
    top: 0px;
    right: 290px;
    letter-spacing: 1px;
    width: 50px;
    height: 50px;
    background: url("img/ham_close.gif") no-repeat center;
    background-size: 25px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding-top: 50px;
    padding-right: 5px;
}
.MenuAllCon .SMS_leftMyp {
    padding: 10px 12px 0px 12px;
    background: #F5F5F5;
}

.MenuAllCon .SMS_leftMyp .scon {
    border: 1px solid #ddd;
    overflow: hidden;
    border-radius: 3px;
}

.MenuAllCon .SMS_leftMyp .scon ul {
    overflow: hidden;
    border-bottom: 1px solid #aaa;
}

.MenuAllCon .SMS_leftMyp .scon ul:last-child {
    border-bottom: none;
}

.MenuAllCon .SMS_leftMyp .scon ul li {
    position: relative;
    display: inline-block;
    float: left;
    width: 25%;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #000;
    text-align: center;
    border-right: 1px solid #ddd;
    background: #fff;
}

.MenuAllCon .SMS_leftMyp .scon ul li a b {
    font-weight: normal;
    color: #EA6363;
}

.MenuAllCon .SMS_leftMyp .scon ul li a {
    display: block;
}

.MenuAllCon .SMS_leftMyp .scon ul li:last-child {
    border-right: none;
}

.MenuAllCon .SMS_leftMyp .scon ul li span {
    display: inline-block;
    position: absolute;
    right: 1px;
    width: 1px;
    font-weight: normal;
    color: #ccc;
    padding: 0;
    display: none;
}

.MenuAllCon .SMS_leftMyp_text {
    padding: 12px 12px 0px 12px;
    background: #F5F5F5;
}

.MenuAllCon .SMS_leftMyp_text .scon_t {
    text-align: center;
    background: #efefef;
    padding: 13px 0;
    font-size: 13px;
    line-height: 19px;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-weight: bold;
}

.MenuAllCon .SMS_Search_ham {
}

.MenuAllCon .SMS_Search_ham .container_Box {
    position: relative;
    padding: 0 20px;
    margin: 20px 0;
}

.MenuAllCon .SMS_Search_ham .container_Box ul li.search {
    position: relative;
    width: 100%;
    padding: 0 ;
    border: none ;
    background: none ;
}

.MenuAllCon .SMS_Search_ham .container_Box .search input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    width: 100%;
    height: 35px;
    line-height: 12px;
    padding: 0 35px 0 6px;
    border: none;
    border-bottom: 1px solid #9d9d9d;
    background: #fff;
    color: #888;
}

.MenuAllCon .SMS_Search_ham .container_Box .search input:focus {
    color: #000;
}

.MenuAllCon .SMS_Search_ham .container_Box .search_btn {
    display: block;
    position: absolute;
    z-index: 1;
    right: 14px;
    top: 0;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}

.MenuAllCon .SMS_Search_ham .container_Box .search_btn:before {
    font-family: FontAwesome;
    content: "\f002";
    color: #9d9d9d;
    font-size: 15px;
}

.MenuAllCon .SMS_Search_ham .container_Box .search input::-webkit-input-placeholder {
    font-size: 12px;
    color: #888;
    line-height: 14px;
}
.MenuAllCon .logout_text_wrap {
    background: #F5F5F5;
}

.MenuAllCon .logout_text {
    position: relative;
    padding: 15px 12px;
    /* background: #F5F5F5; */
    overflow: hidden;
    height: 80px;
}

.MenuAllCon .logout_text .text {
    float: left;
    font-size: 11px;
    line-height: 17px;
    color: #888;
}

.MenuAllCon .logout_text .text b {
    display: block;
    font-size: 12px;
    margin: 0 0 5px 0;
    color: #383838;
}

.MenuAllCon .logout_text .text b i {
    font-style: normal;
    padding: 2px 6px;
    background: #e8e8e8;
    border-radius: 50px;
    font-weight: bold;
    color: #e95959;
}

.MenuAllCon .h_header_menu {
    padding: 0px;
    overflow: hidden;
    background: #fff;
}

.MenuAllCon .h_header_menu li {
    text-align: center;
    height: 37px;
    line-height: 37px;
    text-align: center;
    color: #444;
    font-size: 12px;
    width: 50%;
    display: inline-block;
    float: left;
    border: 1px solid #ddd;
}

.MenuAllCon .h_header_menu li:first-child {
    border-right: none;
}

.MenuAllCon .SMS_ham_myp_points {
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    background: #F5F5F5;
    border-bottom: 1px solid #EAEAEA;
}

.MenuAllCon .SMS_ham_myp_points ul {
}

.MenuAllCon .SMS_ham_myp_points li {
    display: inline-block;
    float: left;
    width: 33.3%;
    height: 78px;
    border-right: 1px solid #EAEAEA;
    padding: 0;
}

.MenuAllCon .SMS_ham_myp_points li .myp_icon {
    width: 50px;
    height: 40px;
    margin: 0 auto;
    background-image: url("/design/pencafe/renewal2018/img/m/ham_icon.png");
    background-repeat: no-repeat;
    background-size: 140px;
}

.MenuAllCon .SMS_ham_myp_points li a {
    color: #6F6F6F;
    font-size: 12px;
}

.MenuAllCon .SMS_ham_myp_points li a br {
    display: none;
}

.MenuAllCon .SMS_ham_myp_points li em {
    color: #EA6363;
    font-weight: bold;
    display: block;
}

.MenuAllCon .SMS_ham_myp_points li .coupon_i {
    background-position: 4px 2px;
}

.MenuAllCon .SMS_ham_myp_points li .point_i {
    background-position: -92px 2px;
}

.MenuAllCon .SMS_ham_myp_points li .num_i {
    background-position: -43px 2px;
}
.MenuAllCon .SMS_user_info {
    position: relative;
    padding: 10px;
}

.MenuAllCon .SMS_user_info .user_Inbody {
    background: #fff;
    height: auto;
    border-radius: 3px;
    padding: 10px;
}

.MenuAllCon .SMS_user_info .user_Inbody .logmenu_bottom {
    overflow: hidden;
}

.MenuAllCon .SMS_user_info .user_Inbody b {
    display: block;
    font-size: 13px;
    margin: 0 0 10px;
    line-height: 19px;
}

.MenuAllCon .SMS_user_info .user_Inbody .logmenu_bottom div {
    position: relative;
    display: inline-block;
    float: left;
    width: 50%;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #959595;
    text-align: center;
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.MenuAllCon .SMS_user_info .user_Inbody .logmenu_bottom div:first-child {
    border-right: none;
}

.MenuAllCon .SMS_user_info .user_Inbody .logmenu_bottom div a {
    display: inline-block;
}

.MenuAllCon .SMS_user_info .user_Inbody .logmenu_bottom div p {
    display: inline-block;
    margin-left: 3px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: #fff;
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    border-radius: 18px;
    background: #EA6363;
    z-index: 23;
    vertical-align: middle;
}

#SMS_MenuAll_wrap {
    position: fixed;
    width: 320px;
    height: 100%;
    top: 36px;
    right: 0;
    bottom: 0;
    background-color: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1001;
    display: none;
}

#SMS_MenuAll_wrap {
    top: 0;
    left: 0;
    width: 100%;
    background: #ececec;
    z-index: 9999;
    opacity: 0;
}

#SMS_MenuAll_wrap::-webkit-scrollbar {
    width: 0 !important
}

#SMS_MenuAll_wrap.OpenALLMENU {
    opacity: 1;
    -webkit-animation: OPEN_ALLMENU 400ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

#SMS_MenuAll_wrap.OpenALLMENU_close {
    opacity: 0;
    -webkit-animation: OPEN_ALLMENU_CLOSE 400ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes OPEN_ALLMENU {
    0% {
        -webkit-opacity: 0;
        opacity: 0;
    }

    100% {
        -webkit-opacity: 1;
        opacity: 1;
    }
}

@-webkit-keyframes OPEN_ALLMENU_CLOSE {
    0% {
        -webkit-opacity: 1;
        opacity: 1;
    }

    100% {
        -webkit-opacity: 0;
        opacity: 0;
    }
}

.MenuAllCon .logout_Module {
    position: relative;
    padding: 12px;
    /* background: #fff; */
    border-bottom: 1px solid #ddd;
    height: 60px;
}

.MenuAllCon .logout_Module .left_logo {
    position: absolute;
    top: 4px;
    left: 15px;
    width: 100px;
}

.MenuAllCon .logout_Module .left_logo img {
    width: 100%;
}

.MenuAllCon .logout_Module .left_Same {
    position: absolute;
    top: 12px;
    width: 35px;
    height: 35px;
}

.MenuAllCon .logout_Module .left_Same a {
    display: block;
    width: 35px;
    height: 35px;
}

.MenuAllCon .logout_Module .left_Same.Cart_Icon {
    right: 50px;
    background: url("/design/pencafe/renewal2018/img/m/cartIcon.png") no-repeat center;
    background-size: 70%;
}

.MenuAllCon .logout_Module .left_Same.Cart_Icon p {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    top: 2px;
    left: 50%;
    color: #fff;
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    border-radius: 18px;
    background: #EA6363;
    z-index: 23;
}

.MenuAllCon .logout_Module .left_Same.Close_Icon {
    right: 10px;
    background: url("/design/pencafe/renewal2018/img/m/close.gif") no-repeat center;
    background-size: 50%;
}
.basementTab .BasicMenu {
    display: block;
    padding: 0px;
    background: #fff;
    height: 35px;
    line-height: 35px;
    text-indent: 14px;
    border-bottom: 1px solid #eee;
}
.SMS_LeftToggle {
}

.SMS_LeftToggle .box_sub {
    height: auto;
}

.SMS_LeftToggle .box_sub .title {
    position: relative;
}

.SMS_LeftToggle .box_sub .title a {
    width: 100%;
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.SMS_LeftToggle:last-child .box_sub .title a {
    border-bottom: none;
}

.SMS_LeftToggle .box_sub .title span {
    width: 14px;
    height: 21px;
    display: inline-block;
    overflow: hidden;
    margin: 0 4px 0 0;
    position: relative;
    top: 2px;
}

.SMS_LeftToggle .box_sub .title span img {
    width: 100%;
}

.SMS_LeftToggle .box_sub .title b {
    background-image: url("/design/pencafe/renewal2018/img/m/down_arr.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 7px;
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 10px;
}

.title_close b {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.SMS_LeftToggle .box_sub .t_list {
    display: none;
    overflow: hidden;
}

.SMS_LeftToggle .box_sub .t_list li {
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    width: 50%;
    float: left;
}

.SMS_LeftToggle .box_sub .t_list li:nth-child(2n) {
    border-right: none;
}


.SMS_LeftToggle .box_sub .t_list li:last-child {
    border-right: none;
}

.SMS_LeftToggle .box_sub .t_list li a {
    font-size: 11px;
    display: block;
    padding: 8px 10px;
    color: #383838;
}

.SMS_LeftToggle .box_sub .t_list .ham_sub_menu {
    width: 100%;
    display: block;
    border-right: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    padding: 0 0 0 9px;
    text-indent: 15px;
    font-size: 12px;
}

.SMS_LeftToggle .box_sub .t_list .ham_sub_menu a {
    display: block;
}

.SMS_LeftToggle .box_sub .t_list .ham_sub_menu:nth-last-child(1) {
    border-bottom: none;
}
#Basement .basementTab {
    display: none;
}

.basementTabNavigation {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-orient: horizontal;
    -webki-box-orient: horizontal;
    -moz-box-orient: horizontal;
    padding: 0;
    background: #f1f1f1;
    border-top: 1px solid #ddd;
}

.basementTabNavigation div {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-align: top;
    -webkit-box-align: top;
    -moz-box-align: top;
    box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    float: none;
    width: 100% !important;
    height: 50px;
    line-height: 20px;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 13px 0 9px;
    background: none;
}

.basementTabNavigation div {
    border-bottom: 1px solid #ddd;
    color: #111;
    font-weight: normal;
}

.basementTabNavigation div.active {
    border-bottom: 5px solid #323232;
    color: #000000;
}
#Basement {
    position: fixed;
    top: 0px;
    left: -290px;
    visibility: hidden;
    overflow: hidden;
    overflow-x: hidden;
    width: 290px;
    height: 100% !important;
    z-index: 9999;
    background: #fff;
    overflow: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
}

.SMS_HamOpenClass {
    position: static;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    overflow-y: hidden !important;
    -webkit-pointer-events: none !important;
    -webkit-overflow-scrolling: none !important;
    z-index: -1 !important;
}

.login_top {
    width: 140px;
    display: block;
    height: 38px;
    background: #fff;
    margin: 15px auto 15px;
}

.login_top img {
    width: 100%;
}

#Basement::-webkit-scrollbar {
    width: 0 !important
}

@-webkit-keyframes BasementOpenAnimation {
    0% {
        -webkit-transform: translate(-290px,0px);
        transform: translate(-290px,0px);
    }

    100% {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px);
    }
}

#Basement.BasementOpen {
    visibility: visible;
    -webkit-animation: BasementOpenAnimation 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes BasementOffAnimation {
    0% {
        -webkit-transform: translate(-0px,0px);
        transform: translate(0px,0px);
    }

    100% {
        -webkit-transform: translate(-290px,0px);
        transform: translate(-290px,0px);
    }
}

.SMS_BaseMenu_02_fixed{display:none;}
.SMS_BaseMenu_02_fixed.show{    
	position: fixed;
    top: 60px;
    left: 0px;
    display: block;
    width: 100%;
    height: 55px;
    z-index: 90;
    opacity: 0.9;
}

.SMS_BaseMenu_02_fixed .container_Box {
    /* border-bottom: 1px solid #aaa; */
    overflow: hidden;
    /* padding-bottom: 10px; */
    background: #fff;
}

.SMS_BaseMenu_02_fixed .container_Box ul {
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.SMS_BaseMenu_02_fixed .container_Box ul:last-child {
    /* border-bottom: none; */
}

.SMS_BaseMenu_02_fixed .container_Box ul li {
    position: relative;
    display: inline-block;
    float: left;
    width: 20%;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #000;
    text-align: center;
    border-right: 1px solid #ddd;
}

.SMS_BaseMenu_02_fixed .container_Box ul li a {
    display: block;
    font-size: 11px;
    color: #383838;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.SMS_BaseMenu_02_fixed .container_Box ul li:last-child {
    border-right: none;
}

.SMS_BaseMenu_02_fixed .container_Box ul li span {
    display: inline-block;
    position: absolute;
    right: 1px;
    width: 1px;
    font-weight: normal;
    color: #ccc;
    padding: 0;
}
.SMS_loveWish{display:none !important;}
.SMS_loveOn{display:none !important;}


#Basement.BasementOff {
    visibility: visible;
    -webkit-animation: BasementOffAnimation 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

#SMS_HamburgerClose {
    display: none;
    position: fixed;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 1001;
    display: none;
}
#SMS_HamburgerClose p {
    position: absolute;
    top: 10px;
    left: 310px;
    letter-spacing: 1px;
    width: 17px;
    height: 17px;
    background: url(/design/pencafe/renewal2018/img/m/ham_close.gif) no-repeat center;
    background-size: 25px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding-top: 50px;
    padding-left: 5px;
}
/* --------------------- 최근본상품 끝 --------------------- */
.AllsmartskinCopyRight {
    text-align: center;
    font-size: 9px;
    color: #dcdcdc;
    letter-spacing: -0.05em;
}

#BasementContent {padding:20px;}

#BasementContentRight #right-menu .logout_text {
    height: auto;
    float: initial;
    position: relative;
    padding: 20px 20px 0px;
    /* background: #F5F5F5; */
    overflow: hidden;
}

#BasementContentRight #right-menu .logout_text .h_header_menu {
    overflow: hidden;
}

#BasementContentRight #right-menu .logout_text .h_header_menu li {
    border: 1px solid #9d9d9d;
    float: left;
    width: 50%;
}

#BasementContentRight #right-menu .logout_text .h_header_menu li:last-child {
    border-left: none;
}

#BasementContentRight #right-menu .logout_text .h_header_menu li a {
    text-align: center;
    display: block;
    padding: 6px 0;
}

#BasementContentRight #right-menu .logout_text .text {
    height: auto;
    float: initial;
    margin: 0 0 10px 0;
}

#SMSQuickmenu {
    position: fixed;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 1px solid #848484;
    text-align: center;
    font-size: 11px;
    line-height: 15px;
    background: rgb(255, 255, 255);
    z-index: 10;
    left: 11px;
    bottom: 14px;
    padding-top: 7px;
}

#SMSQuickmenuContainer {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    border-radius: 0;
    opacity: 0.94;
}

#SMSQuickmenuContainer .close {
    font-size: 11px;
    text-align: center;
    height: 35px;
    line-height: 35px;
    color: #fff;
    background: #000;
    font-size: 14px;
    border-radius: 0;
    /* opacity: 0.1; */
}

#SMSQuickmenuContainer ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

#SMSQuickmenuContainer ul li {
    display: inline-block;
    width: 50%;
    height: 35px;
    line-height: 35px;
    position: relative;
    padding-left: 5px;
    font-size: 13px;
    color: #444;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #ddd;
    padding-left: 10px;
}

#SMSQuickmenuContainer ul li:last-child {
    border-bottom: none;
}

@-webkit-keyframes SMSbounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes SMSbounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0px, 0);
        transform: translate3d(0, 0px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 0px, 0);
        transform: translate3d(0, 0px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 0px, 0);
        transform: translate3d(0, 0px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.SMSbounceInUp {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: SMSbounceInUp;
    animation-name: SMSbounceInUp;
}

/*====================================================
햄버거메뉴 끝
====================================================*/
/*====================================================
상단 플립 배너 시작
====================================================*/

.top_bn {
    width: 100%;
    position: relative;
    background: #333;
    display: none;
    overflow: hidden;
}


@media only screen and (max-width:400px) and (min-width:0px){
.top_bn {
 min-height: 60px;
}
} 

@media only screen and (max-width:2000px) and (min-width:400px){
.top_bn {
 min-height: 70px;
}
} 

   
.top_bn_flip img{
width:100%;
}

.top_bn .origin{
opacity:0;
}


.top_bn .origin img{
width:100%;
}

@-webkit-keyframes animationFrontBanner{
0% {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
40% {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}

50%{
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

90%{
z-index: 2;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
100%{
 z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}

.animationFrontBanner {
display:inline-block;
-webkit-animation:animationFrontBanner 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}


@-webkit-keyframes animationBackBanner{
0% {
z-index: 2;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
40% {
z-index: 2;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

50%{
z-index: 1;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}

90%{
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
100%{
 z-index: 2;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}

.animationBackBanner {
display:inline-block;
-webkit-animation:animationBackBanner 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

.top_bn_flip .flipper .front,.top_bn_flip .flipper .mid,.top_bn_flip .flipper .back{
width: 100%;
height: 100%;
-o-transition: all .10s;
-ms-transition: all .10s;
-moz-transition: all .10s;
-webkit-transition: all .10s;
transition: all .10s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}

.top_bn_flip .flipper {/*min-height:40px;*/}

.top_bn_flip .flipper .front{
 z-index: 3;
}

.top_bn_flip .flipper .mid{
z-index: 2;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

.top_bn_flip .flipper .back{
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}

@-webkit-keyframes animationFrontBanner_tre{
  0% {
    z-index: 3;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  23% {
    z-index: 3;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }

  33% {
    z-index: 1;
     -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }

  56%{
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }

  66%{
    z-index: 2;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }

  90%{
   z-index: 2;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
  100%{
     z-index: 3;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

.animationFrontBanner_tre {
display:inline-block;
-webkit-animation:animationFrontBanner_tre 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes animationMidBanner_tre{
  0% {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
  23% {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }

  33% {
    z-index: 3;
     -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }

  56%{
    z-index: 3;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }

  66%{
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }

  90%{
   z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
  100%{
     z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
}


.animationBackBanner_tre {
display:inline-block;
-webkit-animation:animationBackBanner_tre 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}

.top_bn_btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9;
    width: 15px;
}


/*====================================================
상단 플립 배너 끝
====================================================*/


/*====================================================
상단 탭 서브 시작
====================================================*/
#tab3 .tab_sub_wrap .tab_sub {width:20% !important;}
.tab_sub_wrap {}
.tab_sub {float:left; width:33%; text-align:center;}
.tab_sub a {color:#fff; padding:0 10px;}
.tab_sub_wrap2 {}
.tab_sub2 {float:left; width:25%; text-align:center;}
.tab_sub2 a {color:#fff; padding:0 10px;}

.letter07
{
    letter-spacing: -0.1em;
}
/*====================================================
상단 탭 서브 끝
====================================================*/


/* BASIC css end */