@charset "utf-8";

/* Header */
header { position: sticky; top: 0; z-index: 100; width: 100%; transition: .3s ease-out; background: white; }
header .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap:2.8rem; width: 96%; max-width: 1720px; height: 110px; margin-inline: auto; transition: all .3s ease-in-out; }
header .logo { display: block; width: 186px; aspect-ratio: 186/62; background: url("/resources/img/common/logo.svg") no-repeat center/contain; text-indent: -9999px; overflow: hidden; transition: background .3s ease-out; }
header .logo a { display: block; width: 100%; height: 100%; }

    /* Scroll */
    header.scroll { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }
    
.gafh-header__mid { display: flex; align-items: center; gap: 3rem; flex: 1; }
.gafh-countdown { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: clamp(3.2rem, 4vw, 5.6rem); color: #000; line-height: 1; white-space: nowrap;}
.gafh-countdown span.light { font-weight: 200;}

/* GNB Wrap */
#gnb-wrap { display: inline-block; text-align: center; }
#gnb-wrap a { color:white; }
#gnb-wrap .gnb > ul { display: flex; justify-content: center; gap:10rem; transition: .3s ease-out; }
#gnb-wrap .gnb > ul > li { position: relative; }
#gnb-wrap .gnb > ul > li > a { display: inline-block; padding: 3.1rem 0; margin-bottom: 2px; font-size: var(--fs-20); font-weight: 600; transition: .3s ease-out; color: black; text-align: right; }
#gnb-wrap .gnb > ul > li > a::before { content: ''; display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
#gnb-wrap .gnb > ul > li:nth-child(1) > a::before { content: 'About'; }
#gnb-wrap .gnb > ul > li:nth-child(2) > a::before { content: 'Program'; }
#gnb-wrap .gnb > ul > li:nth-child(3) > a::before { content: 'Speakers'; }
#gnb-wrap .gnb > ul > li:nth-child(4) > a::before { content: 'Registration'; }
#gnb-wrap .gnb > ul > li:nth-child(5) > a::before { content: 'Download / Past Events'; }
#gnb-wrap .gnb > ul > li:nth-child(6) > a::before { content: 'Location'; }
#gnb-wrap .menu-two-depth { position: absolute; left:50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.2rem; visibility: hidden; opacity: 0; transition: .3s ease; }
#gnb-wrap .menu-two-depth > li > a { position: relative; display: inline-block; padding: 0.8rem 0; font-weight: 600; transition:.3s ease; white-space: nowrap; }
#gnb-wrap .menu-two-depth > li > a::after { content: ""; width: 100%; height: 1px; background: black; position: absolute; bottom: 0.5rem; left: 0; transition: .3s ease; transform: scaleX(0); }
#gnb-wrap .menu-two-depth > li:hover a::after { transform: scaleX(1); }
#gnb-wrap .menu-img-wrap { display: none; }

/* GNB Wrap - All Drop */
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) { height: 340px; overflow: initial; background: white; }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .logo { background: url("/resources/img/common/logo_b.png") no-repeat center/contain; }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .opt-menu .sns-set li img { filter:none; }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .opt-menu .lang a { border-color: var(--key-color); background-color: var(--key-color); }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .opt-menu .head-icons a img { filter:none; }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .ham-btn span  { background: var(--key-color); }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .ham-btn.ham-candy span::before,
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .ham-btn.ham-candy span::after { background: var(--key-color); }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .gnb > ul { gap: 2rem; }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .gnb > ul > li > a { color: var(--main-black); }
header:has(#gnb-wrap.alldrop:hover, #gnb-wrap.alldrop:focus-within) .menu-two-depth { visibility: visible; opacity: 1; }

/* GNB Wrap - One Drop */
#gnb-wrap.onedrop .gnb > ul > li { z-index: 0; position: relative; }
#gnb-wrap.onedrop .gnb > ul > li:hover > a { color: var(--key-color); }
#gnb-wrap.onedrop .gnb > ul > li:where(:hover, :focus-within) .menu-two-depth { visibility: visible; opacity: 1; }
#gnb-wrap.onedrop .menu-two-depth { left:auto; right:0; bottom: 1rem; transform: translateY(100%); min-width: 14rem; padding: 1.6rem 1rem; background: white; border:1px solid black; }
#gnb-wrap.onedrop .menu-two-depth > li > a { position: relative; color: black; }

/* GNB Wrap - One Drop Horizontal */
header:hover .gnb-wrap.onedrop-hor > .gnb > ul > li > a,
header:focus .gnb-wrap.onedrop-hor > .gnb> ul > li > a { color: var(--color-black); }
.gnb-wrap.onedrop-hor > .gnb > ul ul.two_depth { padding-top: 30px; }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li { display: inline-block; float: left; padding-right: 20px; margin-right: 20px; position: relative; }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li::before { content: ""; width: 1px; height: 9px; background: #ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li:last-child { padding-right: 0; margin-right: 0; }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li:last-child::before { display: none; }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li > a { font-size: 16px; color:var(--color-black); font-weight: 300; transition: all .3s ease; }
.gnb-wrap.onedrop-hor > .gnb > ul ul > li:hover a { color: var(--key-color); font-weight: 400; } 

.gnb-wrap.onedrop-hor > .gnb > ul > li > .two-depth-wrap { width: 900px; height: 80px; transition: all .5s ease-in-out; padding-top: 10px; position: absolute; opacity: 0; }
.gnb-wrap.onedrop-hor > .gnb > ul > li:hover > .two-depth-wrap { opacity: 1; z-index: 99; }


/* GNB Wrap - One Drop Image */
.gnb-wrap.onedrop-img .gnb > ul > li { position: static; }
.gnb-wrap.onedrop-img .gnb > ul > li > a { color: #fff; }

header:hover .gnb-wrap.onedrop-img > .gnb > ul > li > a,
header:focus .gnb-wrap.onedrop-img > .gnb> ul > li > a { color: var(--color-black); }

.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap { width: 100%; padding-top: 50px; text-align: left; position: absolute; left: 0; z-index: -1; opacity: 0; transition: all .5s ease-in-out; }
.gnb-wrap.onedrop-img .gnb > ul > li:hover > .two-depth-wrap { opacity: 1; z-index: 0; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap { display: block; width: 42%; position: relative; padding-left: 2%; float: left; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .img { display: block; width: 75%; height: 200px; vertical-align: middle; overflow: hidden; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .img .in_img { width: 100%; height: 100%; transition: all .5s ease-in-out; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap { width: 31%; height: 125px; padding: 20px 10px; box-sizing: border-box; background-color: #000; color: #fff; position: absolute; top: 28%; right: 10%; transition: all .3s ease-in-out; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap .tit { font-size: 20px; font-weight: 600; transition: all .5s ease-in-out; cursor: default; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap .txt { font-size: 14px; margin-top: 5px;transition: all .7s ease-in-out; cursor: default; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap .txt:before { content: ""; display: block; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap .dp_more { display: block; width: 100%; height: 10px; background: url("/resources/img/common/arrow_ico.png") no-repeat right center; position: absolute; right: 20px; bottom: 20px; transition: all .3s ease-in-out; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap .dp_more:hover { right: 10px; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap:hover { transform: translateX(20px); }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap:hover .tit,
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap .img_wrap .txt_wrap:hover .txt { transform: translateX(10px); }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap ul.two_depth { float: left;}
.gnb-wrap.onedrop-img .gnb > ul > li .two_depth > li > a { display: block; font-size: 15px; font-weight: 400; padding: 10px 0 5px; margin-bottom: 5px; color: var(--sub-black); transition: all .3s ease-in-out; word-break: keep-all; position: relative; }
.gnb-wrap.onedrop-img .gnb > ul > li .two_depth > li:last-child > a { margin-bottom: 0; }
.gnb-wrap.onedrop-img .gnb > ul > li .two_depth > li > a:after { content: ""; width: 0; height: 2px; transition: all .3s ease-in-out; background-color: var(--sub-key-color); position: absolute; bottom: -2px; left: 0; }
.gnb-wrap.onedrop-img .gnb > ul > li .two_depth > li > a:hover { color: var(--color-black); }
.gnb-wrap.onedrop-img .gnb > ul > li .two_depth > li > a:hover:after { width: 100%; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw1 .img_wrap .img .in_img { background: url("/resources/img/common/drop_img1.jpg")no-repeat center/cover; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw2 .img_wrap .img .in_img { background: url("/resources/img/common/drop_img2.jpg")no-repeat center/cover; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw3 .img_wrap .img .in_img { background: url("/resources/img/common/drop_img3.jpg")no-repeat center/cover; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw4 .img_wrap .img .in_img { background: url("/resources/img/common/drop_img4.jpg")no-repeat center/cover; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw1 .img_wrap .txt_wrap .txt:before { content: "환영합니다. \A 환영합니다."; white-space: pre; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw2 .img_wrap .txt_wrap .txt:before { content: "환영합니다. \A 환영합니다."; white-space: pre; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw3 .img_wrap .txt_wrap .txt:before { content: "History, \A and Innovation"; white-space: pre; }
.gnb-wrap.onedrop-img .gnb > ul > li .two-depth-wrap.dw4 .img_wrap .txt_wrap .txt:before { content: "Best quality, Best performance"; }

/* Ham button */
.ham-btn { display: none; z-index: 10; position: absolute; top: 50%; transform: translateY(-50%); right:0; align-items: center; justify-content: center; width: 50px; aspect-ratio: 1/1; transition: all .3s ease-in-out; cursor: pointer; border-radius: 8px; }
.ham-btn:hover { background-color: #DDDDDD30; }
.ham-btn p { position: relative; width: 52%; aspect-ratio: 1/1; }
.ham-btn span { position: absolute; width: 100%; height: 2px; background-color: black; transition: .3s ease-out; }
.ham-btn span:nth-child(1) { top: 10%; right:0; }
.ham-btn span:nth-child(2) { top: 50%; right:0; transform: translateY(-50%); }
.ham-btn span:nth-child(3) { bottom: 10%; right:0; }
.ham-btn span:nth-child(4) { display: none; }


@media screen and (max-width:1600px){
    #gnb-wrap .gnb > ul { gap:7rem; }
}
@media screen and (max-width:1300px){
    #gnb-wrap .gnb > ul { gap:5rem; }
}
@media screen and (max-width:1200px){
    #gnb-wrap .gnb > ul { gap:2.4rem; }
}
@media screen and (max-width:1024px){
    #gnb-wrap { display: none; }
    .ham-btn { display: flex; }
    header .header-inner { height:90px; }
    header .logo { width: 156px; }
    .gafh-header__mid { justify-content: end; padding-right: 60px; }
}

@media screen and (max-width:768px){
    header .header-inner { width: 100%; height: 82px; padding: 0 24px; }
    header .logo { width: 140px; }
    .gafh-header__mid { padding-right: 30px; }
}


/* Mobile Menu */
.mobile-menu-wrap { visibility: hidden; z-index: 100; position: fixed; inset:0; background: transparent; opacity: 0; transition: .3s ease; }
.mobile-menu-wrap::after { visibility: hidden; z-index: -1; content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); inset:0; transition: opacity 0.7s linear; pointer-events: none; }
.mobile-menu-wrap .mobile-menu { transition: .3s ease-out; }
.mobile-menu-wrap .mobile-top-box { display: flex; align-items: center; justify-content: space-between; height: 10rem; padding: 2rem 4rem 0; }
.mobile-menu-wrap .mobile-top-box .ham-btn { position: relative; top:auto; right: -1.2rem; transform: none; }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(1) { right:50%; top:50%; transform: translate(50%, -50%) rotate(45deg); }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(2) { right:50%; top:50%; transform: translate(50%, -50%) rotate(-45deg); }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(3) { display: none; }
.mobile-menu-wrap .mobile-top-box .mobile-logo { height: 6.5rem; }
.mobile-menu-wrap .mobile-top-box .mobile-logo img { height: 100%; object-fit: contain; }
.mobile-menu-wrap .mobile-img-box { display: none; }
#mobile-gnb-wrap { padding: 4rem; }
#mobile-gnb-wrap .menu-img-wrap { display: none; }
#mobile-gnb-wrap .menu-two-depth { display: none; padding: 1rem 0; }
#mobile-gnb-wrap .menu-two-depth li { margin-top: .5rem; }

/* Mobile Menu Open */
.mobile-menu-wrap.mobileOn { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn::after { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn.mob-half .mobile-menu { transform: translateX(0); }


/* GNB Half */
.mobile-menu-wrap.mob-half .mobile-menu { position: absolute; top: 0; left: unset; right: 0; width: 80%; max-width: 450px; height: 100%; background-color: white; transform: translateX(100%); }
.mobile-menu-wrap.mob-half #mobile-gnb-wrap { height: calc(100vh - 16rem); }
.mobile-menu-wrap.mob-half .gnb { height: 100%; overflow-y: auto; }
.mobile-menu-wrap.mob-half .gnb > ul > li { padding: 3rem 0; transition: .3s ease-out; }
.mobile-menu-wrap.mob-half .gnb > ul > li > a { display: block; font-size: var(--fs-28); font-weight: 700; }
.mobile-menu-wrap.mob-half .gnb > ul ul a { display: block; margin-top: 2rem; padding: 0.5rem 2rem; font-size: var(--fs-24); border-radius: 4px; transition: .3s ease-out; }
.mobile-menu-wrap.mob-half .gnb > ul ul a:hover { background: rgba(255, 255, 255, 0.2); }

@media screen and (max-width:768px){
    .mobile-menu-wrap.mob-half .mobile-menu { width: 100%; }
}


/* GNB Wide */
.mobile-menu-wrap.mob-wide .mobile-menu { position: relative; width: 100%; height: 100%; background-color: var(--main-black); color:white; }
.mobile-menu-wrap.mob-wide .mobile-menu a { color:white; }
.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { width: 92%; height: calc(100vh - 16rem); max-width: 1400px; margin-inline: auto; padding: 6rem 8rem 10rem; }
.mobile-menu-wrap.mob-wide #mobile-gnb-wrap .menu-two-depth { display: block; }
.mobile-menu-wrap.mob-wide .gnb { height: 100%; overflow-y: auto; }
.mobile-menu-wrap.mob-wide .gnb > ul { display: flex; flex-wrap: wrap; height:100%; }
.mobile-menu-wrap.mob-wide .gnb > ul > li { width: 25%; padding: 1rem 0; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > a { display: block; padding: 1rem 0 2rem; font-size: var(--fs-26); font-weight: 700; transition: .3s ease; word-break: keep-all; }
.mobile-menu-wrap.mob-wide .gnb > ul ul a { display: block; padding: .6rem 1.2rem; font-size: var(--fs-20); line-height: 1.4; border-radius: 4px; transition: .3s ease-out; }
.mobile-menu-wrap.mob-wide .gnb > ul ul a:hover { background: rgba(255, 255, 255, 0.2); }

@media screen and (max-width:1400px){
    .mobile-menu-wrap.mob-wide .gnb > ul > li { width: 33%; }
}
@media screen and (max-width:768px){
    .mobile-menu-wrap.mob-wide #mobile-gnb-wrap { width: 100%; padding: 11rem 24px; }
    .mobile-menu-wrap.mob-wide .mobile-menu { width: 100%; }
    .mobile-menu-wrap.mob-wide .gnb > ul > li { width: 100%; }
}

@media screen and (max-width:500px){
    .mobile-menu-wrap.mob-wide #mobile-gnb-wrap .menu-two-depth { display: none; }
}


/* GNB Modal */
.mobile-menu-wrap.mob-modal .mobile-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 1280px; background-color: #fff; border-radius: 30px; overflow: hidden; }
.mobile-menu-wrap.mob-modal #mobile-gnb-wrap { height: 60vh; padding:0; }
.mobile-menu-wrap.mob-modal #mobile-gnb-wrap .menu-two-depth { display: block; }
.mobile-menu-wrap.mob-modal .mobile-top-box { background-color: var(--main-black); }
.mobile-menu-wrap.mob-modal .gnb { height: 100%; }
.mobile-menu-wrap.mob-modal .gnb > ul { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; height: 100%; }
.mobile-menu-wrap.mob-modal .gnb > ul > li { display: block; width: calc(100% /4); padding:6rem 0; text-align: center; transition: .3s ease-out; }
.mobile-menu-wrap.mob-modal .gnb > ul > li:hover { background: #F5F5F5; }
.mobile-menu-wrap.mob-modal .gnb > ul > li > a { display:block; font-weight: 600; font-size: var(--fs-26); transition: .3s ease; }
.mobile-menu-wrap.mob-modal .gnb > ul ul { margin-top: 2rem; }
.mobile-menu-wrap.mob-modal .gnb > ul ul a { display: block; padding: 10px; font-size: 18px; }
.mobile-menu-wrap.mob-modal .gnb > ul ul a:hover { text-decoration: underline; }

@media screen and (max-width:768px){
    .mobile-menu-wrap.mob-modal .mobile-menu { width: 100%; top: 0; transform: translate(-50%, 0); height: 100%; border-radius: 0; }
    .mobile-menu-wrap.mob-modal .gnb { max-height: none; height: calc(100vh - 67px); background-size: 50%; }
    .mobile-menu-wrap.mob-modal .gnb > ul { flex-direction: column; }
    .mobile-menu-wrap.mob-modal .gnb > ul > li { width: 100%; text-align: left; margin: 0; float: unset; }
    .mobile-menu-wrap.mob-modal .gnb > ul > li > a { height: auto; border-right: 0; padding: 25px 30px; line-height: 1.2; box-sizing: border-box; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    .mobile-menu-wrap.mob-modal .gnb > ul > li > a.open { font-weight: 700; }
    .mobile-menu-wrap.mob-modal .gnb > ul > li > a::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #ddd; position: absolute; right: 20px; top: 50%; transform: translate3d(0, -50%, 0);}
    .mobile-menu-wrap.mob-modal .gnb > ul > li > a.open::before { border-bottom: 10px solid #4a0553; border-top: 0; }
    .mobile-menu-wrap.mob-modal .gnb > ul ul { background:#f9f9f9; margin: 0; padding: 10px 0; }
    .mobile-menu-wrap.mob-modal .gnb > ul ul > li { margin: 0; border-bottom: 1px dashed #e2e2e2; }
    .mobile-menu-wrap.mob-modal .gnb > ul ul > li > a {padding: 18px 30px; font-size: 16px; box-sizing: border-box; text-align: left;}
    .mobile-menu-wrap.mob-modal .gnb > ul ul > li:last-child { border-bottom: 0; }
}


/* GNB Image */
.mobile-menu-wrap.mob-img #mobile-gnb-wrap { padding:0; }
.mobile-menu-wrap.mob-img .gnb { position: absolute; inset:0; width: 60%; padding: 10% 10% 0; background: #6f6353 url("/resources/img/example/vert_bg00.jpg") center top/cover no-repeat; transition: background-image .5s ease-in-out; background-attachment: fixed; }
.mobile-menu-wrap.mob-img .gnb#linum_1 { background-image:url("/resources/img/example/vert_bg01.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_2 { background-image:url("/resources/img/example/vert_bg02.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_3 { background-image:url("/resources/img/example/vert_bg03.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_4 { background-image:url("/resources/img/example/vert_bg04.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_5 { background-image:url("/resources/img/example/vert_bg05.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_6 { background-image:url("/resources/img/example/vert_bg06.jpg"); }

.mobile-menu-wrap.mob-img .gnb > ul { width: 100%; text-align: left; }
.mobile-menu-wrap.mob-img .gnb > ul > li { width: 100%; vertical-align: top; box-sizing: border-box; margin: 5px 0 35px; }
.mobile-menu-wrap.mob-img .gnb > ul > li > a { width: 100%; line-height: 140%; color:#fff; display: inline-block; font-weight: 600; font-size: 32px; transition: all .3s ease; word-break: keep-all; position: relative; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul { margin-top: 20px; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul li { display: inline-block; margin-right: 2%; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul li:last-child { margin-right: 0; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul a { display: inline-block; line-height: 140%; position: relative; font-weight: 100; color: #fff; font-size: 18px; transition: all .3s ease-in-out; word-break: keep-all; padding-left: 5px; border-bottom: 1px solid rgba(255,255,255,0); }
.mobile-menu-wrap.mob-img .gnb > ul > li ul a:hover { border-bottom: 1px solid #fff; }

.mobile-menu-wrap.mob-img .mobile-img-box { display: block; width: 40%; height: 100%; position: absolute; top: 0; right: 0; background: var(--main-black); padding: 10% 5% 5%; color:white }
.mobile-menu-wrap.mob-img .mobile-img-box a { color:white; }
.mobile-menu-wrap.mob-img .mobile-img-box dl { width: 100%; text-align: right; }
.mobile-menu-wrap.mob-img .mobile-img-box dl dt { font-size: var(--fs-32); }
.mobile-menu-wrap.mob-img .mobile-img-box dl dd { margin-top: 2rem; line-height: 1.6; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle { position: relative; display: flex; align-items: center; justify-content: center; width: 15.2rem; margin-top: 5rem; aspect-ratio: 1/1; cursor: pointer; float: right; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle::before {content: ""; position: absolute; inset:0; background: url("/resources/img/example/vert_circle.png") no-repeat center/contain; animation: rotate 7s linear infinite; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle span { display: inline-block; font-size: var(--fs-32); transition: all .3s ease-in-out; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle:hover span { transform: translateX(10px); }

@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

.mobile-menu-wrap.mob-img .mobile-img-sns { position: absolute; display: flex; gap:2rem; align-items: center; width: 100%; padding: 0 2rem; right: 0; bottom: 2rem; }
.mobile-menu-wrap.mob-img .mobile-img-sns::after { content: ""; flex:1; height: 1px; background: rgba(255, 255, 255, 0.5); }
.mobile-menu-wrap.mob-img .mobile-img-buttons { display: flex; gap:1.2rem; }
.mobile-menu-wrap.mob-img .mobile-img-buttons > a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: all .3s ease-in-out; opacity: 0.7; filter:saturate(0) brightness(500); }
.mobile-menu-wrap.mob-img .mobile-img-buttons > a:hover { opacity: 1; }

@media screen and (max-width:1024px){
    .mobile-menu-wrap.mob-img .mobile-img-box { display: none; }
    .mobile-menu-wrap.mob-img .gnb { width: 100%; padding: 10%; }
    .mobile-menu-wrap.mob-img .gnb::after { content: ''; background-color: rgba(0,0,0,0.3); position: absolute; inset:0; z-index: -1; }
    .mobile-menu-wrap.mob-img .gnb#linum_1,
    .mobile-menu-wrap.mob-img .gnb#linum_2,
    .mobile-menu-wrap.mob-img .gnb#linum_3,
    .mobile-menu-wrap.mob-img .gnb#linum_4,
    .mobile-menu-wrap.mob-img .gnb#linum_5,
    .mobile-menu-wrap.mob-img .gnb#linum_6 { background-image:url("/resources/img/example/vert_bg01.jpg"); }
}