@charset "UTF-8";

/****************************** FONT ******************************/
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:400; src:local('☺'), url("../font/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:500; src:local('☺'), url("../font/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:700; src:local('☺'), url("../font/Pretendard-Bold.woff2") format("woff2"); }
@font-face { font-family:'HanwhaGothic'; font-style:normal; font-weight:300; src:local('☺'), url("../font/HanwhaGothicL.woff2") format("woff2"); }
@font-face { font-family:'HanwhaGothic'; font-style:normal; font-weight:400; src:local('☺'), url("../font/HanwhaGothicR.woff2") format("woff2"); }
@font-face { font-family:'HanwhaGothic'; font-style:normal; font-weight:700; src:local('☺'), url("../font/HanwhaGothicB.woff2") format("woff2"); }

/* Hanwha */
@font-face {
  font-family: 'HanwhaL';
  src: url('../font/HanwhaL.eot');
  src: url('../font/HanwhaL.eot?#iefix') format('embedded-opentype'), url('../font/HanwhaL.woff2') format('woff2'),  url('../font/HanwhaL.ttf') format('truetype'), url('../font/HanwhaL.woff') format('woff');
}
@font-face {
  font-family: 'HanwhaR';
  src: url('../font/HanwhaR.eot');
  src: url('../font/HanwhaR.eot?#iefix') format('embedded-opentype'), url('../font/HanwhaR.woff2') format('woff2'), url('../font/HanwhaR.ttf') format('truetype'), url('../font/HanwhaR.woff') format('woff');
}
@font-face {
  font-family: 'HanwhaB';
  src: url('../font/HanwhaB.eot');
  src: url('../font/HanwhaB.eot?#iefix') format('embedded-opentype'), url('../font/HanwhaB.woff2') format('woff2'), url('../font/HanwhaB.ttf') format('truetype'), url('../font/HanwhaB.woff') format('woff');
}

/****************************** RESET ******************************/
html { -webkit-text-size-adjust: none; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, a, span, main, figcaption, figure, label, footer, header { margin:0; padding:0; box-sizing:border-box; -webkit-text-size-adjust:none; }
body, input, select, textarea, button, table { font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕', sans-serif; font-size:18px; font-weight:400; line-height:1.33; color:#767676; word-break:keep-all; word-wrap:break-word; -webkit-font-smoothing:antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight:inherit; font-size:inherit; }
fieldset { border:0; }
img { border:0; vertical-align:middle; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display:block; }
dl, ul, ol, menu, li { list-style:none; }
em, address { font-style:normal; }
a { color:inherit; text-decoration:none; }
a:hover, a:active, a:focus { text-decoration:none; }
input, select, textarea, button { vertical-align:middle; border-radius:0; -webkit-appearance:none; }
button { font-size:100%; font-weight:inherit; cursor:pointer; width:auto; overflow:visible; color:inherit; vertical-align:middle; background:transparent; border:none; box-sizing:border-box; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }
div:focus { outline:none; }
sup { line-height:1; font-size:0.7em; }
table { /*border-collapse:collapse;*/ table-layout:fixed; border-spacing:0; width:100%; empty-cells:show; }
th, td { text-indent:0; word-break:keep-all; word-wrap:break-word; }
caption, legend { text-indent:-9999px; width:0; height:0; font-size:1px; line-height:0; border:0; white-space:nowrap; overflow:hidden; }
input[type='text'], input[type='password'] { box-sizing:border-box; -webkit-appearance:none; appearance:none; resize:none; box-shadow:none !important; outline:none; }
input:checked[type='checkbox'] { -webkit-appearance:checkbox; }
input[type='text']::-ms-clear, input[type='tel']::-ms-clear{ display:none; }
input[disabled], select[disabled], input[readonly], textarea[disabled], button[disabled] { cursor:default; }
input, textarea { -webkit-tap-highlight-color:rgba(0, 0, 0, 0) }
select { vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; outline:none; }
select::-ms-expand { display:none; }
::-webkit-input-placeholder { color:#767676 !important; font-weight:400 !important; }
::-moz-placeholder { color:#767676 !important; font-weight:400 !important; }
:-ms-input-placeholder { color:#767676 !important; font-weight:400 !important; }
select.placeholder { color:#767676 !important; font-weight:400 !important; }
textarea:focus, select:focus, button:focus, input[type='text']:focus, input[type='password']:focus, a:focus, span[contenteditable='true']:focus { outline:dotted 1px #aaa; }
/*div.scroll:focus { outline:dotted 1px #aaa; }*/


/****************************** COMMON ******************************/
:root { 
	--100vh:100vh;
	--100vmin:100vmin;
	--100vmax:100vmax;
	--100vhfix:100vh;
}

.blind { overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; line-height:0; white-space:normal; word-wrap:break-word; word-break:break-all; clip:rect(0, 0, 0, 0); }
.skip { display:block; position:fixed; left:0; right:0; top:0; z-index:-1; font-size:1em; font-weight:600; line-height:0; color:#fff; background:#191919; text-align:center; opacity:0; overflow:hidden; }
.skip:focus { z-index:1000; line-height:50px; opacity:1; }
.scroll-disabled, .scroll-disabled body { overflow:hidden; }
.ac { text-align:center; }
.iblock { display:inline-block; }

/****************************** LAYOUT ******************************/
#wrap { display:flex; flex-direction:column; min-width:1260px; min-height:var(--100vh); overflow-x:clip; }
.contents { width:1240px; margin:0 auto; }

/* header */
#header { position:sticky; top:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:0 60px; --fill:#000; background-color:#fff; transition:all 300ms; border-bottom:1px solid #ddd; }
body.sticky-tab #header { top:-100px; }
#header .logo { padding:32px 0 33px; }
#header .logo a { display:block; width:352px; height:34px; background:url("../img/common/logo-b.svg") 0 0 no-repeat; }
#header.ty-w:not(.fix) { --fill:#fff; }
#header.ty-w:not(.fix) .logo a { background-image:url("../img/common/logo-w.svg"); }
#header .gnb { flex:1; display:flex; justify-content:space-between; align-items:center; margin-left:98px; color:#111; font-size:15px; line-height:20px; }
#header .gnb .lang { display:flex; padding:0 10px; color:#999; border:1px solid #ddd; border-radius:20px; }
#header .gnb .lang li + li::before { content:''; position:absolute; top:50%; width:1px; height:10px; margin-top:-5px; background-color:#ddd; }
#header .gnb .lang a { display:block; padding:8px; }
#header .gnb .lang em { display:block; padding:8px; color:#111; font-weight:500; }
#header .gnb .menu { order:-1; }
#header .gnb .menu > ul { display:flex; font-weight:500; }
#header .gnb .menu > ul > li > a { position:relative; display:block; padding:40px 30px 39px; }
#header .gnb .menu > ul > li > a::before { content:''; position:absolute; left:50%; bottom:-1px; width:0; height:2px; background-color:#111; transform:translateX(-50%); transition:all 300ms; }
#header .gnb .menu:not(:focus-within):not(:hover) > ul > li.active > a::before,
#header .gnb .menu > ul > li:hover > a::before,
#header .gnb .menu > ul > li:focus-within > a::before { width:calc(100% - 60px); }
#header .gnb .menu li ul { position:absolute; display:flex; margin:1px 10px 0; font-weight:400; }
#header .gnb .menu li ul::before { content:''; position:absolute; top:0; left:-100vw; right:-100vw; bottom:0; z-index:-1; background-color:#fafafa; }
#header .gnb .menu li ul a { display:block; padding:38px 20px; }
#header .gnb .menu li ul a.multiline { padding:28px 20px; }
#header .gnb .menu li li { max-height:0; width:0; opacity:0; overflow:hidden; transition:all 300ms; }
#header .gnb .menu li:hover ul, #header .gnb .menu li:focus-within ul { z-index:2; }
#header .gnb .menu:hover li li, #header .gnb .menu:focus-within li li { max-height:96px; }
#header .gnb .menu li:hover li, #header .gnb .menu li:focus-within li { width:auto; opacity:1; }
/* footer */
#footer { position:relative; display:flex; flex-wrap:wrap; margin-top:auto; padding:39px 60px 38px; border-top:1px solid #e6e6e6; color:#111; font-size:15px; line-height:20px; margin-top:160px; }
#footer::before { content:''; display:block; width:100%; height:34px; background:url("../img/common/logo-b.svg") 0 0 no-repeat; margin:0 0 24px; }
#footer .etc { display:block; margin-bottom:42px; }
#footer .etc .link:hover .line { text-decoration:underline; text-underline-offset:3px; }
#footer .address { display:block; margin-bottom:6px; }
#footer .links { width:100%; }
#footer .links a + a { margin-left:23px; }
#footer .copyright { width:100%; margin-top:14px; color:#767676; font-weight:500; }
#footer .foot-related { position:absolute; right:60px; bottom:40px; font-size:0; }
#footer .foot-related a { display:inline-block; margin-left:24px; }
#footer .foot-related img { height:30px; }
#footer .family-site { width:276px; --maxh:122px; margin:-46px 0 42px auto; }
.btn-page-top { position:fixed; right:0; bottom:-40px; z-index:100; width:40px; height:40px; background:rgba(17,17,17,0.4) url("../img/common/i-top.svg") center center no-repeat; border-radius:8px 0 0 8px; transition:bottom 300ms; }
.btn-page-top.visible { bottom:40px; }
.com-select { position:relative; margin:0; width:112px; --maxh:84px; font-size:15px; }
.com-select .toggle { position:relative; width:100%; line-height:50px; padding:0 52px 0 24px; border:1px solid #ddd; border-radius:4px; background-color:#fff; text-align:left; }
.com-select .toggle::before { content:''; position:absolute; right:22px; top:50%; margin-top:-8px; width:16px; height:16px; background:url("../img/common/i-sel.svg") 0 0 no-repeat; }
.com-select .options { position:absolute; left:0; right:0; bottom:100%; margin-bottom:-2px; overflow:hidden; }
.com-select .options .in { padding:0 24px; max-height:var(--maxh); line-height:1.6; overflow-y:auto; border:1px solid #ddd; border-radius:2px 2px 0 0; background-color:#fff; }
.com-select .options .in::before { content:''; display:block; height:12px; }
.com-select .options .in::after { content:''; display:block; height:12px; }
.com-select .options .in a { display:block; padding:0.2em 0; }
/* footer : animation */
.com-select .options { max-height:0; opacity:0; transition:opacity 0ms 300ms, max-height 300ms; }
.com-select:hover .options, .com-select:focus-within .options { opacity:1; max-height:var(--maxh); transition-delay:0ms,0ms; }


/****************************** POPUP ******************************/
.pop-wrap { position:fixed; left:0; top:0; right:0; bottom:100%; opacity:0; overflow:hidden; display:flex; align-items:center; align-self:center; z-index:100; background-color:rgba(0,0,0,0.6); transition:opacity 300ms, bottom 0ms 300ms; }
.pop-wrap.load { bottom:0; opacity:1; transition-delay:0ms, 0ms; }
.pop-wrap .pop-inner { position:relative; width:610px; margin:0 auto; padding:0; background-color:#fff; border-radius:2px; }
.pop-wrap .pop-foot { display:flex; padding:24px 0; text-align:center; }
.pop-wrap .pop-foot [class*="btn-"] { flex:1; }
.pop-wrap .pop-foot [class*="btn-"] + [class*="btn-"] { border-left:1px solid #ddd; }
.pop-wrap .btn-pop { display:inline-block; font-size:18px; font-weight:500; line-height:60px; padding:0 10px; color:#111; text-align:center; }
.pop-wrap .btn-pop.btn-c { color:#767676; }
.pop-wrap .notice-pop img { max-width:100%; max-height:calc(var(--100vhfix) - 300px); vertical-align:top; }
.pop-wrap .notice-pop .notice-msg { text-align:center; }
.pop-wrap .notice-pop .notice-msg dt { display:flex; align-items:center; justify-content:center; min-height:176px; padding:35px 24px 15px; font-family:'HanwhaGothic'; font-size:32px; font-weight:700; line-height:1.19; color:#111; }
.pop-wrap .wrap-slider-notice-pop .pagination-fraction { position:absolute; left:50%; bottom:16px; margin-left:-35px; width:70px; font-size:15px; line-height:36px; color:#767676; font-weight:500; text-align:center; border-radius:18px; background-color:#fff; }
.pop-wrap .wrap-slider-notice-pop .pagination-fraction .current { font-weight:500; color:#111; }
.pop-wrap .wrap-slider-notice-pop .pagination-nav > button { margin-top:49px; }
.pop-wrap .wrap-slider-notice-pop:not(:hover) .pagination-nav > button:not(:disabled),
.pop-wrap .wrap-slider-notice-pop .pagination-nav > button:disabled { opacity:0; }

html[lang="en"] .pop-wrap .pop-foot [class*="btn-"] { flex:none; padding:0 30px; margin-left:auto; }


/****************************** SLIDER ******************************/
[class*="wrap-slider"] { position:relative; overflow:hidden; }
[class*="wrap-slider"].swiper-vertical { touch-action:pan-x; }
[class*="wrap-slider"] > [data-slider], [class*="wrap-slider"] > .slide-area { position:relative; display:flex; transition-property:transform; }
[class*="wrap-slider"].swiper-vertical > [data-slider], [class*="wrap-slider"].swiper-vertical > .slide-area { flex-direction:column; }
[class*="wrap-slider"] > [data-slider] > li, [class*="wrap-slider"] > .slide-area > li { position:relative; flex-shrink:0; transition-property:transform; }
[class*="wrap-slider"].swiper-fade > [data-slider] .slide, [class*="wrap-slider"].swiper-fade > .slide-area .slide { position:absolute; top:0; left:0; width:100% !important; height:100%; opacity:0; pointer-events:none; transition-property:opacity; }
[class*="wrap-slider"].swiper-fade > [data-slider] .slide.active, [class*="wrap-slider"].swiper-fade > .slide-area .slide.active { z-index:2; opacity:1 !important; pointer-events:auto; }
[class*="wrap-slider"] .pagination-bullets { text-align:center; font-size:0; }
[class*="wrap-slider"] .pagination-bullets > button:only-child { display:none; }
[class*="wrap-slider"] .pagination-bullets > button { overflow:hidden; position:relative; width:16px; height:16px; color:transparent; margin:0; }
[class*="wrap-slider"] .pagination-bullets > button:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:0; width:8px; height:8px; border-radius:50%; background-color:#000; box-sizing:border-box; }
[class*="wrap-slider"] .pagination-bullets > button.active:before { background-color:red; }
[class*="wrap-slider"] .pagination-nav > button { overflow:hidden; position:absolute; top:50%; margin-top:-26px; width:52px; height:52px; color:transparent; font-size:0; background-color:rgba(0,0,0,0.3); border-radius:100%; }
[class*="wrap-slider"] .pagination-nav > button::after { content:''; display:inline-block; width:16px; height:16px; background-color:#fff; -webkit-mask:url("../img/common/i-arr.svg") 0 0 no-repeat; mask:url("../img/common/i-arr.svg") 0 0 no-repeat; }
[class*="wrap-slider"] .pagination-nav > button.ui-prev { left:20px; }
[class*="wrap-slider"] .pagination-nav > button.ui-prev::after { transform:rotate(-180deg); }
[class*="wrap-slider"] .pagination-nav > button.ui-next { right:20px; }
[class*="wrap-slider"] .pagination-nav > button:disabled { opacity:0.5; }
[class*="wrap-slider"] .pagination-fraction { width:100%; text-align:center; }
[class*="wrap-slider"] .pagination-fraction .current { font-weight:700; }
[class*="wrap-slider"] .pagination-fraction .total:before { content:'/'}
[class*="wrap-slider"] .pagination-progressbar { position:relative; width:100%; }
[class*="wrap-slider"] .pagination-progressbar .fill { display:block; height:3px; transform-origin:left center; background-color:#000; }
[class*="wrap-slider"] .ui-start.active, [class*="wrap-slider"] .ui-stop.active { display:none; }
.swiper-backface-hidden .slide { transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }


/****************************** ANIMATION ******************************/
@keyframes ani-fade-slideup { from { transform:translateY(64px); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes ani-fade-slideright { from { transform:translateX(-64px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes ani-fade-slideleft { from { transform:translateX(64px); opacity:0; } to { transform:translateX(0); opacity:1; } }


/****************************** ICON ******************************/
.ir { display:inline-block; padding:0; margin:0; white-space:nowrap; font-size:1px; overflow:hidden; text-indent:-999px; color:transparent; line-height:0; vertical-align:middle; }
.i-new { display:inline-block; font-family:'Pretendard'; font-size:12px; font-weight:700; color:#ff6633; margin-left:1px; vertical-align:middle; margin-top:2px; }
[class*="board-cont"] ul>li {list-style: disc;}
[class*="board-cont"] ol>li {list-style: block;}
[class*="board-cont"] em, address {font-style: italic !important;}