/* BASIC css start */
#topBanner { height: 30px; ;overflow: hidden; width: 100%; z-index:51;}
#topBanner .swiper-slide a {height:30px;color: #000;display: flex;justify-content: center;align-items: center;font-size: 1.2rem;}

#header {box-sizing:border-box; position:relative; z-index:100; width:100%;  }
#header .header_top {text-align:center; box-sizing:border-box; padding: 7px 5px 6.5px; background:#fff; border-bottom:1px solid #ddd;  }
#header .header_inner {position:relative;}
#header .header_inner .icon {position:relative; display:block;  }
#header .header_inner .icon img {width:30px; }
#header .header_inner .left {position:absolute; left:0; top:50%;  transform: translate(0%, -50%); display:flex; justify-content: center;align-items: center; }
#header .header_inner .right {position:absolute; right:0; top:50%; transform: translate(0%, -50%); display:flex; justify-content: center;align-items: center; }
#header .header_inner #cartBtn .count {position: absolute; right: 4px; bottom: 3px; z-index: 20; width: 10px; height: 10px; background: #ff0000; border-radius: 50%; color: #fff; font-size: 0.7rem; line-height: 10px; text-align: center;} 
#header .header_inner .logo a {display:block; text-align:center; }
#header .header_inner .logo img {width:46px; transition: all 0.2s ease-in-out; }

#header .header_btm {position:relative; border-bottom:1px solid #ddd; background:#fff;  }
#header .sm_menu_box { position:relative; }
#header .sm_menu_list {display:flex;align-items: flex-start;justify-content: flex-start; box-sizing:border-box; padding-right:40px; height:40px;  }
#header .sm_menu_list li {box-sizing:border-box; width:25%; height:100%;  }
#header .sm_menu_list li a {display: flex;justify-content: center;align-items: center; width:100%; height:100%; color: #2f2f2f; font-size:1.2rem; font-weight: bold; }
#header .sm_menu_box .sm_menu_arrrow {display: flex;justify-content: center;align-items: center; position:absolute; top:0; right:0;  font-size:1.4rem; width:40px; height:40px; box-sizing:border-box; border-left:1px solid #ddd;  }
#header .sm_menu_box .sm_menu_arrrow.on span:before {content: "\e944";}


.rolling_menu_box {position:absolute; top:41px; left:0; width:100%; background:#fff; display:none;  }
.rolling_menu_box ul {display:flex;align-items: flex-start;justify-content: flex-start;}
.rolling_menu_box ul li { display: inline-block; width: 25%; height: 35px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size:1.1rem; position: relative}
.rolling_menu_box ul li a {display: flex;justify-content: center;align-items: center; width:100%; height:100%; }

#searchTop { padding:10px; position:fixed; top:85px; left:0; width:100%; box-sizing:border-box;z-index:100; background:#fff;  display:none; border:1px solid #d9d9d7  }
#searchTop .btn_search_closed {width:30px; height:30px; display: flex;justify-content: center;align-items: center; font-size:2rem;}
#searchTop .searchBox {position:relative; border: 1px solid #d9d9d7; box-sizing:border-box; width:calc(100% - 35px) }
#searchTop .searchBox input { border:none; width:100%;box-sizing:border-box; padding:0 30px 0 10px; height:30px;}
#searchTop .searchBox a { font-size:2rem; position:absolute; top:0; right:0; width:30px; height:30px; display: flex;justify-content: center;align-items: center;  }

#searchTop.innerHam { z-index: 101; width: 300px; left: 10px; top: 47px; opacity: 0.9;}

#aside {position:fixed; top:0; left:-100%; width:100%; height:100%; box-sizing:border-box; z-index:101;  transition: all 0.3s;  }
#aside .mask {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:none; }
#aside .aside_box { width:320px; height:100%; box-sizing:border-box;  }
#aside .aside_inner {position:relative; background:#fff; width:100%; height:100%; overflow-y: auto; }
#aside #closeMenu {position: fixed; top: 12px; left:330px; width: 30px; height: 30px; box-sizing:border-box; display:none;  }
#aside .aside_cate {box-sizing:border-box; padding:10px; }
#aside .cate_con_box {margin-bottom:30px;  }
#aside .cate_con_box .cate_tt {color: #2f2f2f; font-size: 1.2rem; font-weight: bold; line-height: 30px;}
#aside .cate_con_box .cate_list {font-size:0}
#aside .cate_con_box .cate_list li a { display:block; color: #2f2f2f; font-size: 1.2rem; line-height: 30px;}
#aside .cate_con_box .cate_list li {display:inline-block; width:50%; }
#aside .cate_con_box.half { display:flex;align-items: flex-start; justify-content: flex-start;}
#aside .cate_con_box.half .cate_con {width:50%; }
#aside .cate_con_box.half .cate_list li {width:100%}
#aside .aside_banner { width: calc(100% - 20px); background: #f3f3f3; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: flex-start; margin:0 auto 10px; }
#aside .aside_banner .text_box  {display:block; width:36%; box-sizing:border-box; padding:15px 0; color:#464646; font-size:1rem; line-height:15px; text-align:center; letter-spacing:-0.5px;}
#aside .aside_banner .text_box.second { width:28%; }
#aside .aside_banner .text_box strong {color:#cfa972;font-weight:bold;}
#aside .aside_customer { padding:10px 10px 50px; background:#f7f7f7}
#aside .aside_customer .customer_con {margin-top:15px; }
#aside .aside_customer .customer_con h3 {color: #2f2f2f; font-size:1.0rem; font-weight: bold; line-height: 15px;}
#aside .aside_customer .customer_con p  {color: #666666; font-size:1.0rem; line-height: 15px; }
#aside .aside_customer .customer_con .number { color:#cfa972; }
#aside .aside_customer .customer_con:last-child {margin-top:18px;     display: flex; align-items: flex-start; justify-content: space-between;}
#aside .aside_customer .customer_con:last-child a {display:inline-block; width:110px;height:30px; padding:0px 10px 0px 20px;  border:1px solid #dcdcdc; color:#666666; font-size:1rem; line-height:28px; text-align:right; box-sizing:border-box;} 
#aside .aside_customer .customer_con .call_btn{	background:white url('/design/ssodo82/smartskin2017/gaenso2017/img/call_icon.jpg') no-repeat center left -2px/30px 30px;}
#aside .aside_customer .customer_con .qna_btn {background:white url('/design/ssodo82/smartskin2017/gaenso2017/img/qna_icon.jpg') no-repeat center left 1px/30px 30px;}
#aside.open {display:block; left:0%; }
#aside.open #closeMenu { display:block;  }

#aside .aside_top {padding:10px 0;  position:relative; }
#aside .aside_info_box {}
#aside .aside_info_box .name_box  {font-size:12px; }
#aside .aside_info_box .name_box .name {display:block; font-size:12px; font-weight:bold; color:#000; margin-bottom:10px; box-sizing:border-box; padding-right:90px; word-wrap: break-word;word-break: keep-all; }
#aside .aside_info_box .name_box .login {display:flex; align-items: center; justify-content: flex-start; margin-top:20px }
#aside .is_member .aside_info_box .name_box .login {margin-top:0}
#aside .aside_info_box .name_box .login a {display:inline-block; width:70px; height:30px; box-sizing:border-box; border:1px solid #000; display:flex; align-items: center; justify-content:center; margin-right:4px; font-size:13px;  }
#aside .aside_info_box .name_box .login a.login_btn {background:#000; color:#fff; }
#aside .aside_info_box .benefit_box {font-size:12px; color:#000; margin-top:24px; }
#aside .aside_right_box {position:absolute; top:8px; right:0;  display: flex; align-items: center; justify-content: flex-start; }
#aside .aside_right_box a {width:30px; display:inline-block; position:relative;   }
#aside .aside_right_box #hamCart .count { position: absolute; right: 4px; bottom: 3px; z-index: 20; width: 10px; height: 10px; background: #ff0000; border-radius: 50%; color: #fff; font-size: 0.7rem; line-height: 10px; text-align: center; }

#aside .aside_menu_list {display: flex; align-items: center; justify-content: flex-start; justify-content: flex-start; margin-top:32px; }
#aside .aside_menu_list li {width:20%;box-sizing:border-box; border:1px solid #e8e8e8; border-right:0 }
#aside .aside_menu_list li:last-child {border-right:1px solid #e8e8e8; }
#aside .aside_menu_list li a { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position:relative; box-sizing:border-box; padding:5px 0 10px;   }
#aside .aside_menu_list li a span {display:block; text-align:center; }
#aside .aside_menu_list li a .img {background-repeat:no-repeat; background-size:55px auto; background-position:center; width:40px; height:30px;  }
#aside .aside_menu_list li a .txt {font-size:12px; }
#aside .aside_menu_list li a .count {position: absolute; right:-8px; top:-8px; z-index: 20; width:20px; height:20px; background: #484848; border-radius: 50%; color: #fff; font-size:11px; line-height:20px; text-align: center; }
#aside .aside_menu_list li:nth-child(1) a .img {background-image:url(/design/ssodo82/image/icon_ham03.png)}
#aside .aside_menu_list li:nth-child(2) a .img {background-image:url(/design/ssodo82/image/icon_ham01.png); background-size:65px auto}
#aside .aside_menu_list li:nth-child(3) a .img {background-image:url(/design/ssodo82/image/icon_ham02.png)}
#aside .aside_menu_list li:nth-child(4) a .img {background-image:url(/design/ssodo82/image/icon_ham05.png)}
#aside .aside_menu_list li:nth-child(5) a .img {background-image:url(/design/ssodo82/image/icon_ham04.png)}

#aside .cate_tab_box {margin-top:10px; }
#aside .cate_tab_box .cate_tab {display: flex; align-items:center; justify-content: flex-start;}
#aside .cate_tab_box .cate_tab a {width:50%; line-height:50px; font-size:14px;font-weight:600; text-align:center; box-sizing:border-box; color:#b7b7b7; border-bottom:2px solid #e8e8e8;  }
#aside .cate_tab_box .cate_tab a.active {color:#333; border-bottom-color:#848484; }
#aside .cate_tab_box .cate_con_box {padding:20px 0; display:none; box-sizing:border-box; }
#aside .cate_tab_box .cate_con_box.active {display:flex; }
#aside .cate_tab_box  #aside_Community li {width:100%}

#user {position:fixed; top:0; right:-100%; width:100%; height:100%; box-sizing:border-box; z-index:100;  transition: all 0.3s;  }
#user:after {content:""; display:block; clear:both}
#user .mask {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:none; }
#user #closeMenu2 {position: fixed; top: 12px; right: 255px; width: 30px; height: 30px; box-sizing:border-box; display:none;  }
#user .user_box { width:245px; height:100%; box-sizing:border-box; float:right;   }
#user .user_inner {position:relative; background:#fff; width:100%; height:100%; overflow-y: auto; }
#user .user_login { position: relative;box-sizing: border-box;} 
#user .user_login_box { display: flex;  align-items: center; justify-content: space-between;  margin: 10px 5px 0px 5px; padding: 10px 10px 10px 13px; border: 1px solid #e0e0e0; box-sizing: border-box; }
#user .user_login_box .txt { color: #2f2f2f; font-size: 1.0rem; line-height: 14px;}
#user .user_login_box .txt strong {font-size:1.2rem}
#user .user_login_box .btn {display:flex; }
#user .user_login_box .btn a {width: 53px; height: 27px; background: #cccccc; color: white; font-size: 1rem; line-height: 27px; text-align: center; }
#user .user_login_box .btn a:last-child {background: #000; margin-left:5px;}
#user .user_info_box { margin: 10px 5px 0px 5px;  display:flex;align-items: flex-start; justify-content: flex-start;}
#user .user_info_box .box {width:calc(33.33% - 5px); margin-left: 5px;  background: white; border: 1px solid #e8e8e8; box-sizing: border-box; text-align: center; padding:10px; }
#user .user_info_box .box:last-child {margin-right:0; }
#user .user_info_box .box p { color: #2f2f2f; font-size: 1rem; line-height: 15px}
#user .user_info_box .box img { width: 32px; height: auto; margin: 5px auto;}
#user .user_info_box .box strong {display: block; font-size: 1.3rem; font-weight: bold; line-height: 18px;}
#user .mypage_menu {margin-top: 10px; }
#user .mypage_menu a { display: flex; justify-content: flex-start; align-items: center; height: 40px;  padding-right:40px; box-sizing:border-box;  background: white url(./img/mypage_menu_arrow.jpg) no-repeat bottom right; background: white url(/design/ssodo82/smartskin2017/gaenso2017/img/mypage_menu_arrow.jpg) no-repeat bottom right/39px; letter-spacing: -0.3px;  font-size:1.1rem; color: #323232;  border-top: 1px solid #e8e8e8;}
#user .mypage_menu a:last-child { border-bottom: 1px solid #e8e8e8;}
#user .mypage_menu a img {height:100%}
#user.open {display:block; right:0%; }
#user.open #closeMenu2 { display:block;  }

body.hold { overflow: hidden !important;}

#header.headroom--not-top {position:fixed; top:0; left:0 }
#header.headroom--not-top  .header_inner .logo img { width: 35px;}
#header.headroom--not-top #searchTop {top:76px}


/* ´Ùã´Ù ÀÚµ¿¿Ï¼º*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.search-auto-complete-list ul li { text-align:center; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:1.1rem; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span {}
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:1.1rem; }


/* ´Ùã´Ù °Ë»ö ÆÄÀδõ - ·¹À̾î */
#allfinder-ctr { z-index: 100; position: fixed; right:0; bottom:50%; }
#allfinder-ctr a { display:block; width:77px; height:64px; background:url('/images/common/allfinder_ctrl_mo.png') no-repeat 0 0; background-size:100% 100%; border:none; outline:none; font-size:0; }

.all-finder-layer { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow-y:auto; }
.all-finder-layer .finder-hd { z-index:1; position:fixed; top:0; left:0; width:100%; height:60px; border-bottom:1px solid #e7e7e7; background:#fff; }
.all-finder-layer .finder-hd .fa-close { position:absolute; top:17px; right:10px; font-size:2.6rem; color:#000; }
.all-finder-layer .finder-hd .finder-tit { height:60px; line-height:60px; padding:0 10px; font-size:1.6rem; font-weight:bold; color:#000; letter-spacing:-2px; }
.all-finder-layer .finder-search { position:relative; margin:0 10px 20px; border:2px solid #000; border-radius:3px; }
.all-finder-layer .finder-search .fa-search { display: inline-block; width: 40px; height: 42px; line-height: 42px; text-align: center; font-size: 1.8rem; }
.all-finder-layer .finder-search .txt-input { width:85%; height:42px; line-height:42px; margin:0; padding:0; font-size:1.4rem; outline:none; border:none; color: #000; vertical-align:top; letter-spacing:-1px; }
.all-finder-layer .finder-search .txt-input::-webkit-input-placeholder { color:#b1b1b1; }
.all-finder-layer .finder-search dd { background:#FFF; }
.all-finder-layer .finder-opt { padding:60px 0 55px; color:#000; }
.all-finder-layer .finder-opt dl dt { position:relative; height:53px; line-height:53px; padding:0 10px; border-top:1px solid #e7e7e7; font-size:1.4rem; font-weight:bold; color:#000; letter-spacing:-1px; }
.all-finder-layer .finder-opt dl dt .fa { position:absolute; top:50%; right:10px; margin-top:-13px; font-size:2.5rem; color:#b2b2b2; }
.all-finder-layer .finder-opt dl dt > .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:20px; margin-top:0; border:1px solid #cecece; border-radius:20px; color:#666; font-size:1.1rem; background:#fff; text-align:center; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer { display:none; position:absolute; top:43px; left:10px; width:70%; padding:0 15px 11px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1 }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:10px; right:14px; margin:0; font-size:1.9rem; color:#000; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-tit { padding:13px 0; border-bottom:1px solid #e5e5e5; font-size:1.4rem; font-weight:bold; line-height:14px; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-cnt { padding-top:13px; line-height:1.5; font-size:1.3rem; }
.all-finder-layer .finder-opt dl dd { display:none; padding:10px 5px 0; border-top:1px solid #e7e7e7; background:#f4f4f4; font-size:0; }
.all-finder-layer .finder-opt dl dd label { display:inline-block; width:33.3333%; text-align:center; line-height:18px;}
.all-finder-layer .finder-opt .finder-color label { width:12.5%; }
.all-finder-layer .finder-opt .finder-price .finder-price-input { padding:0 5px 10px; text-align:right; font-size:1.2rem; }
.all-finder-layer .finder-opt .finder-price .finder-price-input:after { clear: both; content: ""; display: block; }
.all-finder-layer .finder-opt .finder-price .finder-price-input span { float:left; display:inline-block; height:34px; line-height:34px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label { display: inline-block; width: 33%; padding: 0 8px; border: 1px solid #ccc; border-radius:3px; color: #666; background:#fff; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input { display: inline-block; width: 84%; height: 32px; line-height: 32px; padding: 0; border: none; background: none; color: #000; outline:none; text-align:right; }
.all-finder-layer .finder-opt .finder-child-category { padding:0; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category { padding:15px; margin-bottom:9px; border-bottom:1px solid #e7e7e7; font-size:1.4rem; font-weight:bold; color:#9a9a9a; background:#fff; word-break:break-all; letter-spacing:-1px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .pd-2px { padding:0 2px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fc-black { color:#000; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fa { margin-left:2px; color:#000; }
.all-finder-layer .finder-btn-c { z-index:1; position:fixed; bottom:0; left:0; width:100%; height:55px; text-align: center; font-size:0; }
.all-finder-layer .finder-btn-c a.reset { display: inline-block; width: 30%; height: 55px; line-height: 55px; background: #999; color: #fff; font-size: 1.6rem; font-weight: bold; letter-spacing: 1px; border:none; }
.all-finder-layer .finder-btn-c button { display: inline-block; width: 70%; height: 55px; line-height: 55px; background: #000; color: #fff; font-size: 1.6rem; font-weight: bold; letter-spacing: -0.5px; border:none; }
.all-finder-layer .finder-btn-c button span.fa-search { margin-right:5px; margin-top:-2px; vertical-align:middle; font-size:0.750em; }
.all-finder-layer .finder-btn-c button span.finder-count { display:inline-block; color:#ffd800; font-size:1.8rem; vertical-align:middle; }

.all-finder-layer .finder-opt .finder-options { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:80%; height:22px; padding: 5px 5%; line-height:22px; border: 1px solid #ccc; word-break:break-all; border-radius: 20px; background:#fff; color:#000; text-align:center; font-size:1.2rem; }
.all-finder-layer .finder-opt .finder-options.on { font-weight: bold; border: 1px solid #000; box-shadow:2px 2px 3px #d2d2d2; }
.all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 33px; height: 33px; border-radius:20px; font-size:0; vertical-align:middle; }
.all-finder-layer .finder-opt .finder-option-color.color-picker { width:33px; height:33px; padding: 0; border: none; } 
.all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check { display:none; width:33px; height:33px; margin-top:-25px; color:#fff; text-align:center; font-size:1.6rem; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; }

.finder-option-color.finder-option-color-black em { background-color: #000; }
.finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; }
.finder-option-color.finder-option-color-gray em { background-color: #808080; }
.finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; }
.finder-option-color.finder-option-color-brown em { background-color: #aa6810; }
.finder-option-color.finder-option-color-navy em { background-color: #425583; }
.finder-option-color.finder-option-color-blue em { background-color: #0000ff; }
.finder-option-color.finder-option-color-light-blue em { background-color: #62acff; }
.finder-option-color.finder-option-color-red em { background-color: #ff0000; }
.finder-option-color.finder-option-color-orange em { background-color: #ffa500; }
.finder-option-color.finder-option-color-yellow em { background-color: #ffff00; }
.finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; }
.finder-option-color.finder-option-color-purple em { background-color: #800080; }
.finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; }
.finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; }
.finder-option-color.finder-option-color-green em { background-color: #008000; }
.finder-option-color.finder-option-color-light-green em { background-color: #72dd95; }
.finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; }
.finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; }
.finder-option-color.finder-option-color-apricot em { background-color: #fbceb1;  }

.all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.all-finder-layer .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.all-finder-layer .search-auto-complete-list ul li { text-align:center; margin: 3px; }
.all-finder-layer .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:1.1rem; letter-spacing:-1px; } 
.all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; }
.all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.all-finder-layer .search-auto-complete-list ul li a:hover span {}
.all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:1.1rem; }
/* BASIC css end */