@charset "utf-8";

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:200;
    src:url(../../font/NotoSansKR-Thin-Hestia.eot),
    url(../../font/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Thin-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Thin-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Thin-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:300;
    src:url(../../font/NotoSansKR-Light-Hestia.eot),
    url(../../font/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Light-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:350;
    src:url(../../font/NotoSansKR-DemiLight-Hestia.eot),
    url(../../font/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-DemiLight-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:400;
    src:url(../../font/NotoSansKR-Regular-Hestia.eot),
    url(../../font/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Regular-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Regular-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:500;
    src:url(../../font/NotoSansKR-Medium-Hestia.eot),
    url(../../font/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Medium-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:700;
    src:url(../../font/NotoSansKR-Bold-Hestia.eot),
    url(../../font/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Bold-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Bold-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:900;
    src:url(../../font/NotoSansKR-Black-Hestia.eot),
    url(../../font/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
    url(../../font/NotoSansKR-Black-Hestia.woff2) format('woff2'),
    url(../../font/NotoSansKR-Black-Hestia.woff) format('woff'),
    url(../../font/NotoSansKR-Black-Hestia.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:'Noto Sans Korean', 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;}

:root{
    --ega_c_w:1400px;
    --ega_point_color1:#fcc956; /* 노랑 */
    --ega_point_color2:#cb2651; /* 빨강 */
    --ega_point_color3:#424c95; /* 파랑 */
    --ega_point_color4:#cb4927; /* 적갈 */
    --ega_point_color4_hover:#e0512b;
    --ega_point_color5:#43894f; /* 녹색 */
    --ega_obj_filter1:invert(49%) sepia(99%) saturate(332%) hue-rotate(143deg) brightness(92%) contrast(100%); /* 청록 */
    --ega_obj_filter2:invert(36%) sepia(81%) saturate(1266%) hue-rotate(343deg) brightness(82%) contrast(92%); /* 적갈 */
    --ega_obj_filter3:invert(16%) sepia(44%) saturate(5680%) hue-rotate(236deg) brightness(104%) contrast(101%); /* 파랑 */
    --ega_obj_filter4:invert(16%) sepia(59%) saturate(5068%) hue-rotate(333deg) brightness(96%) contrast(82%); /* 빨강 */
    --ega_obj_filter5:invert(92%) sepia(63%) saturate(7241%) hue-rotate(315deg) brightness(102%) contrast(98%); /* 노랑 */
    --ega_obj_filter6:invert(88%) sepia(0%) saturate(0%) hue-rotate(181deg) brightness(95%) contrast(90%); /* 회색 */
    --ega_obj_filter7:invert(22%) sepia(40%) saturate(4004%) hue-rotate(218deg) brightness(92%) contrast(83%); /* 하늘 */
    --ega_obj_filter8:invert(29%) sepia(15%) saturate(2419%) hue-rotate(195deg) brightness(97%) contrast(90%); /* 짙은 파랑 */
    --ega_obj_filter9:invert(45%) sepia(18%) saturate(1315%) hue-rotate(79deg) brightness(98%) contrast(81%); /* 초록 */
    --ega_white_color_hover:#eee;
    --ega_black_color_hover:#222;
    --ega_font_color_sub:#808080;
    --cr_header_height:85px;
}

/* 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:100;}
#ega_header div.top{position:relative; background-color:#333;}
#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:140px; height:45px; position:relative; font-size:16px; color:#d0d0d0; border-top:1px solid #6b6b6b; border-right:1px solid #6b6b6b; border-top-right-radius:15px; border-top-left-radius:15px;}
#ega_header div.top ul.family li:first-child a{border-left:1px solid #6b6b6b;}
#ega_header div.top ul.family li a[aria-selected=true]{font-weight:500; color:#333; 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_black_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:#b7b7b7; transform:translateY(-50%);}
#gnb_wrap{position:relative;}
#gnb_wrap::after{content:""; width:0; height:1px; position:absolute; bottom:0; left:50%; background-color:#c53f1c; transform:translateX(-50%); transition:all 0.3s; z-index: 100;}
#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:184px; height:44px; background:url(../../images/www/common/logo_ko.png) no-repeat 50% 50%/cover;}
#gnb div.member{display:none; flex-direction:column; justify-content:center; gap:5px; height:60px; padding:0 20px; position:relative; background-color:#333;}
#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;}
#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:22px; font-weight:500;}
#gnb > ul > li > a::after{content:""; width:0; height:3px; position:absolute; bottom:0; left:50%; background-color:#c53f1c; transform:translateX(-50%); transition:all 0.3s;}
#gnb > ul > li.active > a, #gnb > ul > li > a:hover, #gnb > ul > li > a:focus{outline-offset:-1px; color:#c53f1c; background-color:#fcf6f4;}
#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{outline-offset:-1px; color:#c53f1c;}
#gnb > ul > li.page_active > a::after{width:100%;}
#gnb > ul > li > ul{visibility:hidden; min-width:220px; max-width:300px; max-height:0; display: none; overflow: visible; position:absolute; top:100%; left:0; border-right:1px solid #d5d5d5; border-left:1px solid #d5d5d5; transition:all 0.2s;}
#gnb > ul > li.active > ul{visibility:visible; max-height:525px; display: block;}
#gnb > ul > li > ul > li {position: relative;}
#gnb > ul > li > ul > li ul.sub {position: absolute; width: 100%; left: 100%; top: 0; border: solid #e1e1e1; border-width: 1px 1px 0; margin-top: -1px; display: none;} 
#gnb > ul > li > ul > li:hover > ul.sub {display: block;}
#gnb > ul > li:hover > ul {display: block;}
#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{outline-offset:-1px; color:#c53f1c; border-bottom:1px solid #c53f1c; background-color:#fcf6f4;}
#gnb > ul > li > ul li a:hover::after, #gnb > ul > li > ul li a:focus::after{border-top:1.5px solid #c53f1c; border-right:1.5px solid #c53f1c;}
#gnb > ul > li > ul li.page_active a{outline-offset:-1px; color:#c53f1c; border-bottom:1px solid #c53f1c;}
#gnb > ul > li > ul li.page_active a::after{border-top:1.5px solid #c53f1c; border-right:1.5px solid #c53f1c;}
#gnb > ul > li > ul li.mobile{display:none;}
#gnb_wrap.active::after{width:100%;}
#ega_search{width:185px; 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{top:9px;}
#open_gnb::after{bottom:9px;}
#open_gnb::after {content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; background: url(../../images/www/common/bg_icon_gnb.png) no-repeat 50% 50%; transform: translate(-50%, -50%);}
#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 150px; 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:177px; height:45px; background:url(../../images/www/common/logo_footer_ko.png) no-repeat 50% 50%/cover;}
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:240px; 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{outline-offset:-2px; 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;}

label:has(input[type=checkbox]){display:inline-block; height:20px; line-height:20px; padding-left:30px; position:relative; font-size:20px; color:#797979; cursor:pointer;}
label:has(input[type=checkbox]):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);}
label:has(input[type=checkbox]):after{content:"";}
label:has(input[type=checkbox]:checked):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);}
label:has(input[type=checkbox]:checked):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{outline:1px dotted #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/common/bg_icon_obj_1.svg) no-repeat 50% 50%/cover;} /* 반 우산살 */
.ega_obj_type2{background:url(../../images/www/common/bg_icon_obj_2.svg) no-repeat 50% 50%/cover;} /* 점선 장구 */
.ega_obj_type3{background:url(../../images/www/common/bg_icon_obj_3.svg) no-repeat 50% 50%/cover;} /* 원형 사선 */
.ega_obj_type4{background:url(../../images/www/common/bg_icon_obj_4.svg) no-repeat 50% 50%/cover;} /* 패턴 장구 */
.ega_obj_type5{background:url(../../images/www/common/bg_icon_obj_5.svg) no-repeat 0 0/cover;} /* 장단(세로) */
.ega_obj_type6{background:url(../../images/www/common/bg_icon_obj_6.svg) no-repeat 50% 50%/cover;} /* 별(6) */
.ega_obj_type7{background:url(../../images/www/common/bg_icon_obj_7.svg) no-repeat 0 0/cover;} /* 장단(가로) */
.ega_obj_type8{background:url(../../images/www/common/bg_icon_obj_8.svg) no-repeat 50% 50%/cover;} /* 과녁 */
.ega_obj_type9{background:url(../../images/www/common/bg_icon_obj_9.svg) no-repeat 50% 50%/cover;} /* 별(20) */
.ega_obj_type10{background:url(../../images/www/common/bg_icon_obj_10.svg) no-repeat 50% 50%/cover;} /* 지그재그 */
.ega_obj_type11{background:url(../../images/www/common/bg_icon_obj_11.svg) no-repeat 50% 50%/cover;} /* 장단(세로, 어긋남) */
.ega_obj_type12{background:url(../../images/www/common/bg_icon_obj_12.svg) no-repeat 50% 50%/cover;} /* 악보 음표 */
.ega_obj_type13{background:url(../../images/www/common/bg_icon_obj_13.svg) no-repeat 50% 50%/cover;} /* 반 패턴 장구 */
.ega_obj_type14{background:url(../../images/www/common/bg_icon_obj_14.svg) no-repeat 50% 50%/cover;} /* 소용돌이 */

/* Form UI */
textarea{resize:none;}

/* 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;
        --cr_header_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:167px; 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;}
    #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;}
    label:has(input[type=checkbox]){height:16px; line-height:16px; padding-left:23px; font-size:16px;}
    label:has(input[type=checkbox]):before{width:16px; height:16px; border-radius:4px;}
    label:has(input[type=checkbox]):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{z-index:99;}
    #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:140px; height:34px;}
    #gnb div.member{display:flex;}
    #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; background-color: transparent;}
    #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 > ul > li > ul > li:hover > ul.sub {display: none;}
    #gnb > ul > li > ul > li ul.sub {position: static; border-width: 0; margin-top: 0; display: none; background: #f6f6f6;}
    #gnb > ul > li > ul > li > ul.sub > li {padding: 0; min-width: auto;}
    #gnb > ul > li > ul > li > ul.sub.active {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 input[type=text]{width:100%; height:45px; padding:0; border:none; border-bottom:2px solid #b7b7b7;}
    #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:150px; 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(50% - 15px);}
    input[type=text].email + span{width:16px;}
    input[type=text].email + select{width:100%;}
    
    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;}
    label:has(input[type=checkbox]){height:15px; line-height:15px; padding-left:20px; font-size:15px;}
    label:has(input[type=checkbox]):before{width:15px; height:15px;}
    label:has(input[type=checkbox]:checked):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);}
}