#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: transparent; letter-spacing: 0.05em; transition: .5s; padding: 0;}
#header.activeBg,#header.activeBg.sub.board, #header.sub.board {background: #fff;}
#header .header {border-bottom: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: 400;}
#header.activeBg .header, #header.sub.board .header {color: #000;}
#header .header.on, #header.activeBg .header.on {background: var(--pointcolor); color:#fff}
#header .header_wrap{align-items: center;  padding: 1.5rem 0; position: relative; }

#logo {float: unset; padding: 0 2rem; display: inline-flex; }
#header .header #logo .main_logo.logo_on  {display: none;}
#header.activeBg .header #logo .main_logo, 
#header.sub.board .header #logo .main_logo {display: none;}
#header.activeBg .header #logo .main_logo.logo_on, 
#header.sub.board .header #logo .main_logo.logo_on {display: block;}
#header.activeBg .header.on #logo .main_logo, 
#header.sub.board .header.on #logo .main_logo  {display: block;}
#header.activeBg .header.on #logo .main_logo.logo_on, 
#header.sub.board .header.on #logo .main_logo.logo_on {display: none;}

a.btn, .btn {text-align: inherit;}
.ls-00 {letter-spacing: 0;}

.uppercase {text-transform: uppercase;}

.pc, .on {display: block;}
.mo, .off {display: none !important;}
.flex {display: flex;}
.h100 {height: 100vh; min-height: 960px;}
.point-color-rgb {color: rgba(var(--pointcolor-rgb), 0.15);}
.point-font2 {font-family: 'Cormorant Infant', serif;}
.color-dark-gray2 {color: #474747;}
.sub-font { font-family: 'Poppins', sans-serif;}
.cont {width: 80%; margin: 0 auto;position: relative; max-width: 1585px;}

.header .login {padding: 1rem 0rem 0 1.25rem; opacity: 0; pointer-events: none; transition: .3s;}
.header.on .login {opacity: 1; pointer-events: auto; transition: .3s;}
.header .login>span {margin: 0 .5rem;}
.header .login li a {color:#fff;}

.header .nav {margin: 0 auto; text-align: center; }

.header .nav>ul {display: inline-flex;     vertical-align: top;    height: 49px; opacity: 1; pointer-events: auto; transition: .3s;}
.header.on .nav>ul {opacity: 0; pointer-events: none;}
.header .nav>ul>li {padding: 1.25rem 1rem 0 1rem; cursor: pointer; position: relative;}

.header .nav>ul>li.Hot {position: relative;}
.header .nav>ul>li.Hot:after {position: absolute; left: 50%; transform: translateX(-50%); top: 0; content: "HOT"; color: #fff; background: red; border-radius: 30px; padding: 0 7px; font-size: 0.7rem;}

#header .nav>ul>li>ul.nav_menu {display: none;}
#header.activeBg .nav>ul>li>ul.nav_menu {display: flex;    flex-direction: column;    position: absolute;    left: 0;    background: #fff;     border-top: 1px solid var(--BodyColor);    padding: 1rem;     padding: 1rem 0.5rem;    width: 135%;    white-space: nowrap;     left: 50%;   transform: translateX(-50%); opacity: 0; pointer-events: none; transition: .2s ease;     align-items: center;}
#header.activeBg .nav>ul>li>ul.nav_menu.sp {width: 170%;}
#header.activeBg .nav>ul>li>ul.nav_menu.open {opacity: 1; pointer-events: auto;}
#header.activeBg .nav>ul>li>ul.nav_menu li {padding: 0.5rem 0; background-color: #fff; width: 95%; } 
#header.activeBg .nav>ul>li>ul.nav_menu li:hover {background-color: var(--pointcolor);}

#header.activeBg .nav>ul>li>ul.nav_menu li a {color: #000;}
#header.activeBg .nav>ul>li>ul.nav_menu li:hover a {color: #fff;}

.menu_btn {margin: .75rem 0 0 0;}
.menu_btn_burger { width: 22px; height: 16px; float: right; cursor: pointer; position: relative; transition: .6s ease;}
.menu_btn_burger::before,
.menu_btn_burger::after, .menu_btn_burger span{    content: '';    position: absolute;    width: 100%;    height: 2px;    background: #fff;    border-radius: 5px;    transition: all .2s ease-in-out;}
.menu_btn_burger::before {top: 0;}
.menu_btn_burger::after {bottom: 0; width: 80%;}
.menu_btn_burger:hover::after {width: 100%;}
.menu_btn_burger span {top: 50%; transform: translate(0, -50%); opacity: 1;}

.menu_btn_burger.on::before {transform: rotate(45deg); top: 50%;}
.menu_btn_burger.on::after {width: 100%; transform: rotate(-45deg); top: 50%;}
.menu_btn_burger.on span { transform: translate(-100%, -50%); opacity: 0;}

.activeBg .menu_btn_burger::before, .activeBg .menu_btn_burger::after, .activeBg .menu_btn_burger span {background-color: #000;}
.activeBg .on .menu_btn_burger::before, .activeBg .on .menu_btn_burger::after,  .activeBg .on .menu_btn_burger span {background-color: #fff;}

#gnb {position: fixed;    background: var(--pointcolor);    color: #fcfcfd;  transition: .3s; opacity: 0; filter: blur(5px); pointer-events: none; z-index: 999;}
#gnb.on { opacity: 1; filter: blur(0); pointer-events: auto;}
#gnb>.width85 {position: relative; top: 50%; transform: translateY(-50%); opacity: 0;  transition: .6s;}
#gnb.on>.width85.on {opacity: 1;}
#gnb .gnb_img {display: inline-flex;  filter: blur(0);}
#gnb .gnb_img .inner {    width: 457px;    height: 623px; background-color: #fff; background-image: url(/img/main/menu_img01.jpg);background-repeat: no-repeat; background-size: cover; transition: .2s;}

#gnb.bg01 .gnb_img .inner {background-image: url(/img/main/menu_img01.jpg);}
#gnb.bg02 .gnb_img .inner {background-image: url(/img/main/menu_img02.jpg);}
#gnb.bg03 .gnb_img .inner {background-image: url(/img/main/menu_img03.jpg);}
#gnb.bg04 .gnb_img .inner {background-image: url(/img/main/menu_img04.jpg);}
#gnb.bg05 .gnb_img .inner {background-image: url(/img/main/menu_img05.jpg);}
#gnb.bg06 .gnb_img .inner {background-image: url(/img/main/menu_img06.jpg);}
#gnb.bg07 .gnb_img .inner {background-image: url(/img/main/menu_img07.jpg);}

#gnb .gnb_wrap {margin: unset; display: inline-flex;}
#gnb .gnb_wrap .gnb {padding-left: 10%; display: flex;    flex-direction: column;   justify-content: center;    flex-wrap: wrap;  width: 100%; transform: translateY(-5%);     height: 110%;}
#gnb .gnb_wrap .gnb li.menu{ display: inline-flex;align-items: center; height: calc(100%/7);}
#gnb .gnb_wrap .gnb li.menu .width70 {display: inline-grid; white-space: nowrap;}
#gnb .gnb_wrap .gnb li.menu ul.submenu {display: inline-flex;}
#gnb .gnb_wrap .gnb li.menu ul.submenu li {padding-right: 2rem;}
#gnb .gnb_wrap .gnb li.menu ul.submen li:last-child {padding-right: 0;}
#gnb .gnb_wrap .gnb li.menu ul.submenu a {color: var(--sub2color); transition: .2s; font-weight: 500;}
#gnb .gnb_wrap .gnb li.menu ul.submenu a.active {color: var(--backcolor); font-weight: 600; border-bottom: 1px solid var(--backcolor);}
#gnb .gnb_wrap .gnb li.menu>span.width30 { transition: .2s;} 
#gnb .gnb_wrap .gnb li.menu.active>span.width30 {color: var(--subcolor);} 

/*메뉴추가됨*/
#gnb .gnb_wrap .gnb li.menu {height: calc(100%/9);}
#gnb .gnb_wrap .gnb li.menu.menu04 {margin: 1.5rem 0 0.5rem 0;}

#quick {background: none; }	
.quick_wrap {position: fixed; right: 65px;	top: 50%; display: flex;    flex-direction: column;    flex-wrap: wrap;     transform: translateY(-50%); z-index: 998;} 

.quick_wrap li {width: 56px; height: 56px; border-radius: 50%;  background-repeat: no-repeat; background-position: center ; position: relative; transition: .6s; transform: translateX(0); overflow: hidden; margin-bottom: 1rem; cursor: pointer;}
.quick_wrap li:hover {transform: translateX(-115px); overflow: visible;}
.quick_wrap li:nth-child(1) {background-color: #fae300;}
.quick_wrap li:nth-child(2) {background-color: #48609e;}
/* .quick_wrap li:nth-child(3) {background-color: #f26522;} 유튜브 아이콘 변경으로 인해 주석*/
.quick_wrap li:nth-child(4) {background-color: #32b44a;}
.quick_wrap li:nth-child(5) {background-color: #00c73c;}
.quick_wrap li:nth-child(6) {background-color: #00c73c;}
.quick_wrap li:nth-child(7) {background: linear-gradient(to top,    #fdc062 0%,    #ee653d 25%,    #e5414f 50%,    #a237b6 75%,    #4e47d0 100%  )}
.quick_wrap li:nth-child(8) {background-color: var(--pointcolor); background-image: url(/img/main/plus.png); background-repeat: no-repeat ; background-position: center center; background-size: 20px; transition: none;}
.quick_wrap li:nth-child(8).active {background-image: url(/img/main/minus.png);}

.quick_wrap li:last-child {background-color: #363636;text-align: center;color: #fff; display: flex;
    align-items: center;    flex-direction: column; font-weight: 800; padding-top: .75rem; margin-bottom:0} 
.quick_wrap li:nth-child(8):hover, .quick_wrap li:last-child:hover {transform: translateX(0);}

.quick_wrap li::after {width: 0;left: 5px;height: 100%;position: absolute;    z-index: -1;    border-radius: 50px; transition: .6s; color: #fff; padding: 17px 0 0 20px; text-align: center; top: 0; overflow: hidden; opacity: 0; font-weight: 700;    font-size: 16px; white-space: nowrap; letter-spacing: 0;}    
.quick_wrap li:hover::after {width: 165px; opacity: 1;}

/*유튜브 아이콘 변경으로 인해 추가*/
.quick_wrap li:nth-child(3):hover {transform: translateX(0px); overflow: visible;}
/*유튜브 아이콘 변경으로 인해 추가e*/

.quick_wrap li:nth-child(1)::after {content: '카카오상담'; background-color: #fae300; color:#391b1b}
.quick_wrap li:nth-child(2)::after {content: '02-563-2060'; background-color: #48609e;}
/*.quick_wrap li:nth-child(3)::after {content: '실시간 상담'; background-color: #f26522;} 유튜브 아이콘 변경으로 인해 주석*/
.quick_wrap li:nth-child(4)::after {content: '네이버 블로그'; background-color: #32b44a;}
.quick_wrap li:nth-child(5)::after {content: '네이버 카페'; background-color: #00c73c;}
.quick_wrap li:nth-child(6)::after {content: '네이버 라인'; background-color: #00c73c;}
.quick_wrap li:nth-child(7)::after {content: '인스타그램' ;background: linear-gradient(to top, #fdc062 0%,    #ee653d 25%,    #e5414f 50%,    #a237b6 75%,    #4e47d0 100%  )}
.quick_wrap li:nth-child(8)::after, .quick_wrap li:last-child::after  {display: none;}

.quick_wrap li a{width: 290%;height: 100%;display: block;}
.quick_wrap li a img {position: relative; top: 50%; transform: translateY(-50%); left: 16px;}
.quick_wrap li:nth-child(2) a img { left: 19px;}
/*유튜브 아이콘 변경으로 인해 추가*/
.quick_wrap li:nth-child(3) a img { left: 0px;}
/*유튜브 아이콘 변경으로 인해 추가e*/
.quick_wrap li:nth-child(5) a img { left: 8px;}

.depth3>ul {position: absolute; right: -111%;top: -0.5rem; background-color: #fff; padding: 0.5rem; width: 105%;display: flex;    flex-direction: column; align-items: center; transition: .3s; opacity: 0;}

#header.activeBg .depth3>span {color: #000;}
#header.activeBg .depth3:hover>span {color: #fff;}
#header.activeBg .depth3:hover>ul  {opacity: 1;}
#header.activeBg .depth3:hover>ul li a {color: #000 !important;}
#header.activeBg .depth3:hover>ul li:hover a {color: #fff!important; background-color: var(--pointcolor);}

#header .header_wrap.cont {width: 90%; max-width: 1920px;}

@media (max-width: 1600px){ 
    .cont {width: 90%;}    
}

@media (max-width: 1440px){ 
    .cont {width: 95%;}
    #header .header_wrap.cont {width: 95%;}

    .header .nav.width80 {width: 90%;}
    .header .width10 { width: 5%;}}

@media (max-width: 990px){
    .pc {display: none}
    .pc.sp {display: none !important;}
    .mo {display: block  !important;}

    .section_mini {padding: 80px 0;    }

    /* .h100 {min-height:  768px;} */

    #header .m_logo_img_w {display: block;}
    #header .m_logo_img {display: none;} 

    #header.activeBg .m_logo_img_w {display: none;}
    #header.activeBg .m_logo_img {display: block;}

    #header .header.on .m_logo_img_w {display: block;}
    #header .header.on .m_logo_img {display: none;}

    #header.activeBg .header.on .m_logo_img_w {display: block;}
    #header.activeBg .header.on .m_logo_img {display: none;}

    .cont {width: 90%;}

    #header .header {border-bottom: none;}
    #header .header.on { border-bottom: 1px solid #7c8db9;}
    #header .header_wrap {padding: 1.875rem 0;}
   
    .header .nav.mo>ul {display: flex;flex-direction: column; opacity: 0;pointer-events: none;}
    .header .nav.mo>ul>li { padding:2.5rem 0; border-bottom: 1px solid #7c8db9; line-height: 2;}
    .header .nav.mo>ul>li:last-child {border: none;}
    .header .nav.mo>ul li a {color: #bfc8e3} 
    .header.on #gnb_mo, .header.on .nav.mo>ul {opacity: 1; pointer-events: auto;}
    .header .login_wrap.mo .login>span {margin: 0 1rem;}
    .header .login {display: flex;        justify-content: flex-end;        padding-top: 0.5rem;}
    
    .logo.mo, .menu_btn.mo .menu_btn_burger,.login_wrap.mo {z-index: 999;}
    .menu_btn.mo .menu_btn_burger {width: 30px; height: 22px;}

    #gnb_mo {width: 100%;position: fixed; background-color: var(--pointcolor);  color: var(--backcolor);  transition: .3s; left: 0; top: 0;height: 100%;text-align: left;     padding: 2.5% 7%; opacity: 0;pointer-events: none; z-index: -1; -ms-overflow-style: none; /* IE and Edge */        scrollbar-width: none; /* Firefox */ overflow-y: scroll;}
    #gnb_mo::-webkit-scrollbar {display: none;}    
    #gnb_mo .gnb .menu span.width30 {display: block; width: 100%; background-image: url(/img/main/m_arrow_off.png); background-position-x: 97.5%;
        background-position-y: 50%; background-repeat: no-repeat;}
    #gnb_mo .gnb .menu span.width30.active {background-image: url(/img/main/m_arrow_on.png);}
    #gnb_mo .gnb .menu .font-30 {font-size: 2.8125rem;}
    #gnb_mo .gnb .submenu.font-18  { font-size: 1.875rem;}
    #gnb_mo .gnb .submenu_wrap {display: none;}
    #gnb_mo .gnb .submenu {display: flex;flex-wrap: wrap; width: 80%;} 
    #gnb_mo .gnb .submenu li {margin-right: 2rem;}
    #gnb_mo .gnb .submenu.mb-15 {margin-bottom: 0;}

    .quick_wrap {top: auto;transform: unset;bottom: 10%;right: 5%;}
    .quick_wrap li {width: 50px;height: 50px; }
    .quick_wrap li a img {left: 13px;}
    .quick_wrap li:nth-child(2) a img {left: 15px;}
    .quick_wrap li:nth-child(2) a img {left: 14px;}
    .quick_wrap li:nth-child(5) a img {left: 5px;}
    .quick_wrap li:last-child {padding-top: 0.8rem;}
    #to_top .font-12 { font-size: 1.250rem; font-weight: 500;}
    #to_top .mo {width: 15px;height: auto;}

    .quick_icon {pointer-events: none; opacity: 0;} 
    .quick_icon.on, .quick_icon:nth-child(8),.quick_icon:last-child { pointer-events: auto; opacity: 1;} 
    .quick_wrap li::after {padding: 15px 0 0 20px;}    
}


/*****footer******/

#footer  {background: #27262b; border-top: 2px solid rgba(237,238,243,.15);}
#footer .company li, #footer .policy li a,  #footer .policy p {color: #a8a8a8; padding-bottom: 0;}
#footer .company li b {padding-right: 1rem; border-right: 2px solid rgba(255,255,255,.5); margin-right: 1rem;}

@media (max-width: 990px){
    #footer .company,#footer .policy {flex-direction: column;}
    #footer .company li, #footer .policy li a, #footer .policy p {padding-bottom: 1.25rem;}
    #footer .policy li a {padding-bottom: 2.5rem;}
}