@charset "utf-8";

/* 폰트 cnd */
/* @import url('/resources/css/font_wrap.css'); */


@font-face {
    font-family: 'HyundaiSansHeadKR';
    font-weight: 700;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansHeadKRBold.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansHeadKRBold.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansHeadKR';
    font-weight: 500;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansHeadKRMedium.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansHeadKRMedium.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansHeadKR';
    font-weight: 400;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansHeadKRMedium.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansHeadKRMedium.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansHeadKR';
    font-weight: 300;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansHeadKRLight.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansHeadKRLight.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansTextKR';
    font-weight: 700;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansTextKRBold.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansTextKRBold.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansTextKR';
    font-weight: 500;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansTextKRMedium.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansTextKRMedium.woff') format('woff');
}

@font-face {
    font-family: 'HyundaiSansTextKR';
    font-weight: 400;
    /* font-display: swap; */
    src: url('/resources/css/font/HyundaiSansTextKRRegular.woff2') format('woff2'),
         url('/resources/css/font/HyundaiSansTextKRRegular.woff') format('woff');
}


:root {
    /* color */
    --main-black:#000000;
    
    --color-green: #1dc28a;
    --color-yellow: #f9dc66; 
    --color-grey: #ced2db;

    /* font-basic */
    --font-family: 'HyundaiSansTextKR', 'Pretendard', sans-serif;
    --font-head: 'HyundaiSansHeadKR', 'Pretendard', sans-serif;
    /* font-style */
}

.inner { position: relative; width: 100%; margin: 0 auto; }


/* reset(기본셋팅 영역) */
* { margin: 0; padding: 0; font: inherit; color: inherit; }
*, :after, :before { box-sizing: border-box; }

:root {-webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; overflow-wrap: break-word; }
body { margin: 0px auto; line-height: 1; -webkit-font-smoothing: antialiased; min-width: 360px; }

a { text-decoration: none; }
ol, ul { list-style: none; }

p, li, span, input, a { line-height: 100%; }
fieldset, iframe { border: 0; }
select, input, textarea, button { font-size: inherit; vertical-align: middle; border-radius: 0px; }
select { border-radius: 0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance: none; /* 화살표 없애기 for chrome*/ -moz-appearance: none; /* 화살표 없애기 for firefox*/ appearance: none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display: none /* 화살표 없애기 for IE10, 11*/ }
textarea { width: 100%; resize: none; }
table {	border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
button { background-color: transparent; border: 0; cursor: pointer; font: inherit; line-height: inherit; vertical-align: inherit; }
button:disabled { cursor: default; }
strong { font-weight: bold; }
caption, legend, .blind { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
blockquote, q {	quotes: none; }
address, em { font-style: normal; }
pre { white-space: pre-wrap; }

img { width: 100%; vertical-align: top; }
video { vertical-align: top; }


/* S: 컬러 클래스 셋팅 */
.t-black { color: var(--main-black); }
.t-key { color: var(--key-color); }
.t-sub { color: var(--sub-key-color); }
.t-point { color: var(--point-color); }

a { color: var(--main-black); }
/* E: 컬러 클래스 셋팅 */


/* S: 커스텀 셋팅 영역 */
body { font-family: var(--font-family); }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-thumb { background-color: var(--color-grey); /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
body::-webkit-scrollbar-track { background-color: transparent;  /*스크롤바 뒷 배경 색상*/ }

body.noneScroll { overflow: hidden; }

.skew { transform: skew(-0.03deg); display: inline-block; }

.underline { text-decoration: underline; }
.readonly, input[readonly="readonly"] { background: #f1f1f1 !important; cursor: default; }

.top-btn { display: block; }
.top-btn.hide { display: none; }

.hidden { display: none; width: 0; height: 0; text-indent: -9999px; overflow: hidden; }
.clear:after { display: block; content: ""; clear: both; height: 0; }
/* E: 커스텀 셋팅 영역 */


/* S: index_mobile 세팅 */
/* 필수 */
#container.main-mob { background-color: #f5f5f5; }
#container.main-mob .screen-container { width: 100%; max-width: 768px; margin: 0 auto; }

#container.main-mob .main-cont-wrap .main-vis { height: 680px; padding: 200px 0; background-color: pink; }
#container.main-mob .main-cont-wrap h2 { font: 600 24px/100% sans-serif; text-align: center; }
#container.main-mob .main-cont-wrap .main-sec { height: 480px; padding: 150px 0; text-align: center; } 
#container.main-mob .main-cont-wrap .main-sec1 { background-color: #cce1f8; }
#container.main-mob .main-cont-wrap .main-sec2 { background-color: rgb(204, 177, 167); }
/* E: index_mobile 세팅 */



/* S: 플렉스 클래스 셋팅 */
/* 플렉스 방향 */
.row-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }
.col-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }
/* 플렉스 줄바꿈 */
.flex-nowrap { -webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.flex-wrap { -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
/* 플렉스 정렬(가로) */
.flex-st { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.flex-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.flex-cnt { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.flex-spcbtn { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
/* 플렉스 정렬(세로) */
.aling-st { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.aling-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
.aling-cnt {-webkit-box-align: center; -ms-flex-align: center; align-items: center; }
/* E: 플렉스 클래스 셋팅 */


/* S: flicking */
.touch { margin-bottom: 10px; display: none; }
.touch img { margin-right: 15px; animation: moveIco 1s ease-in-out 0s infinite alternate forwards; }
.touch.active { display: block; }
.f_wrapper { width: 100%; }
.f_wrapper .f_wrapper_inner { overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden; }
.f_scroller { display: block; width: 100%; height: 100%; padding: 0; }

@-webkit-keyframes moveIco {
    0% { transform: translateX(0px); }
    100% { transform: translateX(8px); }  
}
@keyframes moveIco {
    0% { transform: translateX(0px); }
    100% { transform: translateX(8px); }  
}
@media screen and (max-width:768px){
    .touch { display: block; }
}
/* E: flicking */



/* S: 웹접근성 탭키 */
.accessibility01 { width: 100%; padding: 24px 0;  background-color: #cc2634; color: #fff; text-align: center; font: 600 18px/100% sans-serif; position: fixed; top: 0; left: -50000px; z-index: 999; }
.accessibility01:focus { left: 0; }
/* E: 웹접근성 탭키 */



/* S: 카카오맵 기본 설정 */
.root_daum_roughmap { width: 100%; }
.root_daum_roughmap .wrap_map { height: 100%; }
.root_daum_roughmap_landing { width: 100% !important; }
.root_daum_roughmap_landing .border2 { display: block !important; }
.root_daum_roughmap .wrap_controllers { display: none; }
/* E: 카카오맵 기본 설정 */
    


/* S: 작업 편의를 위한 정의 영역(필요시 추가하여 사용) */
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }

.bor0 { border:none !important; }
.borBn { border-bottom: none !important; }
.borTn { border-top: none !important; }
.borLn { border-left: none !important; }
.borRn { border-right: none !important; }
.borT { border-top: 1px solid var(--main-black) !important; }
.borB { border-bottom: 1px solid var(--main-black) !important; }
.borL { border-left: 1px solid var(--main-black) !important; }
.borR { border-right: 1px solid var(--main-black) !important; }
.bg0 { background: none !important; }

.fl { float: left; }
.fr { float: right; }

.align_center { text-align: center !important; }
.align_left { text-align: left !important; }
.align_right { text-align: right !important; }

.valign_top { vertical-align: top !important; }
.valign_middle { vertical-align: middle !important; }
.valign_bottom { vertical-align: bottom !important; }

.displayBlock { display: block; }
.displayInline { display:inline; }
.displayNone { display: none; }

.pad0 { padding: 0 !important; }
.mag0 { margin: 0 !important; }
/* E: 작업 편의를 위한 정의 영역 */


/* 자동생성 사이즈용 */
.w100px { width: 100px; }
.w400px { width: 400px; }
.w800h250px { width: 800px; min-height: 250px; }

/* 자동생성 display:none */
.dispnone { display: none; }



@media screen and (max-width:768px){
    .inner { width: 100%; padding: 0 2%; }
}