@charset "utf-8";
/*======================================
  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; }





/* ===========================================
  layout
============================================*/
:root {
   --vh: 100%;
}

html, body {font-family: "NotoSansKR", "Malgun Gothic", "맑은 고딕", "Helvetica", -apple-system, "Apple SD Gothic Neo", Arial, sans-serif !important; width: 100%; height: 100vh; height: var(--vh);  font-size: 14px; color: #2c2c2c; font-weight: 400; font-style: normal; line-height: normal;}


#wrapper {position: relative; width: 100%; height: 100%; display: table; margin: 0 auto; table-layout: fixed; }

.none-scroll {height: 100%; min-height: 100%; overflow: hidden !important; tocuh-action: none; }
.inner {position: relative; max-width: 720px; margin: 0 auto; padding: 0 10px; box-sizing: border-box;}
.inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }


/* 
  header
--------------------------------------------*/
#header {position: relative; width: 100%; height: 1px; display: table-row; 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; }
.btn-hambuger > span:last-child {bottom: 8px; }

.btn-hambuger.active > span:nth-child(2) {left: -999px;}
.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: 59px; 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 > ul > li:nth-child(5) .category-mypage,
.nav-category > ul > li:last-child .category-mypage {border-bottom: 0; }

.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: 60px; }
.nav-layer .nav-util .bar:after {content: ''; position: absolute; top: 21px; right: -15px; widtH: 1px; height: 18px; background-color: #fff; }

.nav-category .nav-util-category .btn-category {padding-top: 23px; border: none; }
.nav-category .category-members {display: block; width: 82px; margin: 0 auto; padding: 55px 0 10px; border-radius: 15px; box-sizing: border-box; background: #f7e546 url('/images/common/gayeon_symbol.png') no-repeat top 10px center; background-size: 45px 45px; }
.nav-category .category-members > span {display: block; margin-top: 4px; font-family: 'GmarketSans'; font-weight: 500; font-size: 13px; color: #000;}

/* 스크롤 고정 메뉴 */
#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; }


/* 결혼점수 header 부분 */
.header_lovetest .logo-test {width: 70%; margin: 0 auto; padding-top: 19px;}
.header_lovetest .logo-test img {display: block; max-width: 100%; margin: 0 auto;}

/* 
  container
--------------------------------------------*/
#container {position: relative;  width: 100%; height: 100%; display: table-row; }
#container:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }



/* 
  footer
--------------------------------------------*/
#footer {position: relative;  width: 100%; height: 1px; display: table-row;}
.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; }
.footer-copy {font-size: 12px; color: #919191; }

/* 
  fnb
--------------------------------------------*/
.fixed-fnb {position: fixed; bottom: 0; left: 0; z-index: 500; width: 100%; height: 50px; }
.fixed-fnb ul {display: table; table-layout: fixed; width: 100%; }
.fixed-fnb li {display: table-cell;}
.fixed-fnb .btn-fnb {display: block; }
.fixed-fnb .btn-fnb {width: 100%; height: 50px; padding: 0 10px; box-sizing: border-box; font-size: 16px; color: #fff; font-weight: 500; text-align: center; line-height: 50px;}
.fixed-fnb .btn-fnb .icon {width: 20px; height: 20px; vertical-align: sub;}
.fixed-fnb .btn-fnb.fnb-faq {background-color: #f39f60; } /* 1:1상담 */
.fixed-fnb .fnb-faq .icon-faq {background-image:url('/images/common/fnb_faq.png');}

.fixed-fnb .btn-fnb.fnb-sns {background-color: #c490bf;} /* 문자상담 */
.fixed-fnb .fnb-sns .icon-sns {margin-right: 2px; background-image:url('/images/common/fnb_sns.png');}

.fixed-fnb .btn-fnb.fnb-call {background-color: #8c97cb;} /* 전화상담 */
.fixed-fnb .fnb-call .icon-call {width: 18px; height: 18px; background-image:url('/images/common/fnb_call.png');}





/* ===========================================
  layout
============================================*/
#layer_agree {position: fixed; display: none; top:0; left: 0; widtH: 100%; height: 100%; }
#layer_agree.show {display: block; }

.layer-agree .layer-header {position: relative;}
.layer-agree .layer-header .btn-close {position: absolute; top: 0; right: 10px;}
.layer-agree .layer-header .btn-close:after {content: '\00d7'; display: inline-block; font-size: 30px; color: #222; }

.layer-agree .layer-content {position: absolute; top: 50%; left: 50%; z-index: 60; width: 90%; transform: translate(-50%, -50%); background-color: #fff; }
.layer-agree .layer-dim {position: absolute; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }

.layer-agree .layer-foot .btn-confirm {display: block; width: 100%; height: 60px; box-sizing: border-box; background-color: #222; color: #fff; text-align: center; font-size: 18px; font-weight: 500; line-height: 60px; }





/* ===========================================
  modal
============================================*/
#modal_container {display: none; position: absolute; top: 0; left: 0; z-index:300; width: 100%; height: 100vh;}

.modal-container .modal-content {position: absolute; top: 50%; left: 50%; z-index: 310; max-width: 400px; width: calc(100% - 40px); min-width: 280px; background-color: #fff;  transform: translate(-50%,-50%); }
.modal-container .dim {position: absolute; top: 0; left: 0; z-index: 300; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }

#modal_container.active {display: block; }

/* modal-header 
------------------------------------------*/
.modal-container .modal-header {}

/* modal-body
------------------------------------------*/
.modal-container .modal-body {}

.modal-input {width: 100%; height: 40px; border: 1px solid #e9e9e9; background-color: #fff; text-align: center; font-size: 16px; font-weight: 500; line-height: 33px; }

/* modal-footer
------------------------------------------*/
.modal-container .modal-footer {margin-top: 2.142rem; }

.modal-footer .modal-btn-group {}
.modal-btn-group:after {content: ''; display:  block; clear: both; visibility: hidden;}
.modal-btn-group .modal-btn {display: block; width: 100%; height: 50px; box-sizing: border-box; border: 1px solid #ededed; background-color: #f6f6f6; font-size: 1.142rem; font-weight: 500; color: #333; line-height: 48px; text-align: center; }

/* 좌우 버튼 */
.modal-btn-group.half {}
.modal-btn-group.half .modal-btn {float: left; width: 50%; }
.modal-btn-group.half .modal-btn.consent {border-color: #fb6155; background-color: #fb6155; color: #fff; }