@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
/* font-family: "Noto Sans KR", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
/* font-family: "Montserrat", sans-serif; */

/* 모바일 코딩 필수 공통영역 */
* {
 margin:0;
 padding:0;
 -webkit-text-size-adjust:none; }
html{font-size: 14px;}
body {
 color:#333;
 font-family: "Noto Sans KR", sans-serif;}
img, fieldset { border:0; vertical-align:top }
ul, ol, li, dl { list-style:none; }
h1, h2, h3, h4, h5, h6 {
 font-size:100%;
 font-weight:normal; }
hr { display:none; }
a { color:inherit; display: block; }
a, a:link {
 color:#333;
 text-decoration:none; }
a:visited { color:#333; }
a:hover, a:active {
 color:#333;
 text-decoration:none; }
em, i, address {
 font-style:normal;
 font-weight:normal; }
legend, caption {
 display:none;
 clear:both; }
input, textarea, select, button, table {
 font-size:inherit;
 font-family:inherit;
 line-height:inherit; }
section, nav, article, aside, hgroup, header, footer { display:block }
textarea, input {
 border-radius:1px;}
textarea { resize:none; }
label { cursor:pointer; }
table{border-collapse: collapse;}
.hidden,#skipNav{display: block; position: absolute; left:-1000%;top:0; width: 1px; height: 1px; overflow: hidden; color: #fff}


:root{
    --font-color-main:#EF151E;
    --font-color-point1:#FF9700;
    --font-color-point2:#006ECD;
    --font-color-sub1:#97999B;
}





/* 전체 공통 */
#wrap{ width:100%; position: relative;  overflow:hidden;}
#content{height: auto; background: #fff;}

/* 헤더공통 */
#headerArea{width: 100%; height: 60px;
    position: fixed; left: 0; top: 0; z-index: 100;}
#headerArea .header_top{padding: 5px 12px; display: flex; justify-content: space-between; align-items: center;}
#headerArea h1 a{width: 110px; height: 51px;
    overflow: hidden; text-indent: -9999px;
    background: url(../images/common/logo.png) center no-repeat;}

@media screen and (-webkit-min-device-pixel-ratio: 2){
    #headerArea h1 a{
        background: url(../images/common/logo_2x.png) center no-repeat;
        background-size: 110px 51px;
    }
}
#headerArea h1 .black{width: 110px; height: 51px;
    overflow: hidden; text-indent: -9999px;
    background: url(../images/common/logo_b.png) center no-repeat;}

@media screen and (-webkit-min-device-pixel-ratio: 2){
    #headerArea h1 .black{
        background: url(../images/common/logo_b_2x.png) center no-repeat;
        background-size: 110px 51px;
    }
}

.nav_icon{
    width: 34px;
    height: 25px;
    position: relative;
    transform: rotate(0deg);
    z-index: 110;
    }

.nav_icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 1.5px;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    }

.nav_icon span:nth-child(1) {
    top: 0px;}

.nav_icon span:nth-child(2),.nav_icon span:nth-child(3) {
    top: 10.5px;}

.nav_icon span:nth-child(4) {
    top: 22px;}

.nav_icon.open span:nth-child(1) {
    top: 10.5px;
    width: 0%;
    left: 50%;}

.nav_icon.open span:nth-child(2) {
    transform: rotate(45deg);}

.nav_icon.open span:nth-child(3) {
    transform: rotate(-45deg);}

.nav_icon.open span:nth-child(4) {
    top: 10.5px;
    width: 0%;
    left: 50%;}

/* 내비영역 */
#gnb{position: absolute; width: 100%; height: 100vh; right:-100%; top:0;
    opacity: 0; background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px);}

#gnb .member_menu{display: flex; padding: 20px 12px 20px; gap: 0;}
#gnb .member_menu a{padding: 0 12px; font-weight: 500; color: #666; font-size: 1.15rem;}
#gnb .member_menu li:nth-of-type(1),#gnb .member_menu li:nth-of-type(2){border-right: 1.5px solid #ccc;}


#gnb .main_menu{margin-top: 14px;}
    #gnb .main_menu .depth1 .m_title{padding: 20px 24px; font-size: 1.7rem; font-weight: 700;
        position: relative;
        display: flex; align-items: center; justify-content: space-between;}
    #gnb .main_menu .depth1 .m_title::after{
        content: "";
        display: block;
        width: 0%;
        height: 2px;
        background: var(--font-color-main);
        position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
        transition: all .3s ease;
    }
#gnb .main_menu .depth1 .m_title.open::after{
    width: 90%;
    background: var(--font-color-main);
}

#gnb .main_menu .depth1 .m_title span{display: block; font-size: 2.5rem;}
#gnb .main_menu .depth1 ul{display: none;}
#gnb .main_menu .depth1 li a{padding: 15px 34px; font-size: 1.3rem; font-weight: 500; color: #666;}

#gnb>div{display: flex; flex-direction: column; height: 90vh; position: relative; overflow-y: scroll;}
#gnb .brand_site_btn{padding: 15px 24px; font-size: 1.5rem; font-weight: 600; font-family: "Montserrat", sans-serif;
    display: flex; align-items: center; margin-top: auto; margin-bottom: 64px;}
#gnb .brand_site_btn span{font-size: 2rem;}
#gnb .brand_site{position: absolute; left: 12px; bottom: 118px; background: #f7f7f7;
    padding: 0 20px; border-radius: 10px; display: none;}
#gnb .brand_site a{font-size: 1.2rem; padding: 14px 0; font-weight: 500; color: #666;}

/* 푸터공통 */
#footerArea{
    padding: 16px; background: rgba(0, 0, 0, .8); color: #bbb; border-radius: 20px 20px 0 0;}
#footerArea a{color: #ddd;}
#footerArea .footer_logo{width: 110px; height: 51px;}
#footerArea address{font-size: .79rem; margin: 10px 0;}
#footerArea address span{font-weight: 500; line-height: 1.4rem;}

#footerArea .bottom_menu{display: flex; flex-wrap: wrap;}
#footerArea .bottom_menu a{font-size: .93rem; font-weight: 500; padding: 4px 0;}


.sns{width: 70%; display: flex; gap: 12px; margin: 10px 0;}
.sns li img{width: 100%;}

#footerArea .familysite{position: relative;}
#footerArea .family_btn{padding: 10px; border: 1px solid #ddd; border-radius: 5px; text-align: center;}
#footerArea .family_list{position: absolute; left: 0; bottom: 50px;
    padding: 15px; border-radius: 10px; color: #333; display: none;
    background: #f7f7f7; font-size: .79rem; font-weight: 500;}
#footerArea .family_list>ul{display: flex; flex-wrap: wrap;
    justify-content: space-between;}
#footerArea .family_list>ul>li{width: 45%; margin-bottom: 10px;}
#footerArea .family_list p{margin-bottom: 5px;}
#footerArea .family_list a{color: #555; padding: 2px 0;}
#footerArea .copy{font-size: .79rem; margin-top: 10px;}

#footerArea .top_move{
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(5px);
    color: #333;
    font-size: 1.1rem;
    border-radius: 50%;
    font-weight: 600;
    position: fixed;
    right: 1%;
    bottom: 2%;
    z-index: 90;
    display: none;
    transition: all .5s ease-out;
}
#footerArea .top_move span{display: block; text-align: center; margin-top: 8px;}
#footerArea .top_move.bot{position: absolute; top: -11%;}