.mo{display: none !important;}
.mo-ib{display: none !important;}
.mo-if{display: none !important;}
.mo-f{display: none !important;}
.mo-g{display: none !important;}

header{position: fixed; top: 0; width: 100%; margin: 0 auto;  z-index: 999; --hd-text: #3C3C3C; --hd-ham: #524A43; background: #fff; transition: 0.5s ease; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);}
header.hide{ transform: translateY(-100%); box-shadow: unset;}
header.tr{background: transparent; --hd-text: #fff; --hd-ham: #fff; box-shadow: unset;}
header .hd-cont{width: 100%; max-width: 1920px; height: 84px; padding-inline: 80px; justify-content: space-between; align-items: center; display: flex; box-sizing: border-box; margin-inline: auto;}
header .logo-area{width: 250px;}
header .logo-image {width: 103px; height: auto;}
header .logo-image.cl{display: block;}
header .logo-image.wh{display: none;}
header.tr .logo-image.cl{display: none;}
header.tr .logo-image.wh{display: block;}
header .navigation {flex-grow: 1; display: flex; justify-content: center; align-items: center; height: 100%;}
header .menu-list {display: flex; gap: 76px; justify-content: center; width: 100%; list-style: none; padding: 0; margin: 0; white-space: nowrap;}
header .menu-item{position: relative; width: fit-content; transition: width 0.5s; text-align: center;}
header .menu-item a{text-align: center; color: var(--hd-text); font-size: 20px; font-family: SUIT; font-weight: 400; line-height: 1.4; word-wrap: break-word;}
header .menu-item:after{position: absolute; content: ''; bottom: -30px; left: 0; width: 0; height: 2px; background-color: #7FA0C1; transition: width 0.5s ease; z-index: 100;}
header .menu-item:hover:after{width: 100%;}
header.is-hover .menu-list,
header.is-active .menu-list{gap: 0;}
header.is-hover .menu-list .menu-item,
header.is-active .menu-list .menu-item{width: calc(100% / 6);}
header .hd-btn-wrap {display: flex; justify-content: end; align-items: center; width: 250px; gap: 28px;}
header .hd-btn-wrap .btn-login{padding: 10px 27px; border-radius: 99px; border: 1px solid var(--hd-ham); color: var(--hd-text); font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
header .hamburger-button {width: 36px; height: 18px; flex-direction: column; justify-content: space-between; align-items: flex-start; display: inline-flex; background: none; border: none; cursor: pointer; padding: 0; position: relative;}
header .bar {width: 100%; height: 2px; background: var(--hd-ham); transition: all 0.3s;}
header.is-active .bar:nth-child(1) {transform: translateY(8px) rotate(30deg);}
header.is-active .bar:nth-child(2) {opacity: 0;}
header.is-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-30deg);}

#top_menu { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); height: 0; overflow: hidden; transition: height 0.3s ease-in-out; z-index: 99; } 
#main_header.is-hover #top_menu, #main_header.is-active #top_menu { height: 312px; } 
#top_menu .nav-body {display: flex; justify-content: center; max-width: 1920px; margin: 0 auto; padding: 36px 80px 88px;}
#top_menu .nav-body ul {display: flex; align-items: flex-start;}
#top_menu .nav-body ul li{position: relative; display: flex; align-items: center; flex-direction: column; gap: 36px; width: calc(100% / 6); text-align: center;} 
#top_menu .nav-body ul li:after{position: absolute; content: ''; top: -36px; left: 0; width: 0; height: 2px; background-color: #7FA0C1; transition: width 0.5s ease;}
#top_menu .nav-body ul li:hover:after{width: 100%;}
#top_menu .nav-body ul li a {position: relative; color: #3C3C3C; font-family: SUIT; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal;}
#top_menu .nav-body ul li a:hover:before{position: absolute; content: ''; top: 50%; left: -9px; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: #7FA0C1;}

#side_menu{position: fixed; top: 0; right: -100%; width: 100%; max-width: 1280px; height: 100vh; padding-inline: 46px; background: url(../img/nav_bg.webp) center/cover no-repeat; transition: 0.5s ease; z-index: 1000;}
#side_menu.open{right: 0;}
#side_menu .nav-head{display: flex; align-items: center; justify-content: end; padding-block: 31px; border-bottom: 1px solid rgba(60, 60, 60, 0.50); color: #3C3C3C; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-head a{color: #3C3C3C; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-head span{display: inline-block; margin-inline: 10px; color: #3C3C3C; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-head button{padding: 0; margin: 0; margin-left: 35px; background-color: transparent; border: 0;}
#side_menu .nav-body{padding: 77px 73px;}
#side_menu .nav-body ul{display: flex; flex-direction: column; gap: 61px;}
#side_menu .nav-body ul li{display: flex; align-items: center;}
#side_menu .nav-body ul li .title{width: 178px; margin-right: 64px; color: #7FA0C1; font-family: "Noto Serif KR"; font-size: 22px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-body ul li a{display: inline-block; margin-right: 43px; color: #3C3C3C; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-body ul li a:hover{text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #7FA0C1;}
#side_menu .nav-body ul li a:last-child{margin-right: 0;}

#main_page{}

.floating-container {position: fixed; bottom: 30px; right: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 999; pointer-events: none;}
.floating-container .floating-menus {display: flex; flex-direction: column; gap: 10px;}
.floating-container .quick-item {display: flex; align-items: center; justify-content: center; gap: 8px; width: 160px; height: 45px; background: rgba(255,255,255,0.8); border: 1px solid #7FA0C1; border-radius: 25px; color: #3C3C3C; text-align: center; font-family: SUIT; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: 0.3s; pointer-events: none;}
.floating-container .quick-item:hover{background: #7FA0C1; color: #fff;}
.floating-container .quick-item img {width: 20px; height: 20px; object-fit: contain;}
.floating-container .quick-item .def{display: block;}
.floating-container .quick-item .hov{display: none;}
.floating-container .quick-item:hover .def{display: none;}
.floating-container .quick-item:hover .hov{display: block;}
.floating-container.active .quick-item {opacity: 1; transform: translateY(0); pointer-events: auto;}
.floating-container.active .quick-item:nth-last-child(1) {transition-delay: 0.05s;}
.floating-container.active .quick-item:nth-last-child(2) {transition-delay: 0.1s;}
.floating-container.active .quick-item:nth-last-child(3) {transition-delay: 0.15s;}
.floating-container.active .quick-item:nth-last-child(4) {transition-delay: 0.2s;}
.floating-container .floating-trigger {position: relative; width: 100px; height: 100px; cursor: pointer; display: flex; align-items: center; justify-content: center; pointer-events: auto;}
.floating-container .trigger-circle {width: 70px; height: 70px; background: #7FA0C1; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; color: #FFF; text-align: center; font-family: "Noto Serif KR"; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal;}
.floating-container .trigger-text {position: absolute; width: 95px; animation: rotateText 10s linear infinite; pointer-events: none; z-index: 1;}
.floating-container .floating-trigger .trigger-circle.def{display: flex;}
.floating-container .floating-trigger .trigger-circle.trans{display: none;}
.floating-container.active .floating-trigger .trigger-circle.def{display: none;}
.floating-container.active .floating-trigger .trigger-circle.trans{display: flex;}
@keyframes rotateText {
    from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}

@media(max-width: 1024px){
    .pc{display: none !important;}
    .mo{display: block !important;}
    .mo-ib{display: inline-block !important;}
    .mo-if{display: inline-flex !important;}
    .mo-f{display: flex !important;}
    .mo-g{display: grid !important;}

    header{background: #fff;}
    header .hd-cont{height: 60px; padding-inline: 20px;}
    header .logo-image{width: 80px;}
    header .navigation{display: none;}
    header .hd-btn-wrap .btn-login{display: none;}
    header .hamburger-button{width: 28px; gap: 5px;}
    header .bar{height: 1.5px;}

    #top_menu{display: none;}

    #side_menu{max-width: 100%; padding-inline: 20px;}
    #side_menu .nav-head a{font-size: 14px;}
    #side_menu .nav-body{padding: 40px 20px;}
    #side_menu .nav-body ul{gap: 30px; height: calc(100svh - 167px); overflow-y: scroll;}
    #side_menu .nav-body ul li{flex-direction: column; align-items: flex-start; gap: 15px;}
    #side_menu .nav-body ul li .title{width: 100%; margin-right: 0; font-size: min(5.8vw, 22px);}
    #side_menu .nav-body ul li a{font-size: min(4vw, 16px); margin-right: 20px;}

    #main_page{}

    .floating-container{bottom: 20px; right: 10px;}
    .floating-container .floating-trigger{width: 80px; height: 80px;}
    .floating-container .trigger-circle{width: 55px; height: 55px; font-size: 12px;}
    .floating-container .trigger-text{width: 75px;}
    .floating-container .quick-item{width: 140px; height: 40px; font-size: 14px;}
}