@charset "utf-8";

/*
------------------------------------------------------------
File Name : Shopping.css
Explanation : 해오름 - MobileSite CSS 정의
Write : 배범녕
박씨상방(http://m.koreagiftmall.co.kr) - 포인트 하늘색 (#6183C0)
------------------------------------------------------------
*/



@import url(Reset.css);




/* ----------------------------------  색상 변경 부분  ----------------------------------  */
#HeaderTop > .Left > a.BtnAllMenu {color: transparent; width: 23px; height: 19px; background: url('/_mobile/images/Color/BtnAllMenu2.png') no-repeat; background-size: contain;}
#HeaderTop > .Left > a.BtnAllMenu > img {width:23px;}
#HeaderTop > .Right {float:left;}
#HeaderTop > .Right a {position:absolute; top:11px; display:inline-block;}
#HeaderTop > .Right a > img {width:26px;}


/* ----------------------------------  색상 변경 부분  ----------------------------------  */
div.Search_wrap > .Search {position:relative; border:1px solid #6183C0; border-radius:0.3em; -moz-border-radius:0.3em; -webkit-border-radius:0.3em;}
div.Search_wrap > .Search button.BtnSearch {position:absolute; top:0; right:0; display:inline-block;  width:40px; height:39px; background:url('/_mobile/images/Color/BtnSearch2.png') no-repeat; background-size:contain; text-indent:-9999em; /*box-shadow:inset 1px 0 0 #FFF; border-left:1px solid #E0E0E0;*/}

/* ----------------------------------  색상 변경 부분  ----------------------------------  */
#NavMenuSTyle1 {position:relative; box-shadow:0 3px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow:0 3px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow:0 3px 5px rgba(0, 0, 0, 0.15); z-index:1;}
#NavMenuSTyle1 > ul {width:100%; background:#6183C0; border-top:1px solid #D7D8D9; border-bottom:1px solid #adadad; overflow:hidden;}
#NavMenuSTyle1 > ul > li {float:left; width:18%;}
#NavMenuSTyle1 > ul > li:nth-child(1) {float:left; width:10%;}
#NavMenuSTyle1 > ul > li > a {display:block; width:100%; height:38px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-size:14px; color:#FFF; text-align:center; line-height:2.8em; letter-spacing:-0.1em; white-space:nowrap;}
#NavMenuSTyle1 > ul > li > a:hover {color:#222; background:#FFF; border-bottom: 3px solid #A0BDF1;}
#NavMenuSTyle1 > ul > li.Active > a {color:#222; background:#FFF; border-bottom: 3px solid #A0BDF1;}



/* ----------------------------------  색상 변경 부분  ----------------------------------  */

#FooterCall {background:#FFF; overflow:hidden;}
#FooterCall > div.RedMenu {width:100%; text-align:center; background:#6183C0; border-bottom:1px solid #D2D2D2; padding:12px 0 7px;  border-top:1px solid #6183C0}
#FooterCall > div.RedMenu > ul {display:inline-block; overflow:hidden;}
#FooterCall > div.RedMenu > ul > li {float:left; width:70px;}
#FooterCall > div.RedMenu > ul > li:nth-child(1) {background:url('/_mobile/images/Template/FooterMenu1.png') center top no-repeat; background-size:38px;}
#FooterCall > div.RedMenu > ul > li:nth-child(2) {background:url('/_mobile/images/Template/FooterMenu2.png') center top no-repeat; background-size:38px;}
#FooterCall > div.RedMenu > ul > li:nth-child(3) {background:url('/_mobile/images/Template/FooterMenu3.png') center top no-repeat; background-size:38px;}
#FooterCall > div.RedMenu > ul > li:nth-child(4) {background:url('/_mobile/images/Template/FooterMenu4.png') center top no-repeat; background-size:38px;}
#FooterCall > div.RedMenu > ul > li:nth-child(5) {background:url('/_mobile/images/Template/FooterMenu5.png') center top no-repeat; background-size:38px;}
#FooterCall > div.RedMenu > ul > li > a {display:inline-block; font-size:0.84em; color:#FFF; padding-top:42px;}


/* -------공통------*/
@media screen and (max-width:380px) {
#FooterCall > div.RedMenu > ul > li {float:left; width:60px;  letter-spacing:-0.09em;}
#FooterCall > div.RedMenu > ul > li:nth-child(1) {background:url('/_mobile/images/Template/FooterMenu1.png') center top no-repeat; background-size:35px;}
#FooterCall > div.RedMenu > ul > li:nth-child(2) {background:url('/_mobile/images/Template/FooterMenu2.png') center top no-repeat; background-size:35px;}
#FooterCall > div.RedMenu > ul > li:nth-child(3) {background:url('/_mobile/images/Template/FooterMenu3.png') center top no-repeat; background-size:35px;}
#FooterCall > div.RedMenu > ul > li:nth-child(4) {background:url('/_mobile/images/Template/FooterMenu4.png') center top no-repeat; background-size:35px;}
#FooterCall > div.RedMenu > ul > li:nth-child(5) {background:url('/_mobile/images/Template/FooterMenu5.png') center top no-repeat; background-size:35px;}
#FooterCall > div.RedMenu > ul > li > a {display:inline-block; font-size:0.84em; color:#FFF; padding-top:37px;}
}







/* ----------------------------------  //색상 변경 부분  ----------------------------------  */


/* Category(카테고리 하단 콜센터 부분) Style */
#CategoryCall {background:#fff; overflow:hidden; border-top:1px solid #959595;}
#CategoryCall > div.CallCenter {float:left; width:50%;  /*border-right:1px solid #E1E1E1;*/ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:10px 0 20px 20px; margin:0px 0; overflow:hidden;}
#CategoryCall > div.CallCenter > p.Title {font-size:0.9em; color:#000000; margin-bottom:2px;}
#CategoryCall > div.CallCenter > p.Number {font-size:0.95em; color:#FF483E; margin-bottom:3px;}
#CategoryCall > div.CallCenter > p.Text {font-size:0.7em; color:#545454; line-height:12px; font-weight:normal;}

#CategoryCall > div.BankInfo {float:left; display:inline-block; width:50%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:10px 0 10px 10px; margin:0px 0; overflow:hidden;}
#CategoryCall > div.BankInfo > p.Title {font-size:0.9em; color:#000000; margin-bottom:2px;}
#CategoryCall > div.BankInfo > p.Bank {font-size:0.85em; color:#FF483E; margin-bottom:3px;}
#CategoryCall > div.BankInfo > p.Text {font-size:0.7em; color:#282828; line-height:12px;}
#CategoryCall > div.BankInfo > p.Text > span {font-size:11px; color:#545454; font-weight:normal;}

/* ----------------------------------  색상 변경 부분//  ----------------------------------  */

div.BtnMainType {background:#fff; padding:10px 0; margin-top:20px;}
div.BtnMainType > ul {overflow:hidden;}
div.BtnMainType > ul > li {float:left; width:25%; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
div.BtnMainType > ul > li > a {display:inline-block; color: #fff; width:70px; height:70px; line-height:70px; font-size:0.9em; letter-spacing: -0.07em;text-align:center; background: #c777db; border:1px solid #ffffff; border-radius:300em; -moz-border-radius:300em; -webkit-border-radius:300em;}
div.BtnMainType > ul > li > a > img {width:70px;}
div.BtnMainType.Type2 {background:#D3DCDC;}

div.MainCategory {text-align:center; background:#D3DCDC; padding:15px 10px; margin-top:20px;}
div.MainCategory div.Title {font-size:0.87em; margin-bottom:5px;}
div.MainCategory ul {overflow:hidden;}
div.MainCategory ul li {float:left; width:33.3%; text-align:left; background:#FFF; border-left:1px solid #CCC;border-bottom:1px solid #CCC; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
div.MainCategory ul li a {display:block; font-size:0.82em; line-height:3em; padding-left:5px;}
div.MainCategory ul li a * {vertical-align:middle;}
div.MainCategory ul li a img {width:28px;}
div.MainCategory ul li:nth-child(1), div.MainCategory ul li:nth-child(4), div.MainCategory ul li:nth-child(7) {border-left:2px solid #CCC;}
div.MainCategory ul li:nth-child(1), div.MainCategory ul li:nth-child(2), div.MainCategory ul li:nth-child(3) {border-top:2px solid #CCC;}
div.MainCategory ul li:nth-child(7), div.MainCategory ul li:nth-child(8), div.MainCategory ul li:nth-child(9) {border-bottom:2px solid #CCC;}
div.MainCategory ul li:nth-child(3), div.MainCategory ul li:nth-child(6), div.MainCategory ul li:nth-child(9) {width:33.4%; border-right:2px solid #CCC;}


/* ----------------------------------  메인 테마 색상 변경 부분//  ----------------------------------  */


/* Main Style */
#MainContent {padding-bottom:5px;}

div.MainBanner {display:block; background:#FFF; border-bottom:1px solid #D5D5D5; overflow:hidden;}
div.BestBanner {display:block; background:#FFF; border-bottom:1px solid #D5D5D5; overflow:hidden;}
div.ThemeBanner {display:block; background:#FFF; overflow:hidden;}

div.BannerArea {position:relative; width:100%; box-shadow:0 3px 10px #CECECE; -webkit-box-shadow:0 3px 10px #CECECE; -moz-box-shadow:0 3px 10px #CECECE;}
div.BannerArea > span {position:absolute; display:inline-block; bottom:10px; right:10px; font-size:0.84em; font-weight:normal;}
div.BannerArea > div.BtnWon {position:absolute; top:9px; right:9px;}
div.BannerArea > div.BtnWon > a > img {width:14px;}
div.BannerArea > div.Btn > a {position:absolute; display:inline-block; top:50%; margin-top:-15px;}
div.BannerArea > div.Btn > a > img {width:16px;}
div.BannerArea > div.Btn > a.BtnPrev {left:9px;}
div.BannerArea > div.Btn > a.BtnNext {right:9px;}
div.BannerArea > div.Banner > img {width:100%; display:block;}

div.MainBanner > div.Division {width:100%; text-align:center; border-top: 1px solid #F5F5F5; padding:10px 10px 0px 10px; margin-top:3px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; overflow:hidden;}
div.MainBanner > div.Division > ul {display:inline-block; margin:0 auto; overflow:hidden;}
div.MainBanner > div.Division > ul > li {float:left; text-align:center; padding:0 10px; margin-bottom:6px;}
div.MainBanner > div.Division > ul > li:nth-child(1)  {background:url('/_mobile/images/Color/Division1.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(2)  {background:url('/_mobile/images/Color/Division2.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(3)  {background:url('/_mobile/images/Color/Division3.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(4)  {background:url('/_mobile/images/Color/Division4.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(5)  {background:url('/_mobile/images/Color/Division5.png') center top no-repeat; background-size:35px;}


div.MainBanner > div.Division > ul > li > a {display:block; font-size:0.75em; color:#4C4747; text-align:center; padding-top: 40px;}
div.MainBanner > div.Division > ul > li > a > img {display:block; width:35px; margin-bottom:5px; }

@media screen and (max-width:320px){
div.MainBanner > div.Division { border-top: 1px solid #F5F5F5; }
div.MainBanner > div.Division > ul > li {float:left; text-align:center; padding:0 5px; margin-bottom:6px;}
div.MainBanner > div.Division > ul > li:nth-child(1)  {background:url('/_mobile/images/Color/Division1.png') center top no-repeat; background-size:30px;}
div.MainBanner > div.Division > ul > li:nth-child(2)  {background:url('/_mobile/images/Color/Division2.png') center top no-repeat; background-size:30px;}
div.MainBanner > div.Division > ul > li:nth-child(3)  {background:url('/_mobile/images/Color/Division3.png') center top no-repeat; background-size:30px;}
div.MainBanner > div.Division > ul > li:nth-child(4)  {background:url('/_mobile/images/Color/Division4.png') center top no-repeat; background-size:30px;}
div.MainBanner > div.Division > ul > li:nth-child(5)  {background:url('/_mobile/images/Color/Division5.png') center top no-repeat; background-size:30px;}


div.MainBanner > div.Division > ul > li > a {display:block; font-size:0.7em; color:#4C4747; text-align:center; padding-top: 40px;}
div.MainBanner > div.Division > ul > li > a > img {display:block; width:30px; margin-bottom:5px;}
}

@media screen and (max-width:350px){
div.MainBanner > div.Division { border-top: 1px solid #F5F5F5; }
div.MainBanner > div.Division > ul > li {float:left; text-align:center; padding:0 5px; margin-bottom:6px;}
div.MainBanner > div.Division > ul > li:nth-child(1)  {background:url('/_mobile/images/Color/Division1.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(2)  {background:url('/_mobile/images/Color/Division2.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(3)  {background:url('/_mobile/images/Color/Division3.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(4)  {background:url('/_mobile/images/Color/Division4.png') center top no-repeat; background-size:35px;}
div.MainBanner > div.Division > ul > li:nth-child(5)  {background:url('/_mobile/images/Color/Division5.png') center top no-repeat; background-size:35px;}

div.MainBanner > div.Division > ul > li > a {display:block; font-size:0.75em; color:#4C4747; text-align:center; padding-top: 40px;}
div.MainBanner > div.Division > ul > li > a > img {display:block; width:35px; margin-bottom:5px;}
}

/*
@media screen and (min-width:610px){
div.MainBanner > div.Division { border-top: none; }
div.MainBanner > div.BannerArea {float:left; width:60%;}
div.MainBanner > div.Division {float:left; width:40%;}
div.MainBanner > div.Division {margin-top:13px;}
div.MainBanner > div.Division > ul {margin-right:-15px;}
div.MainBanner > div.Division > ul > li {padding:0 15px;  margin-bottom:20px;}
}
*/