/****** 공통 영역 ******/
/* 공통 클래스, 레이아웃 */


/* 체크박스 */
input[type="checkbox"] { /*display:none;*/ }
input[type="checkbox"] + label span { display:inline-block; width:18px; height:18px; margin:-2px 10px 0 0; vertical-align:middle; background:url('../images/common/ckbx.png') no-repeat; cursor:pointer; }
input[type="checkbox"]:checked + label span { background:url('../images/common/ckbx_ck.png') no-repeat; }
/* input focus */
input:focus { outline: 1px solid #3ec5ad }
/* input placeholder */
input::placeholder, textarea::placeholder { color: #666; }
/* 라디오박스 */
input[type="radio"] { display:none; }
input[type="radio"] + label { color:#f2f2f2; font-family: Arial, sans-serif; }
input[type="radio"] + label span { display:inline-block; width:20px; height:20px; margin:-1px auto; vertical-align:middle; background:url('../images/common/rdbx.png') no-repeat; cursor:pointer; }
input[type="radio"]:checked + label span { background:url('../images/common/rdbx_ck.png') no-repeat; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ background-color: #f9f9f9 !important; }



/****** 헤더 ******/
.background_box{ width: 100%; height: 100%; position: fixed; z-index: 10; background: rgba(0,0,0,0.4); display:none; }

html,body{ -webkit-text-size-adjust: none; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
#header{ width: 100%; height: 120px; padding: 0 100px; margin: auto; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; }
.nav_sub { width: 100%; height: auto; background-color: white; border-bottom: 1px solid #e3e2e2}
.nav { width: 100%; height: 35px; max-width: 1200px; padding: 0 20px; margin: auto; display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; }
.nav_area{ width: 100%; height: 100%; position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; }
.menu_sub{ width: 55%; height: auto;  color: #333; }
.logo_area{ width: 25%; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; transition: all 0.2s ease-in-out; }
.logo{ width: 100%; max-width: 283px; min-width: 283px; height: auto; cursor: pointer; transition: all 0.2s ease-in-out; cursor: pointer; }
.nav_admin { width: 20%;  }
.nav_admin > h4 { display: flex; justify-content: flex-end; align-items: center; color: #e24a7f; font-size: 30px; font-weight: 600; letter-spacing: -1px }
.nav_admin > h4 > span { margin-right: 6px; color: #e24a7f; font-size: 19px; font-weight: 600; letter-spacing: -1px }
.bar_line{ width: 1px; height: 15px; margin: 0 8px; background-color: #999999; }
.menu{ width: 100%; height: 50px; max-width: 1200px; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-flow: row nowrap; }
.menu li{ width: 100%; position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: #fff }
.menu li p{ word-break: keep-all; line-height: 24px; width: auto; color: #333; font-size: 20px; font-weight: 600; cursor: pointer; display: inline; text-align: center; letter-spacing: -1px;}
.menu li p:hover { color: #f25f8c; }
.menu_hamburger{ display: none; }
.mobile_menu_tit { display: none !important; }
.bullet { display: none !important; }
.logo_m:hover { cursor: pointer; }

/* 전체 서브 메뉴 */
.sub_menu { display: none; }
.all_sub_menu_area_sub{ width: 100%; position: relative; margin: auto; }
.all_sub_menu_area_sub > div { width: 100%; position: absolute; top: 0; left: 0; z-index: 10; background: rgba(0,0,0,0.8); }
.all_sub_menu_area{ width: 100%; max-width: 1200px; height: auto; margin: auto; display: none; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start; }
.all_sub_menu{ width: 100%; height: auto; padding: 20px 0; }
.all_sub_menu li{ font-size: 16px; width: 100%; padding: 10px 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; cursor: pointer; color: #f5f5f5; letter-spacing: -1.5px;}
.all_sub_menu li:hover{ color: #00a651; }

@media(max-width: 1670px){
    .menu li p { font-size: 17px; }
}
@media(max-width: 1400px){
    #header { padding: 0 20px; }
}
@media all and (max-width: 1300px){
    .nav_admin { display: none; }
    .logo_area { width: 35%; transition: all 0.2s ease-in-out; }
    .menu_sub { width: 65%; transition: all 0.2s ease-in-out; }
}
@media all and (max-width:1050px){
    .menu li p { font-size: 16px; }
}

@media all and (max-width:960px){
    .nav{ padding: 0 20px }
    .nav_area{ display: flex; justify-content: flex-end; flex-flow: row wrap; }
    .menu{ display: block; width: 270px; height: 100%; background: #fff; position: fixed; top: 0; right: -270px; z-index: 10; transition: all 0.2s ease-in-out; flex-flow: row wrap; padding: 0; }
    .menu li{ width: 100%; padding: 0; font-size: 15px; cursor: pointer; flex-flow: row wrap; justify-content: space-between; border-bottom: 1px solid #ddd; }
    .menu li p{ padding: 10px 20px; font-size: 17.5px; font-weight: 500; color: #333; }
    .mobile_menu_tit { display: block !important; padding: 20px !important ; background: #e14a7f; font-size: 25px !important; }
    .menu_hamburger{ width: 35px; height: 24px; position: absolute; cursor: pointer; top: 54px; left:-62px; display: block; }
    .menu_hamburger div{ width: 100%; height: 2.5px; background: #333 !important; position: absolute; left: 0; transition: all 0.3s ease-in-out; }
    .menu_hamburger div:nth-of-type(1){ top: 0; }
    .menu_hamburger div:nth-of-type(2){ top: 50%; right:0; left: 0; margin: auto; }
    .menu_hamburger div:nth-of-type(3){ top: 100%; }
    .bullet { display: block !important; }
    .nav_admin { display: none; }
    .logo_area { width: 100%; margin-top: 28px;  justify-content: space-between; }
    .sub_menu { background: #f5f5f5; display: none; width: 100%; padding: 10px 20px; position: static; top:49px; left:0; z-index: 1000; box-shadow: 1px 1px 3px 1px transparent; }
    .sub_menu li{ margin: 0; padding: 3px 0; border-left: 0 solid; font-weight: normal; color: #333; border: 0; }
    .sub_menu li:hover{ font-weight: normal; border-left: 0px solid; }

}
@media all and (min-width: 720px){
    .logo_m, .menu_call { display: none }
}
@media all and (max-width: 720px){
    .logo { display: none }
    .menu_call { margin-right: 60px; margin-top: -8px; }

}
@media all and (max-width: 400px){
    .menu_call img { width: 35px; }
    .logo_m { width: 150px; }

}



/****** 서브 페이지 공통 ******/
.sub_title_area{ width: 100%; height: 260px; background-position: center !important; background-repeat: repeat !important; background-size:  cover !important; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: all 0.2s ease-in-out; background-color: #333; }
.sub_title_area>p{ color: rgb(255,255,255); font-size: 40px; font-weight: bold; letter-spacing: -2px; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); }
.sub_title_area>div{ color: rgb(99,129,69); font-size: 16px; cursor: default; }
.sub_title_area>div>span{ cursor: pointer; }
.sub_nav{ width: 100%; height: auto; display:block; }
.sub_nav ul{ width: 100%; margin: auto; max-width: 1200px; display: flex; align-items: center; justify-content: flex-start; flex-flow: row nowrap; }
.sub_nav ul li:nth-of-type(1) { display: none !important; width: 80px; height: 100%; border-left: 1px solid #c4c4c4; border-right: 1px solid #c4c4c4; }
.sub_nav ul li:nth-of-type(2) { display: none !important; }
.sub_nav .menu_name, .sub_nav .sub_menu_name{ display: none !important; width: 220px; color: #333; font-weight: 400; letter-spacing: -1px; font-size: 17px; transition: all 0.2s ease-in-out; }
.sub_menu_select { border: 1px solid #ccc; border-top: none; width: 100%; display: flex; justify-content: space-between; flex-flow: row wrap; }
.sub_menu_select p { width: 50%; text-align: center; font-size: 18px;}
.sub_menu_select p:nth-of-type(1) { border-right: 1px solid #ccc; }
.sub_menu_select p:hover { cursor: pointer }
#sub_nav2 { width: 100%; } 
.sub_nav i{ color: #777; transition: all 0.2s ease-in-out; }
.sub_nav .menu_select p, .sub_nav .sub_menu_select p { height: 50px; color: #333; display: flex; justify-content: center; flex-flow: row wrap; align-items: center; letter-spacing: -2px; }
.content_title{ width: 100%; max-width: 1180px; height: 180px; margin: 0 auto;  border-bottom: 1px solid lightgray; padding: 50px 0; }
.content_title dt{ text-align: center; font-size: 30px; font-weight: bold; letter-spacing: -2px; color: rgb(51,51,51); }
.content_title dd{ text-align: center; font-size: 18px; font-weight: 300; color: #ccc; margin-top: 5px; letter-spacing: -1px; }
.sub_nav .menu_hide{ display: none; }

/* 컨텐츠 영역 */
#container_wr{ width: 100%; height: auto; }


@media (max-width:960px){

    /****** 서브 페이지 공통 ******/
    .sub_title_area { height: 200px; }
    .sub_title_area > p{ font-size: 28px; }
    .sub_title_area > div{ font-size: 16px; }
    .sub_nav ul{ padding: 0; }
    .sub_nav ul li{ font-size: 18px; }
    .sub_nav ul li:nth-of-type(1){ display: none; }
    .content_title { padding-left: 20px; padding-right: 20px; }
    .content_title dt{ font-size: 30px; }
}

@media (max-width: 760px){
    #header { top: -7px; }
    .content_title { padding: 50px 0; }
}


@media (max-width:480px){
    /****** 서브 페이지 공통 ******/
    .sub_nav ul li:nth-of-type(2), .sub_nav ul li:nth-of-type(3){ width: 50%; }
    .sub_nav .menu_select, .sub_nav .sub_menu_select { width: 100%; }
    .sub_nav .menu_name, .sub_nav .sub_menu_name{ width: 100%; font-size: 16px; }
    .sub_nav .menu_select p, .sub_nav .sub_menu_select p{ font-size: 16px; }
    .content_title { padding: 50px 0 30px 0; }
    .sub_title_area { height: 180px;  }
    .sub_title_area > p { font-size: 25px; }
}
@media (max-width: 479px){
    .content_title { padding: 30px 0; height: auto; }
    .sub_nav .menu_name, .sub_nav .sub_menu_name { font-size: 13px; }
    .sub_nav .menu_select p, .sub_nav .sub_menu_select p { font-size: 13px; height: 35px; }
    .content_title dt { font-size: 25px; }

}
@media (max-width: 400px){
    .logo { max-width: 200px; min-width: 200px; }
}


/******* 푸터 *******/
.footer_sub { width: 100%; color: #999; background-color: #333 }
.footer { width: 100%; margin: auto; max-width: 1200px; padding: 50px 0; display: flex; justify-content: space-between; flex-flow: row wrap; }
.footer > .info { width: 100%; }
.footer > .info > .add { display: flex; justify-content: center; flex-flow: row wrap; }
.footer > .info > .add > h1 { word-break: keep-all; display: inline; font-size: 15px; color: #999; margin-right: 12px; font-weight: 400;  }
.footer > .info > .add > h1:nth-of-type(1) { width: 100%; text-align: center; margin-bottom: 10px; }
.footer > .info > .add > h1:last-child { margin-right: 0; }
.footer > .info > .add > h1 > span {  font-weight: 400; font-size: 15px; color: #999; }
.footer > .info > .copyright { letter-spacing: 0; text-transform: uppercase; }
.footer > div > p { color: #999; line-height: 30px; font-size: 15px; display: flex; justify-content: center; flex-flow: row wrap ; }
.footer > div > p > span { padding-right: 1%; display: block; }
.privacy { display: flex; justify-content: center; align-items: center; }
.privacy a:nth-of-type(1) { color: #fff }
.privacy a { color: #999; font-size: 15px; padding: 0 5px }



@media all and (max-width:1200px){
    .footer { padding: 50px 20px; display: block;}
    .footer > .info { width: 100%; padding: 0 20px 0 0; }
    .footer > .info > p { word-break: keep-all; }
    .footer > .info > p:last-child { font-weight: 400; }
    .footer > .family_site { width: 100%; margin-top: 20px; }
    .footer > .family_site > select { max-width: 140px; font-size: 13px; }
}

@media (max-width: 545px){
    .footer > .info > .add > h1:nth-of-type(1) { text-align: center; }
    .footer > .info { padding: 0 }
}

@media (max-width:480px){
    .footer{ justify-content: flex-start; flex-flow: row wrap; }
    .footer>div{ justify-content: flex-start; flex-flow: row wrap; font-size: 12px;}
    .footer div:nth-of-type(1) h4{ width: 100%; justify-content: flex-start; }
    .footer div:nth-of-type(1) h4>span:nth-of-type(2){ display: none; }
    .footer .bar_line{ display: none; }
    .footer div:nth-of-type(2) p{ display: flex; flex-flow: row wrap; }
    .footer_title{ min-width: 85px; }
    .h_add { display: none; }
    .footer { padding: 35px 20px; }
    .footer .hidden { display: none; }
    .footer > .info > .add > h1:nth-of-type(1){ font-size: 17px; width: 100%; margin: 10px 0; }
}

@media (max-width:400px){
    .footer > .info > .add > h1 { font-size: 13px; }
    .footer > .info > .add > h1 > span { font-size: 13px; }
    .footer > div > p { font-size: 13px; }
}

/* 20191219 추가 */
@media (min-width: 961px){
    .mobile_gnb { display: none; }
}
@media (max-width: 960px){
    .mobile_gnb { width: 100%; padding: 10px 25px; }
    .mobile_gnb > ul { width: 100%; display: flex; justify-content: space-between; flex-flow: row wrap; }
    .mobile_gnb > ul > li { width: 13.9%; border: 1px solid #333; padding: 5px 0; }
    .mobile_gnb > ul > li:hover { cursor: pointer; background: #f3f3f3; }
    .mobile_gnb > ul > .active { background: #e14a7f; color: #fff; border: 1px solid #e14a7f; }
    .mobile_gnb > ul > li > p { text-align: center; font-size: 15px; letter-spacing: -1px; }
}
@media (max-width: 680px){
    .mobile_gnb > ul { justify-content: flex-start; }
    .mobile_gnb > ul > li { width: 24%; margin-right: 0.7%; margin-bottom: 0.7%; }
    .mobile_gnb > ul > li > p { font-size: 13px; }
}
@media (max-width: 350px){
    .mobile_gnb > ul > li { width: 49%; }
}