@charset "UTF-8";
/*@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	line-height:160%;
}
body {font-family: 'Noto Sans KR', sans-serif; font-size:16px; color:#000; }
address { font-style:normal;}

html, body { height:100%;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select {
    vertical-align:initial;
}

img { 
	border:none;
	vertical-align:top;
	max-width:100%;
}

.clearfix:after { 
	content:"";
	display:block;
	clear:both;
}
.dp--flex{display:flex; flex-wrap:wrap;}
.flex--nowrap{flex-wrap:nowrap;}

a:link, a:visited { color:inherit; text-decoration:none;}
a:active, a:hover { color:inherit; text-decoration:none;}

* {box-sizing: border-box;}

.site-wrap { height:100%;}

/*hidden*/
.hidden { position:absolute; left:-9999px; font-size:1px; width:1px; height:1px; line-height:0; }

/*스킵메뉴*/
#skip_menu { width:300px; position:absolute; z-index:9999;}
#skip_menu a { position:absolute; top:-100px;}
#skip_menu a:hover,
#skip_menu a:active,
#skip_menu a:focus { position:absolute; top:0; width:300px; height:20px; display:block; background:#333; color:#fff; text-align:center; font-size:16px; font-weight:bold;}


/* wrapper */
.wrapper {width:100%; padding-top:154px;}

.container {max-width: 1500px;  margin: 0 auto; margin-top:100px;}

/* header */
#header {width: 100%; position: fixed;  top: 0;  left: 0;  right: 0;  z-index: 9999;  background: #fff; border-bottom:1px solid #ebebeb; }
#header .header_wrap{ position:relative; width:100%; max-width:1500px; margin:auto; padding: 6px 0; box-sizing: border-box; z-index: 9999; height:92px;}
#header .logo {float:left;margin-top: 25px;  margin-right: 40px;}

.header_util { width:100%; background:#e30613; color:#fff; }
.header_util .util_wrap{position:relative; overflow:hidden; width:100%; max-width:1500px; margin:auto; padding: 10px 0; }
.header_util .util_wrap .date {float:left; font-size:1.4em; font-weight:700}
.header_util .util_wrap .util {float:right; padding: 0.6rem 1.25rem; box-sizing: border-box; display: flex; justify-content: space-between;align-items: center;}
.header_util .util_wrap .util li {position: relative; padding:0 10px; /*font-size:1.2em*/}
.header_util .util_wrap .util li a {color:#fff;}
.header_util .util_wrap .util li:before {position:absolute; top:6px; left:0; width:1px; height: 12px; background:#fff; content:''}
.header_util .util_wrap .util li:first-child:before {display:none;}
.header_util .util_wrap .util li img {vertical-align: middle;}
.header_util .weather {padding:0 10px; vertical-align:middle}

.header_util .sns{position:absolute; right:110px; top:50%; transform:translateY(-50%);}
.header_util .sns{text-align:right;}
.header_util .sns img{margin-left:10px;}
.header_util .sns.sns_loggedin{right:210px;}

#gnb {position:relative;z-index:1;float:left;width: 73%;}
#gnb .ulDepth1 {}
#gnb .ulDepth1 .menuDepth1 {position:relative;float:left;width:calc(100% / 7);text-align:center;letter-spacing: -1px;}
#gnb .ulDepth1 .menuDepth1:nth-child(8){display:none !important;}
#gnb .ulDepth1 .menuDepth1 > a {display: block;font-size: 1.1rem; padding: 25px 0 30px;font-weight:500; color: #000}
#gnb .ulDepth1 .menuDepth1 > a:hover {color: #ed1b24;}
#gnb .ulDepth2 {height:0;overflow: hidden;transition:0.3s all linear;text-align: left; font-size:14px;}
#gnb .ulDepth2.active {position: relative;}
#gnb .ulDepth2.active:before {content:'';position: absolute;left: 0;right: 0;top: 0;bottom: 0;height: 1px;width: 0;background-color: #ed1b24;}
#gnb .ulDepth2.bgActive {background-color: #fef2f3}
#gnb .ulDepth2.bgActive:before {width: 100%;transition: width 0.3s;}
#gnb .ulDepth2 .menuDepth2:first-child {margin-top: 13px;}
#gnb .ulDepth2 .menuDepth2 a {display: block;padding: 5px 0;color: #333; text-align:center;}
#gnb .ulDepth2 .menuDepth2 a:hover {color: #ed1b24}
.gnb_bg {position:absolute;top: 92px;left:0;z-index:0;width: 100%;height: 0;background: #fff;transition:0.2s all linear;}
#gnb .ulDepth2.active, .gnb_bg.active {height: 300px;}
#gnb .ulDepth3{display:none;}

#gnb_util {position: absolute; top: /*32px*/ 23px; right:40px}
#gnb_util > li {float:left; padding:0 10px; font-size:29px; position:relative;}
#gnb_util > li > a > i{background:#fff;}
#gnb_util li.transLi {font-size:25px;}
#gnb_util li.transLi > a img{vertical-align: middle;}
#gnb_util .langUl{display:none; position:absolute; left:50%; transform:translateX(-50%); background:#fff; border-radius:50px; padding:0 0.3em 0.25em; top:0; box-shadow:0 0 5px rgba(0,0,0,0.3); padding-top:42px;}
#gnb_util .langUl li{margin-top:10px;}
#gnb_util .langUl li a{text-align:center; display:block; line-height:1;}
#gnb_util .langUl li a img{max-width:none;}

.goog-te-gadget{white-space:unset !important; display:block; margin-top:5px; padding:0 10px;}
.goog-te-gadget-simple{position:relative; width:29px; height:41px; overflow:hidden; border:0 !important; display:block !important; padding:0 !important;}
.goog-te-gadget-simple:before{position:absolute; content:"\f57d"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:29px; color:#000; left:0; top:50%; transform:translateY(-50%); display:block;}
.goog-te-gadget-simple > *{opacity:0; position:absolute; left:0; top:0; width:100% !important; height:100% !important;}

#m_gnb {position: absolute;top: 37px;right: 0px;}
#m_gnb a {width: 100%;height: 100%;}
#m_gnb a span {display:block;width: 25px;height: 3px;background: #000;border-radius: 4px;transition:all 0.2s linear;}
#m_gnb a span:nth-child(2) {margin: 7px 0;}

#m_gnb.active {}
#m_gnb.active a span:nth-child(1) {width:25px;transform:rotate(45deg);transform-origin: 0 100%;}
#m_gnb.active a span:nth-child(2) {opacity:0;}
#m_gnb.active a span:nth-child(3) {width:25px;transform:rotate(-45deg);transform-origin: 0 0}

#sub_wrap {padding-top:154px}

#mainVisual {position:relative;margin-top:160px; /*height:665px;height: 32.6225vw;*/ overflow:hidden;}
#mainVisual .scroll_btn {position:absolute; left:50%; transform:translateX(-50%); bottom:50px; z-index:9;}
.fp-section {/*padding-top:145px;*/}
#mainVisual .slick-prev{left:50%; margin-left:-750px; z-index:9;}
#mainVisual .slick-next{right:50%; margin-right:-750px; z-index:9;}
#mainVisual .slick-prev,
#mainVisual .slick-next{width:40px; height:40px;}
#mainVisual .slick-prev:before,
#mainVisual .slick-next:before{font-size:40px; color:#ddd;}
#mainVisual .slick-dots{bottom:5px;}

#footer {/*background:#5e5e5e; color:#fff;*/ border-top:1px solid #eaeaea;}
#footer .max_width {margin:0 auto; max-width:1500px; padding-top:/*75px*/55px; position:relative;}
#footer .footer_menu {overflow:hidden;}
#footer .footer_menu li {float:left; margin-right:30px;}
#footer .footer_menu li a {font-weight:500; /*color:#fff; font-size:1.1em;*/}
#footer .footer_info {padding:60px 0; padding-left:240px;}
#footer .max_width .etc_box {position:absolute; right:0; top:75px;}
#footer .max_width .etc_box .family {margin-bottom:60px;}
#footer .max_width .etc_box .sns {text-align:right;}
#footer .max_width .etc_box .sns img {margin-left:10px;}
#footer .footer-logos {position:absolute; top:147px; }

.select_family {border:1px solid #fff; color:#fff; background:none; padding:15px; /*font-size:1.2em;*/font-size:1em;}

#quickmenu{background:#fff;box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.22) 0px 2px 16px 0px; padding:10px 5px; border-radius:20px; position:fixed;width:100px;bottom:100px;right:40px;}
#quickmenu ul li:not(.line,.toggle){display:none;}
#quickmenu.active ul li:not(.line,.toggle){display:block;}
#quickmenu ul li {text-align:center;}
#quickmenu ul li .txt {padding:5px 0 15px; text-align:center; font-size:0.85em;}
#quickmenu ul li.top {padding-top:10px;}
#quickmenu ul li.top a {color:#000; font-weight:500;}
#quickmenu ul li.line {border-top:1px solid #eee;margin-top:10px; color:#999}
#quickmenu ul li.line a {color:#999}
#quickmenu ul li.line img {vertical-align: bottom;}
#quickmenu ul li.line .txt {padding-bottom:0;}
#quickmenu ul li.toggle {background:#111; border-radius:13px;}
#quickmenu ul li.toggle > a{color:#fff;}
#quickmenu ul li.toggle .txt{padding:5px;}

#qrArea{display:none; width:240px; height:auto; text-align:center; padding-top:20px; padding-bottom:40px !important; border-color:#ddd !important; background:#fff; box-shadow:0 0 8px rgba(0,0,0,0.2); margin-top:10px;}
#qrArea p{font-size:15px; color:#666; padding:20px 0 12px; line-height:1.4;}
#qrCloser{position:absolute; right:0; top:0; overflow:hidden; width:30px; height:30px; border:0; cursor:pointer; background:none; text-indent:-9999px;}
#qrCloser:before,
#qrCloser:after{position:absolute; content:""; left:50%; top:50%; width:2px; height:15px; background:#666;}
#qrCloser:before{transform:translate(-50%, -50%) rotate(45deg);}
#qrCloser:after{transform:translate(-50%, -50%) rotate(-45deg);}

.navi_wrap .shareUnit #shareArea{display:none; border:1px solid #ddd; box-shadow:0 0 8px rgba(0,0,0,0.2); margin-top:10px; width:250px;}
.navi_wrap .shareUnit #shareArea li{float:left; padding-right:3px;}
.navi_wrap .shareUnit #shareArea li:last-child{padding-right:0;}
.navi_wrap .shareUnit #shareArea li a{width:34px; height:34px; line-height:32px; border:1px solid transparent; text-align:center;}
.navi_wrap .shareUnit #shareArea li a:hover{border-color:#eaeaea; background:#f5f5f5;}
.navi_wrap .shareUnit #shareArea li a.url{width:80px; font-size:14px; font-weight:500; color:#373737;}

/* 레이어팝업 */
.wp-pop > div{box-sizing:content-box; border:1px solid #ddd; box-shadow:0 0 8px rgba(0,0,0,0.3); padding-bottom:40px; background:#f9f9f9 !important;}
.wp-pop > div .tp-pop{position:absolute; width:100%; left:0; bottom:0; font-size:13px; overflow:hidden; padding:0 8px; border-top:1px solid #ddd;}
.wp-pop > div .btn_close{vertical-align:middle; display:inline-block; height:30px; line-height:30px; padding:0 0.75em; border:1px solid #ddd; margin-left:1em; margin-top:5px; float:right; transition:all .2s;}
.wp-pop > div .btn_close:hover{color:#fff; border-color:#222; background:#222;}


/* 정렬 관련 */

.tl { text-align:left !important; }
.tc { text-align:center !important; }
.tr { text-align:right !important; }
.vt { vertical-align:top !important; }
.vm { vertical-align:middle !important; }
.vb { vertical-align:text-bottom !important; }
.m_auto {margin:0 auto;}

.fl { float:left !important; }
.fr { float:right !important; }
.cb { clear:both !important; }
.over_h { overflow:hidden !important; }

.font_b {font-weight:bold;}

/* 텍스트 color 관련 */
.cl_orange{color:#e45c02 !important;}
.cl_yellow{color:#eae550 !important;}
.cl_pink{color:#e4325d !important;}
.cl_sky{color:#3b79b3 !important;}
.cl_green{color:#2a7b1d !important;}
.cl_main{color:#ed1b23 !important;}
.cl_white{color:#fff !important;}
:root {
	--clr--main: #ed1b23;
	--clr--pink: #e46b8c;
}

/* 버튼 스타일 초기화 */
.btn{display:inline-block; background:none; border:0; box-shadow:none; font-size:inherit; font-family:inherit; cursor:pointer; color:inherit; line-height:inherit;}

.mb10 { margin-bottom:10px !important; }
.mb20 { margin-bottom:20px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb80 { margin-bottom:80px !important; }
.mb90 { margin-bottom:90px !important; }
.mb100 { margin-bottom:100px !important; }

.mt10 { margin-top:10px !important; }
.mt20 { margin-top:20px !important; }
.mt30 { margin-top:30px !important; }
.mt40 { margin-top:40px !important; }
.mt50 { margin-top:50px !important; }
.mt60 { margin-top:60px !important; }
.mt70 { margin-top:70px !important; }
.mt80 { margin-top:80px !important; }
.mt90 { margin-top:90px !important; }
.mt100 { margin-top:100px !important; }

.mr10 { margin-right:10px !important; }
.mr20 { margin-right:20px !important; }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr50 { margin-right:50px !important; }
.mr60 { margin-right:60px !important; }
.mr70 { margin-right:70px !important; }
.mr80 { margin-right:80px !important; }
.mr90 { margin-right:90px !important; }
.mr100 { margin-right:100px !important; }

.ml10 { margin-left:10px !important; }
.ml20 { margin-left:20px !important; }
.ml30 { margin-left:30px !important; }
.ml40 { margin-left:40px !important; }
.ml50 { margin-left:50px !important; }
.ml60 { margin-left:60px !important; }
.ml70 { margin-left:70px !important; }
.ml80 { margin-left:80px !important; }
.ml90 { margin-left:90px !important; }
.ml100 { margin-left:100px !important; }


/* 너비 */
.w_1-12{width:calc((100% / 12) * 1) !important;}
.w_2-12{width:calc((100% / 12) * 2) !important;}
.w_3-12{width:calc((100% / 12) * 3) !important;}
.w_4-12{width:calc((100% / 12) * 4) !important;}
.w_5-12{width:calc((100% / 12) * 5) !important;}
.w_6-12{width:calc((100% / 12) * 6) !important;}
.w_7-12{width:calc((100% / 12) * 7) !important;}
.w_8-12{width:calc((100% / 12) * 8) !important;}
.w_9-12{width:calc((100% / 12) * 9) !important;}
.w_10-12{width:calc((100% / 12) * 10) !important;}
.w_11-12{width:calc((100% / 12) * 11) !important;}
.w_12-12{width:calc((100% / 12) * 12) !important;}


@media(max-width:1500px){
	#mainVisual .slick-prev{left:2%; margin-left:0;}
	#mainVisual .slick-next{right:2%; margin-right:0;}
}

@media(max-width:1024px){
	body{font-size:15px;}
	#mainVisual {margin-top: 0;}
	/*#mainVisual {height:520px;}*/
}

@media(max-width:960px){
	#mainVisual {height:145.83vw;}
}

@media(max-width:640px){
	body{font-size:14px;}
}