@charset "utf-8";
/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}

/* tag reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; outline: none; }
html { width:100%; height:100%; }
body,code { font-family: 'Pretendard', sans-serif !important; font-weight: 500; font-size:13px; line-height:1.5; color:#000; background:#fff; }
body { min-width:1184px; overflow-x:hidden; }
body#popup { min-width:0; }
input { }
input[type="checkbox"] { }
input[type="file"] { }
li { list-style:none;}
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; outline: none; transition:all .3s ease; -webkit-transition:all .3s ease;}
hr.layout { display:none; }
a { text-decoration:none; color:#000; transition:all .3s ease; -webkit-transition:all .3s ease; outline: none;}
a:hover { text-decoration:none; }
a:active { text-decoration:none; color:#000; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
#content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; }
#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }
table.nneditor-table { width:auto !important; }

/* 결제진행바 */
#progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; }
#progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; }
#progressPaybarView .box { height:180px; background:url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; }
#progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;}
#progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; }
#progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; }
div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; }

/* contents */
#accNav {display:none; position:absolute; top:0; left:0; z-index:100; width:100%; height:0;}
#accNav p, #accNav ul, #accNav ul li {height:0;}
#accNav p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px;  text-align:center; color:#000; white-space:nowrap;}
#accNav p a:focus, #accNav p a:hover, #accNav p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;}

.displaynone, .blind { display:none; }


.dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); }


/* 추천메일 보내기 */
.xans-product-recommmail .infomation .price { color: #000 !important; }

/* 옵션선택 */
#totalProducts table .right { color: #000 !important; }

/* 상품검색 */
.xans-search-frompackage .total { color: #000 !important; }

/* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */

@charset "utf-8";


/*********************/
/* 레이아웃 및 공통 css  */
/********************/

html,body { background-color:#fff; }
.innerDiv { position:relative; width:84%; min-width:1200px; margin:0 auto; padding: 0 8%; }
.innerDiv:after { content:""; display:block; clear:both; }
#wrapper { width:100%; margin:0 auto; }
#container { clear:both; position:relative; z-index:1; width:100%; margin:0 auto; }
#container:after { content:""; display:block; clear:both; }
#contents { clear:both; width:100%; min-height:600px; margin-bottom:50px; }

/* 쇼핑관련 레이어새창 설정 */
#modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; }
#modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:760px; background:#000; }
#capp-shop-new-product-optionselect-backlayer { background:#000; }
#modalContent { width:100%; height:100%; }

/* 상품분류 이미지효과 */
.ec-base-product .prdList .thumbnail .prdImg { height:100%; border:1px solid rgba(0,0,0,0.09) !important; z-index:1;}

.ec-base-product .prdList .thumbnail .prdImg:hover a .image_1 { transition: all 0.5s; opacity:0; }
.ec-base-product .prdList .thumbnail .prdImg:hover a .image_2 { transition: all 0.5s; opacity:1; }

.ec-base-product .prdList .thumbnail .prdImg a .image_1 { position:relative; transition: all 0.5s; opacity:1; }
.ec-base-product .prdList .thumbnail .prdImg a .image_2 { position:absolute; z-index:1; top:0; left:0; transition: all 0.5s; opacity:0; }


/**********************/
/* 각종 레이어팝업 관련 css 모음 */
/**********************/
#zipcodeLayer { position: fixed !important; top:50% !important; left:50% !important; transform: translate(-50%,-50%); }


/**********************/
/* 메인페이지 관련 css 모음 */
/**********************/

/* 메인 비주얼이미지 슬라이드 css */
.mainslider { display:block; clear:both; width:100%; overflow:hidden; text-align:center; border-radius:25px; }
.mainslider .swiper-container { position: relative; }
.mainslider .swiper-container .swiper-wrapper .swiper-slide { opacity:0.6; }
.mainslider .swiper-container .swiper-wrapper .swiper-slide-active { opacity:1; }
.mainslider .swiper-container .swiper-wrapper .swiper-slide img { width:100%; }
.mainslider .swiper-button-next { top:50% !important; right:3% !important; color:#fff !important; width:60px !important; height:60px !important; opacity: 1; }
.mainslider .swiper-button-prev { top:50% !important; left:3% !important; color:#fff !important; width:60px !important; height:60px !important; opacity: 1; }
.mainslider .swiper-button-next:hover { color:#fff !important; opacity: 0.5; }
.mainslider .swiper-button-prev:hover { color:#fff !important; opacity: 0.5; }

.mainslider .swiper-pagination { bottom: 30px !important; left: 0; width: 100%; }
.mainslider .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border:2px solid #fff; background-color: #fff; opacity: 0.7; border-radius:100%; margin: 0 5px !important; }
.mainslider .swiper-pagination-bullet-active { opacity: 1; width: 8px; height: 8px; transition: all 0.3s; border:2px solid #fff; background-color: transparent !important; }

.mainslider .swiper-button-next i { font-size:60px !important; line-height:60px !important; }
.mainslider .swiper-button-prev i { font-size:60px !important; line-height:60px !important; }
.mainslider .swiper-button-next:after, .swiper-button-prev:after { display:none; }




/* 메인페이지 배너 css */
#contents .mainbanner { display:block; clear:both; width:100%; margin:80px 0 80px; }
#contents .mainbanner ul { font-size:0; display: grid; grid-template-columns:1fr 1fr 1fr; gap:15px; }
#contents .mainbanner ul li { display:block; text-align:center; }
#contents .mainbanner ul li a { display:block; overflow: hidden; border-radius:25px; }
#contents .mainbanner ul li a img { width:100%; }


/* 오른쪽 버튼 관련 css */
#right_slide_btn { position:fixed; bottom:20px; right:20px; z-index:999; }

#right_slide_btn .right_top_btn { display:block; margin-bottom:5px; }
#right_slide_btn .right_top_btn i { border:1px solid rgba(0,0,0,0.1); border-radius:100%; width:40px; height:40px; font-size:18px; line-height:40px; text-align:center; background-color:#fff; color:#000;}
#right_slide_btn .right_top_btn i:hover { background-color:#aaa; color:#fff;}

#right_slide_btn .right_bottom_btn { display:block; }
#right_slide_btn .right_bottom_btn i { border:1px solid rgba(0,0,0,0.1); border-radius:100%; width:40px; height:40px; font-size:18px; line-height:40px; text-align:center; background-color:#fff; color:#000;}
#right_slide_btn .right_bottom_btn i:hover { background-color:#aaa; color:#fff;}

/* 카카오톡 */
#right_slide_btn .kakao_btn { display:block; margin-bottom:5px; }
#right_slide_btn .kakao_btn i { border:1px solid rgba(0,0,0,0.1); border-radius:100%; width:40px; height:40px; font-size:28px; line-height:40px; text-align:center; background-color:#f9e000; color:#3b1c1c;}
#right_slide_btn .kakao_btn i:hover { background-color:#3b1c1c; color:#f9e000;}

/* 네이버톡톡 */
#right_slide_btn .toktok_btn { display:block; margin-bottom:5px; }
#right_slide_btn .toktok_btn i { border:1px solid rgba(0,0,0,0.1); border-radius:100%; width:40px; height:40px; font-size:24px; line-height:40px; text-align:center; background-color:#00c73c; color:#fff;}
#right_slide_btn .toktok_btn i:hover { background-color:#fff; color:#00c73c;}


/* 상단 로그인 영역 메뉴 css */
#header { width:100%; margin:0 auto; }
#header .header_top { width:100%; height:auto; }


/* 상단 롤링 공지사항 영역 css */
.header_top .top_banner_wrap { display:none; }
#main .header_top .top_banner_wrap { display:block !important; position:relative; z-index:9999; width:100%; height:50px; background-color:#000; }
#main .header_top .top_banner_wrap .top_banner { height:50px; text-align:center; overflow:hidden; }
#main .header_top .top_banner_wrap .top_banner #top_notice { height:50px; line-height:50px; }
#main .header_top .top_banner_wrap .top_banner #top_notice a { color:#000 !important; font-size:16px; font-weight:700; }


/* 상단 카테고리 메뉴영역 css */
#header .top_category_menu { position:relative; z-index:9999; text-align:center; }
#header .top_category_menu .hover a { display: block; position: relative; font-size: 13px; color: #000; }

/* 상단 카테고리 관련 css */
#header .fixed_menu_outer { position:relative; z-index:20; width:100%; padding:0; transition:all .1s ease; }
#header .header_fixed { position:fixed; top:0; left:0; z-index:9999; height:50px; padding:0; background-color: rgba(255,255,255,1); transition:all .1s ease; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.07); }

/* 상단 로고영역 관련 css */
#header .fixed_menu_outer .top_category_menu h1 { display:inline-block; vertical-align:top; height:70px; float:left; margin:0 50px 0 0; overflow:hidden; }
#header .header_fixed .top_category_menu h1 { display:inline-block; vertical-align:top; height:50px; float:left; margin:0 50px 0 0; }
#header .header_fixed .top_category_menu h1 a img { height:100%; }

#header .top_category_menu .menu01_outer { display:inline-block; }
#header .top_category_menu .menu01_outer .menu01 { position:relative; display:inline-block; padding: 0 15px; text-align:left; font-weight:700; }
#header .fixed_menu_outer .top_category_menu .menu01_outer .menu01 > a { text-decoration:none; line-height:70px; font-size:17px; color:#000; }
#header .header_fixed .top_category_menu .menu01_outer .menu01 > a { text-decoration:none; line-height:50px; font-size:14px; }

#header .top_category_menu .menu01_outer .menu01 > a:hover,
#header .top_category_menu .menu01_outer .menu01.on > a { padding: 0 25px; margin: 0 -25px; color:#666; }
#header .fixed_menu_outer .top_category_menu .menu02_outer { display:none; position:absolute; left:50%; top:70px; margin-left:-80px; background:#fff; white-space:nowrap; box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.07); }

#header .header_fixed .top_category_menu .menu02_outer { display:none; position:absolute; left:50%; top:50px; margin-left:-80px; background:#fff; white-space:nowrap; box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.07); }

#header .top_category_menu .menu02_outer > dl { display:inline-block; position:relative; z-index:1; min-width:160px; }
#header .top_category_menu .menu02_outer .menu02 { position:relative; }
#header .top_category_menu .menu02_outer .menu02 > dl { }
#header .top_category_menu .menu02_outer .menu02.icon:after { display:none; position:absolute; right:5px; top:3px; font-family :'xeicon'; content:"\e93f"; line-height:35px; font-size:12px; color:#333; }
#header .top_category_menu .menu02_outer .menu02 > a { color:#666; min-width:140px; font-size:14px; height:35px; line-height:35px; padding:0 20px; transition:all .5s ease; -webkit-transition:all .5s ease; border-top:1px solid #eee; }
#header .top_category_menu .menu02_outer .menu02:first-child > a { border-top:1px solid #000; }
#header .top_category_menu .menu02_outer .menu02 > a:hover,
#header .top_category_menu .menu02_outer .menu02.on > a { color:#000; }
#header .top_category_menu .menu03_outer { display:none; position:absolute; left:181px; top:0; background:#fff; box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.07); }
#header .top_category_menu .menu03_outer .menu03 { display:none; position:relative; }
#header .top_category_menu .menu02_outer .menu03 > dl { }
#header .top_category_menu .menu02_outer .menu03.icon:after { display:block; position:absolute; right:5px; top:0; font-family :'xeicon'; content:"\e93f"; line-height:35px; font-size:18px; color:#333; }
#header .top_category_menu .menu03_outer .menu03 > a { color:#666; font-size:14px; min-width:140px; line-height:35px; padding:0 20px; transition:all .5s ease; -webkit-transition:all .2s ease; border-top:1px solid #eee; }
#header .top_category_menu .menu02_outer .menu03:first-child > a { border-top:1px solid #000; }
#header .top_category_menu .menu02_outer .menu03 > a:hover,
#header .top_category_menu .menu03_outer .menu03.on > a { color:#000; }
#header .top_category_menu .menu03_outer .menu04 { position:relative; }
#header .top_category_menu .menu03_outer .menu04 > a:hover { color:#000; }
#header .top_category_menu .menu04_outer { display:none; position:absolute; left:170px; top:0; background:#fff; box-shadow: 0px 5px 6px 0px rgba(0,0,0,0.07); }
#header .top_category_menu .menu04_outer .menu04 > a { color:#666; font-size:14px; min-width:130px; line-height:35px; padding:0 20px; transition:all .5s ease; -webkit-transition:all .2s ease; border-top:1px solid #eee; }


/* 상단 오른쪽 아이콘 css */
#header .top_category_menu .fixed_search { display:inline-block; height:70px; float:right; text-align:center; }
#header .top_category_menu .fixed_search > ul > { font-size:0; padding:0; margin:0; }
#header .top_category_menu .fixed_search > ul > li { display:inline-block; vertical-align:top; }

#header .top_category_menu .fixed_search_btn > a { display:block; width:40px; height:70px; background:none !important; padding:0; color:#000; }
#header .top_category_menu .fixed_search_btn > a:hover { color:#666; }
#header .top_category_menu .fixed_search_btn > a i { font-size:22px; line-height:70px; margin-left:0 !important; }
#header .top_category_menu .fixed_search_btn.active a { display:block; width:40px; height:70px; color:#666; padding:0; }

#header .top_category_menu .fixed_coupon_btn > a { display:block; width:40px; height:70px; background:none !important; padding:0; color:#000; }
#header .top_category_menu .fixed_coupon_btn > a:hover { color:#666; }
#header .top_category_menu .fixed_coupon_btn > a i { font-size:22px; line-height:70px; margin-left:0 !important; }

#header .top_category_menu .fixed_cart_btn > a { position: relative; display:block; width:40px; height:70px; background:none !important; padding:0; color:#000; }
#header .top_category_menu .fixed_cart_btn > a:hover { color:#666; }
#header .top_category_menu .fixed_cart_btn > a i { font-size:24px; line-height:70px; margin-left:0 !important; }
#header .top_category_menu .fixed_search .fixed_cart_btn span.count { position: absolute; top:50%; right:0; margin-top:-15px; border-radius:25px; text-align:center; padding:3px; background:#000; min-width:9px; height:9px; line-height:12px; font-size:11px; color:#fff; white-space: nowrap;}

#header .top_category_menu .fixed_member_btn > a { display:block; width:40px; height:70px; background:none !important; padding:0; color:#000; }
#header .top_category_menu .fixed_member_btn > a:hover { color:#666; }
#header .top_category_menu .fixed_member_btn.on a { color:#666; }
#header .top_category_menu .fixed_member_btn > a i { font-size:24px; line-height:70px; margin-left:0 !important; }


/* 상단 오른쪽 픽스 아이콘 css */
#header .header_fixed .top_category_menu .fixed_search { height:50px; }

#header .header_fixed .top_category_menu .fixed_search_btn > a { height:50px; }
#header .header_fixed .top_category_menu .fixed_search_btn > a i { line-height:50px; }
#header .header_fixed .top_category_menu .fixed_search_btn.active a { height:50px; }

#header .header_fixed .top_category_menu .fixed_coupon_btn > a { height:50px;}
#header .header_fixed .top_category_menu .fixed_coupon_btn > a i { line-height:50px; }

#header .header_fixed .top_category_menu .fixed_cart_btn > a { height:50px; }
#header .header_fixed .top_category_menu .fixed_cart_btn > a i { line-height:50px; }

#header .header_fixed .top_category_menu .fixed_member_btn > a { height:50px; }
#header .header_fixed .top_category_menu .fixed_member_btn > a i { line-height:50px; }


/* 상단 마이페이지/커뮤니티 마우스오버 메뉴 css */
#header .top_category_menu .fixed_search .nav_outer { position:relative; }
#header .top_category_menu .fixed_search .nav_outer .nav { display:none; position:absolute; top:60px; left:50%; z-index:999; width:120px; margin-left:-60px; border-radius:3px; border:1px solid #eee; background:#fff; border-top:1px solid #555; }
#header .header_fixed .top_category_menu .fixed_search .nav_outer .nav { top:50px; }
#header .top_category_menu .fixed_search .nav_outer .nav:after { border-top:0px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #555; content:""; position:absolute; z-index:80; top:-5px; left:55px;}
#header .top_category_menu .fixed_search .nav_outer .nav > li { display:block; border-top:1px solid #eee; margin:0 5px;}
#header .top_category_menu .fixed_search .nav_outer .nav > li:first-child { border-top:none; }
#header .top_category_menu .fixed_search .nav_outer .nav > li > a { display:block; color:#555; line-height:31px; font-size:12px; padding:0 7px; white-space:nowrap; }
#header .top_category_menu .fixed_search .nav_outer .nav > li > a:hover { color:#000; font-weight:500; }


/* 상단 비로그인시 회원가입 적립금 말풍선 css */
#header .top_category_menu .fixed_search .nav_outer .nav .join_btn { position: relative; }
#header .top_category_menu .fixed_search .nav_outer .nav .join_ico { position:absolute; z-index:90; top:5px; left:-40px; width:60px; height:20px; line-height:22px; color:#fff; border-radius: 3px; background:#000; font-weight:300; font-size:11px; text-align:center; animation:join_ico 0.3s ease-in infinite alternate;}
#header .top_category_menu .fixed_search .nav_outer .nav .join_ico:after { border-top:0px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; content:""; position:absolute; z-index:80; top:7px; right:-7px; transform: rotate( 90deg );}
@keyframes join_ico { from {left: -40px} to {left: -35px;} }


/* PC 화면 1200px 이상 1920px 이하 */
@media (min-width: 300px) and (max-width: 1600px) {
	#header .fixed_menu_outer .top_category_menu h1 { margin:0 20px 0 0; }
	#header .top_category_menu .menu01_outer .menu01 { padding: 0 10px; }
	#header .fixed_menu_outer .top_category_menu .menu01_outer .menu01 > a { font-size:15px; }
}



#header .fixed_search_view { display:block; position:absolute; z-index:10000; top:-500px; left:0; width:100%; height:500px; background-color: rgba(255,255,255,1) !important; transition: all 0.5s; opacity:0; }
#header .fixed_search_view.on { display: flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; width:100%; height:500px; background-color: rgba(255,255,255,1) !important; transition: all 0.5s; opacity:1; box-shadow: 0px 50px 30px 0px rgba(0,0,0,0.08); }
#header .fixed_search_view .fixed_search_wrap { display:none; }
#header .fixed_search_view.on .fixed_search_wrap { display:block; text-align:center; }
#header .fixed_search_view.on .fixed_search_wrap fieldset { display:block; margin-bottom:50px; }
#header .fixed_search_view.on .fixed_search_wrap a { display:inline-block; width:22px; height:28px; background:none !important; text-align:center; vertical-align:middle; }
#header .fixed_search_view.on .fixed_search_wrap a i { font-size:40px; line-height:35px; margin-left:0 !important; }
#header .fixed_search_view.on .fixed_search_wrap #keyword  { width:600px; height:50px; padding:0 0 0 9px; background:none; border:0; border-bottom:2px solid #111; line-height:50px; font-size:18px; color:#000; border-radius:0; font-weight:700; }


/* 상단 카테고리 검색 레이어창 인기검색어 css */
#header .fixed_search_view .fixed_search_wrap .popular { display:none; }
#header .fixed_search_view.on .fixed_search_wrap .popular { display:block; text-align:center; }
#header .fixed_search_view.on .fixed_search_wrap .popular strong { display:block; height:42px; font-size:18px; color:#111; line-height:42px; margin-bottom:10px; font-weight:500; }
#header .fixed_search_view.on .fixed_search_wrap .popular p { display:block; }
#header .fixed_search_view.on .fixed_search_wrap .popular p a { display:inline-block; width:auto !important; color:#000; margin:0 5px; padding:0 10px; border:1px solid #ccc; font-size:15px; line-height:42px; height:42px; }
#header .fixed_search_view.on .fixed_search_wrap .popular p a:hover { color:#666; border:1px solid #000; }

#header .fixed_search_view.on .fixed_search_wrap .popular .close_btn { position:absolute; bottom:40px; left:50%; margin-left:-20px; display:block; }
#header .fixed_search_view.on .fixed_search_wrap .popular .close_btn i { display:block; color:#000; font-size:35px; line-height:40px; width:40px; height:40px; }


/* 하단영역 css */
#footer { clear:both; width:100%; margin:0 auto; background-color:#333; padding:15px 0 30px; }
#footer .bottom_info { width:100%; }
#footer .bottom_info div.bottom_each { padding-right:40px; min-height:120px; }
#footer .bottom_info div.bottom_each:last-child { padding-right:0; }
#footer .bottom_info div.bottom_each h3 { margin-bottom:15px; font-size:16px; color:#fff; }

#footer .bottom_info .bottom_menu_wrap { display:block; margin:0 0 20px 0; padding-bottom:10px; height:30px; border-bottom:1px solid #444;}
#footer .bottom_info .bottom_menu_wrap .bottom_menu { float:left; display:block; overflow:hidden; }
#footer .bottom_info .bottom_menu_wrap .bottom_menu ul { font-size:0; }
#footer .bottom_info .bottom_menu_wrap .bottom_menu li { display:inline-block; margin-right:20px; }
#footer .bottom_info .bottom_menu_wrap .bottom_menu li a { font-size:15px; color:#ddd; line-height:30px; font-weight:500; }
#footer .bottom_info .bottom_menu_wrap .bottom_menu li a:hover { color:#fff; } 

#footer .bottom_info .bottom_menu_wrap .bottom_sns { float:right; display:block; text-align:right; overflow:hidden; }
#footer .bottom_info .bottom_menu_wrap .bottom_sns ul { font-size:0; }
#footer .bottom_info .bottom_menu_wrap .bottom_sns li { display:inline-block; margin-right:5px; vertical-align:middle;}
#footer .bottom_info .bottom_menu_wrap .bottom_sns li a { display:inline-block; width:25px; height:25px; background-color:#666; border-radius:100%; text-align:center; }
#footer .bottom_info .bottom_menu_wrap .bottom_sns li a i { line-height:25px; font-size:12px; color:#fff; }
#footer .bottom_info .bottom_menu_wrap .bottom_sns li a:hover { background-color:#fff; }
#footer .bottom_info .bottom_menu_wrap .bottom_sns li a:hover i { color:#000; }

#footer .bottom_info .cs_info { float:left; display:block; overflow:hidden; }
#footer .bottom_info .cs_info p.call_num { line-height:35px; font-size:25px; color:#f9e000; }
#footer .bottom_info .cs_info p { line-height:25px; font-size:16px; color:#fff; font-weight:300; }
#footer .bottom_info .cs_info b { display:block; margin-top:10px; font-size:15px; line-height:30px; }

#footer .bottom_info .board_info { float:left; margin:0; width:160px; border-left:1px solid #444; border-right:1px solid #444; padding-left:40px; overflow:hidden; }
#footer .bottom_info .board_info .board_wrap { display:block; }
#footer .bottom_info .board_info .board_wrap li { line-height:28px; font-size:14px; font-weight:300; }
#footer .bottom_info .board_info .board_wrap li a { color:#ddd; }
#footer .bottom_info .board_info .board_wrap li a:hover { color:#fff; }


#footer .bottom_info .company_info { float:left; margin:0; padding-left:40px; overflow:hidden; }
#footer .bottom_info .company_info .info { display:block; }
#footer .bottom_info .company_info .info li { line-height:24px; font-size:13px; color:#ddd;}
#footer .bottom_info .company_info .info li a { color:#ddd; }
#footer .bottom_info .company_info p.escrow { margin-top:18px; line-height:24px; font-size:11px; color:#ddd; }
#footer .bottom_info .company_info p.escrow span { display:inline-block; background-color:#333; font-weight:bold; line-height:25px; border-radius:15px; padding:0 10px; margin-left:10px; }
#footer .bottom_info .company_info p.escrow span a { display:block; color:#fff; }
#footer .bottom_info .company_info p.escrow span:hover { background-color:#fff; }
#footer .bottom_info .company_info p.escrow span:hover a { color:#000; }

/* 하단 인스타그램 css */
.insta_outer { float:left; width:100%; margin:40px auto 100px; overflow:hidden; }
.insta_outer h2 { font-size:18px; line-height:30px; color:#000; text-align:center; font-weight:900; }
.insta_outer h2 span { display:block; font-size:14px; color:#333; font-weight:normal; margin-bottom:10px; }
#instagramWidgetManual { width:calc(100% + 8%); margin:0 -4% !important; height:360px; overflow:hidden; }





/* 메인페이지 게시판 일반 리스트 노출관련 css */
#boardArea { overflow:hidden; margin:0 0 30px 0; }
#bannerArea { margin:22px 0 0; }
#bannerArea h2 { margin:0 0 16px; font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; }

/* 메인카테고리 타이틀 */
#main .ec-base-product .title h2 { }
#main .ec-base-product .title h2 span { display: block; font-size:28px !important; line-height:30px; font-weight:500; color:#444; }
#main .main_product_wrap { margin-top:100px; }

/* 메인페이지 와이드배너 노출 영역 */
.main_wide_banner_wrap { position: relative; display:block; background:url("http://pp8282.shop/images/awide_banner2.jpg") center fixed no-repeat; height:500px; margin:0 0 50px 0; }
.main_wide_banner_wrap .wide_text { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top:50%; left: 50%; transform: translate( -50%, -50%); width:100%; height:100%; text-align:center; background: rgba(0,0,0,.3); }
.main_wide_banner_wrap .wide_text h1 { display:block; font-size:34px; line-height:80px; color:#fff; font-weight:700; }
.main_wide_banner_wrap .wide_text p { display:block; font-size:18px; line-height:28px; font-weight:400; color:#fff; margin-bottom:20px; }
.main_wide_banner_wrap .wide_text a { display:inline-block; padding:0 30px; color:#000; background-color:#fff; font-size:14px; line-height:40px; }
.main_wide_banner_wrap .wide_text a:hover { color:#fff; background-color:#000; }


/**********************/
/* 서브페이지 관련 css 모음 */
/**********************/

/* 검색상세 */
.xans-search-form .searchResult .record { color:#000 !important; }
.xans-search-form .noData { border-bottom:1px solid #eee; }
.xans-search-form .noData > strong.warning { color:#000 !important; }

/* 전체 서브페이지 탐색경로바 */
.path { display:none; height:30px; line-height:30px; *zoom:1; margin-top:10px; font-size:11px; }
.path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; }
.path ol { float:right; }
.path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#999; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 11px; }
.path li:first-child { background:none; }
.path li a { color:#999; }
.path li strong,
.path li strong a { color:#666; font-weight:400; }

/* 타이틀 */
.titleArea { margin:50px 0 30px; text-align:center; }
.titleArea h2 { display:inline-block; font-size:24px; line-height:50px; font-weight:500; }
.titleArea h2 font { color:#000; }
.titleArea p { display:inline-block; position:relative; margin:0 0 0 6px; padding:0 0 0 6px; color:#939393; *display:inline; }
.titleArea p:before { display:inline-block; position:absolute; top:7px; left:0; content:""; width:1px; height:13px; border-left:1px solid #d9d9d9; }
.titleArea ul { padding:5px 0; color:#939393; line-height:18px; }
.titleArea ul li { position:relative; padding:0 0 0 9px; }
.titleArea ul li:before { display:block; position: absolute; top:50%; left:0; content:""; width:2px; height:2px; margin:-2px 0 0 0; background:#939393; }

/* 게시판 메인 */
.boardMain { overflow:hidden; *zoom:1; }
.boardMain td.title { vertical-align:middle; }
.boardMain td img { vertical-align:middle; margin:1px; }
.boardMain .board { position:relative; margin:30px 0 30px 0;}
.boardMain .leftArea { float:left; width:50%; }
.boardMain .leftArea .board { margin:0 23px 30px 0; }
.boardMain .rightArea { float:right; width:50%; }
.boardMain .rightArea .board { margin:0 0 0 23px; }
.boardMain .board h3 { margin:0 0 13px; height:35px; font-size:15px; color:#000; border-bottom:1px solid #666; }
.boardMain .board .btnLink { position:absolute; top:0px; right:0; text-decoration:none;}
.boardMain .board .ec-base-table.typeList td { color:#333; line-height:3; }
.boardMain .board .ec-base-table.typeList td.title a,
.boardMain .board .ec-base-table.typeList td.title a:hover { color:#333; line-height:3; }
.boardMain .board .galleryList { overflow:hidden; }
.boardMain .board .galleryList ul { overflow:hidden; margin:0 -10px; }
.boardMain .board .galleryList li { float:left; position:relative; width:20%; padding:0 0 12px 0; word-break:break-all; }
.boardMain .board .galleryList li span { display:block; margin:0 10px; font-size:11px; color:#a4a4a4; }
.boardMain .board .galleryList li .imgLink,
.boardMain .board .galleryList li .imgLink:hover { display:block; margin:0 10px 5px; font-size:12px; }
.boardMain .board .galleryList li .imgLink img { width:100%; max-height:110px; border:1px solid #ededed; }

/* 게시판 상품영역 가격 색상처리(종합) */
.ec-base-box .information .price { font-size:12px; font-weight:bold; color:#666; }
.ec-base-box .information .icon_img { margin:0 1px 0 0; display:none;}
.ec-base-box .information h3 { margin:0 0 5px; font-size:14px; color:#2e2e2e; }
.ec-base-box .information .price { font-size:12px; font-weight:bold; color:#666; }
.ec-base-box .information .button { margin:10px 0 0 0; padding:10px 0 0 0; }


/* 상품상세페이지 */
.xans-product-detail { position:relative; margin:100px auto 100px; width:100%; }
.xans-product-detail .detailArea { display:block; font-size:0; }
.xans-product-detail .imgArea { position:relative; display:inline-block; width:50% !important; text-align:right; vertical-align:top; box-sizing: border-box; }
.xans-product-detail .infoArea { display:inline-block; width:calc(50% - 80px) !important; margin-left:80px; vertical-align:top; box-sizing: border-box;}

.xans-product-detail .imgArea .keyImg { display:inline-block; position:relative; width:calc(100% - 120px) !important; margin:0 auto; vertical-align:top; }
.xans-product-detail .imgArea .keyImg .thumbnail { position:relative; min-height:550px; }
.xans-product-detail .imgArea .keyImg .thumbnail > img { width:100%; }
.xans-product-detail .imgArea .keyImg button img { border:0 !important; }

.xans-product-detail .imgArea .keyImg .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; }

.totalPrice .total { color:#000 !important; }
#totalProducts table .right { color:#000 !important; }
#zoomMouseGiude img { display:none; }

.xans-product-detail .headingArea { padding: 0 0 20px 0 !important;}
.xans-product-detail .headingArea .delivery { display:inline-block; padding:0 7px; margin-right:2px; background-color:#333; line-height:19px; color:#fff; font-size:11px; border-radius:7px; vertical-align:top; }
.xans-product-detail .headingArea h2 { display:block; font-size: 20px; line-height:40px; color:#000; }
.xans-product-detail .headingArea .icon { display:inline-block; vertical-align:top; line-height:19px; }
.xans-product-detail .headingArea .icon img { padding-right:2px; }
.xans-product-detail .headingArea .summary_desc { font-size: 15px; font-weight:600; color:#333; margin-top:5px; margin-bottom:5px; letter-spacing:-0.5px;}
.xans-product-detail .headingArea .simple_desc { font-size: 13px; color:#666; letter-spacing:-0.5px; line-height:1.5; font-weight:400; }
.xans-product-detail .infoArea .xans-product-detaildesign th span { color:#000 !important; font-size:14px !important; }
.xans-product-detail .infoArea .xans-product-detaildesign td span strong { color:#000 !important; }

.xans-product-detail .infoArea .xans-product-option .ec-product-button li { border-radius:100%; }
.xans-product-detail .infoArea .xans-product-option .ec-product-button li a { border-radius:100%; }
.xans-product-detail .infoArea .xans-product-option .ec-product-button .ec-product-disabled a span { background:#eee !important; font-weight:bold !important; }
.xans-product-detail .infoArea .xans-product-option .ec-product-button li a span { font-weight:bold !important; color:#000; padding:0;}
.xans-product-detail .imgArea .control { display:none; }



/* 상품상세페이지 좋아요! */
.xans-product-detail .likeButton { position: absolute; top:0; right:40px; display:block; margin:0; }
.xans-product-detail .likeButton button { position: relative; display:block; text-align:center; padding:0; width:27px; height:27px; border: 1px solid #eee; border-radius:100%; overflow:hidden; box-sizing: border-box; }
.xans-product-detail .likeButton button img { margin:0; width:15px; height:15px; }



/* 상품상세페이지 게시물 */
.xans-product-additional div.board p.nodata { color:#666 !important; border-left: 0 !important; border-right: 0 !important; line-height:120px; font-weight: 400;}
.ec-base-button.typeBorder { border: 0 !important; }



/* 장바구니 */
.xans-order-dcinfo .description .mileage li strong { color:#000 !important; }
.txtEm { color:#000 !important; }


/* 정기배송관리 */
.regularDeliveryPayInfo .ec-base-box .information .status { color:#000 !important; }


/* 사용후기게시판 */
.xans-board-listpackage .ec-base-table td.thumb a { display:block; width:70px; margin:0 auto; padding:0 !important; }
.xans-board-listpackage .ec-base-table td.thumb a img { width:70px; }
.xans-board-listpackage .ec-base-table .thumb span { display:none; }



/* 상품분류 중분류구성 */
.xans-product-menupackage .menuCategory { display: grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:10px; border: 0; text-align: center;  margin:0; padding:0px; font-size: 0; line-height: 0;}
.xans-product-menupackage .menuCategory > li { display: inline-block; width:100%; border-radius: 5px; vertical-align: top; position: relative; box-sizing: border-box; border: 1px solid #e4e4e4; font-size: 12px; text-align: left; font-weight:normal; margin:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
.xans-product-menupackage .menuCategory > li:hover { text-decoration: none; border: 1px solid #000; }
.xans-product-menupackage .menuCategory > li:hover a { color: #000; }
.xans-product-menupackage .menuCategory > li.selected { border: 1px solid #000; background-color:#000; }
.xans-product-menupackage .menuCategory > li.selected a { color: #fff; }
.xans-product-menupackage .menuCategory > li > a { display: block; color: #000; background:none; font-size:14px; line-height:40px; text-align: center; padding:0; font-weight:500; }
.xans-product-menupackage .menuCategory > li > a:hover { text-decoration: none; }
.xans-product-menupackage .menuCategory > li > ul { padding: 0 0 0 0; }
.xans-product-menupackage .menuCategory > li:hover > .xans-product-children { display: block; color:#000; }
.xans-product-menupackage .menuCategory > li > ul > li { margin:0 !important; }
.xans-product-menupackage .subCategory { display: none; position: absolute; z-index: 11; background:none; padding: 0px; }
.xans-product-menupackage .subCategory li { margin:0 !important; width: 155px;}
.xans-product-menupackage .menuCategory > li > ul > li .subCategory { width: 165px; top: -33px; border-radius: 5px; left: 147px; border: 1px solid #999; margin: 0px; background-color: #fff; }
.xans-product-menupackage .menuCategory > li > ul > li > .button { margin: 8px 0 0 3px; display: inline-block; position: relative; width: 9px; }
.xans-product-menupackage .menuCategory > li .count { border:1px solid #eee; margin-left:3px; border-radius:7px; text-align: center; background-color:#fff; padding: 2px 5px 2px 4px; line-height:16px; font-size:10px; color:#333; white-space: nowrap; vertical-align:middle; box-sizing: border-box; }


.xans-product-children { display: none; position: absolute; top: 38px; left: -1px; z-index: 10; border-radius: 5px; width: 160px; border: 1px solid #999; padding: 10px 0px; margin: 0px; background-color: #fff;}
.xans-product-children li { padding-left:10px; border-bottom: 1px solid #eee; height: 30px; border-radius: 5px;}
.xans-product-children li:last-child { border: 0; }
.xans-product-children li:hover { background-color:#fafafa;}
.xans-product-children a { display:block; font-size: 11px; height: 24px; line-height: 30px; padding: 0px; margin: 0px; color: #666 !important; }
.xans-product-children a:hover { color: #000 !important; font-weight:bold; }

.xans-product-normalmenu .prdCount { color:#666 !important; }
.xans-product-normalmenu .function { border: 0 !important; border-bottom: 1px solid #eee !important; }


/* 주문조회 */
.ec-base-table .message { border-left:0 !important; border-right:0 !important; }

/*주문단계이미지*/
.orderStep { display:none; }
#slide_arrow { position:absolute; left:50%; bottom:0; margin-left:-58px; z-index:98; }

/*할인율 아이콘*/
.discount_rate { position:absolute; z-index:9; vertical-align:middle; top:5px; right:5px; display:none; border-radius:100%; background: rgba(0,0,0,0.8); color:#fff; letter-spacing:-0.3px; font-size:14px; width:40px; height:40px; line-height:42px; text-align:center; }
.discount_rate span { margin-left:0px; font-size:11px; font-weight:normal; }

.xans-product-detail .imgArea .keyImg .thumbnail .discount_rate { position:absolute; z-index:9; vertical-align:middle; top:5px; right:5px; display:none; border-radius:100%; background: rgba(0,0,0,0.8); color:#fff; letter-spacing:-0.3px; font-size:14px; width:45px; height:45px; line-height:47px; text-align:center; }
.xans-product-detail .imgArea .keyImg .thumbnail .discount_rate span { margin-left:0px; font-size:11px; font-weight:normal; }

/* 타임세일 타이머 구동 */
.ec-base-product .prdList .thumbnail .timer { position: absolute; z-index:10; bottom:0; left: 50%; transform: translate( -50%, 0); display:block; width:100%; line-height:40px; text-align:center; font-size:14px; color:#fff; background: rgba(0,0,0,0.6); }

/* 기간할인 커스텀을 위한 숨김처리 css */
body .period_count { display:none !important; }

/* 기간할인 상품상세페이지 노출관련 css */
.xans-product-detaildesign .timer { display:block; width:100%; line-height:40px; text-align:center; font-size:14px; color:#fff; background: rgba(0,0,0,0.9); }

/* 메인페이지 롤링상품 섹션처리 css */
#roll_product { position: relative; margin:80px 0; }
#roll_product .prdList > li { margin-bottom:0; }

#roll_product .swiper-button-next { top:50% !important; right:0 !important; color:#fff !important; width:60px !important; height:60px !important; border-radius:100%; background-color:rgba(0,0,0,0.3); }
#roll_product .swiper-button-prev { top:50% !important; left:0 !important; color:#fff !important; width:60px !important; height:60px !important; border-radius:100%; background-color:rgba(0,0,0,0.3); }
#roll_product .swiper-button-next:hover { color:#fff !important; background-color:rgba(0,0,0,1); }
#roll_product .swiper-button-prev:hover { color:#fff !important; background-color:rgba(0,0,0,1); }

#roll_product .swiper-button-next i, .swiper-button-prev i { font-size:20px; line-height:60px; }
#roll_product .swiper-button-next:after, .swiper-button-prev:after { display:none; }

#roll_product .swiper-scrollbar { height:3px; background: rgba(0,0,0,.1); border-radius:0; left:0; width:100%; }
#roll_product .swiper-scrollbar-drag { background:#000; border-radius:0; }



/* 메인페이지 탭 상품분류 */
#issue_top { display:block; width:100%; }
.issue_outer { display:block; width:100%; text-align:center; margin:80px 0 0 0; padding:100px 0; background-color:#fff; }
.issue_outer .title h2 { display: block; margin:0 0 30px 0; font-size:28px !important; line-height:40px; font-weight:500; letter-spacing:-1px; color:#666;}

.overTab_list { display:inline-block; width:100%; margin:0 0 10px 0;}
.overTab_list ul { font-size:0; }
.overTab_list li { display:inline-block; height:30px; line-height:30px; font-size:15px; padding:0 10px; margin:0 15px 10px; font-weight:bold; color:#aaa; text-align:center; cursor:pointer; }
.overTab_list li:hover { color:#000; transition:all .5s ease; -webkit-transition:all .5s ease; border-bottom:1px solid #000;}
.overTab_list li.on { color:#000; border-bottom:1px solid #000; }
.overTab_list li span { display:block; font-size:11px; font-weight:normal; color:#666; letter-spacing:0; }
.overTab_con { display:none; }


/* 상세페이지 관련상품 섹션처리 css */
#prdRelated { display:block; position:relative !important; margin:0px 0 100px; }
#prdRelated #roll_relation { display:block; overflow:hidden; margin-top:80px; border-top:1px solid #e8e8e8; }
#prdRelated #roll_relation .title h2 { display:block; padding-top:50px; }
#prdRelated #roll_relation ul.grid_roll { font-size:0; }
#prdRelated #roll_relation ul.grid_roll > li { width:20%; }
#prdRelated .swiper-button-next { top:70px !important; right:0px !important; color:#fff !important; width:40px !important; height:40px !important; border-radius:100%; background-color:rgba(0,0,0,0.6); }
#prdRelated .swiper-button-prev { top:70px !important; left:0px !important; color:#fff !important; width:40px !important; height:40px !important; border-radius:100%; background-color:rgba(0,0,0,0.6); }
#prdRelated .swiper-button-next:hover { color:#fff !important; background-color:rgba(0,0,0,1); }
#prdRelated .swiper-button-prev:hover { color:#fff !important; background-color:rgba(0,0,0,1); }
#prdRelated .swiper-button-next i, .swiper-button-prev i { font-size:20px; line-height:40px; }
#prdRelated .swiper-button-next:after, .swiper-button-prev:after { display:none; }



/* 상세페이지 관련상품 가격부분 */
.xans-product-relation ul.prdList .description { font-size:12px; position:relative; margin-bottom:0; }
.xans-product-relation ul.prdList .description p { display:block; text-align:left; margin:10px 0 5px; font-size:13px; vertical-align:middle; }
.xans-product-relation ul.prdList .description p input { margin-right:3px; }
.xans-product-relation ul.prdList .description p a { color:#2e2e2e !important; line-height:20px; word-break:keep-all; }
.xans-product-relation ul.prdList .description p a span { color: #000 !important; font-size: 14px !important; letter-spacing: -0.03em; line-height:24px; }
.xans-product-relation ul.prdList .description ul { text-align:left; }
.xans-product-relation ul.prdList .description ul li { display:inline-block; font-size:13px; vertical-align:middle; line-height:25px; letter-spacing:-0.5px; margin:0 7px 0 0; }
.xans-product-relation ul.prdList .description ul li strong { font-size:13px; font-weight:bold; vertical-align:top; color:#000; }
.xans-product-relation ul.prdList .description ul li .strike { font-size:11px; font-weight:normal; color:#000; }
.xans-product-relation ul.prdList .description ul li.salePrice { display:inline-block; padding:0; color:#000; font-weight:bold; line-height:23px; vertical-align:top; border-top:1px dashed #999; border-bottom:1px dashed #999; }


/* 회사소개 추가페이지 관련 영역 */
.company_wrap { display:block; background-color:#222; margin-bottom:80px; }
.company_wrap ul { font-size:0; padding:0; margin:0; }
.company_wrap ul li { display:inline-block; width:50%; font-size:14px; vertical-align:top; }
.company_wrap ul li.left .text_wrap { padding: 3%; color:#fff; }
.company_wrap ul li.left .text_wrap h1 { display:block; font-size:28px; line-height:50px; }
.company_wrap ul li.left .text_wrap h2 { display:block; font-size:16px; line-height:20px; }
.company_wrap ul li.left .text_wrap p { display:block; font-size:14px; font-weight:400; line-height:2; letter-spacing:-0.5px; margin-top:30px; }
.company_wrap ul li.right { background:url("http://pp8282.shop/images/company/01.jpg") center center no-repeat; height:450px; background-size: 1000px; }

.company_mov #yt_mask { position: relative; display:block; width:100%; height: 0; padding-top: 0px; padding-bottom: 56.25%; margin:0px auto; overflow:hidden; user-select: none; }
.company_mov #yt_mask::before { content:""; position: absolute; top:0; left: 0; z-index:999; width:100%; height:100%; background-color:#000; opacity:0; user-select: none; }
.company_mov #yt_mask #player { position: absolute; top:50%; left: 50%; transform: translate( -50%, -50%); display:block; width:100%; height:100%; }


.company_map { display:block; margin:80px 0; background-color:#fff; }
.company_map ul { font-size:0; padding:0; margin:0; }
.company_map ul li { display:inline-block; width:50%; font-size:14px; vertical-align:top; }
.company_map ul li.left { background:url("http://pp8282.shop/images/company/02.jpg") center center no-repeat; height:450px; background-size: 1000px; }

.company_map ul li.right .info_wrap { padding: 3%; margin:0 !important; }
.company_map ul li.right .info_wrap h1 { display:block; font-size:18px; line-height:50px; }
.company_map ul li.right .ec-base-table tbody th { padding: 0; line-height: 40px; }
.company_map ul li.right .ec-base-table td { padding: 0 0 0 10px; line-height: 40px; }

/* 스토어포유 관련 css */
.store_foryou { display:block; width:100%; color:#666; }
.store_foryou .main_title span { display:block; font-size:16px; line-height:20px; }
.store_foryou .main_title h2 { display: block; font-size: 28px; line-height: 50px; color:#000; }

.store_foryou .store_foryou_textwrap { display:block; }
.store_foryou .main_title { display:block; }

.store_foryou .store_foryou_textwrap p { font-size:18px; line-height:32px; letter-spacing:-1px; }
.store_foryou .store_foryou_textwrap .textwrap_01 { margin-top:15px; }
.store_foryou .store_foryou_textwrap .textwrap_02 { margin-top:35px; }
.store_foryou .store_foryou_textwrap .textwrap_03 { margin:35px 0; }
.store_foryou .store_foryou_textwrap .img_wrap { display:block; border-radius:25px; overflow:hidden; }
.store_foryou .store_foryou_textwrap .img_wrap img { width:100%; }

.store_foryou .store_foryou_banner { display:block; margin-top:60px; }
.store_foryou .store_foryou_banner .main_title { margin-bottom:20px; }
.store_foryou .store_foryou_banner ul { font-size:0; padding:0; margin:0; }
.store_foryou .store_foryou_banner ul li { display:inline-block; width:25%; }
.store_foryou .store_foryou_banner ul li:first-child a { margin-left:0; }
.store_foryou .store_foryou_banner ul li a { display:block; margin-left:20px; }
.store_foryou .store_foryou_banner ul li a img { width:100%; }
.store_foryou .store_foryou_banner ul li strong { display:block; padding:20px 0 10px; font-size:19px; line-height:26px; letter-spacing:-0.5px;}
.store_foryou .store_foryou_banner ul li p { display:block; font-size:14px; line-height:24px; letter-spacing:-1px; }

.store_foryou .store_foryou_career { display:block; margin:100px 0; height:464px; }
.store_foryou .store_foryou_career .store_foryou_left { float:left; width:50%; border-radius:25px; overflow:hidden; }
.store_foryou .store_foryou_career .store_foryou_left img { width:100%; }
.store_foryou .store_foryou_career .store_foryou_right { float:right; width:50%; }
.store_foryou .store_foryou_career .store_foryou_right ul { font-size:0; padding:0; margin:0; }
.store_foryou .store_foryou_career .store_foryou_right ul li { padding:0 50px 25px; }
.store_foryou .store_foryou_career .store_foryou_right ul li:last-child { padding:0 50px 0; }
.store_foryou .store_foryou_career .store_foryou_right ul li strong { font-size:18px; line-height:38px; letter-spacing:-1px;}
.store_foryou .store_foryou_career .store_foryou_right ul li p { font-size:14px; line-height:26px; }
.store_foryou .store_foryou_career .store_foryou_right ul li p a { color:#000; font-weight:bold; }
.store_foryou .store_foryou_career .store_foryou_right ul li p a:hover { color:#ff6470; }



/* 소개영상 관련 css */
.minfo_wrap { display:block; background-color:#fff; margin-bottom:80px; }
.minfo_wrap ul { font-size:0; padding:0; margin:0; }
.minfo_wrap ul li { display:inline-block; width:50%; font-size:14px; vertical-align:top; }
.minfo_wrap ul li.left .text_wrap { padding: 3%; color:#000; }
.minfo_wrap ul li.left .text_wrap h1 { display:block; font-size:28px; line-height:50px; }
.minfo_wrap ul li.left .text_wrap h2 { display:block; font-size:16px; line-height:20px; }
.minfo_wrap ul li.left .text_wrap p { display:block; font-size:14px; font-weight:400; line-height:2; letter-spacing:-0.5px; margin-top:30px; }
.minfo_wrap ul li.right {  }

.minfo_mov #yt_mask1 { position: relative; display:block; width:100%; height: 0; padding-top: 0px; padding-bottom: 56.25%; margin:0px auto; overflow:hidden; user-select: none; }
.minfo_mov #yt_mask1 #player1 { position: absolute; top:50%; left: 50%; transform: translate( -50%, -50%); display:block; width:100%; height:100%; }

.minfo_mov #yt_mask2 { position: relative; display:block; width:100%; height: 0; padding-top: 0px; padding-bottom: 56.25%; margin:0px auto; overflow:hidden; user-select: none; }
.minfo_mov #yt_mask2 #player2 { position: absolute; top:50%; left: 50%; transform: translate( -50%, -50%); display:block; width:100%; height:100%; }



/* 진행순서 관련 css */
.order_info_wrap { display:block; width:100%; color:#666; }
.order_info_wrap .main_title span { display:block; font-size:16px; line-height:20px; }
.order_info_wrap .main_title h2 { display: block; font-size: 28px; line-height: 50px; color:#000; }

.order_info_wrap .order_info_textwrap { display:block; }
.order_info_wrap .order_info_textwrap .textwrap_01 { margin-top:15px; }
.order_info_wrap .order_info_textwrap .textwrap_01 p.info_text { font-size:16px; line-height:1.5; letter-spacing:-0.5px; }

.order_info_wrap .order_info_textwrap .textwrap_02 { margin:20px 0 50px; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul { display: grid; grid-template-columns:1fr 1fr; gap:20px; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul li { display: flex; align-items: center; background-color:#fff; padding:20px; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul li p.circle { display:inline-block; width:40px; height:40px; line-height:40px; font-size:25px; font-weight:800; color:#fff; background-color:#222; text-align:center; border-radius:100%; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul li div { display:inline-block; margin-left:20px; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul li div h1 { display:block; font-size:20px; line-height:40px; color:#000; }
.order_info_wrap .order_info_textwrap .textwrap_02 ul li div > p { font-size:14px; line-height:1.5; }

.order_info_wrap .order_info_textwrap .img_wrap { display:block; border-radius:25px; overflow:hidden; }
.order_info_wrap .order_info_textwrap .img_wrap img { width:100%; }

.order_info_wrap .work_info_textwrap { display:block; margin-top:80px; }
.order_info_wrap .work_info_textwrap .textwrap_01 { margin-top:15px; }
.order_info_wrap .work_info_textwrap .textwrap_01 p.info_text { font-size:16px; line-height:1.5; letter-spacing:-0.5px; }

.order_info_wrap .work_info_textwrap .textwrap_02 { margin:20px 0 50px; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul { display: grid; grid-template-columns:1fr 1fr; gap:20px; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li.left { display:inline-block; background-color:#eee; padding:20px; border-radius:25px; color:#000; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li.right { display:inline-block; background-color:#333; padding:20px; border-radius:25px; color:#fff; }

.order_info_wrap .work_info_textwrap .textwrap_02 ul li p.division { display:inline-block; line-height:38px; font-size:18px; font-weight:700; color:#fff; background-color:#222; padding:0 15px; text-align:center; border-radius:11px; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li.left p.division { color:#fff; background-color:#222; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li.right p.division { color:#000; background-color:#fff; }

.order_info_wrap .work_info_textwrap .textwrap_02 ul li div { display:block; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li div h1 { display:block; font-size:20px; line-height:50px; }
.order_info_wrap .work_info_textwrap .textwrap_02 ul li div > p { font-size:16px; line-height:40px; font-weight:500; }

.order_info_wrap .work_info_textwrap .textwrap_02 ul li div > p.info { display:inline-block; font-size:14px; line-height:28px; font-weight:700; background-color:#000; color:#fff; border-radius:15px; margin-top:10px; padding:0 10px; }

.order_info_wrap .work_info_textwrap .img_wrap { display:block; border-radius:25px; overflow:hidden; }
.order_info_wrap .work_info_textwrap .img_wrap img { width:100%; }



.order_info_wrap .member_info_textwrap { display:block; margin-top:80px; }
.order_info_wrap .member_info_textwrap .textwrap_01 { margin-top:15px; }
.order_info_wrap .member_info_textwrap .textwrap_01 p.info_text { font-size:16px; line-height:1.5; letter-spacing:-0.5px; }

.order_info_wrap .member_info_textwrap .textwrap_02 { margin:20px 0 50px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul { display: grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.left { display:inline-block; background-color:#eee; padding:20px; border-radius:25px; color:#000; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.center { display:inline-block; background-color:#333; padding:20px; border-radius:25px; color:#fff; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.right { display:inline-block; background-color:#ffe5e5; padding:20px; border-radius:25px; color:#000; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li p.division { display:inline-block; line-height:38px; font-size:18px; font-weight:700; color:#fff; background-color:#222; padding:0 15px; text-align:center; border-radius:11px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.left p.division { color:#fff; background-color:#222; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.center p.division { color:#000; background-color:#fff; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.right p.division { color:#fff; background-color:#ff7e7e; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li div { display:block; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li div h1 { display:block; font-size:20px; line-height:50px; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li.left div > .s_title { position: relative; display:block; font-size:18px; line-height:35px; font-weight:600; padding-left:15px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.left div > .s_title:before { content: ""; position: absolute; top:50%; left:0; transform: translate( 0, -50%); width:7px; height:7px; background-color:#000; border-radius:100%; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li.center div > .s_title { position: relative; display:block; font-size:18px; line-height:35px; font-weight:600; padding-left:15px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.center div > .s_title:before { content: ""; position: absolute; top:50%; left:0; transform: translate( 0, -50%); width:7px; height:7px; background-color:#fff; border-radius:100%; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li.right div > .s_title { position: relative; display:block; font-size:18px; line-height:35px; font-weight:600; padding-left:15px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li.right div > .s_title:before { content: ""; position: absolute; top:50%; left:0; transform: translate( 0, -50%); width:7px; height:7px; background-color:#000; border-radius:100%; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li div > p { font-size:16px; line-height:40px; font-weight:500; margin-bottom:30px; }
.order_info_wrap .member_info_textwrap .textwrap_02 ul li div > p > span { display:block; font-size:15px; line-height:1.8; font-weight:500; }

.order_info_wrap .member_info_textwrap .textwrap_02 ul li div > p.info { display:inline-block; font-size:14px; line-height:28px; font-weight:700; background-color:#000; color:#fff; border-radius:15px; margin-top:10px; padding:0 10px; }

.order_info_wrap .member_info_textwrap .img_wrap { display:block; border-radius:25px; overflow:hidden; }
.order_info_wrap .member_info_textwrap .img_wrap img { width:100%; }




/* 무료컨설팅 css */
.edu_wrap { display:block; background-color:#fff; margin-bottom:80px; }
.edu_wrap ul { font-size:0; padding:0; margin:0; }
.edu_wrap ul li { display:inline-block; width:50%; font-size:14px; vertical-align:top; }
.edu_wrap ul li.left .text_wrap { padding: 3%; color:#000; }
.edu_wrap ul li.left .text_wrap h1 { display:block; font-size:28px; line-height:50px; }
.edu_wrap ul li.left .text_wrap h2 { display:block; font-size:16px; line-height:20px; }
.edu_wrap ul li.left .text_wrap p { display:block; font-size:14px; font-weight:400; line-height:2; letter-spacing:-0.5px; margin-top:30px; }
.edu_wrap ul li.right { background:url("http://pp8282.shop/images/company/06.jpg") center center no-repeat; height:450px; background-size:auto 100%; }

.edu_img_wrap { display:block; margin-bottom:80px; }
.edu_img_wrap .img_wrap { display:block; border-radius:25px; overflow:hidden; }
.edu_img_wrap .img_wrap img { width:100%; }

.review_wrap { display:block; width:100%; color:#666; }
.review_wrap .main_title span { display:block; font-size:16px; line-height:20px; }
.review_wrap .main_title h2 { display: block; font-size: 28px; line-height: 50px; color:#000; }

.review_wrap .textwrap_01 { margin-top:15px; }
.review_wrap .textwrap_01 p.info_text { position: relative; font-size:16px; line-height:1.5; letter-spacing:-0.5px; }
.review_wrap .textwrap_01 p.info_text > span { position: absolute; bottom:0; right:0; display:block; background-color:#ffd400; color:#000; font-weight:600; font-size:14px; padding:0 10px; line-height:30px; border-radius:5px; }
.review_wrap .textwrap_01 p.info_text > span a { display:block; }

.review_wrap .review { display:block; margin-top:20px; background-color:#fff; overflow:hidden; padding:30px 50px; }
.review_wrap .review > ul { font-size:0; padding:0; margin:0; }
.review_wrap .review > ul > li { display:inline-block; vertical-align:top; width:calc(50% - 25px); }
.review_wrap .review > ul > li > img { width:100%; max-width:681px; }
.review_wrap .review > ul > li.review_point { float:right; text-align:right; }

.review_wrap .review .review_roll { position: relative; height:457px; overflow:hidden; text-align:center; }
.review_wrap .review .review_roll .swiper-container { height:457px; text-align: center; }
.review_wrap .review .review_roll .swiper-container .swiper-wrapper .swiper-slide img { width:100%; }

.review_wrap .review .review_roll .swiper-button-next { top:auto !important; bottom:20px !important; right:10px !important; color:#333 !important; width:30px !important; height:30px !important; }
.review_wrap .review .review_roll .swiper-button-prev { top:auto !important; bottom:20px !important; left:10px !important; color:#333 !important; width:30px !important; height:30px !important; }
.review_wrap .review .review_roll .swiper-button-next:hover { color:#ffc000 !important; }
.review_wrap .review .review_roll .swiper-button-prev:hover { color:#ffc000 !important; }

.review_wrap .review .review_roll .swiper-pagination { top:auto !important; bottom: 30px !important; right:0 !important; left: 0 !important; width: 100%; transform:none !important; }
.review_wrap .review .review_roll .swiper-pagination-bullet { width: 7px; height: 7px; display: inline-block !important; background: #ccc; opacity: 1; border-radius: 10px; margin: 0 3px !important; }
.review_wrap .review .review_roll .swiper-pagination-bullet-active { background: #ffc000; opacity: 1; transition: all 0.3s; }

.review_wrap .review .review_roll .swiper-button-next i { font-size:30px !important; line-height:30px !important; font-weight:bold; }
.review_wrap .review .review_roll .swiper-button-prev i { font-size:30px !important; line-height:30px !important; font-weight:bold; }
.review_wrap .review .review_roll .swiper-button-next:after, .swiper-button-prev:after { display:none; }


.edu_info_wrap { display:block; background-color:#222; margin:80px 0; }
.edu_info_wrap ul { font-size:0; padding:0; margin:0; }
.edu_info_wrap ul li { display:inline-block; width:50%; font-size:14px; vertical-align:top; }
.edu_info_wrap ul li.left { background:url("http://pp8282.shop/images/company/07.jpg") center center no-repeat; height:450px; background-size:auto 100%; }
.edu_info_wrap ul li.right .text_wrap { padding: 3%; color:#fff; }
.edu_info_wrap ul li.right .text_wrap h1 { display:block; font-size:28px; line-height:50px; }
.edu_info_wrap ul li.right .text_wrap h2 { display:block; font-size:16px; line-height:20px; }
.edu_info_wrap ul li.right .text_wrap p { display:block; font-size:14px; font-weight:400; line-height:2; letter-spacing:-0.5px; }

.edu_info_wrap ul li.right div > .s_title { position: relative; display:block; font-size:18px; line-height:35px; font-weight:600; padding-left:15px; margin-top:20px; }
.edu_info_wrap ul li.right div > .s_title:before { content: ""; position: absolute; top:50%; left:0; transform: translate( 0, -50%); width:7px; height:7px; background-color:#fff; border-radius:100%; }





















/* Font */
.txtInfo { color:#707070; }
.txtWarn { color:#f76560; }
.txtEm { color:#000; }
.txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; }
.strike strong, .discount strong { font-weight:normal; }
.txtNormal { font-weight:normal; font-style:normal; }
.txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt14 { font-size:14px; }
.txt16 { font-size:16px; }
.txt18 { font-size:18px; letter-spacing:-1px; }
.txtIcon { font-size:12px; font-style:normal; }
.txtBreak { word-break:break-all; word-wrap:break-word; }
/* JP, TW, CN */
html:lang(ja) .txt11,
html:lang(zh) .txt11,
html:lang(zh-tw) .txt11 { font-size:12px; }

/* grid */
.gBlank5 { margin-top:5px; }
.gBlank10 { margin-top:10px; }
.gBlank20 { margin-top:20px; }
.gBlank30 { margin-top:30px; }
.gIndent10 { margin-left:10px; }
.gIndent20 { margin-left:20px; }
.gSpace10 { margin-right:10px; }
.gSpace20 { margin-right:20px; }
.gMerge { position:relative; z-index:1; margin-top:-1px; }



/* ec-base-qty */
.ec-base-qty { position:relative; display:inline-block; width:60px; margin:0 0 0 30px; text-align:left; }
.ec-base-qty input[type="text"] { width:30px; height:30px; padding:0; line-height:30px; border:1px solid #d4d8d9; text-align:center; box-sizing: border-box; }
.ec-base-qty .up { position:absolute; left:29px; top:0; }
.ec-base-qty .down { position:absolute; left:-29px; top:0; }
.ec-base-qty a img { opacity: 0; position: relative; z-index: 100; }
.ec-base-qty a.up:after { content: "+"; background-color:#fff; position: absolute; top: 0; left: 0; width: 30px; height:30px; text-align: center; line-height: 25px; font-size: 23px; color:#000; font-weight:300; border: 1px solid #d4d8d9; box-sizing: border-box; vertical-align:top; }
.ec-base-qty a.down:after { content: "-"; background-color:#fff; position: absolute; top: 0; left: 0; width: 30px; height:30px; text-align: center; line-height: 25px; font-size: 30px; color:#000; font-weight:300; border: 1px solid #d4d8d9; box-sizing: border-box; vertical-align:top; }




/* ec-base-chk */
.ec-base-chk { display:inline-block; position:relative; margin:0 5px 0; width:22px; height:22px; vertical-align:top; cursor:pointer; }
.ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("http://pp8282.shop/images/bg_join_check.png") no-repeat 0 0; }
.ec-base-chk input:checked + .checkbox { background-position:-34px 0; }

/* Form */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }

input,select,textarea { font-size:12px; color:#000; vertical-align:middle; outline: none; float: none; box-sizing: border-box; }
input[type=radio],
input[type=checkbox] { width:13px; height:13px; border:0; }
input[type=text],
input[type=password] { height:35px; line-height:35px; padding:0 7px; border:1px solid #eee; color:#000; font-size:12px; box-sizing: border-box; }
input[type=radio] + label, input[type=checkbox] + label { margin:0 5px 0 5px; }

select { height:35px; line-height:35px; border:1px solid #eee; padding:0 35px 0 10px; appearance: none; background: url("http://pp8282.shop/images/select_btn.png") no-repeat right 15px center #fff; }

textarea { padding:5px; border:1px solid #eee; line-height:1.5; box-sizing: border-box; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#000; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#000; }
input::-moz-placeholder, textarea::-moz-placeholder { color:#000; opacity:1; }
legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; }

table tr.radioType input,
span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; }

.gLabel { display:inline-block; }
.gLabel label { margin-right:20px; line-height:22px; }
.fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fWidthFull select { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.fList.typeHor .gLabel { margin-right:20px; }
.fList.typeVer .gLabel { display:block; }


input[type="checkbox"] { width:20px; border-radius:0; height:20px; border:0; background:url("http://pp8282.shop/images/bg_checkbox.png") no-repeat 0 0; background-size:20px 20px; -webkit-appearance:none; }
input[type="radio"] { width:20px; height:20px; border:0; border-radius:50%; background:url("//img.echosting.cafe24.com/skin/mobile/common/bg_radio.png") no-repeat 0 0; background-size:20px 20px; -webkit-appearance:none; }

input[type="checkbox"]:checked { background-image:url("http://pp8282.shop/images/bg_checkbox_checked.png"); -webkit-appearance:none; }
input[type="radio"]:checked { background-image:url("http://pp8282.shop/images/bg_radio_checked.png"); -webkit-appearance:none; }
.ec-base-tooltip { display:none; z-index:2; position:absolute;}
.ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; }
.ec-base-tooltip h3 + p { margin:0 5px 10px; }
.ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; }
.ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; }
.ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; }
.ec-base-tooltip .edge:before,
.ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0;  }
.ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; }
.ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; }
.ec-base-tooltip table th,
.ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #e8e8e8; line-height:1.5em; }
.ec-base-tooltip table th { padding-right:0; background:#fbf9fa; }
.ec-base-tooltip table thead th { text-align:center; }
.ec-base-tooltip table tbody th { text-align:left; }
.ec-base-tooltip table .left { text-align:left; }
.ec-base-tooltip table .center { text-align:center; }
.ec-base-tooltip table .right { text-align:right; }
.ec-base-tooltip table .info { padding:0; color:#757575; }
.ec-base-tooltip table p.info:before,
.ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; }
.ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; }
.ec-base-tooltip p.bullet,
.ec-base-tooltip ul.bullet { margin:8px 10px; }
.ec-base-tooltip p.bullet:before,
.ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; }
.ec-base-tooltip ul.bullet li { line-height:1.5em; }
.ec-base-tooltip .txtEm { color:#008bcc; }
.ec-base-tooltip .txtWarn { color:#f65b54; }

/* typeUpper */
.ec-base-tooltip.typeUpper { top:auto; bottom:34px; }
.ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; }
.ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; }
.ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; }
span.ec-base-help,
p.ec-base-help,
ul.ec-base-help li { margin:10px 9px; padding:1px 0 1px 20px; line-height:1.4; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; }

div.ec-base-help { margin:20px 0; border:1px solid #eee; line-height:1.7; background:#fff; }
div.ec-base-help > h2,
div.ec-base-help > h3 { padding:10px 0 10px 10px; border-bottom:1px solid #eee; font-size:13px; background:#fafafa; }
div.ec-base-help .inner { padding:0 10px 20px; }
div.ec-base-help h4 { margin:22px 0 -4px; font-size:15px; font-weight:normal; }
div.ec-base-help h4:first-child { margin-top:20px; }
div.ec-base-help p { margin:15px 0 0 10px; }
div.ec-base-help ul,
div.ec-base-help ol { margin:15px 0 0 11px; }
div.ec-base-help li { color:#333; font-weight:400; }

/* number */
div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; }
div.ec-base-help ol .item1 { background-position:-484px 3px; }
div.ec-base-help ol .item2 { background-position:-434px -99px; }
div.ec-base-help ol .item3 { background-position:-384px -199px; }
div.ec-base-help ol .item4 { background-position:-334px -299px; }
div.ec-base-help ol .item5 { background-position:-284px -399px; }
div.ec-base-help ol .item6 { background-position:-234px -499px; }
div.ec-base-help ol .item7 { background-position:-184px -599px; }
div.ec-base-help ol .item8 { background-position:-134px -699px; }
div.ec-base-help ol .item9 { background-position:-84px -799px; }
div.ec-base-help ol .item10 { background-position:-34px -899px; }

/* typeDash */
div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 10px; }
.ec-base-help.typeDash li { padding:0 0 0 11px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 10px; }
.ec-base-tooltip .ec-base-help.typeDash li { margin:2px 0; }
.ec-base-product { margin:22px 0 0;}
.ec-base-product .title { margin:0 0 40px; }
.ec-base-product .title h2 { font-size:20px; color:#000; text-align:center; font-weight:700; }
.ec-base-product .title h3 { font-size:15px; color:#000; text-align:center; font-weight:500; }
.ec-base-product img { vertical-align:middle; }
.ec-base-product a[href^='/product/detail.html'] > img { border:1px solid #ececec; }

.ec-base-product .prdList { width:100%; min-width:1000px; font-size:0; line-height:0; }
.ec-base-product .prdList > li { position:relative; display:inline-block; color:#757575; vertical-align:top; }

.ec-base-product .prdList .chk { position:absolute; top:-10px; left:0; right:0; display:block; margin:0 0 10px; }
.ec-base-product .prdList .thumbnail { position:relative; text-align:center; }
.ec-base-product .prdList .thumbnail .prdImg { position:relative; border:1px solid #eee; }
.ec-base-product .prdList .thumbnail .prdImg a { display:block; overflow:hidden; }
.ec-base-product .prdList .thumbnail a img { max-width:100%; box-sizing:border-box; }
.ec-base-product .prdList .thumbnail .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; }
.ec-base-product .prdList .description .icon { vertical-align:middle; }
.ec-base-product .prdList .description .icon:after { content:""; display:block; clear:both; }
.ec-base-product .prdList .description .icon .promotion { margin:10px 0px 0 0; text-align:left; }
.ec-base-product .prdList .description .icon .promotion img { margin:0 1px 0 0; border-radius:2px; }

.ec-base-product .prdList .thumbnail .likeButton { position:absolute; visibility: hidden; left:-5px; top:5px; z-index:9; opacity: 0; transition: all 0.3s ease;}
.ec-base-product .prdList .thumbnail .likeButton button { position:relative; padding:3px 5px 5px 5px !important; background:#fff !important; color:#999; font-size:10px; font-weight:bold; vertical-align:middle; border: 1px solid #bbb; border-top-right-radius:8px; border-bottom-right-radius:8px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }
.ec-base-product .prdList .thumbnail .likeButton button img { margin:0 2px 0 0; vertical-align:middle; width:15px; }
.ec-base-product .prdList .thumbnail .likeButton button strong {height:16px; vertical-align:middle; }
.ec-base-product .prdList .thumbnail .likeButton.selected button { color:#ff6666; }
.ec-base-product .prdList .thumbnail .likeButton button:after { content:""; position: absolute; top:-5px; left: 0; z-index: 997; width:0px; height:0px; border-bottom:5px solid #333; border-left:5px solid transparent; transition: all 0.3s ease;}

.ec-base-product .prdList .thumbnail .button { position:absolute; display:block; top:5px; right:0px; z-index:11; transition: all 0.3s ease; width:30px; }
.ec-base-product .prdList .thumbnail .button img { display:inline-block; cursor:pointer; text-align:center; }
.ec-base-product .prdList .thumbnail .button .option a img { display:block; border:1px solid #e1e1e1; background:rgba(255,255,255,.8); padding:5px 3px; }
.ec-base-product .prdList .thumbnail .button .option .option_close img { display:block; border:none; background:none; }
.ec-base-product .prdList .thumbnail .button .basket_icon img { display:block; margin:-1px 0 auto; border:1px solid #e1e1e1; background:rgba(255,255,255,.8); padding:5px 3px; }
.ec-base-product .prdList .thumbnail .button .zoom_icon img { display:block; margin:-1px 0 auto; border:1px solid #e1e1e1; background:rgba(255,255,255,.8); padding:5px 3px; }
.ec-base-product .prdList .thumbnail .button .wish img { display:block; }

.ec-base-product .prdList .thumbnail .button .option a img:hover { border:1px solid #000; background:rgba(0,0,0,1); }
.ec-base-product .prdList .thumbnail .button .option .option_close img:hover { border:none; background:none; }
.ec-base-product .prdList .thumbnail .button .basket_icon img:hover { border:1px solid #000; background:rgba(0,0,0,1); }
.ec-base-product .prdList .thumbnail .button .zoom_icon img:hover { border:1px solid #000; background:rgba(0,0,0,1); }


.ec-base-product .prdList .thumbnail:hover .likeButton { visibility: visible; opacity: 1; }

.ec-base-product .prdList .description { font-size:12px; position:relative; margin-bottom:60px; }
.ec-base-product .prdList .description .name { display:block; text-align:left; margin: 10px 0 5px; }
.ec-base-product .prdList .description .name a { color:#2e2e2e !important; }
.ec-base-product .prdList .description .name a span { color: #222 !important; font-size: 15px !important; letter-spacing: -0.3px; font-weight: 500; line-height:24px; }
.ec-base-product .prdList .description .mileage { display:block; }
.ec-base-product .prdList .description span.grid { display:block; }

/* grid */
.ec-base-product ul.grid2 { display: grid; grid-template-columns:1fr 1fr; gap:30px; }
.ec-base-product ul.grid3 { display: grid; grid-template-columns:1fr 1fr 1fr; gap:25px; }
.ec-base-product ul.grid4 { display: grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:20px; }
.ec-base-product ul.grid5 { display: grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:15px; }


/* right display */
.ec-base-product ul.grid2 li:after { content:""; display:block; clear:both; }
.ec-base-product ul.grid2 li .thumbnail { float:left; width:220px; text-align:left; margin:0; }
.ec-base-product ul.grid2 li .description { float:left; width:247px; padding:0 20px; }
.ec-base-product ul.grid2 li .description .chk { position:static; text-align:left; }

/* module="product_ListItem" */
.ec-base-product .spec { text-align:left; }
.ec-base-product .spec li { display:block; vertical-align:middle; line-height:24px; padding:0; letter-spacing:-0.5px; font-weight:400; }
.ec-base-product .spec li .title { font-weight:normal; vertical-align:top; color:#000 !important; }
.ec-base-product .spec li .title span { vertical-align:top; }
.ec-base-product .spec li .color { clear:both; display:block; padding-top:10px; width:100%; }
.ec-base-product .spec li .chips { display:inline-block; width:10px; height:3px; margin:0 2px; border:1px solid rgba(0,0,0,0.18); font-size:0; line-height:0; }
.ec-base-product .spec li.inline_custom { display:inline-block; padding:0 7px 0 0; line-height:25px; vertical-align:top; }

.ec-base-product .spec li.prd_price_sale { display:inline-block; padding:0; line-height:23px; vertical-align:top; border-top:1px dashed #999; border-bottom:1px dashed #999; }

.ec-base-product .discountPeriod { display:block; z-index:10; position:relative; width:100%; vertical-align:middle; height:40px;}
.ec-base-product .discountPeriod img { display:none; }
.ec-base-product .layerDiscountPeriod { display:block; overflow:hidden; position:absolute; left:0; top:3px; width:100%; height:35px; border:1px solid #ddd; background:#fff;}
.ec-base-product .layerDiscountPeriod strong.title { display:none; font-weight:bold; color:#2e2e2e; }
.ec-base-product .layerDiscountPeriod .content { display:block; overflow:hidden; height:35px; }
.ec-base-product .layerDiscountPeriod .content p { margin:5px 0 0; font-size:0; line-height:54px; color:#555; text-align:center; width:100%; }
.ec-base-product .layerDiscountPeriod .content strong { font-size:12px; color:#e7305b; line-height:24px; }
.ec-base-product .layerDiscountPeriod .content p:last-child { display:none; }


.ec-base-product .prdList .shippingFee { position:relative; display:inline-block; }
.ec-base-product .prdList .shippingFee .button { display:inline-block; float:none; }
.ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index:11; display:block; margin:0 0 0 -170px; width:360px; }
.ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width:40px; }
.ec-base-product .prdList .shippingFee .ec-base-tooltip table th,
.ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; }

.ec-base-product .btnTooltip { position:relative; display:inline-block; }
.differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; }
.differentialShipping h3.title { margin:0; height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; }
.differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; }
.differentialShipping .close { position:absolute; right:14px; top:12px; }
.differentialShipping .close img { cursor:pointer; }
.differentialShipping .content ul { color:#757575; line-height:25px; }
.differentialShipping .content li { overflow:hidden; }
.differentialShipping .content li strong { float:left; font-weight:normal; }
.differentialShipping .content li span { float:right; color:#2e2e2e; }
.differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; color:#80aeef; text-align:right; }

/* Thumbnail icon position */
.ec-product-bgLT { background-position:left top; }
.ec-product-bgLC { background-position:left center; }
.ec-product-bgLB { background-position:left bottom; }
.ec-product-bgRT { background-position:right top; }
.ec-product-bgRC { background-position:right center; }
.ec-product-bgRB { background-position:right bottom; }
.ec-product-bgCT { background-position:center top; }
.ec-product-bgCC { background-position:center center; }
.ec-product-bgCB { background-position:center bottom; }

.ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; }
.ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; }
.ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #d7d5d5; font-size:12px; color:#000; vertical-align:top; *display:inline; *zoom:1; }
.ec-base-paginate li:first-child { margin-left:0; }
.ec-base-paginate img { vertical-align:top; }
.ec-base-paginate li a { display:block; width:33px; padding:9px 0; color:#000; line-height:14px; background:#fff; }
.ec-base-paginate li a:hover { text-decoration:none; background:#000; color:#fff; }
.ec-base-paginate li a.this { padding-bottom:7px; border-bottom:2px solid #000; color:#000; font-weight:bold; }
.ec-base-paginate li a.this:hover { color:#fff; }
.ec-base-paginate a.nolink { cursor:default; }

/* typeSub */
.ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; }
.ec-base-paginate.typeSub li { font-size:12px; border:0; }
.ec-base-paginate.typeSub img { vertical-align:middle; }
.ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#353535; background:none; }
.ec-base-paginate.typeSub li a.this { color:#000; text-decoration:none; border:0; }
.ec-base-paginate.typeSub .first { margin-right:3px; }
.ec-base-paginate.typeSub .last { margin-left:3px; }
.ec-base-tab { position:relative; }
.ec-base-tab .menu { font-size:0; margin:0 0 20px; border-bottom:1px solid #eee; box-sizing:border-box; }
.ec-base-tab .menu:after { content:""; display:block; clear:both; }
.ec-base-tab .menu li { display:inline-block; background:#eee; box-sizing:border-box; overflow:hidden; }
.ec-base-tab .menu li a { display:block; min-width:187px; font-size:14px; margin:0 0 0 -1px; padding:10px 5px 10px; color:#999; text-decoration:none; outline:0; text-align:center; background:#fff; border:1px solid #eee; border-bottom:0; box-sizing: border-box; }
.ec-base-tab .menu li:first-child a { margin-left:0; }
.ec-base-tab .menu li.selected a { position:relative; color:#fff; background:#333; }
.ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; }

.ec-base-tab .menu li span.review_count { display:inline-block; font-size:12px; line-height:20px; background:#333; color:#fff; margin-left:5px; padding:0 7px; border-radius:5px; }
.ec-base-tab .menu li span.qna_count { display:inline-block; font-size:12px; line-height:20px; background:#333; color:#fff; margin-left:5px; padding:0 7px; border-radius:5px; }

.ec-base-tab .menu li.selected span.review_count { background:#fff; color:#000; }
.ec-base-tab .menu li.selected span.qna_count { background:#fff; color:#000; }

/* typeLight */
.ec-base-tab.typeLight .menu li.selected { margin:0 0 -1px; border-bottom:1px solid #fff; color:#000; background:#000; }

/* grid (2~7) */
.ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; }
.ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; border:0; }
.ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; padding:11px 0; background:#fafafa; border:0; }
.ec-base-tab[class*="grid"] .menu li.selected { position:relative; border-top-left-radius:10px; border-top-right-radius:10px; top:1px; background:#fff; border:1px solid #ccc; border-bottom:0;}
.ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; }
.ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; color:#000; border-bottom:0;}
.ec-base-tab.grid2 .menu li { width:50.5%; }
.ec-base-tab.grid3 .menu li { width:34%; }
.ec-base-tab.grid4 .menu li { width:25.5%; }
.ec-base-tab.grid5 .menu li { width:20.5%; }
.ec-base-tab.grid6 .menu li { width:17%; }
.ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; }
.ec-base-tab.grid7 .menu li:first-child { width:13% \0/; }

/* gFlex */
.ec-base-tab.gFlex .menu { display:flex; border-bottom:1px solid #ccc; box-sizing: border-box; }
.ec-base-tab.gFlex .menu:after { display:none; }
.ec-base-tab.gFlex .menu li { display:flex; align-items: center; float:none; flex:1; position:relative; border:0; background:#fafafa; }  
.ec-base-tab.gFlex .menu li:last-child { border:0; }  
.ec-base-tab.gFlex .menu li a { width:100%; min-width:0; background:none; word-break:break-all; border:none; margin:0 0 -1px 0; line-height:27px; }
.ec-base-tab.gFlex .menu li a:hover { color:#000; font-weight:bold;}
.ec-base-tab.gFlex .menu li a:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; }
.ec-base-tab.gFlex .menu li.selected { border:0px solid #ccc; border-bottom:0; background: #333 !important; }
.ec-base-tab.gFlex .menu li.selected a { left:0; color:#fff; position: initial; }
/* button */
[class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:0 10px; border:1px solid #eee; font-size:13px; line-height:33px; height: 35px; font-weight:normal; text-decoration:none; vertical-align:middle; letter-spacing:0; text-align:center; white-space:nowrap; color:#000; background-color:#fff; }
[class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:0 10px; border:1px solid #eee; font-size:13px; line-height:33px; height: 35px; font-weight:normal; text-decoration:none; vertical-align:middle; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#000; }
[class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:0 10px; border:1px solid #eee; font-size:13px; line-height:33px; height: 35px; font-weight:normal; text-decoration:none; vertical-align:middle; letter-spacing:0; text-align:center; white-space:nowrap; color:#000; background-color:#fff; }
[class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:0 10px; border:1px solid #eee; font-size:13px; line-height:33px; font-weight:normal; text-decoration:none; vertical-align:middle; letter-spacing:0; text-align:center; white-space:nowrap; color:#000; background-color:#fff; }
[class^='btnNormal']:not(.disabled):hover { background-color:#eee; color:#000; }
[class^='btnSubmit']:not(.disabled):hover { background-color:#eee; color:#000; border:1px solid #eee;}
[class^='btnEm']:not(.disabled):hover { background-color:#fff; color:#000; border:1px solid #eee; }
[class^='btnBasic']:not(.disabled):hover { background-color:#fff; color:#000; border:1px solid #999; }
[class^='btnNormal'].disabled { border-color:#e3e3e3; color:#999; }
[class^='btnSubmit'].disabled { background-color:#9297a2; color:#f0f0f0; }
[class^='btnEm'].disabled { background-color:#b5b6b9; color:#f0f0f0; }
[class^='btnBasic'].disabled { color:#999; }


/* width Fix */
[class^='btn'][class*='Fix'] { width:72px; word-break:keep-all; word-wrap:break-word; }
[class^='btn'][class*='Fix'].sizeS { width:96px; }
[class^='btn'][class*='Fix'].sizeM { width:120px; padding-left:8px; padding-right:8px; }
[class^='btn'][class*='Fix'].sizeL { width:160px; padding-left:8px; padding-right:8px; }

/* icon button */
a.btnLink { color:#222;  }
a.btnLink:hover { text-decoration:none; }
a.btnLink:after { content:""; text-decoration:none; display:inline-block; margin:-2px -2px 0 3px; vertical-align:middle; border:0 0 0 10px; border-style:solid;  border-color:transparent transparent transparent #77797d; }
[class^='btn'] i { display:none \0/IE8; }
[class^='btn'] .icoArrow { display:inline-block; width:3px; height:3px; margin:-2px 1px 0 1px; border:1px solid #333; border-width:0 2px 2px 0; vertical-align:middle;
transform:rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg);
}
[class^='btnSubmit'] .icoArrow,
[class^='btnEm'] .icoArrow { border-color:#f0f0f0; }
[class^='btn'] .icoDelete { position:relative; overflow:hidden; display:inline-block; width:11px; height:11px; margin:-2px 2px 0 0; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
[class^='btn'] .icoDelete:before { content:""; position:absolute; top:0; right:5px; width:1px; height:11px; background:#000; }
[class^='btn'] .icoDelete:after { content:""; position:absolute; top:5px; right:0; width:11px; height:1px; background:#000; }
[class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after,
[class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background:#000; }
[class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position:relative; overflow:hidden; display:inline-block; width:8px; height:8px; margin:-2px 2px 0 0; vertical-align:middle; }
[class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; background:#77797d; }
[class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height:1px; margin:-1px 0 0 -4px; }
[class^='btn'] .icoAdd:after { width:1px; margin:-4px 0 0 -1px; }
[class^='btn'] img { margin:-2px 1px 0; vertical-align:middle; }

/* unique */
.btnLogin, a.btnLogin { display:inline-block; box-sizing:border-box; width:100px; height:70px; line-height:70px; text-align:center; font-size:15px; font-weight:bold; text-decoration:none; color:#fff; background-color:#000; }
.btnLogin:hover { background-color:#fff; border:1px solid #d1d1d1; color:#000; }
.btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #d1d1d1; text-align:center; font-size:12px; font-weight:bold; color:#222; text-decoration:none; background-color:#fff; }
.btnAgree:hover { background-color:#f3f3f3; }
.btnToggle { display:inline-block; font-size:0; line-height:0; }
.btnToggle button { display:inline-block; box-sizing:border-box; border:1px solid #d1d1d1; margin:0 -1px 0 0; padding:0 7px; height:24px; line-height:24px; text-align:center; font-size:12px; outline:0; text-decoration:none; color:#222; background:#fff; }
.btnToggle button:first-child { }
.btnToggle button:last-child { }
.btnToggle button.selected { position:relative; border:1px solid #84868b; color:#fff; background:#84868b; }

/* ec-base-button */
.ec-base-button { padding:10px 0; text-align:center; }
.ec-base-button.justify { position:relative; }
.ec-base-button:after { display:block; content:""; clear:both; }
.ec-base-button .gLeft { float:left; text-align:left; }
.ec-base-button .gRight { float:right; text-align:right; }
.ec-base-button.justify .gLeft { position:absolute; left:0; }
.ec-base-button.justify .gRight { position:absolute; right:0; }
.ec-base-button .text { margin:0 6px 0 0px; color:#353535; line-height:24px; }

/* type */
.ec-base-button.typeBorder { margin-top:-1px; padding:10px 0; border:1px solid #d7d5d5; }
.ec-base-button.typeBG { padding:10px 0; }

/* gColumn */
.ec-base-button[class*="gColumn"] { margin:0 auto; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; gap:5px; }
.ec-base-button[class*="gColumn"]:after { display:none; }
.ec-base-button[class*="gColumn"] [class^='btn'] { padding-left:8px; padding-right:8px; word-break:keep-all; word-wrap:break-word; white-space:normal; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; }
.ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex:none; -moz-flex:none; -ms-flex:none; flex:none; }

/* gFlex */
.ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex:2; -moz-flex:2; -ms-flex:2; flex:2; }
.ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex:3; -moz-flex:3; -ms-flex:3; flex:3; }
.ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex:4; -moz-flex:4; -ms-flex:4; flex:4; }
/* base */
.ec-base-box { padding:20px 15px; margin-left:auto; margin-right:auto; color:#000; margin:0px auto; }
.ec-base-box.gHalf { position:relative; padding:20px 0; background-color:#fff; border:1px solid #eee; margin:20px 0 0 0; }
.ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#eee; }
.ec-base-box.typeBg { background-color:#fbfafa; }
.ec-base-box.typeThin { border:1px solid #eee; }
.ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:20px; text-align:center; }
.ec-base-box.typeThinBg { border:1px solid #eee; background-color:#fff; }

.ec-base-box.center { text-align:center; }
    /* 약관 */
    .ec-base-box.typeThinBg > .agree { padding:20px; background:#fff; }
    .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; }

/* typeMember */
.ec-base-box.typeMember { display:inline-block; padding:0; width:50%; }
.ec-base-box.typeMember .information { display:table; table-layout:fixed; width:100%; line-height:40px; box-sizing:border-box; padding:10px 0; }
.ec-base-box.typeMember .information > .title,
.ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 10px; width:70px; text-align:center; vertical-align:middle; }
.ec-base-box.typeMember .information > .title { vertical-align:middle; }
.ec-base-box.typeMember .information > .thumbnail img { max-width:70px; }
.ec-base-box.typeMember .information .description { display:table-cell; padding:0 0 0 0; width:auto; font-size:12px; line-height:25px; vertical-align:middle; }
.ec-base-box.typeMember .information .description .txtInfo { line-height:2; margin-top:7px; }


.ec-base-box.typeMember.gMessage { border:1px solid #eee; }
.ec-base-box .message { display:block; font-size:12px; padding:10px 0 10px 35px; border-bottom:1px solid #e8e7e7; background:#fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; }

/* typeProduct */
.ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; }
.ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; }
.ec-base-box.typeProduct .thumbnail { width:100px; }
.ec-base-box.typeProduct .thumbnail img { max-width:90px; border:1px solid #d7d5d5; }
.ec-base-box.typeProduct .information { padding-left:0; }
.ec-base-table table { position:relative; margin:0px 0 0; border-top:0; color:#fff; line-height:1.5; }
.ec-base-table.gLayoutFixed table { table-layout:fixed; }
.ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; }
.ec-base-table table:before { position:absolute; top:0; left:0; display:block; content:""; width:100%; background:#eee; }
.ec-base-table thead th { padding:5px 0 5px; border-bottom:1px solid #eee; color:#000; vertical-align:middle; font-weight:normal; line-height:35px; }
.ec-base-table tbody th { padding:5px 0 5px 10px; border:1px solid #eee; color:#000; text-align:left; font-weight:normal; line-height:35px; }
.ec-base-table th { word-break:break-all; word-wrap:break-word; }
.ec-base-table th:first-child { border-left:0; }
.ec-base-table td { padding:11px 10px 10px; border-top:1px solid #eee; border-bottom:1px solid #eee; color:#000; vertical-align:middle; word-wrap:break-word; word-break:keep-all; }
.ec-base-table td.clear { padding:0 !important; border:0 !important; }

/* horizontal */
/* typeWrite */
.ec-base-table.typeWrite td { padding:8px 10px 7px; }
.ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; }

/* vertical */
/* typeList */
.ec-base-table.typeList table { border-top:1px solid #eee; }
.ec-base-table.typeList table:before { display:none; }
.ec-base-table.typeList td { padding:10px; }
.ec-base-table.typeList tfoot td { padding:15px 0px 30px; }
.ec-base-table .message { border:1px solid #eee; padding:50px 0; text-align:center; color:#757575; font-weight:bold; }
.ec-base-table table + .message { margin:-1px 0 0; }
.ec-base-table table td.message { padding:50px 0; }
.ec-base-table .scroll .message { border:0; }

/* scroll */
.ec-base-table.typeList .head td { padding:11px 0 10px; border-left:1px solid #eee; border-bottom:1px solid #eee; color:#000; vertical-align:middle; text-align:center; background:#fbfafa; }
.ec-base-table.typeList .head td:first-child { border-left:0; }
.ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #eee; border-top-width:0; margin-top:-1px; }
.ec-base-table.typeList .scroll table { border:0; margin:0; }
.ec-base-table.typeList .scroll table:before { display:none; }
.ec-base-table.typeList .scroll .message { border: 0; }

/* thead - blind */
.ec-base-table thead.blind,
.ec-base-table thead.blind th { display:none; }
.ec-base-table thead.blind + tbody tr:first-child th,
.ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; }

/* Line */
.ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; }

/* common */
/* border, background style none */
.ec-base-table.typeClear table:before { display:none; }
.ec-base-table.typeClear table,
.ec-base-table.typeClear th,
.ec-base-table.typeClear td { border:0 none; background:none; }
.ec-base-table.typeClear th { font-weight:bold; }

/* border */
.ec-base-table.gBorder td { }
.ec-base-table.gBorder td:first-child { border-left:0; }
.ec-base-table.gBorder td.gClearLine { border-left:0; }
.ec-base-table.typeList.gBorder tbody td { border-color:#eee; }

/* align */
.ec-base-table .left { text-align:left; }
.ec-base-table .center { text-align:center; }
.ec-base-table .right { text-align:right; }
.ec-base-table.typeList .center td,
.ec-base-table.typeList td.center { padding-left:0; padding-right:0; }

.ec-base-table.typeList .center td.left { padding-left:10px; }
.ec-base-table.typeList .center td.right { padding-right:20px; }

.ec-base-table .top th, .ec-base-table th.top,
.ec-base-table .top td, .ec-base-table td.top { vertical-align:top; }
.ec-base-table .middle th, .ec-base-table th.middle,
.ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; }

/* form */
.ec-base-table img { vertical-align:middle; }

@media print {
.ec-base-table table:before { display:none; }
}
.ec-base-desc { overflow:hidden; text-align:left; }
.ec-base-desc:after { content:""; display:block; clear:both; }
.ec-base-desc dt, .ec-base-desc .term { float:left; width:25%; margin:0 0 2px; padding:0 4px 0 0; line-height:25px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; overflow:hidden; }
.ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; line-height:25px; word-wrap:break-word; word-break:break-all; }
.ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; }

.ec-base-desc dd, .ec-base-desc .desc span { display:inline-block; line-height:25px; margin-left:5px; }

/* size */
.ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:20%; }
.ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:20%; }
.ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; }
.ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; }
.ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; }
.ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; }

/* align */
.ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc,
.ec-base-desc.center, .ec-base-desc .center { text-align:center; }
.ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc,
.ec-base-desc.right, .ec-base-desc .right { text-align:right; }
.ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; }

/* typeBullet */
.ec-base-desc.typeBullet dt,
.ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; }

/* typeDot */
.ec-base-desc.typeDot dt,
.ec-base-desc.typeDot .term { position:relative; padding:0 4px 0 10px; }
.ec-base-desc.typeDot dt:before,
.ec-base-desc.typeDot .term:before { position:absolute; top:50%; left:0; content:""; display:block; width:2px; height:2px; margin:-2px 0 0 0; background:#383838; }

@charset "utf-8";

/**************************************************/

/* 사용하지 않는 기능은 간편하게 일괄 관리하실 수 있는 CSS 입니다.*/
/* 아래 사용방법을 잘 이해하신 후 편리하게 이용하세요.          */

/* -----------------사용방법안내-------------------- */

/*   { display:none !important; } 사용안함 

/*   { } 내용이 없으면 사용함

/*************************************************/

/*------  영역별 기능 온오프 시작  ------*/

/*---  메인페이지 슬라이드 이미지  ---*/
.mainslider { }

/*---  메인페이지 배너 4종 이미지  ---*/
.mainbanner { }

/*---  메인페이지 배너밑 글자  ---*/
.mainbanner_text { }

/*---  메인페이지 베스트 아이템  ---*/
.xans-product-listmain-1 { }

/*---  메인페이지 신상품 아이템  ---*/
.xans-product-listmain-2 { } 

/*---  메인페이지 탭메뉴 상품진열  ---*/
.issue_outer { }

/*---  메인페이지 에디터픽 아이템  ---*/
.xans-product-listmain-3 { } 

/*---  메인페이지 핫딜 아이템  ---*/
.xans-product-listmain-4 { } 

/*---  메인페이지 좌우 롤링상품 영역  ---*/
.xans-product-listmain-5 { } 

/*---  메인페이지 리뷰게시판 최신글  ---*/
#reviewArea { }

/*---  메인페이지 갤러리게시판 최신글  ---*/
#galleryArea {  }

/*---  메인페이지 일반게시판 최신글  ---*/
#boardArea { }

/*---  전체 인스타그램 이미지영역  ---*/
.insta_outer { }

/*---  우측 슬라이드 메뉴 배너영역  ---*/
.right_slide_banner { }

/*---  타임세일  ---*/
.ec-base-timesale { }
@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

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

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

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

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

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

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

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

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

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

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

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

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

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

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

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

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

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

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

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

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

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

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/* reset */
li { list-style:none; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
h1, h3 { margin:0; }

/* common */

.ec-base-layer { position:absolute; z-index:100; background:#fff; }
.ec-base-layer .header { padding:0px 35px 0px 10px; color:#fff; background:#222; }
.ec-base-layer .header > h1,
.ec-base-layer .header > h3 { font-size:13px; line-height:35px; font-weight:normal; }
.ec-base-layer .content { padding:20px 10px 0; font-size:12px;}
.ec-base-layer div.ec-base-help { margin-top:0; }
.ec-base-layer .ec-base-button { padding:20px 0; text-align:center; }
.ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 11px; cursor:pointer; }

/* popup */
#popup .ec-base-layer { position:relative; width:auto;}
#popup .ec-base-layer .totalPrice { }
#popup .ec-base-layer .totalPrice .total { color:#000 !important; }
#popup .ec-base-layer .header { padding:0px 35px 0px 10px; }
#popup .ec-base-layer .close { top:0px; }


/* ec-base-table */
.ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; }
.ec-base-layer .ec-base-table table { line-height:1.4; }
.ec-base-layer .ec-base-table thead th { padding:9px 0 8px; }
.ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; }
.ec-base-layer .ec-base-table td { padding:9px 10px 8px; }

/* horizontal - typeWrite */
.ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; }

/* vertical - typeList */
.ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; }

/* typeBorder */
.ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; }
    
    
    
    
.xans-layout-multishopshipping { display:none; }
.xans-layout-multishopshipping .worldshipLayer { top:303px; left:50%; width:448px; margin:0 0 0 -225px; }
.xans-layout-multishopshipping .worldshipLayer .content { padding:153px 20px 30px;  line-height:1.8; background:url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat; }
.xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; }
.xans-layout-multishopshipping .worldshipLayer .select { margin:10px 0 0; }
.xans-layout-multishopshipping .worldshipLayer .select select { width:100%; }
.xans-layout-conversionpc { background:#fff; padding:45px; text-align:center; }
.xans-layout-conversionpc a {
    margin:20px; padding:20px 40px 20px 110px;
    font-size:68px; color:#63666e; text-decoration:none; text-align:center;
    border:4px solid #9d9db0; border-radius:10px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%;
}