@charset "utf-8";

@font-face{
    font-family:'Spoqa Han Sans';
    font-style:normal;
    font-weight:300;
    src:url(../../font/SpoqaHanSansNeo-Light.eot),
    url(../../font/SpoqaHanSansNeo-Light?#iefix) format('embedded-opentype'),
    url(../../font/SpoqaHanSansNeo-Light.woff2) format('woff2'),
    url(../../font/SpoqaHanSansNeo-Light.woff) format('woff'),
    url(../../font/SpoqaHanSansNeo-Light.otf) format('opentype');
}

@font-face{
    font-family:'Spoqa Han Sans';
    font-style:normal;
    font-weight:400;
    src:url(../../font/SpoqaHanSansNeo-Regular.eot),
    url(../../font/SpoqaHanSansNeo-Regular?#iefix) format('embedded-opentype'),
    url(../../font/SpoqaHanSansNeo-Regular.woff2) format('woff2'),
    url(../../font/SpoqaHanSansNeo-Regular.woff) format('woff'),
    url(../../font/SpoqaHanSansNeo-Regular.otf) format('opentype');
}

@font-face{
    font-family:'Spoqa Han Sans';
    font-style:normal;
    font-weight:700;
    src:url(../../font/SpoqaHanSansNeo-Bold.eot),
    url(../../font/SpoqaHanSansNeo-Bold?#iefix) format('embedded-opentype'),
    url(../../font/SpoqaHanSansNeo-Bold.woff2) format('woff2'),
    url(../../font/SpoqaHanSansNeo-Bold.woff) format('woff'),
    url(../../font/SpoqaHanSansNeo-Bold.otf) format('opentype');
}

/* reset */
body, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, a, div, header, footer, nav, aside, span, strong, button, fieldset, input, select, address, label, table, thead, tbody, tr, th, td, video{padding:0; margin:0; box-sizing:border-box;}
body, input, select, textarea, button{font-family:'Spoqa Han Sans', sans-serif; font-size:14px; font-weight:400; color:#333; line-height:1;}
button{border:none; cursor:pointer; background-color:transparent;}
html, body{overflow-x:hidden;}
li{list-style:none;}
img{vertical-align:top;}
img, video{max-width:100%;}
address, em{font-style:normal; font-weight:400;}
a{text-decoration:none; color:#333;}
table{width:100%; table-layout:fixed; border-collapse:collapse;}
fieldset{border:none;}
legend, caption, .blind{width:1px; height:1px; margin:-1px; overflow:hidden; position:absolute; clip:rect(0 0 0 0);}
input[type=submit], input[type=reset]{border:none; cursor:pointer; background-color:transparent;}
input, button, select{-webkit-appearance:none; border:none; border-radius:0;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 30px white inset !important;}

:root{
    --ega_c_w:1400px;
    --ega_primary_color:#264799; /* 청색 */
    --ega_primary_color_hover:#203c81;
    --ega_point_color1:#263289; /* 남색 */
    --ega_point_color4:#263289; /* 남색 */
    --ega_white_color_hover:#eee;
    --ega_black_color_hover:#222;
    --ega_font_color_sub:#808080;
}

/* header */
#skip{display:flex; position:absolute; top:-100px; left:0; z-index:99999;}
#skip.active{top:0;}
#skip a{display:block; padding:7px 15px; font-size:14px; color:#fff; background-color:#000;}

#ega_header{position:relative; z-index:99;}
#ega_header div.top{position:relative; background-color:var(--ega_primary_color);}
#ega_header div.top > div{display:flex; justify-content:space-between; width:var(--ega_c_w); margin:0 auto;}
#ega_header div.top ul.family{display:flex; align-items:flex-end;}
#ega_header div.top ul.family li a{display:flex; flex-direction:column; justify-content:center; align-items:center; width:160px; height:45px; position:relative; font-size:16px; color:#fff; border-top:1px solid #aaa; border-right:1px solid #aaa; border-top-right-radius:15px; border-top-left-radius:15px;}
#ega_header div.top ul.family li:first-child a{border-left:1px solid #aaa;}
#ega_header div.top ul.family li a[aria-selected=true]{font-weight:700; color:var(--ega_primary_color); border-top:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; background-color:#fff !important;}
#ega_header div.top ul.family li a:hover, #ega_header div.top ul.family li a:focus{background-color:var(--ega_primary_color_hover);}
#ega_header div.top ul.member{display:flex; font-size:16px;}
#ega_header div.top ul.member li{display:flex; flex-direction:column; justify-content:center; align-items:center; height:50px; padding:0 20px; position:relative; color:#fff;}
#ega_header div.top ul.member li a{font-size:16px; color:#fff;}
#ega_header div.top ul.member li a:hover, #ega_header div.top ul.member li a:focus{text-decoration:underline; text-underline-offset:3px;}
#ega_header div.top ul.member li:not(:first-child)::before{content:""; width:1px; height:14px; position:absolute; top:50%; left:0; background-color:#fff; transform:translateY(-50%);}
#gnb_wrap{position:relative;}
#gnb_wrap::after{content:""; width:0; height:1px; position:absolute; bottom:0; left:50%; background-color:var(--ega_primary_color); transform:translateX(-50%); transition:all 0.3s;}
#gnb_wrap nav{display:flex; justify-content:space-between; align-items:center; width:var(--ega_c_w); margin:0 auto;}
#gnb_wrap nav h1 a{display:block; width:267px; height:50px; background:url(../../images/www/foreigner/eGA_Foreigner.png) no-repeat 50% 50%/contain;margin-top: 5px;}
#gnb div.member{display:none; flex-direction:column; justify-content:center; gap:5px; height:60px; padding:0 20px; position:relative; background-color:var(--ega_primary_color);}
#gnb div.member p{display:flex; gap:10px; font-size:12px; color:#fff;}
#gnb div.member p a{width:90px; height:35px; font-size:12px; color:#fff; border:1px solid #fff; border-radius:12px; background-color:transparent; transform:translateY(-10px);}
#gnb div.member ul{display:flex; gap:25px;}
#gnb div.member ul li a{padding-left:25px; position:relative; font-size:12px; color:#fff;}
#gnb div.member ul li a::before{content:""; width:20px; height:20px; position:absolute; top:50%; left:0; background-image:url(../../images/www/common/mo_bg_icon_top.png); background-repeat:no-repeat; background-size:60px 20px; transform:translateY(-50%);}
#gnb div.member ul li.type1 a::before{background-position:0 0;}
#gnb div.member ul li.type2 a::before{background-position:-20px 0;}
#gnb div.member ul li.type3 a::before{background-position:-40px 0;}
#gnb.session div.member{height:100px;}
#gnb > ul{display:flex; gap:80px;}	/* 2023.07.04 정지효, INo.9999 */
#gnb > ul > li{position:relative;}
#gnb > ul > li > a{display:flex; flex-direction:column; justify-content:center; align-items:center; height:100px; padding:0 30px; position:relative; font-size:23px; font-weight:700;}
#gnb > ul > li > a::after{content:""; width:0; height:3px; position:absolute; bottom:0; left:50%; background-color:var(--ega_primary_color); transform:translateX(-50%); transition:all 0.3s;}
#gnb > ul > li.active > a, #gnb > ul > li > a:hover, #gnb > ul > li > a:focus{color:var(--ega_primary_color); background-color:#ebf1ff;}
#gnb > ul > li.active > a::after, #gnb > ul > li > a:hover::after, #gnb > ul > li > a:focus::after{width:100%;}
#gnb > ul > li.page_active > a{color:var(--ega_primary_color);}
#gnb > ul > li.page_active > a::after{width:100%;}
#gnb > ul > li > ul{visibility:hidden; min-width:220px; max-width:300px; max-height:0; overflow:hidden; position:absolute; top:100%; left:0; border-right:1px solid #d5d5d5; border-left:1px solid #d5d5d5; transition:all 0.3s;}
#gnb > ul > li.active > ul{visibility:visible; max-height:500px;}
#gnb > ul > li > ul li a{display:flex; align-items:center; height:65px; padding:0 20px; position:relative; font-size:18px; font-weight:500; border-bottom:1px solid #e1e1e1; background-color:#fff;}
#gnb > ul > li > ul li a::after{content:""; width:4px; height:4px; position:absolute; top:50%; right:20px; border-top:1.5px solid #555; border-right:1.5px solid #555; transform:translateY(-50%) rotate(45deg);}
#gnb > ul > li > ul li a:hover, #gnb > ul > li > ul li a:focus{color:var(--ega_primary_color); border-bottom:1px solid var(--ega_primary_color); background-color:#ebf1ff;}
#gnb > ul > li > ul li a:hover::after, #gnb > ul > li > ul li a:focus::after{border-top:1.5px solid var(--ega_primary_color); border-right:1.5px solid var(--ega_primary_color);}
#gnb > ul > li > ul li.page_active a{color:var(--ega_primary_color); border-bottom:1px solid var(--ega_primary_color);}
#gnb > ul > li > ul li.page_active a::after{border-top:1.5px solid var(--ega_primary_color); border-right:1.5px solid var(--ega_primary_color);}
#gnb > ul > li > ul li.mobile{display:none;}
#gnb_wrap.active::after{width:100%;}

#ega_search{width:215px; position:relative;}
#ega_search h2{display:none; height:55px; line-height:55px; font-size:18px; font-weight:700; text-align:center; border-bottom:1px solid #b7b7b7;}
#ega_search label{position:absolute; top:50%; left:0; font-size:15px; transform:translateY(-50%); cursor:auto;}
#ega_search input[type=text]{width:100%; height:45px; padding:0 45px 0 10px; font-size:15px; border:none; border-bottom:2px solid #b7b7b7; border-radius:0;}
#ega_search button[type=submit]{width:45px; height:45px; position:absolute; top:0; right:0; background:url(../../images/www/common/bg_icon_ega_search.png) no-repeat 50% 50%;}
#ega_search.active label{display:none;}

#close_search{display:none; width:40px; height:40px; position:absolute; top:8px; right:10px; z-index:2;}
#close_search::before, #close_search::after{content:""; width:20px; height:2px; position:absolute; left:50%; background-color:#616161; transition:all 0.3s;}
#close_search::before{transform:translateX(-50%) rotate(45deg);}
#close_search::after{transform:translateX(-50%) rotate(-45deg);}

#mobile_gnb_control{display:none; gap:10px;}
#mobile_gnb_control button{width:40px; height:40px; position:relative;}
#open_search::before{content:""; width:25px; height:25px; position:absolute; top:50%; left:50%; background:url(../../images/www/common/bg_icon_search.png) no-repeat 50% 50%/cover; transform:translate(-50%, -50%);}
#open_gnb span{width:26px; height:3px; margin:0; position:absolute; top:50%; left:50%; text-indent:-9999px; background-color:#616161; transition:all 0.3s; transform:translate(-50%, -50%); clip:auto;}
#open_gnb::before, #open_gnb::after{content:""; width:26px; height:3px; position:absolute; left:50%; background-color:#616161; transition:all 0.3s; transform:translateX(-50%);}
#open_gnb::before{top:9px;}
#open_gnb::after{bottom:9px;}
#close_gnb{display:none; width:40px; height:40px; position:absolute; top:10px; right:10px;}
#close_gnb::before, #close_gnb::after{content:""; width:26px; height:2px; position:absolute; left:50%; background-color:#fff; transition:all 0.3s;}
#close_gnb::before{transform:translateX(-50%) rotate(45deg);}
#close_gnb::after{transform:translateX(-50%) rotate(-45deg);}

/* contents */
#contents{padding:0 0 100px; overflow:hidden;}

/* footer */
footer{background-color:#1a1a1a;}
footer div.top{padding:30px 0; border-bottom:1px solid #5f5f5f;}
footer div.top ul{display:flex; width:var(--ega_c_w); margin:0 auto;}
footer div.top ul li a{padding:0 20px; position:relative; font-size:16px; color:#c6c6c6;}
footer div.top ul li a:hover, footer div.top ul li a:focus{text-decoration:underline; text-underline-offset:3px;}
footer div.top ul li.private a{color:#e4b925;}
footer div.top ul li:not(:first-child) a::before{content:""; width:1px; height:14px; position:absolute; top:50%; left:0; background-color:#8d8d8d; transform:translateY(-50%);}
footer div.bot{display:flex; justify-content:space-between; width:var(--ega_c_w); padding:35px 0; margin:0 auto;}
footer div.bot div.info{display:flex; gap:50px;}
footer div.bot div.info h6{width:212px; height:46px; background:url(../../images/www/common/logo_footer_foreigner.png) no-repeat 50% 50%/contain;}
footer div.bot div.info div{font-size:16px; font-weight:350; color:#c6c6c6;}
footer div.bot div.info div address{font-style:normal;}
footer div.bot div.info div ul.contact{display:flex; gap:15px; margin-top:15px;}
footer div.bot div.info div p.copy{margin-top:25px;}
footer div.bot div.rel{position:relative;}
footer div.bot div.rel button{width:290px; height:50px; padding:0 25px; position:relative; font-size:16px; color:#c6c6c6; text-align:left; border:1px solid #737373; border-radius:8px; background-color:#1a1a1a; z-index:1;}
footer div.bot div.rel button::after{content:""; width:10px; height:10px; position:absolute; top:calc(50% - 3px); right:25px; border-right:2px solid #c6c6c6; border-bottom:2px solid #c6c6c6; transform:translateY(-50%) rotate(45deg); transition:0.3s all;}
footer div.bot div.rel ul{visibility:hidden; width:100%; max-height:0; overflow:hidden; position:absolute; bottom:calc(100% - 5px); left:0; border:1px solid #737373; background-color:#1a1a1a; z-index:0; transition:0.3s all;}
footer div.bot div.rel ul li{border-top:1px solid #737373;}
footer div.bot div.rel ul li a{display:block; height:50px; line-height:50px; padding:0 25px; color:#fff;}
footer div.bot div.rel ul li a:hover, footer div.bot div.rel ul li a:focus{background-color:#000;}
footer div.bot div.rel.active button::after{top:calc(50% + 3px); transform:translateY(-50%) rotate(225deg);}
footer div.bot div.rel.active ul{visibility:visible; max-height:300px; padding-bottom:5px;}

/* swiper UI Common */
.swiper{margin-left:auto; margin-right:auto; position:relative; overflow:hidden; list-style:none; padding:0; z-index:1;}
.swiper-vertical > .swiper-wrapper{flex-direction:column;}
.swiper-wrapper{position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box;}
.swiper-android .swiper-slide, .swiper-wrapper{transform:translate3d(0px, 0, 0);}
.swiper-pointer-events{touch-action:pan-y;}
.swiper-pointer-events.swiper-vertical{touch-action:pan-x;}
.swiper-slide{flex-shrink:0; width:100%; height:100%; position:relative; transition-property:transform;}
.swiper .swiper-notification{position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000;}
.swiper-grid > .swiper-wrapper{flex-wrap:wrap;}
.swiper-grid-column > .swiper-wrapper{flex-wrap:wrap; flex-direction:column;}
.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out;}
.swiper-fade .swiper-slide{pointer-events:none; transition-property:opacity;}
.swiper-fade .swiper-slide .swiper-slide{pointer-events:none;}
.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto;}

/* UI compornent */
input[type=text]{width:100%; height:55px; padding:0 20px; font-size:20px; border:1px solid #b7b7b7; border-radius:14px; background-color:#fff; box-sizing:border-box;}
input[type=text].half{width:50%;}
input[type=text].quarter{width:25%;}
input[type=text].number{width:120px; text-align:center;}
input[type=text].count{width:80px; text-align:center;}
input[type=text].phone{width:100px; text-align:center;}
input[type=text].name{width:250px;}
input[type=text].email{width:250px;}
span.datepicker{width:200px !important; background-color:#fff;}
.datepicker .k-picker-wrap{width:100%; padding:0; border:none; border-radius:14px;}
.datepicker .k-picker-wrap .k-input{height:55px; padding:0 55px 0 20px; font-size:20px; text-indent:0; border:1px solid #b7b7b7; border-radius:14px; background-color:#fff; box-shadow:none !important;}
.datepicker .k-picker-wrap .k-select{width:55px; height:55px; line-height:1; top:0; right:0; border:none; border-radius:0;}
.datepicker .k-picker-wrap .k-select .k-i-calendar{width:55px; height:55px; background:url(../../images/www/common/bg_icon_calendar.png) no-repeat 50% 50%/18px 18px;}

select{max-width:300px; height:55px; padding:0 45px 0 20px; position:relative; overflow:hidden; font-size:20px; text-overflow:ellipsis; white-space:nowrap; border:1px solid #b7b7b7; border-radius:14px; background:#fff url(../../images/www/common/bg_icon_select_arrow.png) no-repeat right 15px top 50%;}
textarea{width:100%; padding:20px; font-size:20px; line-height:1.5; border:1px solid #b7b7b7; border-radius:14px; background-color:#fff; box-sizing:border-box;}
textarea.reply_mod{height:150px;}
textarea[name=description]{height:200px;}

input[type=checkbox]{position:absolute; width:22px; height:22px; padding:0;}
input[type=checkbox] + label{display:inline-block; height:20px; line-height:20px; padding-left:30px; position:relative; font-size:20px; color:#797979; cursor:pointer;}
input[type=checkbox] + label:before{content:""; width:20px; height:20px; position:absolute; top:0; left:0; border:1px solid #b7b7b7; background-color:#fff; border-radius:5px; transition:all 250ms cubic-bezier(.4,.0,.23,1); animation:checkbox_line 0.2s cubic-bezier(.4,.0,.23,1);}
input[type=checkbox] + label:after{content:"";}

input[type=checkbox].checked + label:before, input[type=checkbox]:checked + label:before{border:1px solid var(--ega_point_color4); background-color:var(--ega_point_color4); animation:checkbox_line 0.2s cubic-bezier(.4,.0,.23,1);}
input[type=checkbox].checked + label:after, input[type=checkbox]:checked + label:after{position:absolute; top:9px; left:4px; border-right:2px solid transparent; border-bottom:2px solid transparent; border-radius:1px; transform:rotate(45deg); transform-origin:0% 100%; animation:checkbox_check 0.1s 0.1s cubic-bezier(.4,.0,.23,1) forwards;}

@keyframes checkbox_line{
    0%{transform:scale(1);}
    33%{transform:scale(.85);}
    100%{transform:scale(1);}
}
@keyframes checkbox_check{
    0%{width:0; height:0; border-color:#fff; transform:translate3d(0,0,0) rotate(45deg);}
    33%{width:5px; height:0; transform:translate3d(0,0,0) rotate(45deg);}
    100%{width:5px; height:10px; border-color:#fff; transform:translate3d(0,-.5em,0) rotate(45deg);}
}

input[type=radio]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:none;}
input[type=radio] + label{display:inline-block; height:20px; line-height:20px; margin-right:10px; padding-left:28px; position:relative; font-size:20px; color:#797979; cursor:pointer;}
input[type=radio] + label:before{content:""; width:20px; height:20px; border:1px solid #b7b7b7; border-radius:50%; position:absolute; top:0; left:0; transition:all 0.25s cubic-bezier(.4,.0,.23,1); animation:radiobox_check_out 0.2s cubic-bezier(.4,.0,.23,1);}

input[type=radio] + label:after{content:"";}
input[type=radio].checked + label:after, input[type=radio]:checked + label:after{width:12px; height:12px; position:absolute; top:5px; left:5px; background-color:var(--ega_point_color4); border-radius:50%;}

@keyframes radiobox_check{
    0%{transform:scale(1);}
    33%{transform:scale(.85);}
    100%{transform:scale(1);}
}
@keyframes radiobox_check_out{
    0%{transform:scale(1);}
    33%{transform:scale(.85);}
    100%{transform:scale(1);}
}
input[type=radio]:hover + label, input[type=radio]:focus + label{border-radius:14px; outline:2px solid #000;}

.ega_ui_swiper_ctrl .page .info{font-size:20px; font-weight:500;}
.ega_ui_swiper_ctrl .page .info .total{color:var(--ega_font_color_sub);}
.ega_ui_swiper_ctrl .page .info .total::before{content:"/"; display:inline; padding:0 5px 0 0;}

.ega_ui_swiper_ctrl .ctrl button{width:50px; height:50px; position:relative; border:1px solid transparent; border-radius:50%; background-color:#fff;}
.ega_ui_swiper_ctrl .ctrl button.prev::before, .ega_ui_swiper_ctrl .ctrl button.next::before{width:9px; height:2px; top:20px; left:13px;}
.ega_ui_swiper_ctrl .ctrl button.prev::after, .ega_ui_swiper_ctrl .ctrl button.next::after{width:9px; height:2px; bottom:20px; left:13px;}
.ega_ui_swiper_ctrl .ctrl button.prev span, .ega_ui_swiper_ctrl .ctrl button.next span{width:18px; height:2px; position:absolute; top:50%; left:18px; background-color:#111; clip:auto;}
.ega_ui_swiper_ctrl .ctrl button.next{transform:rotate(180deg);}
.ega_ui_swiper_ctrl .ctrl button.ctrl::before{content:""; width:0; height:18px; position:absolute; top:50%; left:50%; border-width:9px 0 9px 13px; border-style:solid; border-color:transparent transparent transparent #111; transform:translate(-50%, -50%); box-sizing:border-box; transition:0.3s all;}
.ega_ui_swiper_ctrl .ctrl button.ctrl::after{content:""; width:3px; height:18px; position:absolute; top:50%; left:calc(50% + 5px); background-color:#111; transform:translate(-50%, -50%); opacity:0; transition:0.2s all;}
.ega_ui_swiper_ctrl .ctrl button.ctrl.stop::before{width:3px; height:18px; left:calc(50% - 5px); border:none; background-color:#111;}
.ega_ui_swiper_ctrl .ctrl button.ctrl.stop::after{opacity:1;}
.ega_ui_swiper_ctrl .ctrl button:hover, .ega_ui_swiper_ctrl .ctrl button:focus{background-color:var(--ega_white_color_hover);}

.ega_ui_arrow::before, .ega_ui_arrow::after{content:""; position:absolute; background-color:#111; transform:rotate(-55deg);}
.ega_ui_arrow::after{transform:rotate(55deg);}

.ega_ui_bg{width:100%; height:100%; position:absolute; top:0; left:0; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; transition:0.3s all;}

.ega_obj_type1{background:url(../../images/www/foreigner/bg_icon_obj1.svg) no-repeat 50% 50%/cover;}
.ega_obj_type2{background:url(../../images/www/foreigner/bg_icon_obj2.svg) no-repeat 50% 50%/cover;}
.ega_obj_type3{background:url(../../images/www/foreigner/bg_icon_obj3.svg) no-repeat 50% 50%/cover;}
.ega_obj_type4{background:url(../../images/www/foreigner/bg_icon_obj4.svg) no-repeat 50% 50%/cover;}
.ega_obj_type5{background:url(../../images/www/foreigner/bg_icon_obj5.svg) no-repeat 50% 50%/cover;}

/* Tablet */
@media all and (min-width:768px) and (max-width:1399px) {
    body{-webkit-text-size-adjust:none;}

    :root{
        --ega_c_w:100%;
        --gnb_member_height:60px;
        --gnb_session_member_height:100px;
    }

    html:has(body.fixed), body.fixed{height:100%; overflow:hidden;}

    /* header */
    #ega_header{z-index:99;}
    #ega_header div.top > div{height:45px;}
    #ega_header div.top ul.family li a{height:40px; font-size:15px;}
    #ega_header div.top ul.member{display:none;}
    #ega_header div.top ul.member li{padding:0 15px;}
    #ega_header div.top ul.member li a{font-size:14px;}
    #gnb_wrap{padding:0 20px; position:static;}
    #gnb_wrap::after{display:none;}
    #gnb{visibility:hidden; width:55vw; min-height:100vh; position:fixed; top:0; right:-100%; background-color:#f4f5f6; transition:0.3s all; z-index:10;}
    #gnb.active{visibility:visible; right:0;}
    #gnb_wrap nav{height:80px; padding-right:60px;}
    #gnb_wrap nav h1 a{width:200px; height:40px;}
    #gnb::after{content:""; width:45vw; height:100vh; position:fixed; top:0; right:-100%; background-color:rgba(0,0,0,0.5); z-index:-1; transition:0.3s all;}
    #gnb div.member{display:flex; gap:20px;}
    #gnb div.member p{font-size:15px;}
    #gnb div.member p a{font-size:13px;}
    #gnb div.member ul li a{font-size:13px;}
    #gnb.active::after{right:55%;}
    #gnb > ul{display:block; height:calc(100vh - var(--gnb_member_height)); background-color:#fff;}
    #gnb > ul::before{content:""; width:1px; height:calc(100vh - var(--gnb_member_height)); position:absolute; top:var(--gnb_member_height); left:40%; background-color:#d5d5d5; z-index:1;}
    #gnb > ul > li{width:40%; position:static;}
    #gnb > ul > li > a{align-items:flex-start; height:60px; padding:0 20px; font-size:18px; border-bottom:1px solid #dbdbdb; z-index:1;}
    #gnb > ul > li.active > a, #gnb > ul > li > a:hover, #gnb > ul > li > a:focus{background-color:#fff;}
    #gnb > ul > li > a::after{height:2px;}
    #gnb > ul > li > ul{width:0; min-width:0; max-width:60%; height:calc(100vh - var(--gnb_member_height)); max-height:inherit; overflow:hidden; position:absolute; top:var(--gnb_member_height); left:40%; border:none; background-color:#fff; z-index:-1;}
    #gnb > ul > li.active > ul{width:60%; min-width:60%; max-height:100vh; z-index:0;}
    #gnb > ul > li > ul li{min-width:225px; padding:0 15px;}
    #gnb > ul > li > ul li a{height:60px; padding:0 15px; font-size:17px;}
    #gnb > ul > li > ul li a:hover, #gnb > ul > li > ul li a:focus{background-color:#fff;}
    #gnb > ul > li > ul li.mobile{display:block;}
    #gnb.session > ul::before{height:calc(100vh - var(--gnb_session_member_height)); top:var(--gnb_session_member_height);}
    #gnb.session > ul > li > ul{height:calc(100vh - var(--gnb_session_member_height)); top:var(--gnb_session_member_height);}
    #close_gnb{display:block;}

    #mobile_gnb_control{display:block; position:absolute; bottom:18px; right:20px;}
    #mobile_gnb_control #open_search{display:none;}

    /* contents */
    #contents{padding:0 0 60px;}

    /* footer */
    footer div.top ul li a{font-size:15px;}
    footer div.bot{padding:30px 20px;}
    footer div.bot div.info{flex-direction:column; gap:20px;}
    footer div.bot div.info h6{width:157px; height:40px;}
    footer div.bot div.info div{font-size:14px;}
    footer div.bot div.info div ul.contact{gap:10px; margin-top:10px;}
    footer div.bot div.info div p.copy{margin-top:10px;}
    footer div.bot div.rel button{font-size:15px;}
    
    /* UI compornent */
    input[type=text]{height:50px; padding:0 15px; font-size:16px; border-radius:12px;}
    input[type=text].phone{width:90px; text-align:center;}
    input[type=text].email{width:220px;}
    .datepicker .k-picker-wrap{border-radius:12px;}
    .datepicker .k-picker-wrap .k-input{height:50px; font-size:16px; border-radius:12px;}
    .datepicker .k-picker-wrap .k-select{width:50px; height:50px;}
    .datepicker .k-picker-wrap .k-select .k-i-calendar{width:50px; height:50px;}

    select{height:50px; padding:0 45px 0 20px; font-size:16px; border-radius:12px;}
    textarea{padding:15px; font-size:16px; border-radius:12px;}

    input[type=checkbox] + label{height:16px; line-height:16px; padding-left:23px; font-size:16px;}
    input[type=checkbox] + label:before{width:16px; height:16px; border-radius:4px;}
    input[type=checkbox].checked + label:after, input[type=checkbox]:checked + label:after{top:7px; left:3px;}

    @keyframes checkbox_check{
        0%{width:0; height:0; border-color:#fff; transform:translate3d(0,0,0) rotate(45deg);}
        33%{width:4px; height:0; transform:translate3d(0,0,0) rotate(45deg);}
        100%{width:4px; height:8px; border-color:#fff; transform:translate3d(0,-.5em,0) rotate(45deg);}
    }

    input[type=radio] + label{height:16px; line-height:16px; margin-right:10px; padding-left:28px; font-size:16px;}
    input[type=radio] + label:before{width:16px; height:16px;}
    input[type=radio].checked + label:after, input[type=radio]:checked + label:after{width:10px; height:10px; top:4px; left:4px;}
    input[type=radio]:hover + label, input[type=radio]:focus + label{outline:1px solid #000;}

    .ega_ui_swiper_ctrl .page .info{font-size:17px;}
    
    .ega_ui_swiper_ctrl .ctrl button{width:45px; height:45px;}
    .ega_ui_swiper_ctrl .ctrl button.prev::before, .ega_ui_swiper_ctrl .ctrl button.next::before{width:8px; top:18px;}
    .ega_ui_swiper_ctrl .ctrl button.prev::after, .ega_ui_swiper_ctrl .ctrl button.next::after{width:8px; bottom:18px;}
    .ega_ui_swiper_ctrl .ctrl button.prev span, .ega_ui_swiper_ctrl .ctrl button.next span{width:16px; left:17px;}
    .ega_ui_swiper_ctrl .ctrl button.ctrl::before{height:16px; border-width:7px 0 7px 11px;}
    .ega_ui_swiper_ctrl .ctrl button.ctrl::after{height:16px; left:calc(50% + 5px);}
    .ega_ui_swiper_ctrl .ctrl button.ctrl.stop::before{height:16px; left:calc(50% - 6px);}
}

/* Mobile */
@media only all and (max-width:767px) {
    body{-webkit-text-size-adjust:none;}
    html:has(body.fixed), body.fixed{height:100%; overflow:hidden;}

    :root{
        --ega_c_w:100%;
        --gnb_member_height:60px;
        --gnb_session_member_height:100px;
    }
    
    #ega_header div.top ul.family{width:var(--ega_c_w); padding-top:3px;}
    #ega_header div.top ul.family li{flex:1;}
    #ega_header div.top ul.family li a{width:auto; height:37px; font-size:13px;}
    #ega_header div.top ul.member{display:none;}
    #gnb_wrap{padding:0 15px; position:static;}
    #gnb_wrap::after{display:none;}
    #gnb{visibility:hidden; width:100%; min-height:100vh; position:absolute; top:0; right:-100%; background-color:#f4f5f6; transition:0.3s all;}
    #gnb.active{visibility:visible; right:0;}
    #gnb_wrap nav{height:80px;}
    #gnb_wrap nav h1 a{width:146px; height:34px;}
    #gnb div.member{display:flex; gap:25px}
    #gnb > ul{display:block;}
    #gnb > ul::before{content:""; width:1px; height:calc(100vh - var(--gnb_member_height)); position:absolute; top:var(--gnb_member_height); left:40%; background-color:#d5d5d5; z-index:1;}
    #gnb > ul > li{width:40%; position:static;}
    #gnb > ul > li > a{align-items:flex-start; height:60px; padding:0 20px; font-size:18px; border-bottom:1px solid #dbdbdb; z-index:1;}
    #gnb > ul > li.active > a, #gnb > ul > li > a:hover, #gnb > ul > li > a:focus{background-color:#fff;}
    #gnb > ul > li > a::after{height:2px;}
    #gnb > ul > li > ul{width:0; min-width:0; max-width:60%; height:calc(100vh - var(--gnb_member_height)); max-height:inherit; overflow:hidden; position:absolute; top:var(--gnb_member_height); left:40%; border:none; background-color:#fff; z-index:-1;}
    #gnb > ul > li.active > ul{width:60%; min-width:60%; max-height:100vh; z-index:0;}
    #gnb > ul > li > ul li{min-width:225px; padding:0 15px;}
    #gnb > ul > li > ul li a{height:60px; padding:0 15px; font-size:17px;}
    #gnb > ul > li > ul li a:hover, #gnb > ul > li > ul li a:focus{background-color:#fff;}
    #gnb > ul > li > ul li.mobile{display:block;}
    #gnb.session > ul::before{height:calc(100vh - var(--gnb_session_member_height)); top:var(--gnb_session_member_height);}
    #gnb.session > ul > li > ul{height:calc(100vh - var(--gnb_session_member_height)); top:var(--gnb_session_member_height);}
    #close_gnb{display:block;}
    #ega_search{display:none; width:calc(100vw - 40px); position:fixed; top:150px; left:20px;}
    #ega_search.active{display:block;}
    #ega_search::before{content:""; width:100vh; height:100vh; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.5);}
    #ega_search div.box{position:relative; overflow:hidden; border-radius:20px; background-color:#fff; z-index:1;}
    #ega_search div.input{margin:35px 30px 50px; position:relative;}
    #ega_search h2{display:block;}
    #ega_search label{position:absolute; top:50%; left:0; transform:translateY(-50%);}
    #ega_search input[type=text]{width:100%; height:45px; padding:0; border:none; border-bottom:2px solid #b7b7b7;}
    #ega_search button[type=submit]{width:45px; height:45px; position:absolute; top:0; right:0; background:url(../../images/www/common/bg_icon_ega_search.png) no-repeat 50% 50%;}
    #close_search{display:block;}
    
    #mobile_gnb_control{display:flex;}
    
    /* contents */
    #contents{padding:0 0 50px;}

    /* footer */
    footer div.top{padding:30px 5px;}
    footer div.top ul{flex-wrap:wrap; gap:20px 0;}
    footer div.top ul li a{padding:0 15px; font-size:14px;}
    footer div.top ul li.private{width:50%;}
    footer div.top ul li:not(:first-child) a::before{height:10px;}
    footer div.top ul li.private + li a::before{display:none;}
    footer div.bot{flex-direction:column; gap:30px; padding:25px 20px;}
    footer div.bot div.info{flex-direction:column; gap:30px;}
    footer div.bot div.info h6{width:175px; height:38px;}
    footer div.bot div.info div{font-size:13px;}
    footer div.bot div.info div address span{display:block; margin-bottom:10px;}
    footer div.bot div.info div ul.contact{flex-wrap:wrap; gap:10px;}
    footer div.bot div.info div p.copy{margin-top:20px; font-size:11px;}
    footer div.bot div.rel button{width:var(--ega_c_w); height:45px; font-size:13px;}
    footer div.bot div.rel button::after{width:8px; height:8px; border-right:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6;}
    footer div.bot div.rel ul li a{height:45px; line-height:45px; font-size:13px;}

    /* UI compornent */
    input[type=text]{height:45px; padding:0 12px; font-size:15px; border-radius:10px;}
    input[type=text].full{width:100%;}
    input[type=text].half{width:50%;}
    input[type=text].quarter{width:25%;}
    input[type=text].number{width:60px;}
    input[type=text].count{width:50px;}
    input[type=text].phone{width:70px;}
    input[type=text].name{width:100%;}
    input[type=text].email{width:calc(32% - 15px);}
    
    span.datepicker{width:100% !important;}
    .datepicker .k-picker-wrap .k-input{height:45px; padding:0 55px 0 20px; font-size:15px; border-radius:10px; background-color:#fff; box-shadow:none !important;}
    .datepicker .k-picker-wrap .k-select{width:45px; height:45px; line-height:1; top:0; right:0; border:none; border-radius:0;}
    .datepicker .k-picker-wrap .k-select .k-i-calendar{width:45px; height:45px; background-size:16px 16px;}
    
    textarea{padding:12px; font-size:15px; border-radius:10px;}
    
    select{max-width:100%; height:45px; padding:0 30px 0 12px; font-size:15px; border-radius:10px; background:#fff url(../../images/www/common/bg_icon_select_arrow.png) no-repeat right 10px top 50%/10px 6px;}
    
    input[type=checkbox] + label{height:15px; line-height:15px; padding-left:20px; font-size:15px;}
    input[type=checkbox] + label:before{width:15px; height:15px;}
    input[type=checkbox].checked + label:after, input[type=checkbox]:checked + label:after{top:5.5px; left:3px;}
    
    @keyframes checkbox_check{
        0%{width:0; height:0; border-color:#fff; transform:translate3d(0,0,0) rotate(45deg);}
        33%{width:4px; height:0; transform:translate3d(0,0,0) rotate(45deg);}
        100%{width:4px; height:8px; border-color:#fff; transform:translate3d(0,-.5em,0) rotate(45deg);}
    }
    
    input[type=radio] + label{height:15px; line-height:15px; margin-right:10px; padding-left:22px; font-size:15px;}
    input[type=radio] + label:before{width:15px; height:15px;}
    input[type=radio].checked + label:after, input[type=radio]:checked + label:after{width:9px; height:9px; top:4px; left:4px;}
    
    .ega_ui_swiper_ctrl .page .info{font-size:13px;}
    .ega_ui_swiper_ctrl .ctrl button{width:35px; height:35px;}
    .ega_ui_swiper_ctrl .ctrl button.prev::before, .ega_ui_swiper_ctrl .ctrl button.next::before{width:6px; top:14px; left:10px;}
    .ega_ui_swiper_ctrl .ctrl button.prev::after, .ega_ui_swiper_ctrl .ctrl button.next::after{width:6px; bottom:13px; left:10px;}
    .ega_ui_swiper_ctrl .ctrl button.prev span, .ega_ui_swiper_ctrl .ctrl button.next span{width:13px; left:12px;}
    .ega_ui_swiper_ctrl .ctrl button.ctrl::before{height:14px; border-width:7px 0 7px 10px;}
    .ega_ui_swiper_ctrl .ctrl button.ctrl::after{width:2.5px; height:14px; left:calc(50% + 3px);}
    .ega_ui_swiper_ctrl .ctrl button.ctrl.stop::before{width:2.5px; height:14px; left:calc(50% - 5px);}
}