@charset "utf-8";
/* ================================================
  reset
==================================================*/
h1,h2,h3,h4,h5 {margin: 0; padding: 0; }
ul,ol,li {margin: 0; padding: 0; list-style: none; }
dl,dd,dt,p {margin: 0; padding: 0; }
fieldset {margin: 0; padding: 0; border: none; outline: none; }
i,em {font-style: normal; }
a {text-decoration: none; color: inherit; outline: none; cursor: pointer; }
button {display: inline-block; margin: 0; padding: 0; box-sizing: border-box; border: none; background-color: transparent; box-shadow: none; cursor: pointer; outline: none; line-height: normal; }
a:focus, 
button:focus {border: none; outline: none;}

.header.v1 .logo{display: none;}



/*======================================
  skip-navigation
======================================*/
.skip-navigation {position: relative; }
.skip-navigation a {z-index: 9999; position: absolute; top: 0; left: -100%; display: block; width: 100%; height: 40px; line-height: 40px; background-color: #f6f6f6; color: #555; font-size: 16px; font-weight: 500; text-align: center; }
.skip-navigation a:focus {left: 0; }




/* ================================================
  common
==================================================*/
.visuallyhidden {position: absolute !important; width: 1px !important; height: 1px !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; overflow: hidden;}

/* 
  header
--------------------------------------------*/
#header {position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 60px; transition: .3s;}
.header-inner {position: relative; height: 60px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;background-color: #fff;}
.header-inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.header-inner .logo {width: 80px; margin: 0 auto; padding-top: 17px; }
.header-inner .logo a,
.header-inner .logo img {display: block; max-width: 100%; }

.header-office {width: 100%; height: 100%; }

/* 카테고리 메뉴 */
.btn-hambuger {position: absolute; top: 10px; left: 10px; width: 40px; height: 40px;}
.btn-hambuger > span {position: absolute; left: 8px; width: 25px; height: 2px; background-color: #575757; transition: .3s;}
.btn-hambuger > span:first-child {top: 10px; }
.btn-hambuger > span:nth-child(2) {top: 20px; opacity: 1; transition: .3s; }
.btn-hambuger > span:last-child {bottom: 8px; }

.btn-hambuger.active > span:nth-child(2) { opacity: 0;}
.btn-hambuger.active > span:nth-child(1) {top: 20px; transform: rotate(45deg)}
.btn-hambuger.active > span:nth-child(3) {bottom: 18px; transform: rotate(130deg); }

.nav-layer {display: none; position: fixed; top: 60px; left: 0; width: 100%; height: 100%; z-index: 700; background-color: #506581;}
.nav-layer .nav-category {position: relative; height: calc(100% - 120px); box-sizing: border-box; background-color: #506581;}
.nav-category .btn-category {display: block; width: 100px; height: 80px; padding-top: 40px; box-sizing: border-box; border-top: 1px solid #73849a; border-bottom: 1px solid #32435a; background-color: #506581; background-repeat: no-repeat; background-size: 24px 24px; background-position: top 20px center; text-align: center; font-size: 16px; color: #fff; }

.nav-category .category-gayeon {background-image: url('/img/common/m_side_icon1.png'); }
.nav-category .category-story {background-image: url('/img/common/m_side_icon2.png'); }
.nav-category .category-benfit {background-image: url('/img/common/m_side_icon3.png'); }
.nav-category .category-party {background-image: url('/img/common/m_side_icon4.png'); }
.nav-category .category-lovetest {background-image: url('/img/common/m_side_icon6.png'); }
.nav-category .category-mypage {background-image: url('/img/common/m_side_icon7.png'); }

.nav-category .btn-category.actOn {background-color: #38465a; }
.nav-category > ul > li:first-child .btn-category {border-top: 0; }
.nav-category > ul > li:last-child .btn-category {border-bottom: 0; }

.nav-category .nav-depth {display: none; position: absolute; top: 0; left: 100px; width: 100%; height:100%; padding: 0 10px; box-sizing: border-box; background-color: #38465a; vertical-align: top; overflow-x: hidden; overflow-y: auto;  tocuh-action: auto; }
.nav-category .nav-depth.actOn {display: block; }
.nav-category .nav-depth > li a {display: block; width: 100%; box-sizing: border-box; border-bottom: 1px solid #4c596b; padding: 15px 15px; text-align: left; color: #fff; font-size: 16px; }
.nav-category .nav-depth > li:last-child a {border-bottom: 0; }


.nav-layer .nav-util {widtH: 100%; height: 60px; padding: 0 15px; box-sizing: border-box; color: #fff; background-color: #506581; text-align: right; }
.nav-layer .nav-util a {position: relative; display: inline-block; width: 80px; box-sizing: border-box; color: #fff; font-weight: 500; line-height: 40px; }
.nav-layer .nav-util .bar:after {content: ''; position: absolute; top: 12px; right: -15px; widtH: 1px; height: 18px; background-color: #fff; }

/* 스크롤 고정 메뉴 */
#header.fixed {position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 700; background-color: #E5006E;}
#header.fixed .header-inner {border-color: transparent;  background-color: transparent; }
#header.fixed .logo,
#header.fixed .btn-mypage {display: none; }

#header.fixed .btn-hambuger > span {background-color: #fff; }
#header.fixed .fixed-tit {position: absolute; top: 15px; right: 15px; padding-right: 20px; font-size: 20px; color: #fff; font-weight: 500; text-align: right;}
#header.fixed .fixed-tit:after {content: ''; display: inline-block; position: absolute; top: 8px; right: 0; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
#header.fixed .fixed-tit.actOn:after {top: 12px; -webkit-transform: rotate(315deg); transform: rotate(315deg);}
.fixed-depth-category {display: none; border-top: 1px solid #e5e5e5; background-color: #fff;}
.fixed-depth-category > ul.actOn {display: block; }
.fixed-depth-category > ul > li {padding: 0 20px; box-sizing: border-box;}
.fixed-depth-category > ul > li a {display: block; width: 100%; height: 100%; padding: 10px 10px; box-sizing: border-box; border-bottom: 1px solid #b2b2b2; color: #5c5c5c; font-weight: 400; font-size: 15px; }
.fixed-depth-category > ul > li:last-child a {border-bottom: 0; }


.header-dim {display: none; position: absolute; top: 0; left: 0; widtH: 100%; height: 100%; z-index: 680; background-color: rgba(0,0,0,0.5); }
.header-dim.active {display: block; }

/* 마이페이지 메뉴 */
.btn-mypage  {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: url('/images/common/btn_mypage.png') no-repeat center center; background-size: 26px auto; }


/* 
  footer
--------------------------------------------*/
#footer {position: relative;  width: 100%;}
.footer-top {padding: 20px 20px 0; box-sizing: border-box; background-color: #393939; }
.footer-inner {position: relative; max-width: 630px; margin: 0 auto; }
.footer-inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }


.footer-cs {text-align: center;}
.footer-cs p {font-size: 18px; color: #a9a9a9; text-align: center; font-weight: 300; vertical-align: middle; }
.footer-cs .cs-call {display: block; color: #fd7a9c; font-size: 28px; font-weight: 700; text-align: center; vertical-align: middle; }

.footer-sns {display: inline-block; margin: 20px auto 10px; }
.footer-sns:after {content: ''; display:  block; clear: both; visibility: hidden;}
.footer-sns li {float: left; width: 40px; height: 40px; margin-right: 10px; }
.footer-sns li:last-child {margin-right: 0; }
.footer-sns li a,
.footer-sns li img {display: block; width: 100%; height: 100%;}

.footer-middle {box-sizing: border-box; border-top: 2px solid #616161; background-color: #393939; }
.footer-util {display: table; width: 100%; height: 40px; margin: 0 auto; box-sizing: border-box; text-align: center; line-height: 40px; }
.footer-util:after {content: ''; display:  block; clear: both; visibility: hidden;}
.footer-util li {display: table-cell; }
.footer-util > li > a {display: block; width: 100%; font-size: 13px; color: #d1d1d1; text-align: center; }

.footer-bottom {padding: 15px 15px 65px; box-sizing: border-box;  border-top: 2px solid #616161; background-color: #393939; }

.footer-address {margin-bottom: 5px; font-size: 12px; color: #9c9c9c; text-align: left; }
.footer-address a {font-size: 12px; color: #919191;}
.footer-copy {text-align: left; font-size: 12px; color: #919191; }




/* =======================================
	media queries
=========================================*/ 
@media all and (max-width: 414px) {
	

	
}

@media all and (max-width: 329px) {


	/* S: FOOTER */
	.footer-sns li {margin-right: 5px; }
	
}