@charset "utf-8";/* 폰트적용 */
@import "fonts.css";@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-light.woff') format('woff'); font-weight: 300; font-style: normal; } 

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } 
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } 
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; } 
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff'); font-weight: 900; font-style: normal; } 

@font-face { font-family: 'Gyeong_Bold'; src: url('./font/경기천년제목_Bold.ttf') format('woff'); font-weight: 900; font-style: normal; } 


/* 기본설정 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, p, span { padding:0; margin:0; line-height:1.4em; font-family:'Pretendard', 'Noto Sans KR', 'Malgun Gothic'; word-wrap:break-word; -webkit-text-size-adjust:none; } 
/* -webkit-text-size-adjust 모바일에서 폰트사이즈 고정 */
ol, ul, li { list-style:none; } 
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; /* transform: rotate(-0.03deg); 나눔바른고딕 큰글씨 등 폰트가 깨질때 사용 */ } 
form, fieldset { border:0; } 
address, caption, em { font-weight:normal; font-style:normal; } 
img { border:0; margin:0; padding:0; } 
a { text-decoration:none; } 
a:link, a:visited, a:hover, a:active { text-decoration:none !important; } 

#wrap a { transition: all .3s ease; } 
#wrap a:hover { transition: all .3s ease; } 

/* 숨김영역 */
#accessibility, #accessibility_footer, hr, legend, .skip { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; } 
caption { display:none; } 

/* float 속성 초기화 */
.space { display:block; clear:both; float:none; width:100%; height:0; line-height:0 !important; font-size:0 !important; margin:0 !important; padding:0 !important; overflow:hidden; } 
.clearfix { display: block; } 
.clearfix:after { display:block; clear:both; content:"."; visibility:hidden; height:0; } 
* html .clearfix { height:1%; } 
html { scroll-behavior:smooth; } 

/* form css */
input, textarea, select, img { vertical-align: middle; } /* 이미지, form 세로중앙정렬 */
input, textarea, select, button { font-family:inherit; font-size:inherit; } /* 폰트, 사이즈 상속 */


/* Layout */
html, body { height:100%; font-size: 18px; } 
body { font-size:15px; word-break:keep-all; } /* 단어 기준으로 줄바꿈 */
#wrap { width:100%; height: 100%; } 
.wrap_box { width: 1600px; margin: 0 auto; padding: 100px 50px 130px 50px; overflow: hidden; box-sizing: border-box; } 

.center { padding-left: 40%; padding-bottom: 38px; box-sizing: border-box; } 


#header2 #lnb { width: 100%; display: flex; justify-content: space-between; margin: 0 !important;}


/* header */
/* #header { background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #EFEFEF; z-index: 9999; padding-left: 270px; position: fixed; width: 100%; box-sizing: border-box; }  */
#header #lnb #main_btn {visibility: hidden;}
#header, #header2 { background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #EFEFEF; z-index: 9999;  position: fixed; width: 100%; box-sizing: border-box; } 
#header h1, #header2 h1 { padding:0 50px; } 
#header h1 a, #header2 h1 a { color: #fff; font-size: 20px; font-weight: 800; } 
#header #gnb, #heade2 #gnb { float: right; transition: all 0.2 ease; } 
#header #gnb:hover { background: linear-gradient(135deg ,#8CDEA9, #71D1B4, #41BAE7 ); transition: all 0.2 ease; } 




.jbMenu { height: 80px; } 


.jbFixed { position: absolute; top: 0; left: 0; z-index: 2000 !important; background: rgba(255,255,255,0.95) !important; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; backdrop-filter: blur(10px); } 


#gnb, #main_btn { width: 270px; height: 80px; display: flex; justify-content: center; align-items: center; background-color: #000; box-sizing: border-box; transition: all 0.2s;} 
/* #gnb > ul { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 25px; } 
#gnb > ul > li { width: 100%; height: 100%; } 
#gnb > ul > li > a { position: relative; transition: all .5s; width: 100%; height: 100%; color:#fff; font-size: 1.1rem; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 5px; } 
#gnb > ul > li > a i { font-size: 20px; transform: translate(0, 1px); } 
#gnb .enter_meta { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 25px; } 
#gnb .enter_meta a { position: relative; transition: all .5s; width: 100%; height: 100%; color:#fff; font-size: 1.1rem; font-weight: 700; display: flex; justify-content: center; align-items: center; gap: 5px; } 
#gnb .enter_meta a i { font-size: 20px; transform: translate(0, 1px); } */

#gnb .enter_meta { position: relative; background-color: #000; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 25px; } 
#header2 #main_btn {background-color: #0077FF;}
#header2 #main_btn:hover {background-color: #000; color: #fff;}
#main_btn .back_main { width: 100%; height: 100%;}
#gnb .enter_meta a, #main_btn .back_main a { position: relative; transition: all .5s; width: 100%; height: 100%; color:#fff; font-size: 1.1rem; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 5px; } 
#gnb .enter_meta a i, #main_btn .back_main a i { font-size: 20px; transform: translate(0, 1px); } 
#gnb .enter_meta::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: linear-gradient(135deg ,#8CDEA9, #71D1B4, #41BAE7 ); transition: opacity .5s; } 
#gnb .enter_meta:hover:before { opacity: 1; } 



#header2 .main_btn {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
}

#header2 .main_btn a {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #0077FF;
    padding: 0 35px;
    border: 1px solid #0077FF;
}

/* #lnb .main_btn a:hover {
    background-color: #fff;
    color:#0077FF;
} */



#lnb {width: 100%; display: flex; justify-content: space-between; margin: 0 auto; } 
#lnb > ul {width: 100%; display: flex; justify-content: center; align-items: center; } 
#lnb > ul > li > a { height: 80px; display:flex; justify-content: center; align-items: center; font-size:1.1rem; font-weight: 600; color:#191919; padding: 0 35px; position: relative; } 
/* #lnb > ul > li > a:hover { color:#fff; } */
#lnb > ul > li > a::after { position: absolute; left: 0; bottom: 0; width: 100%; display:block; content:""; height:5px; background:#0086ff; transform:scale(0, 1); transition:all .3s ease; } 
#lnb > ul > li > a:hover::after { transform:scale(1, 1); } 
#lnb > ul > li > a.over { color:#fff; } 
#lnb .lnb_sub { display:none; } 

/* container */
#container { overflow: hidden; } 
#container2 { background-color: #f2f2f2; } 

#header2 #lnb > ul { display: flex; justify-content: center !important; align-items: center; width: 100%;}
/* footer */
#footer { position: relative; display: flex; height: 232px; align-items: center; justify-content: center; background: #F9F9F9; padding: 56px 0 64px 0; box-sizing: border-box; z-index: 10; } 
#footer .wrap_box { padding: 0px 0px 0px 0px; } 
#footer .footer_btn { height: 50px; border-bottom: 1px solid #E9E9E9; } 
#footer .footer_btn a { font-size: 16px; font-weight: 500; color: #707070; } 
#footer .footer_num { display: flex; justify-content: space-between; } 
#footer .footer_num .right_box { display: flex; justify-content: center; } 
#footer .footer_num .right_box { width: auto; } 
#footer .footer_num .right_box .right { width: 100%; display: block; position: relative; padding: 0 20px; font-weight: 300; } 
#footer .footer_num .right_box .right2 { font-weight: 500; color: #AEAEAE; } 
#footer .footer_num .right_box .right:after { content: ''; position: absolute; top: 3px; right: 0; transition: translatey(-50%); width: 1px; height: 14px; background-color: #E6E6E6; } 

#footer .footer_num .right_box .right:last-child:after { display: none; } 
#footer address { padding-top: 20px; } 
#footer address ul { display: flex; gap: 30px; padding-bottom: 15px; } 
#footer address ul li span { font-size: 16px; font-weight: 600; color: #C8C8C8; padding-right: 10px; } 
#footer .copyright { font-size: 14px; color:#AEAEAE; font-weight: 300; } 

/* top 버튼 */
#back-top { z-index: 1000; position: fixed; bottom: 60px; right: 165px; } 
#back-top a { width:60px; height:60px; display:flex; justify-content: center; align-items: center; color: #fff; font-size: 16px; background:rgba(0, 0, 0, 1); border-radius:100%; transition: none !important; } 
#back-top a i { font-size: 20px; } 

@media all and (max-width:1700px) { html { font-size: 15px; } 
 .wrap_box { width: 95%; } 
 #back-top { right: 40px; bottom: 20px; } 
 }

@media all and (max-width: 1050px) { html { font-size: 14px; } 
 #gnb, #main_btn { width: 200px; } 
 #back-top a { width: 3rem; height: 3rem; } 
 }

@media all and (max-width: 900px){
 #header { justify-content: right; } 
 #lnb { display: flex; justify-content: right; margin: 0; } 
 #lnb > ul > li > a { padding: 0px 0px; } 
 #lnb > ul { gap: 40px; } 
 /* #gnb, #main_btn { margin-left: 40px; }  */
 #footer ul li { padding-bottom: 5px; } 
 #footer address { text-align: center; } 
 #footer address ul { display: block; } 
 #footer .copyright { text-align: center; } 
 }

@media all and (max-width: 800px){
 #gnb, #main_btn { width: 25vw; } 
 }

@media all and (max-width: 700px){
 #header { display: block; }
 #header #lnb { justify-content: center; } 
 #header #lnb #main_btn {display: none;}
 #header #gnb .enter_meta,
 #header #gnb .enter_meta:before { width: 42vw; border-radius: 0 0 0 25px; height: 52px; } 
 #header #gnb { width: 42vw; border-radius: 0 0 0 25px !important; height: 52px; } 

 #header2 { display: block; } 
 #header2 #lnb { justify-content: center; } 
 #header2 #gnb .enter_meta,
 #header2 #gnb .enter_meta:before { width: 42vw; border-radius: 0 0 0 25px; height: 52px; } 
 #header2 #gnb { width: 42vw; border-radius: 0 0 0 25px !important; height: 52px; float: right;} 

 }
 

@media all and (max-width: 600px) { html { font-size: 11px; } 
 .wrap_box { padding: 50px 10px 80px 10px; } 
 }

@media all and (max-width: 500px) { html { font-size: 10px; } 
 #footer { padding: 20px 0 10px 0; } 
 #footer .footer_num .right_box .right2 { padding-right: 0; } 
 #footer .footer_btn a { font-size: 12px; } 
 #footer address ul li,
 #footer address ul li span { font-size: 12px; font-weight: unset !important; } 
 #footer .copyright { font-size: 13px; } 
 .wrap_box .enter_btn a {
    padding: 10px 16px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    font-size: 1.5rem;
}
 }

 @media all and (max-width: 440px) {
    #header ,#header2 {
        display: block;
        height: 50px;
    }
    #header #lnb, #header2 #lnb {
        height: 100%;
    }

    #header2 #main_btn .back_main a p {
        display: none;
    }

    #gnb, #main_btn {
        width: 15%;
        height: 100%;
    }

    #lnb > ul > li > a {
        height:  50px !important;
    }

    #lnb > ul > li > a:after {
        height: 3px;
    }

 }

 @media all and (max-width: 400px)  {
    #lnb > ul {
        gap: 15px;
    }
 }

 @media all and (max-width: 340px)  {
    #lnb > ul {
        gap: 10px;
    }
 }





.tab_type4 > ul { display: flex; justify-content: center; gap: 30px; padding-bottom: 50px; } 
div.tab_boxx { padding-top: 40px; } 
.tab_type4 ul li:hover a { color: #0077FF; border: 1px solid #0077FF; } 
.tab_type4 ul li a { display: flex; font-size: 1.5rem; font-weight: 700; justify-content: center; align-items: center; color:#BBBBBB; border-radius: 43px; border: 1px solid #E1E1E1; background: #fff; width: 165px; display: block; padding: 16px 0px; box-sizing: border-box; text-align:center; } 


.wrap_box .sub_title { padding-bottom: 80px; } 
.wrap_box .sub_title h2 { width: 35%; word-break: keep-all; font-size: 1.78rem; font-family: "Gyeong_Title"; text-align: center; color: #000; margin: 0 auto !important; line-height: 1.3; } 
.wrap_box .sub_title p { font-size: 1.05rem; color: #AEAEAE; text-align: center; padding-top: 15px; } 




 .sec03_conbox { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; place-items: center; padding-bottom: 85px; } 
 .sec03_conbox .conbox { width: 85%; height: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 25px 2px rgba(0,0,0,0.1); padding: 40px; box-sizing: border-box; position: relative; transition: all .5s; transition: transform 450ms; will-change: transform; overflow: hidden; } 
 .sec03_conbox .conbox .con_title h3 { font-size: 1.55rem; font-weight: 700; color: #1E8DAA; line-height: 1.2; position: relative; transition: all .5s; padding-bottom: 15px; } 
 .sec03_conbox .conbox .con_text { padding: 17px 0 25px 0; position: relative; transition: all .5s; } 
 .sec03_conbox .conbox .con_text p { min-height: 136px; font-size: 0.94rem; color: #AEAEAE; line-height: 1.6; position: relative; transition: all .5s; } 
 .sec03_conbox .conbox .con_img { display: flex; justify-content: right; align-items: bottom; position: relative; transition: all .5s; height: 5rem; } 
 .sec03_conbox .conbox:hover { transition: transform 250ms; transform: translateY(-20px); } 
 .sec03_conbox .conbox::before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: linear-gradient(135deg, #8CDEA9, #71D1B4, #41BAE7); transition: opacity .5s; } 
 .sec03_conbox .conbox:hover:before { opacity: 1; } 
 .sec03_conbox .conbox.on { background: linear-gradient(135deg ,#8CDEA9, #71D1B4, #41BAE7 ); } 
 .sec03_conbox .conbox:hover .con_title h3,
 .sec03_conbox .conbox:hover .con_text p { color: #fff; } 
 .sec03_conbox .conbox.on .con_title h3,
 .sec03_conbox .conbox.on .con_text p { color: #fff; } 
 .sec03_conbox .conbox:hover .con_img .img1,
 .sec03_conbox .conbox.on .con_img .img1 { display: none; } 
 .sec03_conbox .conbox:hover .con_img .img2,
 .sec03_conbox .conbox.on .con_img .img2 { display: block !important; } 


 .sec02_conbox { display: flex; justify-content: space-between; padding-bottom: 85px; gap: 50px; } 
 .sec02_conbox .conbox { position: relative; width: 466px; transition: all .5s; } 
 .sec02_conbox .conbox .figure { height: 185px; border-radius: 100px; opacity: 0.18; } 
 .sec02_conbox .conbox .fig_1 { background: #D8C9FF; } 
 .sec02_conbox .conbox .fig_2 { background: #F3F8FE; opacity: 1; } 
 .sec02_conbox .conbox .fig_3 { background: #F1FFF2; opacity: 1; } 
 .sec02_conbox .conbox .figure_img { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); } 
 .sec02_conbox .conbox .figure_img img:hover { transition: transform 250ms; transform: translateY(-20px); } 
 .sec02_conbox .conbox .figure_img img { transition: transform 450ms; will-change: transform; } 
 .sec02_conbox .conbox .figure_img img { width: 100%; } 
 .sec02_conbox .conbox .con_text { padding-top: 35px; text-align: center; } 
 .sec02_conbox .conbox .con_text h3 { font-size: 23px; font-weight: 700; color: #000; height: 50px; } 
 .sec02_conbox .conbox .con_text p { font-size: 18px; color: #AEAEAE; word-break: keep-all; width: 100%; margin: 0 auto; line-height: 1.8; box-sizing: border-box; padding: 20px 0px 0 0px}

 @media all and (max-width:1700px) {
    .sec02_conbox .conbox .con_text h3 { font-size: 22px;} 
    .sec02_conbox .conbox .con_text p { font-size: 17px;}
 }

 @media all and (max-width:1440px) {
    .sec02_conbox .conbox .con_text h3 { font-size: 20px; height: 35px;} 
    .sec02_conbox .conbox .con_text p { font-size: 15px;}
 }


 @media all and (max-width:1300px) {
    .wrap_box .sub_title { padding-bottom: 60px; } 
 }

@media all and (max-width:1200px){
 .sec02_conbox .conbox .con_text h3 { min-height: 50px; } 
 .sec02_conbox .conbox .con_text h3 { font-size: 18px;} 
 .sec02_conbox .conbox .con_text p { font-size: 13px;}
 }

@media all and (max-width: 1000px) {
    .wrap_box {
        padding: 50px 50px 130px 50px;
    }
}

@media all and (max-width:800px){
 .sec02_conbox { display: block; } 
 .sec02_conbox .conbox { width: 100%; margin: 0 auto; padding-bottom: 100px; } 
 .sec02_conbox .conbox .con_text p { padding: 0px 0px 0 0px; } 
 .sec02_conbox .conbox .figure_img { top: 17%; } 
 .sec02_conbox { padding-bottom: 0px; } 
 }

 @media all and (max-width: 700px) {
    .sec03_conbox .conbox .con_text {
        padding: 40px 0 0px 0;
    }
 }


@media all and (max-width: 600px){
 .sec02_conbox .conbox .con_text h3 { font-size: 20px; min-height: unset; padding-bottom: 20px; } 
 .sec02_conbox .conbox .con_text p { font-size: 13px; } 
 .wrap_box {padding: 0px 0px 130px 0px;}
 .wrap_box .sub_title { padding-bottom: 60px !important; } 
 .tab_type4 > ul {padding-bottom: 20px;}
 }

 @media all and (max-width: 425px) {
    .store:after {
        display: none;
    }

    .list_page {
        padding: 15px 0;
        text-align: center;
        clear: both;
        display: flex ;
        justify-content: center;
        align-items: center;
    }
}


@media all and (max-width:360px) {
    .list_page strong, .list_page span { margin: 0 0 !important;}
}