@charset 'utf-8';

/* Base Styles */

/* Header Styles */
header { width: 100%; height: 65px; background: #338753; padding-bottom: 10px; position: relative; z-index: 10; }
.headerLogo:hover { opacity:0.7;}
.headerWrap { display: flex; justify-content: space-between; width: 90%; margin: 0 auto; }
.headerLogo img { width: auto; height: 45px; margin: 10px 0; }

/* Menu Button (Mobile) */
.mb { position: fixed; z-index: 10; right: 5%; top: 20px; display: block; width: 40px; height: 40px; padding: 0; cursor: pointer; }
.mb span { display: block; width: 30px; height: 2px; margin: 18px auto 0 auto; background: #FFF; position: relative; transition: 0.4s; }
.mb span:before, .mb span:after { content: ""; display: block; width: 30px; height: 2px; background: #FFF; position: absolute; transition: 0.4s; }
.mb span:before { margin: -10px 0 0 0; }
.mb span:after { margin: 10px 0 0 0; }
.mb.dark span, .mb.dark span:before, .mb.dark span:after { background: #000; transition: 0.4s; }
.mb__open span { background: transparent !important; }
.mb__open span:before { top: 6px; right: 6px; transform: rotate(-45deg) translateY(8px); background: #000; }
.mb__open span:after { top: -3px; left: 6px; bottom: auto; transform: rotate(-135deg) translateX(8px); background: #000; }

/* Mobile Menu */
.menu { width: 100%; height: 100%; display: flex; flex-direction: column; opacity: 0; transition: 0.4s; margin: 0 0 0 200%; padding: 80px 0 70px 0; background: #fff; position: fixed; top: 0; left: 0; overflow-y: scroll; z-index: 6; box-sizing: border-box; color: #000; }
.menu__open { opacity: 1; transition: 0.4s; margin: 0; background: #F6F8EF; }
.menuMain { width: 100%; padding: 0; display: flex; flex-wrap: wrap; }
.menuMain li { width: 100%; border-top: 1px solid #000; overflow: hidden; }
.menuMain li a { width: 100%; padding: 15px 5%; display: flex; position: relative; border-left: 4px solid transparent; color: #000; box-sizing: border-box;  font-weight: bold; }
.menuMain li a::before { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0; position: absolute; top: 50%; right: 5%; border-top: 2px solid #338753; border-right: 2px solid #338753; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menuSub { width: 100%; padding: 0; display: flex; flex-wrap: wrap; font-weight:bold; border-bottom: 1px solid #000; }
.menuSub a { width: 100%; padding: 8px 5% 12px; display: flex; flex-wrap: wrap; position: relative; border-top: 1px solid #000; border-left: 4px solid transparent; }
.menuSub a::before { content: ''; width: 6px; height: 6px; margin: -3px 0 0 0; position: absolute; top: 50%; right: 5%; border-top: 2px solid #338753; border-right: 2px solid #338753; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menuSub a.menuContact { background: #FFFF80; color: #000; }
.menuSub a.menuContact.menuTell { color: #000; font-size: 18px; letter-spacing: 0.1em; display: none; }
.menuSub a.menuContact::before { border-top: 2px solid #338753; border-right: 2px solid #338753; }

/* Contact Icon */
header .contact_icon { width: 36px; height: 36px; }
.menuSub a.menuContact { line-height: 36px; display:none;}

/* Desktop Styles (1080px+) */
@media screen and (min-width: 1080px) {
    main { /*padding-top: 100px;*/ background: #F6F8EF; }
    
    header { /*position: fixed;*/ top: 0; height: fit-content; padding-bottom: 24px; }
    .headerWrap { width: 90vw; }
    .headerLogo { flex: 0 1 250px; min-width: 200px; aspect-ratio: 210 / 74; margin: 15px 0 0 0; padding: 0; transition: 0s; }
    .headerLogo img { height: 100%; width: 100%; object-fit: contain; display: block; }
    .headerLogoText { width: 100%; margin: 0 0 0 15px; }
    .headerLogoText span { font-size: 14px; }
    .headerLogoText strong { font-size: 20px; margin: 5px 0 0 0; }
    
    .mb { display: none; }
    
    .menu { position: relative; display: flex; width: auto; height: auto; margin: 20px 0 0 0; padding: 0; flex-direction: row; overflow-y: hidden; opacity: 1; background: none; font-weight: 500; flex: 0 0 auto; transition: 0s; }
    header .menuMain { flex-wrap: nowrap; }
    .menuMain { width: fit-content; max-width: 750px; margin: 5px 0 0 0; height: auto; display: flex; justify-content: space-between; background: none; align-items: center; }
    .menuMain li { width: auto; height: auto; margin: 0 0 0 24px; overflow: visible; border-top: none; white-space: nowrap; }
    .menuMain li a { width: auto; padding: 5px 0; display: inline-block; position: relative; border-left: none; box-sizing: border-box; text-align: center; line-height: 2; color: #FFF; font-weight: 500; }
    .menuMain li a::before { display: none; }
    .menuMain li a::after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background: #FFFF80; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
    .menuMain li a:hover::after { transform: scale(1, 1); }
    
    .menuSub { width: fit-content; align-items: center; justify-content: flex-end; font-weight: bold; border-bottom: none; margin-left: 12px; }
    .menuSub a { width: auto; padding: 0; border-top: none; }
    .menuSub a.menuSell { padding: 5px 30px 5px 0; }
    .menuSub a.menuSell::before { border-top: 2px solid #000; border-right: 2px solid #000; }
    .menuSub a.menuSell::after { content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background: #338753; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
    .menuSub a.menuSell:hover::after { transform: scale(1, 1); }
    .menuSub a.menuContact { margin: 0 0 0 8px; padding: 5px 18px 5px 5px; border-radius: 9999px; position: relative; white-space: nowrap; z-index: 0; line-height: 40px; border: 3px solid #FFFF80; display: block; }
    .menuSub a.menuContact.menuTell { background: transparent; color: #FFFF80; font-size: 20px; pointer-events: none; border: none;}
    .menuSub a.menuContact.menuTell::after { height: 0; }
    .menuSub a.menuContact::before { display: none; }
    .menuSub a.menuContact::after { content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; z-index: -1; border-radius: 9999px; background: #FFF; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
    .menuSub a.menuContact:hover { transition: 0.3s; }
    .menuSub a.menuContact:hover::after { transform: scale(1, 1); }
    
    header .contact_icon { width: 40px; height: 40px; }
}

/* Medium Desktop Styles (1080px - 1500px) */
@media screen and (min-width: 1080px) and (max-width: 1500px) {
    /* main { padding-top: 137px; }
    
    header { padding-bottom: 20px; }
    .headerLogo { flex: 0 1 310px; max-height: 70px; }
    .menu { flex-direction: column-reverse; align-items: flex-end; }
    .menuMain { margin-right: 4px; } */
}