@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0
 * Author   : onepixel studio
 * Date     : YYYY-MM-DD
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. header
    02. container
    03. btn to top
    04. footer
    05. footer form
    06. media query
---------------------------------------------------
*/

/* ------------------------------
 * header
------------------------------ */
#header {position:fixed; top:0; left:0; right:0; height:80px; border-bottom:1px solid transparent; transition:0.3s; background-color:#fff; z-index:30; transition: .4s}
#header .col-logo a {display:block; width:186px}
#header .col-logo a img {display:block; width:100%}
#header .col-nav .gnb {font-size: 0}
#header .col-nav .gnb > li {position: relative; display: inline-block; vertical-align: top}
#header .col-nav .gnb > li + li {margin-left: 80px}
#header .col-nav .gnb > li > a {position: relative; display: block; font-size: 19px; font-weight: 500; color: #333; letter-spacing: -0.02em; line-height: 80px}
#header .col-nav .gnb > li > a::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-color: #f7a337; opacity: 0}
#header .col-nav .gnb > li > .submenu {display: none; position: absolute; top: 100%; left: 0; width: 130px; padding-top: 28px; z-index: 20}
#header .col-nav .gnb > li > .submenu > li + li {margin-top: 12px}
#header .col-nav .gnb > li > .submenu > li > a {display: inline-block; font-size: 15px; font-weight: 500; color: #929292; line-height: 1.45; letter-spacing: -0.04em}
#header .col-nav .gnb > li > .submenu > li > a:hover {color: #f7a337; text-decoration: underline !important; border-color: #f7a337}
#header .col-nav .gnb > li:hover > a::before {opacity: 1}
#header .col-snb .membership-area {font-size: 0}
#header .col-snb .membership-area > a {font-size:14px; color:#495057; border:1px solid #d9d9d9; padding:5px 15px; border-radius:25px; transition:0.3s; background-color:transparent}
#header .col-snb .membership-area > a:hover {background-color:#f7a337; border-color:#f7a337; color:#fff}
#header .col-snb .membership-area > a + a {margin-left:8px}
#header .megamenu-bg {position: absolute; top: 100%; left: 0; right: 0; bottom: 0; background-color: #fcfcfc; z-index: 10; opacity: 0}
#header.sticky {box-shadow: 0 1px 2px 0 rgba(0,0,0,.08)}
#header.nav-up {top: -80px}

/* ------------------------------
 * Container
------------------------------ */
/* #container {overflow-x: hidden} */

/* ------------------------------
 * btn to top
------------------------------ */
#btn-to-top {position:fixed; display: block; bottom: 50px; right: -60px; width: 60px; height: 60px; font-size: 20px; color: #fff; text-align: center; line-height: 60px; border-radius: 50%; background-color: #f7a337; opacity: 0; z-index: 500; transition: background-color .5s, opacity .5s, right .5s}
#btn-to-top.show {right: 50px; opacity: 1}
#btn-to-top:hover {background-color: #e79225}

/* ------------------------------
 * footer
------------------------------ */
#footer {position: relative; padding: 60px 0; background-color: #f9f9f9; z-index: 20}
#footer span.bar {display:inline-block; width:1px; height:10px; background-color:#ccc; margin:0 5px; vertical-align: 0}
#footer .col-logo {text-align: right}
#footer .col-logo img {max-width:180px}
#footer .col-logo:last-child {margin-top:10px}
#footer .col-logo:last-child img {max-width:140px}
#footer .col-info .link-items {font-size: 0; margin-bottom: 20px}
#footer .col-info .link-items li {display:inline-block; margin-right: 25px}
#footer .col-info .link-items li a {font-size: 14px; color: #999}
#footer .col-info .link-items li a:hover {color: #000}
#footer a[href^=tel]:hover {color:#000}
#footer .col-info p, #footer .col-info p a {font-size: 14px; color: #616161; line-height: 1.85}
#footer .col-info p .divider:before {content: ''; display: inline-block; width: 1px; height: 14px; margin: 0 10px; background-color: rgba(255,255,255,.14); vertical-align: -1px}
#floating-btn {position: fixed; right:-60px; bottom:120px; z-index:500; opacity:0; transition:0.5s}
#floating-btn.show {right:50px; opacity:1}
#floating-btn > ul {font-size:0}
#floating-btn > ul li {display: block}
#floating-btn > ul li + li {margin-top:10px}
#floating-btn > ul li a {display: block; width:60px; height:60px; line-height:60px; text-align:center; font-size:30px; border-radius:50%; color:#fff; background-color:#f7a337; transition:0.5s}
#floating-btn > ul li a.kakao {background-color:#f9e000; color:#3b1c1c}
#floating-btn > ul li a.kakao:hover {background-color:#ddc703}
#floating-btn > ul li a.insta {background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
#floating-btn > ul li a.call {background-color:#3eba2e}
#floating-btn > ul li a.call:hover {background-color:#79e16d}
#floating-btn > ul li a.mobile {background-color:#42b4c9}
#floating-btn > ul li a.mobile:hover {background-color:#2f96a8}

/* #footer {padding:45px 0 60px; text-align:center; background-color:#31353e}
#footer .footer-nav li {display:inline-block; margin:0 12px}
#footer .footer-nav li a {font-size:15px; color:#fff}
#footer .sns-icons {margin:30px 0}
#footer .sns-icons li {display:inline-block; margin:0 12px}
#footer .sns-icons li a {display:block; width:28px; color:#fff}
#footer .sns-icons li a i {opacity:0.3; transition:opacity 0.25s, transform 0.25s}
#footer .sns-icons li a:hover i {opacity:0.85; transform:rotate(15deg)}
#footer .info {font-size:14px; color:#fff; line-height:1.65; opacity:0.7}
#footer .info a {color:#fff}
#footer .info span {margin:0 10px; opacity:0.5}
#footer .info p + p {margin-top:20px} */


/* ------------------------------
 * footer form
------------------------------ */
#form-tail {margin-top:70px; margin-bottom:60px; border-top:1px solid #d9d9d9}
#form-tail .title > h3 {font-size:32px; font-weight:100; color:#000; letter-spacing:-0.04em}
#form-tail .title > h3 {margin-top:60px; margin-bottom:30px}
#form-tail #footer-form .col-items input[type="text"] {display:block; width:100%; height:50px; border:1px solid #d9d9d9; padding:10px 25px; outline:0}
#form-tail #footer-form .col-items input[type="text"]::placeholder {font-size:18px; font-weight:100; color:#666; letter-spacing:-0.025em}
#form-tail #footer-form .col-items input[type="text"]:focus {border-color:#f7a337}
#form-tail #footer-form .col-items input[type="text"] + input[type="text"] {margin-top:25px}
#form-tail #footer-form .col-items textarea {display:block; width:100%; max-height:125px; background-color:#fff; border:1px solid #d9d9d9; border-radius:0; outline:0; padding:12px 25px}
#form-tail #footer-form .col-items textarea:focus, #form-tail #footer-form .col-items textarea:visited {border-color:#f7a337; box-shadow:none}
#form-tail #footer-form .col-items textarea::placeholder {font-size:18px; font-weight:100; color:#666; letter-spacing:-0.025em}
#form-tail #footer-form .col-items .ft-check-form input[type="checkbox"] {display:inline-block; width:20px; height:20px; border:1px solid #d9d9d9; vertical-align: -3px}
#form-tail #footer-form .col-items .ft-check-form label {font-size:18px; font-weight:100; color:#666; letter-spacing:-0.025em; margin-bottom:0; margin-left:10px; cursor:pointer}
#form-tail #footer-form .col-items button {width:150px; height:45px; line-height:43px; padding:0}

#footer .col-logo em.bar {display:inline-block; width:1px; height:12px; background-color:#bcbcbc}
#footer .col-logo .col-bar {text-align:center}

/* main popup */
#hd_pop {width:100%; max-width:1170px; z-index:900}
.hd_pops {max-width:90%; margin:auto; border:none}
.hd_pops .hd_pops_con {max-width:100%; height:auto !important}
.hd_pops .hd_pops_con p {font-size:0}
.hd_pops .hd_pops_con br {display:none}


/* ------------------------------
 * media query
------------------------------ */
@media (min-width: 1200px) {
    #header .col-snb .button-hamburger {display: none}
    #mobile-header {display: none !important}
}

@media (max-width: 1440px) {
    #header .col-nav .gnb > li + li {margin-left: 56px}
    #header .col-nav .gnb > li > a {font-size: 17px}
}

@media (max-width:1199px) {
    #header .col-nav {display: none}
    #header .col-snb .button-hamburger {position: relative; width: 40px; height: 40px; padding: 10px; border: 0; background-color: transparent; outline: 0}
    #header .col-snb .button-hamburger .hamburger-inner {position: relative; height: 16px}
    #header .col-snb .button-hamburger .hamburger-inner .line {position: absolute; display: block; left: 0; width: 100%; height: 2px; background-color: #000}
    #header .col-snb .button-hamburger .hamburger-inner .line:nth-child(1) {top: 0}
    #header .col-snb .button-hamburger .hamburger-inner .line:nth-child(2) {top: 50%; margin-top: -1px}
    #header .col-snb .button-hamburger .hamburger-inner .line:nth-child(3) {bottom: 0}

    #mobile-header {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1130}
    #mobile-header .mobile-header-backdrop {display: none; position: absolute; top: 0; ;left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.6)}
    #mobile-header .mobile-header-container {position: absolute; top: 0; right: 0; bottom: 0; width: 420px; background-color: #fff; transform: translateX(100%); transition: .4s}
    #mobile-header .mobile-header-container .inner-header {margin: 0 30px 4px 50px; padding: 16px 0 14px; border-bottom: 1px solid #eee}
    #mobile-header .mobile-header-container .inner-header .membership-area {font-size: 0}
    #mobile-header .mobile-header-container .inner-header .membership-area a {display: inline-block; font-size: 14px; font-weight: 500; color: #343a40; letter-spacing: -0.04em; padding: 10px 20px; border: 1px solid #dee2e6}
    #mobile-header .mobile-header-container .inner-header .membership-area a + a {margin-left: 6px}
    #mobile-header .mobile-header-container .inner-header .button-header-close {position: relative; width: 40px; height: 40px; margin-left: auto; margin-right: -9px; padding: 0; border: 0; background-color: transparent; outline: 0}
    #mobile-header .mobile-header-container .inner-header .button-header-close .line {position: absolute; display: block; top: 50%; left: 50%; width: 24px; height: 2px; margin-top: -1px; margin-left: -12px; background-color: #000}
    #mobile-header .mobile-header-container .inner-header .button-header-close .line:nth-child(2) {transform: rotate(-45deg)}
    #mobile-header .mobile-header-container .inner-header .button-header-close .line:nth-child(3) {transform: rotate(45deg)}
    #mobile-header .mobile-header-container .inner-header .membership-area a.link-primary {color: #fff; border-color: #f7a337; background-color: #f7a337}
    #mobile-header .mobile-header-container .inner-content {height: calc(100vh - 80px); padding: 0 30px 0 50px; overflow: auto}
    #mobile-header .mobile-header-container .inner-content .mobile-nav {padding-bottom: 200px}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li {font-size: 0; padding: 20px 0; border-bottom: 1px solid #eee}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > a, #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > .sub-menu-items {display: inline-block; line-height: 1.6; vertical-align: top}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > a {width: 140px; font-size: 15px; font-weight: 500; color: #000; letter-spacing: -0.04em}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > .sub-menu-items {width: calc(100% - 140px)}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > .sub-menu-items > li + li {margin-top: 16px}
    #mobile-header .mobile-header-container .inner-content .mobile-nav > ul > li > .sub-menu-items > li > a {font-size: 15px; color: #555; letter-spacing: -0.04em}
    #mobile-header.menu--open .mobile-header-container {transform: translateX(0)}
}

@media (max-width:991px) {
    #form-tail .title > h3 {font-size:28px}
    #form-tail #footer-form .col-items .ft-check-form label {font-size:16px; margin-left:5px}
}

@media (max-width:767px) {
    html, body {font-size: 14px}
    
    #btn-to-top {right: -50px; width: 50px; height: 50px; font-size: 18px; line-height: 50px}
    #btn-to-top.show {right: 15px}
    #floating-btn.show {right: 15px; bottom:110px}
    #floating-btn > ul li a {width:50px; height:50px; line-height:50px; font-size:22px}


    #footer .col-logo {text-align: left; margin-bottom: 30px}
    #footer .col-info .link-items li {margin-right: 15px}
    #footer .col-info .link-items li a {font-size: 12px}
    #footer .col-info p {font-size: 12px}
    #footer .col-info p, #footer .col-info p a {font-size:12px}
    #footer .col-info p .divider:before {height: 10px; margin: 0 8px}

    /* #footer {padding-bottom: 130px}
    #footer .footer-nav li {margin:0 8px 15px}
    #footer .footer-nav li a {font-size:13px}
    #footer .sns-icons li a {width:25px}
    #footer .sns-icons {margin:30px 0 30px}
    #footer .info {font-size:12px} */

    #form-tail .title > h3 {font-size:24px}
    #form-tail #footer-form .col-items input[type="text"] + input[type="text"] {margin-top:1rem}
    #form-tail #footer-form .col-items .ft-check-form label {font-size:14px; margin-left:0; margin-bottom:20px}
    #form-tail #footer-form .col-items .ft-check-form input[type="checkbox"] {vertical-align: -6px}
    #form-tail #footer-form .col-items input[type="text"]::placeholder {font-size:16px}
    #form-tail #footer-form .col-items textarea::placeholder {font-size:16px}

    /* main popup */
    .hd_pops {top:100px !important; left:50% !important; margin-left:-45%}
    .hd_pops_footer {font-size:13px}

}

@media (max-width:575px) {
    #header {height: 60px}
    #header .col-logo a {width: 160px}
    #header.nav-up {top: -60px}
    #footer .row-footer .col-txt {margin:auto}
    #footer .row-footer .col-txt p span {font-size:13px}
    #mobile-header .mobile-header-container {width: 100%}
    #form-tail .title > h3 {font-size:22px}
    #form-tail #footer-form .col-items .ft-check-form label {font-size:12px}
    #form-tail #footer-form .col-items input[type="text"]::placeholder {font-size:14px}
    #form-tail #footer-form .col-items textarea::placeholder {font-size:14px}

    .family-wrap {margin-top:30px}
    .family-wrap .selectBox2 {float:none; width:100%}
    .family-wrap .selectBox2 button.label span {display:block; width:100%}
    .family-wrap .selectBox2 .optionList {z-index:100}
}