@charset "utf-8";

/*
############################################################
    Web Font : Pretendard
############################################################
*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    src: url('/assets/wfont/Pretendard/Pretendard-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    src: url('/assets/wfont/Pretendard/Pretendard-ExtraLight.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    src: url('/assets/wfont/Pretendard/Pretendard-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url('/assets/wfont/Pretendard/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: url('/assets/wfont/Pretendard/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url('/assets/wfont/Pretendard/Pretendard-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    src: url('/assets/wfont/Pretendard/Pretendard-Black.woff2') format('woff2');
}



/*
############################################################
    Init
############################################################
*/

/* ===== Base Reset (safe, modern) ===== */
:root {
    /* 필요시 기본 폰트/색 정의 */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* margin/padding 초기화는 block 계열에 한정하는 편이 안전 */
html, body, h1, h2, h3, h4, h5, h6, p,
ul, ol, li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.5; }

ul, ol { list-style: none; padding-left: 0; }

/* 링크: 실제 href가 있는 경우에만 포인터 */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a:hover {text-decoration: none;}


/* 이미지/미디어는 컨테이너에 맞게 */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 폼 요소 폰트 상속 */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

/* 한국어 줄바꿈 선호 + 영문/URL 대비 */
:where(p, .content, .card, .cntxt) {
    word-break: keep-all;
    overflow-wrap: anywhere; /* 영문/URL 긴 단어도 안전 */
}



/*
############################################################
    Basic Style
############################################################
*/
.section {width: 100%;}
body>.section,
.home .wrap>.container>.section {display: flex; align-items: flex-start; justify-content: center;}
body>.section>.sub_menu_bg.active {position: absolute; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: none;}
.container {width: 100%;}


img.icon {width: 40px;}
.nav ul {list-style: none;}

/* flex */
.flx {display: flex; align-items: center; justify-content: center;}
.flx.ais {align-items: flex-start;}
.flx.aic {align-items: center;}
.flx.fdc {flex-direction: column;}
.flx.aie {align-items: flex-end;}
.flx.jcs {justify-content: flex-start;}
.flx.jcc {justify-content: center;}
.flx.jce {justify-content: flex-end;}
.flx.jcsb {justify-content: space-between;}
.flx.jcse {justify-content: space-evenly;}
.flx.jcsa {justify-content: space-around;}
.flx.fww {flex-wrap: wrap;}

/* gap */
.flx.cg5 {column-gap: 5px;}
.flx.cg10 {column-gap: 10px;}
.flx.cg20 {column-gap: 20px;}
.flx.cg30 {column-gap: 30px;}
.flx.rg5 {row-gap: 5px;}
.flx.rg10 {row-gap: 10px;}
.flx.rg20 {row-gap: 20px;}
.flx.rg30 {row-gap: 30px;}

/* title */
.pg_tit {font-size: 3rem; font-weight: 500;}
.sec_tit {font-size: 2.4rem; font-weight: 500;}
.block_tit {font-size: 1.4rem;}



/*
############################################################
    Element
############################################################
*/
html {
    height: 100%; overflow-x: hidden;
    font-size: 10px; line-height: 1;
}
body {
    position: relative; overflow-y: scroll; min-height: 100%; line-height: 1.4;
    font-family: "Pretendard", sans-serif; color: #000; font-weight: 300;
}
div {position: relative; margin: 0; padding: 0;}



/*
############################################################
    UNIT
############################################################
*/

/*
----- button */
.bttn {
    display: flex; align-items: center; justify-content: center;
    padding: 2px 10px; border: 1px solid #ccc; cursor: pointer; white-space: normal; word-break: keep-all;}
.bttn:hover {cursor: pointer;}


/*
----- ttl_box */
.ttl_box {display: flex; align-items: center; justify-content: space-between; width: 100%;}


/*
----- visual */
.visual .container,
.section.cont {width: 100%;}

/*
----- pg_breadcrumb */
.pg_breadcrumb {
    display: flex; align-items: center; justify-content: flex-end; column-gap: 1rem;
    font-size: 1.2rem; color: #999;
}

/*
----- pg_tit_block */
.pg_tit_block {}
.pg_tit_block .pg_tit {display: flex; align-items: center; justify-content: space-between; font-size: 3rem;}

.container .pg_tit {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 2.4rem;}
.container .uk-breadcrumb>*>* {font-size: 1.2rem; color: #999;}
@media (max-width: 640px){
    .container .pg_tit {margin-top: 0px;}
    .container .uk-breadcrumb>*>* {font-size: 1.2rem; color: #999;}
}



/*
----- pg_ttl  */
.pg_ttl {
    display: flex; align-items: center;
    height: 50px; padding: 5px 0; margin-top: 20px;
    border-bottom: 1px solid #e7e7e7;
    font-size: 2.2rem; text-align: left; line-height: unset;
}







/*
############################################################
    Layout Structure
############################################################
body
body .section.header
body .section.wrap
body .section.wrap .section.visual
body .section.wrap .section.cont
body .section.footer

.section.header
    .sub_menu_bg
    .container
        .section.nav
            .container
                .section.nav_glbl
                    .container
                        .item
                .section.nav_web
                    .container
                        .item
                .section.nav_mbl
                    .container
                        .item

.section.wrap
    .container
        section.cont.cont1.visual
            .container
                .ttl.ttl2
                .section.cont.cont2
				    .container
					    .ttl.ttl3
					    .section.cont.cont3
						    .container
        .ttl.ttl1
        .section.cont.cont1.sect1
            .container
                .ttl.ttl2
                .section.cont.cont2
                    .container
                        .ttl.ttl3
                        .section.cont.cont3
                            .container
                                .ttl.ttl4
                                .section.cont.cont4
                                    .container
        .section.cont.cont1.sect2
            .container
                .ttl.ttl2
                .section.cont.cont2
                    .container
                        .ttl.ttl3
                        .section.cont.cont3
                            .container
                                .ttl.ttl4
                                .section.cont.cont4
                                    .container
.section.footer
    .container
        .section.cont.cont1.banner
            .container
                .item
        .section.cont.cont1.info
            .container
                .section.cont.cont2
                    .container
                        .ttl.ttl3
                        .section.cont.cont3
                            .container

*/


/*
----- content login */
.login .wrap>.container {width: 600px; height: 100%;}



/*
----- .header */
.header {position: fixed; top: 0; right: 0; left: 0; z-index: 10;}

/*
---------- nav */
.nav {height: 100%; z-index: 5;}
.nav .section {width: 100%;}
.nav .section .container {display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1200px;}
.nav .item ul {display: flex; align-items: center; column-gap: 15px;}

/*
--------------- item */
.nav .item {display: flex; align-items: center; justify-content: center; height: 100%;}
.nav .item.strt {justify-content: flex-start;}
.nav .item.cntr {justify-content: center;}
.nav .item.end {justify-content: flex-end;}

/*
-------------------- ul li a */
.nav .item ul {display: flex; align-items: center; margin: 0; padding: 0; height: 100%;}
.nav .item ul li {margin-top: 0; height: 100%;}
.nav .item ul li a {
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
    height: 100%; font-size: 1.4rem; color: #333; font-weight: 300;}
.nav .item ul li a.focus {font-weight: 700;}
.nav .item ul li a:hover {color: #000;}

/*
-------------------- item.menu ul li a */
.nav .item.menu>ul {}
.nav .item.menu>ul>li {}
.nav .item.menu>ul>li>a {padding: 0 10px;}
.nav .item.menu>ul>li>a:hover {color: #eeeeee;}

/*
-------------------- nav_glbl */
.nav .nav_glbl {height: 45px;}
.nav .nav_glbl .item .site_tit {font-size: 1.4rem;}
.nav .nav_glbl .item ul li a {}


/*
-------------------- nav_web */
.nav .nav_web {min-height: 60px;}
.nav .nav_web .item ul {column-gap: 20px;}
.nav .nav_web ul>li>.sub_menu {
    position: absolute;
    overflow: hidden;
    max-height: 0;
    transition: opacity 1 ease;
    opacity: 0;
    color: #fff;
    padding-top: 10px;
    margin-left: 10px;}
.nav .nav_web ul>li>.sub_menu.active {
    max-height: 200px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);}
.nav .nav_web ul>li>.sub_menu.active>ul {flex-direction: column;}
.nav .nav_web ul>li>.sub_menu.active>ul>li {text-align: left;}
.nav .nav_web .item ul li a {font-size: 1.7rem; color: #FFF; font-weight: 500;}
.nav .nav_web .item ul li .sub_menu>ul {align-items: flex-start; row-gap: 7px;}
.nav .nav_web .item ul li .sub_menu>ul>li>a {color: #222; font-size: 1.4rem;}

/*
-------------------- nav_mbl */
.nav .nav_mbl {display: none;}
.nav .nav_mbl ul {column-gap: 20px;}
.nav .nav_mbl>*>ul>li {padding-bottom: 5px; margin-bottom: 10px;}
.nav .nav_mbl>*>ul li a {font-size: 1.7rem; color: #222; font-weight: 500; display: inline-block; padding-left: 10px;}
.nav .nav_mbl>*>ul li .sub_menu {display: block; margin-top: 7px;}
.nav .nav_mbl>*>ul li .sub_menu ul {display: flex; flex-direction: column;}
.nav .nav_mbl>*>ul li .sub_menu>ul>li {display: flex; padding-bottom: 5px; margin-bottom: 5px;}
.nav .nav_mbl>*>ul li .sub_menu>ul>li>a {font-size: 1.5rem; color: #222; font-weight: 500; min-width: 120px;}
.nav .nav_mbl>*>ul li .sub_menu>ul>li>a::before {content: "-\00a0"; display: inline-block;}
.nav .nav_mbl>*>ul li .sub_menu ul li .cat_menu {display: inline-block; }
.nav .nav_mbl>*>ul li .sub_menu ul li .cat_menu>ul {flex-direction: row; flex-wrap: wrap;}
.nav .nav_mbl>*>ul li .sub_menu ul li .cat_menu ul li {line-height: 160%; padding-bottom: 0px; margin-bottom: 0px;}
.nav .nav_mbl>*>ul li .sub_menu ul li .cat_menu ul li a {font-size: 1.3rem; color: #222; font-weight: 400; }

/*
-------------------- nav_mbl */
.nav .nav_mbl {display: none; justify-content: center; align-items: flex-start;}
.nav .nav_mbl ul {display: block; list-style: none; padding-left: 0; margin: 0; width: 100%;}



/*
-------------------- sub_menu */
.sub_menu{display: none;}
.sub_menu.active {display: inline-block;}
@media (max-width: 1024px){
    .sub_menu.active {display: none;}
}

/*
-------------------- cat_menu */
.cat_menu{display: none;}


/*
----- wrap */
.section.wrap {}


/*
---------- visual */




/*
---------- content */



/*
---------- footer */







/*
############################################################
    PAGES
############################################################
*/

/*
----- home */




/*
----- login */
body.login #findIdForm {display: none; padding: 15px;}
body.login #findIdForm input[type=text] {width: 250px; margin-right: 5px;}
body.login #findPwForm {display: none; padding: 15px;}
body.login #findPwForm input#find_pw_id {width: 150px; margin-right: 5px;}


/*
----- join */




/*
----- mypage */
.mypage #CONT>.container .top_btns {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.mypage #CONT>.container .top_btns>span {display: flex; align-items: center; justify-content: flex-start;}
.mypage #CONT>.container .top_btns div {margin: 2px;}
.mypage #CONT>.container .uk-label {width: 100%;}
.mypage #CONT>.container .uk-label.uk-label-warning {font-size: 1.8rem; font-weight: 500; padding: 2px 5px; background: transparent;}
.mypage #CONT>.container .uk-button-small {font-size: 1.2rem;}


.crtReg #CONT>.container {width: 1120px; margin: 0 auto;}
.login #CONT>.container>.section {width: 50%;margin: 30px auto 0;}
@media (max-width: 640px){
    .crtReg #CONT>.container {width: 100%;}
    .crtReg #CONT>.container .cont {margin: 30px auto 0;}
    .login #CONT>.container {width: 96%;}
    .login #CONT>.container>.section {width: 100%;}
}