/* BASIC css start */
.lastSlide .listName{padding: 7px 0 0px; line-height: 1.4;  max-height:inherit; white-space: normal;}
#pr-header { display: none; } /* ÆÄ¿ö¸®ºä nav */


/*»ó´Ü ¶ì¹è³Ê*/
.tickerWrap{ background: #333; height:37px; overflow:hidden; width:100%; position:relative; border-bottom: 1px solid #3c3c3c; }
.tickerWrap ul,
.tickerWrap li {margin:0; padding:0; list-style:none; background-color:#000;}
.tickerWrap li a {display:block; height:50px; line-height:37px; color:#fff; text-decoration:none; text-align: center; font-size:14px; font-weight:600; }
a.tickerClose{display: block; color:#000; position: absolute; top:0; right: 0; width: 50px; height: 50px;  line-height:50px; text-align:center; font-size:20px;} 




/* »ó´Ü¸Þ´º */
/*

.header {  width: 100%; height: 55px; }
.headerBox { height: 54px; position: relative;  border-bottom: 1px solid #e5e5e5; background:#fff; }
*/


/* »ó´Ü¸Þ´º ¶ì¹è³Ê¿ë CSS */

.header {  width: 100%; height: 92px; z-index:50; }

.headerBox {position: relative;  height: 91px; background:#000; }
.headerBox.active { position: fixed; width: 100%; top:0; z-index: 50;}
.header .hd_line01 { position: relative; padding: 12px 0; margin: 0 20px; text-align: center;}
.header .hd_line01 a { display: inline-block; margin-top: 5px; font-size: 0; }
.header .hd_line01 #menu { position: absolute; left:0; width: 24px; height: 22px; }
 
.Border_Round img { width:35px; margin-top:1px; z-index:50}

/*.header .hd_line01 #menu.active { background-position:0 -22px; }*/
.header .hd_line01 #menu.active span:nth-child(1) {-webkit-transform: rotate(45deg) translateY(7px) translateX(7px) scaleX(1.3); transform: rotate(45deg) translateY(7px) translateX(7px) scaleX(1.3);}
.header .hd_line01 #menu.active span:nth-child(2) { opacity : 0; }
.header .hd_line01 #menu.active span:nth-child(3) {-webkit-transform: rotate(-45deg) translateY(-8px) translateX(7px) scaleX(1.3); transform: rotate(-45deg) translateY(-8px) translateX(7px) scaleX(1.3);}

.header .hd_line01 #menu span { position: absolute; display: block; width: 100%; height: 1px; background: #fff }
.header .hd_line01 #menu span:nth-child(1) {  }
.header .hd_line01 #menu span:nth-child(2) { top: 10px; }
.header .hd_line01 #menu span:nth-child(3) { top: 20px; }
.header .hd_line01 #basket { position: absolute; right:0; width: 24px; height: 22px; background:url('/design/cosrx/phps/m/header_menu_sp_wh.png') no-repeat center; background-position:0 -66px; background-size: cover; }
.header .hd_line01 #search { position: absolute; right:38px; width: 24px; height: 22px; background:url('/design/cosrx/phps/m/header_menu_sp_wh.png') no-repeat center; background-position:0 -44px; background-size: cover; }
.header .hd_line01 #logo { width: 87px;  }
.header .hd_line01 #logo img { width: 100%; vertical-align: middle; }
.header .hd_line01 .searchBox { display: none; }
.header .hd_line02 { width: 100%; height: 0px; line-height: 50px; background:#fff; }
.header.active .hd_line02 { height: 50px; }
.header .hd_line02 .header-menu { padding: 0 10px; }
.headerSlide .slick-slide a { margin-right: 23px; }
#basket .count{position: absolute;top: -2px;right: -11px;font-size: 10px;   display: inline-block;   padding: 0 8px;   color: #000;   border-radius: 20px;   background: #fff;}
#wrap {position:relative;width:100%;min-width:320px;overflow:hidden}
#header {position:relative;width:100%;z-index:101;}

.gnbWrap {position: relative;height: 80px;border-bottom: 1px solid #ccc;}
#gnb {position:relative;width: 100%;}
#gnb .logo {position:absolute;top: 22px;left:50%;margin-left: -100px;line-height: 36px;z-index:10;font-size: 36px;text-align:center;width: 200px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;}
#gnb .logo a {color:#454545;}
#gnb p.asideOpen {position:absolute;top: 26px;left: 3%;z-index: 9999999;width: 28px;height: 28px;line-height: 28px;text-align: center;font-size: 24px;}
#gnb p.searchBtn {position:absolute;top: 26px;right: 3%;z-index:10;width: 28px;height: 28px;line-height: 26px;text-align: center;font-size: 23px;}
#gnb .gnbact {position: relative;height: 80px;zoom: 1;}
#gnb.act .gnbact {height: 54px;}
#gnb.act {position: fixed;top: -20px;background: #fff;background-color: rgba( 255, 255, 255, 0.8 );height: 54px;z-index: 102;-webkit-box-shadow: 0 1px 2px 0 rgba(168,168,168,0.5);-moz-box-shadow: 0 1px 2px 0 rgba(168,168,168,0.5);box-shadow: 0 1px 2px 0 rgba(168,168,168,0.5);}
#gnb.act .logo { font-size: 26px;}


#header .headerTop {position:relative;height: 30px;border-bottom: 1px solid #eee;zoom: 1;}
#header .headerTop li {width: 20%;float:left;text-align:center;line-height: 30px;position: relative;}
#header .headerTop a {display: block;font-size: 11px;color: #777;}
#header .headerTop a:before { display: block; content: ""; position: absolute; top: 11px; width:1px; height: 10px; background-color:#ddd; vertical-align: middle; }
#header .headerTop li:first-child a:before {background:none;}
#header .headerTop a.on {color:#fff100}
.headerTop .join2000 {z-index:20;position:absolute;top:26px;left:50%;width: 44px;height: 14px;line-height: 14px;margin-left: -22px;background: #333;border: 1px solid #333;border-radius: 3px;font-size: 10px;color: #fff;text-align:center;}
.headerTop .join2000:before {content: "";position:absolute;top: -4px;left:50%;margin-left: -2px;border-style: solid;border-width: 0 3px 3px;border-color: #333 transparent;}

#header .cate {}
#header .cate .list_category {overflow:hidden;}
#header .cate .list_category li {float:left; width:20%; border-bottom:1px solid #eee; border-right:1px solid #eee; box-sizing:border-box; -moz-box-sizing:border-box;}
#header .cate .list_category li:nth-child(5) {border-right:0px none;}
#header .cate .list_category li:nth-child(10) {border-right:0px none;}
#header .cate .list_category li a {display:block;height:32px;line-height:32px;color:#777;text-align:center;text-overflow: clip;white-space: nowrap;overflow: hidden;font-size: 11px;}

.hd_line02 { visibility: hidden; }
.hd_line02.active { visibility: visible; }

.header .header-menu { visibility: hidden; }
.header .header-menu.active { visibility: visible; }
.header .header-menu ul {  display: table-cell; width:40%; align-items: center; }
.header .header-menu ul li { text-align: center;  vertical-align: middle; }
.header .header-menu ul li a { font-size: 12px; }

.header-swiper { line-height: 30px; }
.header-swiper .swiper-wrapper { height: 50px; line-height: 50px; margin: 0 auto; }
.header-swiper .swiper-slide { width: auto; }
.header-swiper .swiper-slide a.red { color:#b4222a  }
.header-swiper .headerSwiper-prevBtn:focus,.header-swiper .headerSwiper-nextBtn:focus { outline: none !important;}
.header-swiper .swiper-slide a { font-size:12px; font-weight: 600; padding-right:25px; }
.header-swiper .swiper-slide:last-of-type a {padding-right:0px;}
.header-swiper .headerSwiper-nextBtn { color:#000; font-size: 18px; right: 0px; left: auto; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); z-index:10; width: 35px; height: 100%; line-height: 33px; text-align: center; background: linear-gradient(to right,rgba(255,255,255,0),#fff 30%); }
.header-swiper .headerSwiper-prevBtn { color:#000; font-size: 18px; left: 0px;  right: auto; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);z-index:10; width: 35px; height: 100%; line-height: 33px; text-align: center; background: linear-gradient(to left,rgba(255,255,255,0),#fff 30%); }
.header-swiper .swiper-button-disabled { color:#cecece }
.header-swiper .swiper-slide.swiperIndex a{font-weight:bold; }
.header-swiper .swiper-wrapper .swiper-wrapper .swiper-slide a.on { font-weight: bold; }

/* Àå¹Ù±¸´Ï */
#basket { position:relative; }
/*.basketCount { display: block; width:15px; height:15px; position: absolute; top: -5px; right: -5px; width:15px; height:15px; border-radius: 50%; background:#b4222a; color: #fff; font-size: 10px; text-align: center; line-height: 15px; }*/

/* °Ë»ö¹öÆ° Ŭ¸¯ ½Ã »óÇ°°Ë»ö â */
.searchOpen { position: fixed; top:0; left:0; right:0; bottom:0; background: #fff; z-index: 52; display: none; }
.searchOpen h3 { padding: 0 10px; margin-top: 45px; line-height: normal; font-size: 24px; }
.searchOpen #searchClose { position: absolute; right: 10px; top: 22px; font-size: 24px; }
.searchOpen .searchBox { position: relative; padding: 0 10px;}
.searchOpen .searchBox #keyword { height: 45px; width: 100%; border: 1px solid #000; border-radius: 2px; }
.searchOpen .search { margin-top: 24px; position: relative; }
.searchOpen .searchButton { position: absolute; top:10px; right:28px; display: block; width: 23px; height: 22px; background:url('/design/akiiikr/phps/m/header_02.png') no-repeat center; background-size: contain; font-size: 0; }

.ppSearch h5 { font-size: 15px; font-weight: bold; margin: 25px 0 10px 10px }
.ppSearch ul { padding: 0 10px; }
.ppSearch ul li { border-bottom: 1px solid #e5e5e5; }
.ppSearch ul li a { display: block; padding: 11px 0; font-size: 15px; color:#000; }
.ppSearch ul li a .square { margin-right: 10px; display: inline-block; width: 15px; height: 15px; line-height: 15px; color: #fff; background: #000; border-radius:2px; font-size: 12px; font-weight: 200; text-align: center; }


/* »çÀÌµå ¸Þ´º */
aside { position:fixed; left:-100%; width:100%; height: calc(100% - 55px); background:#fff; transition: all 0.3s; overflow-y:auto; -webkit-overflow-scrolling: touch;z-index:10005 }
aside.active { left:0 }
aside #asideClose { position: absolute; top: 17px; right: 10px; font-size: 24px; }
aside .topWrap .asideTop { width: 100%; }
aside .topWrap .asideTop .alignBox { padding: 0 20px; background: #f8f8f8; }
aside .topWrap .asideTop .alignBox .logInLine01 { clear: both; padding-top: 25px; }
aside .topWrap .asideTop .alignBox .logInLine02 { clear: both; display: inline-block; width: 100%; padding-top: 25px; padding-bottom: 20px; }
aside .topWrap .asideTop .alignBox a { display: inline-block; padding: 0 }
aside .topWrap .asideTop .alignBox a.mypageBtn { display:block; width: 125px; height: 35px; line-height: 35px; background: #000; color: #fff; text-align: center; }
aside .topWrap .asideTop .alignBox span { display: block; font-size: 15px; font-weight: 600; }
aside .topWrap .asideTop .alignBox .left .level { font-size: 30px; }
aside .topWrap .asideTop .alignBox .right { text-align: right; }
aside .topWrap .asideTop .alignBox .right span.tit { color: #8d8d8d }
aside .topWrap .asideTop .alignBox .right span.cont { font-size: 25px; }
aside .topWrap .asideTop .alignBox .right span.cont .small { display: inline-block; font-size: 15px; }
aside .topWrap .asideTop .loginbtnBox { font-size:0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
aside .topWrap .asideTop .loginbtnBox a { display: inline-block; padding:17px 0px; width: 49.5%; text-align: left; text-indent: 20px; font-size: 15px; font-weight: 600; color: #8d8d8d; }
aside .topWrap .asideTop .loginbtnBox a::after { display: none; }
aside .topWrap .asideTop .loginbtnBox a:nth-child(1) { border-right: 1px solid #e5e5e5 }
aside .topWrap .asideTop .btnBox { margin-top:54px;}
aside .topWrap .asideTop a { position: relative; font-size: 15px; font-weight: 600; text-align: center; vertical-align: middle;  }
aside .topWrap .asideTop a.first { padding-left: 20px; }
aside .topWrap .asideTop a::after { content:'/'; display: inline-block; width:5px; margin:0px 10px; }
aside .topWrap .asideTop a:nth-last-child(1)::after { display: none; }
aside .topWrap .asideTop a .memPoint { animation: upDown 1.5s infinite; position: absolute; padding:0 10px; left: 50%; display: block; font-size: 10px; color: #fff; background: #000; border-radius: 5px; line-height: 25px; top: -30px; transform: translateX(-50%); }
aside .topWrap .asideTop a .memPoint::before { content: ""; display: block; border-top: 5px solid #000; border-right: 5px solid transparent; border-bottom: 7px solid transparent; border-left: 5px solid transparent; position: absolute; left: 30px; bottom: -11px; }
@keyframes upDown {
    0% {
        top: -30px; 
    }
    50% {
        top: -35px; 
    }
    100% {
        top: -30px; 
    }
}

aside li {position:relative;}
aside li a {display: block; width: 100%; height: 100%; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis;white-space: nowrap; box-sizing:border-box}
aside li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px;}
aside li > ul { display:none;}
aside li > ul > li {border-bottom:0px none;}
aside li > ul > li:first-child {border-top:0px none;}
aside li > ul > li > ul {border-top:0px none;}
aside li > ul.depth02 { margin-left: 15px; padding-bottom: 15px; }
aside li > ul.cate { display: block; font-size:0; }
aside li > ul.cate li { margin: 15px 0 0 0;  display: inline-block; width: 50%; }
aside li > ul.cate li.tit { margin: 30px 0 0 0; width: 100%; font-size: 15px; font-weight: 600; color: #000 }
aside li > ul.cate li.tit a { font-weight: 600; color: #000 }

aside .asideBottom {padding: 35px 20px;background: #f8f8f8; border-top: 1px solid #e5e5e5}
aside .asideBottom .tel {color: #000;font-size:1.333em;font-weight:bold;display: block;}
aside .asideBottom .fa-stack {color: #fff;margin-top: -5px;}
aside .asideBottom .fa-phone {color: #3b3b3b;}
aside .asideBottom .copyright {margin-top:10px;}
aside .navCommunity {display:none;padding: 6px 0;border-bottom: 1px solid #ddd;}
aside .navMypage {display:none;padding: 6px 0;border-bottom: 1px solid #ddd;}

/* »çÀÌÆ®¸Þ´º ¾ÆÄÚµð¾ð */
aside .banner { margin-top: 30px; }
aside .banner a img{ margin-bottom: 5px; }
aside .menuWrap { padding: 30px 20px; }
aside .menuWrap .depth01 { position: relative; margin-bottom: 20px; }
aside .menuWrap .depth01 a { line-height: 30px; font-size: 35px; font-weight: 700; letter-spacing:0px;}
aside .menuWrap .depth01 a.cateMove { display: inline-block; width: auto; }
aside .menuWrap .depth01 a i { position: absolute; top: 1px; right: 10px; font-size: 30px; }
aside .menuWrap .depth01.csCate .depth02 a { margin-top: 20px; font-weight: 600; color: #000; }
aside .menuWrap .depth02 a { font-size: 15px; font-weight: 400; color: #8d8d8d; }

aside .menuWrap .realWrap { margin-top: 40px }
aside .menuWrap .realWrap .depth01 { margin-bottom: 5px }
aside .menuWrap .realWrap .depth01 a { font-size: 18px; font-weight: 600; transform: rotateX(-25deg); letter-spacing: 0px; }

aside .navBannerWrap {  }
aside .navBannerWrap img { width: 100% }

aside .asideBottom { text-align: center; }
aside .asideBottom .telWrap { font-size: 15px; font-weight: 600; line-height: 22px; }
aside .asideBottom .telWrap span { vertical-align: middle; }
aside .asideBottom .telWrap .tel { display: inline-block; margin-left: 12px; font-size: 19.5px; font-weight: 700; line-height: 22px; vertical-align: middle; }
aside .asideBottom .time { margin-top: 17px; font-size: 13px; line-height: 20px; }
aside .asideBottom .info { margin-top: 17px; font-size: 13px; line-height: 20px; color: #8d8d8d }


/* °Ë»öâ */
.searchWrap { position:fixed; margin-top:92px; top:0; left:0; width:100%; height: calc(100% - 93px); background:#fff; transition: all 0.3s; overflow-y:auto; -webkit-overflow-scrolling: touch;z-index:10005; padding: 25px 20px; box-sizing: border-box;display: none; touch-action: none;}
.searchWrap .searchBox { position: relative; width:100%; height: 35px;}
.searchWrap .searchBox input { padding-left: 0; width:100%; font-size: 16px; border:0 none; border-bottom: 1px solid #000; color: #8d8d8d; }
.searchWrap .btn_search { position: absolute; top:5px; right:0; width: 24px;height: 22px; font-size:0; background:url('/design/cosrx/phps/m/header_menu_sp.png') no-repeat center; background-position:0 -46px; background-size: 25px auto; }
.searchWrap h5 { margin-top: 45px; margin-bottom: 20px; font-size: 20px; font-weight: 700;  }
.searchWrap .searchWord { font-size: 0 }
.searchWrap .searchWord li { display: inline-block; margin:0 10px 10px 0 }
.searchWrap .searchWord li a { display: block; padding: 4px 15px 6px 15px; border: 1px solid #000; border-radius: 30px; font-size: 16px; }


/* BASIC css end */