@charset "utf-8";
body					{ font-family:'Pretendard', "맑은 고딕","Malgun Gothic","돋움",Dotum, sans-serif; color:#000; word-wrap:break-word; word-break:keep-all; letter-spacing:-.025em; }


@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:100;
    src: local('Pretendard-Thin'),
    url('/resource/fonts/Pretendard-Thin.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Thin.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:300;
    src: local('Pretendard-Light'),
    url('/resource/fonts/Pretendard-Light.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Light.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:400;
    src: local('Pretendard-Regular'),
    url('/resource/fonts/Pretendard-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:500;
    src: local('Pretendard-Medium'),
    url('/resource/fonts/Pretendard-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:600;
    src: local('Pretendard-SemiBold'),
    url('/resource/fonts/Pretendard-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:700;
    src: local('Pretendard-Bold'),
    url('/resource/fonts/Pretendard-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'Pretendard';
    font-style: normal;
    font-weight:900;
    src: local('Pretendard-Black'),
    url('/resource/fonts/Pretendard-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/Pretendard-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family:'JALNANGOTHIC';
    font-style: normal;
    font-weight:normal;
    src: local('JALNANGOTHIC'),
    url('/resource/fonts/JALNANGOTHIC.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('/resource/fonts/JALNANGOTHIC.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



input[type=text]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=search]:focus::placeholder  						{ font-size:0 !important;}

@keyframes iconShow{
    0%{transform:translateY(0);}
    25%{transform:translateY(-10px);}
    50%{transform:translateY(0);}
    75%{transform:translateY(-5px);}
    100%{transform:translateY(0);}
}
@keyframes iconShow1{
    0%{transform:translate(-50%,-50%);}
    25%{transform:translate(-50%,-70%);}
    50%{transform:translate(-50%,-50%);}
    75%{transform:translate(-50%,-70%);}
    100%{transform:translate(-50%,-50%);}
}
@keyframes updown {
    0% { transform:translateY(0%) }
    50% { transform:translateY(3%) }
    100% { transform:translateY(0%) }
}
@keyframes img_box {
    0% { left:0; }
    100% { left:100%; }
}


/* common */
:root{
    --color-base:#222;
    --color-base1:#333;
    --color-base2:#666;
    --color-point:#4565ff;
    --color-red:#dd2227;
    --color-orange:#ff7d44;
    --color-gray:#e7e7e7;
    --color-white:#fff;
    --color-light-gray:#f2f2f2;
    --font-pretendard:'Pretendard', Sans-serif;
    --font-jalnan:'JALNANGOTHIC', Sans-serif;
    --trans-ani:0.3s ease 0s;
}

.con_inner										{ position:relative; width:94%; max-width:1600px; margin-left:auto; margin-right:auto; }
img												{ vertical-align:top; max-width:100%; }
.tac											{ text-align:center; justify-content:center; }
.tar											{ text-align:right; }
.tal											{ text-align:left; }




/************************************************************

							 상단

************************************************************/
.header											{ position:fixed; top:0; left:0; right:0; width:100%; padding:0; z-index:20; -webkit-transition:var(--trans-ani); transition:var(--trans-ani); }
.header::before									{ position:absolute; width:100%; height:100%; background:rgba(0,0,0,.5); left:0; backdrop-filter:blur(10px); top:0; content:''; z-index:1; opacity:0; transition:opacity 0.2s ease; }
.header_wrap									{ position:relative; display:flex; width:94%; max-width:1600px; --sizeHig:115px; height:var(--sizeHig); margin-left:auto;  margin-right:auto; justify-content:space-between; 
													align-items:center; transition:var(--trans-ani); z-index:2;  }
.header .h_logo									{ transition:all .1s;  }
.header .h_logo a								{ display:flex; align-items:center; width:162px; height:50px; background:url(/resource/images/common/img_logo.svg) no-repeat 50% 50% / contain; font-size:0px; text-indent:-9999px }

.header.active::before							{ opacity:1 }





.header .top_util													{ display:flex; align-items:center; gap:0 20px; margin-left:50px; z-index:20 }
.header .top_util>li												{ position:relative; }
.header .top_util>li button											{ display:flex; align-items:center; justify-content:center; width:25px; height:25px; }
.header .top_util .sitemap_open										{ background:url(/resource/images/common/icon_allmenu.svg) no-repeat 50% 50% / 10px 16px; }
.header .top_util .qr_open											{ background:url(/resource/images/common/icon_qrcode.svg) no-repeat 50% 50% / 18px; }
.header .top_util .btn_copy											{ background:url(/resource/images/common/icon_urlcopy.svg) no-repeat 50% 50% / 18px; }
.header .top_util .btn_chatting										{ background:url(/resource/images/common/icon_chatting.svg) no-repeat 50% 50% / 25px; }


/* 사이트맵 */
.sitemap_wrap														{ position:fixed; width:100%; height:100svh; right:0; top:0; opacity:0; visibility:hidden; z-index:-1;
    transition:all 0.3s  0.3s; overflow:hidden; transition:var(--trans-ani); }
.sitemap_wrap .sitemap_box											{ position:absolute; width:30%; height:90svh; border-radius:20px; right:-100%; top:50%; transform:translateY(-50%); background:var(--color-point); transition:var(--trans-ani);
    padding:4rem 2rem; display:flex; align-items:center; }
.sitemap_wrap .sitemap_box .gnb_list								{ display:flex; flex-wrap:wrap; gap:0 2em; justify-content:center }
.sitemap_wrap .sitemap_box .gnb_list>li								{ width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; transform:scaleX(1); transform-origin:right top; transition-property:transform;
    align-items:center; padding:2rem 1rem }

.sitemap_wrap .sitemap_box .gnb_list>li+li							{ border-top:1px solid rgba(255,255,255,.1); }
.sitemap_wrap .sitemap_box .gnb_list>li>a							{ display:flex; width:100%; font-size:1.7rem; font-weight:600; color:rgba(255,255,255,.9); transition:var(--trans-ani); }
.sitemap_wrap .sitemap_box .gnb_list>li:hover a,
.sitemap_wrap .sitemap_box .gnb_list>li:focus a						{ color:var(--color-white)}
.sitemap_wrap .sitemap_box .gnb_list>li	.dep2_wrap					{ flex:none; width:calc(100% - 12rem); margin-left:2rem; }
.sitemap_wrap .sitemap_box .gnb_list>li .dep2						{ display:flex; flex-wrap:wrap; gap:3rem  }
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li+li					{ position:relative; }
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a					{ position:relative; display:block; font-size:1.3rem; color:rgba(255,255,255,.8); transition:var(--trans-ani); line-height:1; opacity:.7; padding-left:15px; }
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a::before			{ position:absolute; width:5px; height:5px; left:0; top:50%; border-radius:100%; content:''; background:rgba(255,255,255,.2); transform:translateY(-50%); transition:var(--trans-ani);}
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a:hover,
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a:focus			{ opacity:1; color:var(--color-white)}
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a:hover::before,
.sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a:focus::before	{ background:var(--color-white); }

.sitemap_wrap .sitemap_box .gnb_list>li .dep3						{ display:none; }
.sitemap_wrap .sitemap_box .gnb_list>li .dep3>li>a					{ position:relative; display:block; font-size:.95rem; font-weight:300; color:var(--color-white); padding:5px 0 5px 25px; transition:var(--trans-ani); line-height:1.2 }
.sitemap_wrap.open													{ opacity:1.0; visibility:visible; z-index:99999; background-color:rgba(0,0,0,.3);  backdrop-filter:blur(10px); transition:all 0.4s 0s;  }
.sitemap_wrap.open .sitemap_box .gnb_list>li:after 					{ width:0; }
.sitemap_wrap.open .sitemap_box										{ right:2%; }

.sitemap_wrap .sitemap_close										{ position:absolute; width:50px; height:50px; background:var(--color-white); right:calc(2% - 25px); top:calc(5% - 25px); opacity:0; transition:var(--trans-ani); border-radius:100%; }
.sitemap_wrap .sitemap_close::before								{ position:absolute; width:2px; height:20px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); content:''; background:var(--color-point); }
.sitemap_wrap .sitemap_close::after									{ position:absolute; width:2px; height:20px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-45deg); content:''; background:var(--color-point);}
.sitemap_wrap.open .sitemap_close									{ opacity:1; transform:rotate(90deg); }
.sitemap_wrap .mob_gnb_control										{ display:none; }



/* gnb */
.header .nav_wrap													{ display:flex; }
.gnb																{ display:flex; align-items:center; }
.gnb>li																{ height:var(--sizeHig); position:relative; }
.gnb>li>a															{ position:relative; display:flex; flex-wrap:wrap; align-items:center; height:100%; padding:0 40px;  line-height:1.3; font-weight:500; font-size:19.5px; 
																		color:var(--color-white); transition:var(--trans-ani); font-family:var(--font-jalnan)}
.gnb>li>a>span														{ display:inline-block; position:relative;  }
.gnb>li>a:hover>span												{ background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:bold;  }
.gnb>li>a>span::after												{ position:absolute; left:50%; bottom:-33px; width:0%; height:4px; background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%); transition:var(--trans-ani); content:'';
    transform:translateX(-50%); }
.gnb>li.on>a>span::after,
.gnb>li:hover>a>span::after,
.gnb>li:focus>a>span::after											{ width:calc(100% + 35px); }


/* 고정 */
.header.active .header_wrap 										{ --sizeHig:90px; }
.header.active .h_logo a											{ width:146px; height:45px; }
.header.active .gnb>li>a											{ font-size:18.5px; }



/************************************************************

							 하단

************************************************************/
.footer												{ position:relative; padding:3em 0; }
.footer .copy										{ display:flex; justify-content:center; align-items:center; font-size:.98rem; color:rgba(255,255,255,.64); text-align:center; line-height:1.26 }

/* 맨위로 */
#btn_top											{ opacity:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; position:fixed; right:60px; bottom:6em; z-index:5; width:60px; height:60px;
    background:linear-gradient(90deg, #0dccff 1%, #4760ff 100%); border-radius:100%; font-size:13px; font-weight:300; color:var(--color-white); transition:var(--trans-ani); }
#btn_top:before										{ content:''; display:block; width:11px; height:7px; margin-bottom:5px; background:url(/resource/images/common/icon_top.svg) no-repeat 50% 50%; background-size:auto;
    transform:translateY(0px) rotate(0deg); transition:all 0.3s;  }
#btn_top span										{ display:block; width:100%; text-align:center; line-height:1em;}
#btn_top:hover:before								{ opacity:1; transform:translateY(-5px) rotate(0deg);}
#btn_top.active										{ opacity:1;}




/* 모달 */
.modal													{ display:none; }
.modal.active											{ display:block; }
.modal.active::before									{ position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.5); backdrop-filter:blur(10px); content:''; z-index:50; }
.modal .cont											{ position:fixed; width:94%; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); max-width:600px; z-index:60; border-radius:20px; background:#fff; padding:2em}
.modal_qr .cont											{ max-width:500px; background:none; padding:0; }
.modal_qr .cont .img_qr									{ padding:2em; border-radius:20px; padding:2em; background:var(--color-white); }
.modal .cont .text										{ background:rgba(0,0,0,.08); padding:1em; border-radius:10px; font-size:1.03em; font-weight:500; }
.modal .cont dl											{ display:flex;  gap:15px; font-size:1.067em; margin-top:1em }
.modal .cont dl>dt										{ min-width:4em; font-weight:600; }
.modal .cont dl>dd										{ width:calc(100% - 5em); text-align:left }
.modal .cont .btn										{ margin-top:2em; }
.modal .cont .btn a										{ line-height:1; padding:10px 25px; font-size:1.067em; background:#005bac; color:#fff; border-radius:5px; }
.modal .cont .close_btn									{ position:absolute; width:40px; height:40px; right:-20px; border-radius:100%; background:#222; transform:translateX(-50%); top:-15px; font-size:0; text-indent:-9999em}
.modal .cont .close_btn::after							{ position:absolute; width:1px; height:15px; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%) rotate(45deg); content:''; }
.modal .cont .close_btn::before							{ position:absolute; width:1px; height:15px; left:50%; top:50%; background:#fff; transform:translate(-50%,-50%) rotate(-45deg); content:''; }
.modal .cont .basic_btn									{ margin-top:10px; }
.modal .cont .basic_btn .sm								{ border-radius:50px; }
.modal .cont .btn>li									{ display:flex; align-items:center; justify-content:center;}

@media all and (max-width:1768px){
    #btn_top																		{ width:55px; height:55px; right:1%; }
}
@media all and (max-width:1368px){
    /* 상단 */
    .header_wrap																	{ --sizeHig:90px; }
    .gnb>li>a																		{ font-size:18.5px; padding:0 30px; }

    /* 고정 */
    .header.active .header_wrap 													{ --sizeHig:80px; }
    .header.active .gnb>li>a														{ font-size:17.5px; padding:0 25px; }


    /* 하단 */
    .footer																			{ padding:2.5em 0; }
}
@media all and (max-width:1268px){
    .sitemap_wrap .sitemap_box .gnb_list>li											{ padding:6rem 1rem }
    .sitemap_wrap .sitemap_box .gnb_list>li>a										{ font-size:1.75rem; }
    .sitemap_wrap .sitemap_box .gnb_list>li .dep2>li>a								{ font-size:1.15rem; }

    /* 하단 */
    .footer .copy																	{ font-size:.95rem; }
}
@media all and (max-width:1168px){
    /* 상단 */
    .header .nav_wrap>nav															{ display:none; }
    .header .top_util																{ margin-left:0; gap:0 10px; }
    .header .top_util button														{ margin-top:-7px; }




    /* 모바일 메뉴 */
    .sitemap_wrap.open .sitemap_close												{ width:40px; height:40px; right:1%; top:3%; }
    .sitemap_wrap .sitemap_box														{ padding:2rem; width:50%; min-width:250px; }
    .sitemap_wrap .sitemap_box .gnb_list											{ width:100%; }
    .sitemap_wrap .sitemap_box .gnb_list>li											{ padding:1rem 0; }
    .sitemap_wrap .sitemap_box .gnb_list>li>a										{ font-size:1.5rem; }

}
/* pc (해상도 1024px ~ ) */
@media all and (max-width:868px) {
    /* 상단 */
	.header .h_logo a																{ width:146px; height:45px; }

    /* 고정시 */
    .header.active .h_logo a														{ width:130px; height:40px; }


    /* 하단 */
    .footer																			{ padding:2em 0; }
    .footer .copy																	{ font-size:.9rem; }
}
@media all and (max-width:768px) {
    /* 모달 */
    .modal .cont																	{ padding:1.5em; }
    .modal .cont dl																	{ font-size:1.037em; }
    .modal_qr .cont																	{ padding:0; }

}
/* 모바일 (해상도 ~ 767px)*/
@media all and (max-width:668px) {
    /* 상단 */
    .header_wrap																	{ --sizeHig:80px; }
    .header.active .h_logo a														{ width:130px; height:40px; }

    /* 고정 */
    .header.active .header_wrap 													{ --sizeHig:70px; }
    .header.active .h_logo a														{ width:114px; height:35px; }


}
@media all and (max-width:468px) {
    /* 상단 */
    .header_wrap																	{ --sizeHig:70px; }
    .header .top_util																{ gap:0 5px; }
    .header .top_util .sitemap_open,
    .header .top_util .qr_open,
    .header .top_util .btn_copy														{ background-size:auto 14px}
	.header .top_util .btn_chatting													{ background-size:auto 20px}
    .header .h_logo a																{ width:98px; height:30px; }
	
    /* 고정 */
    .header.active .header_wrap 													{ --sizeHig:60px; }
    .header.active .h_logo a														{ width:91px; height:28px; }
}
@media all and (max-width:368px) {
    /* 상단 */
    .header .top_util>li button														{ width:22px; height:22px; }

}