/****** 공통 영역 ******/
/* 공통 클래스, 레이아웃 */
.wrap{width: 100%;min-width: 1200px;}
.center{width: 1200px;margin: 0 auto;}
.alert{position: absolute;top: -28px;width: 100%;font-size: 14px;font-weight: bold;color: #f44381;text-align: center;}
.alert:before{content: "";display: inline-block;width: 18px;height: 11px;background: url(../images/common/icon_alert.png) no-repeat left bottom;}
.pc_br{display:block;}


/* 버튼 */
/* 설정 버튼 */
.btn_full{width: 220px;height: 28px;border: 1px solid #e7e7e7;border-radius: 5px;background: linear-gradient(#fff, #f9f9f9);font-size: 13px;color: #aaa;}
/* 바로가기 버튼 */
.btn_more{position: absolute;top:30px;right: 30px;padding-right: 10px;background: url(../images/common/more_arrow.png) no-repeat center right;font-size: 13px;color: #28aacf;letter-spacing: -1px;}
/* 화살표 그라데이션 버튼 */
.btn_grd{display: block;width: 170px;height: 44px;margin-top: 20px;padding: 12px 15px;background: url(../images/bg/bg_btn_more.jpg);color: white;text-align: left;}
/* 칼라 버튼(기본) */
.btn{display: block;width: 200px;height: auto;margin: 0 auto;padding: 15px;background:rgb(68,65,154);font-size: 14px;color: white;text-align: center;line-height:1;}
.btn:hover{background:rgb(95,92,198);}
/* 취소 버튼 */
.btn_cancel{background: #aaa;}
/* input 관련 버튼 */
.btn_input{display: block;width: 100px;height: 28px;padding: 7px;background: #555;font-size: 13px;color: white;text-align: center;cursor: pointer;}
/* 셀렉 */
.choice_select { background: url(../../../img/select_arrow.png) no-repeat 93% 50%; padding: 10px 40px 10px 15px; letter-spacing: -.5px; font-size: 16px; font-weight: 600; border: 1px solid #0099da; color: #0099da; }


/* 체크박스 */
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 #28aacf}
/* input placeholder */
input::placeholder, textarea::placeholder{color:#aaa;}
/* 라디오박스 */
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;}


/****** 팝업레이어 ********/
#hd_pop {width: 100%;}
/****** 헤더 영역 시작 ******/
.background_box{ width: 100%; height: 100%; position: fixed; z-index: 999; background: rgba(0,0,0,0.5); display:none;}

html,body{ width: 100%; min-width: 320px;}
.header{ width: 100%; margin: auto; display: block; height: 100px; right: 0; transition: all 0.3s; background-color: #ffffff; }
.top_nav { width: 100%; position: relative; top: 0; left: 0; z-index: 9999999; }
.nav_area{ width: 100%; height: 100px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin: auto; padding: 0 60px }
.header.fixed .nav_area { }
.logo_area{ width: 285px; height: auto;}
.logo_area img {cursor: pointer;}
.logo_pc{  height: auto;}
.logo_mo{ width: 100%; height: auto; display: none;}
.menu_sub{ width: 700px; height: 100px;}
#menu_area{ width: 100%; display: flex; flex-flow: row wrap; justify-content: center; padding: 0 20px }
#menu_area>p{ display: none; }
#menu_area>.menu>h4{ display: none; }
.menu{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.menu>li{display: block; text-align: center; position: relative; z-index: 100;}
.menu>li::before {content: ""; width: calc(100% + 40px); position: absolute; left: -20px; right: -20px; bottom: 0; margin: auto; height: 100%; transition: background-color 0.2s}
.menu>li .main_menu {display: inline-flex; height: 100px; position: relative; justify-content: center; align-items: center; z-index: 100; }
/* .menu>li .main_menu::after {width: 0; position: absolute; height: 2px; background-color: #fff; content: ""; bottom: 0; left: 0; right: 0; margin: auto; z-index: 100;transition: width 0.4s;} */
.menu>li .main_menu a,.all_sub_menu_area > li >p { font-size: 22px; color: #000; height: 80%; display: flex; align-items: center; justify-content: center; padding: 0 40px; line-height: 22px; font-weight: 400 !important; letter-spacing: -1px; }
.main .menu>li .main_menu a {color: #fff;}


/* 상단 로그인버튼 */
.nav.pc {display: inline-flex; align-items: center; justify-content: flex-end;  z-index: 1; font-size: 18px;}
.nav.pc .nav_btn { line-height: 1; text-align: center; color: #999; }
.nav.pc a { font-weight: 600; display: flex; justify-content: flex-start; align-items: center; }
.nav.pc a > img { margin: 3px 3px 0 0 }
.nav.pc > span { display: block; width: 37px; text-align: center; color: #999; padding-bottom: 2px; line-height: 1;}
.nav.pc > .lang_catalog { margin-right: 30px; }
.menu_hamburger.mobile {display: none; height: 65px; width: 73px; flex-flow: column nowrap; justify-content: center; align-items: center; cursor: pointer; position: absolute; z-index: 1000; top: 0; right: 0; background-color: #fff;}
.menu_hamburger.mobile div {width: 33px; height: 3px; background-color: #333333; margin-top: 8px; transition: all 0.2s ease-in-out;}
.menu_hamburger.mobile div:first-child {margin-top: 0px;}
.menu_hamburger.on > div {height: 3px; margin-top: 0; width: 30px;}
.menu_hamburger.on > div:nth-child(1) {transform:translateY(1px) rotate(-45deg);}
.menu_hamburger.on > div:nth-child(2) {display: none;}
.menu_hamburger.on > div:nth-child(3) {transform:translateY(-2px) rotate(45deg);}

/* 단일 서브 메뉴 */
.menu>li .sub_menu {display: flex; flex-direction: column; justify-content: center; overflow: hidden; height: 0; visibility: hidden; width: calc(100% + 40px); position: absolute; top:100px; left: -20px; background-color: rgba(36,36,36, 0.9); box-shadow:inset 0 7px 15px rgba(0,0,0,0.3);}
.menu>li .sub_menu a {font-size: 16px; color: #fff; display: block; padding: 15px 6px; /*line-height: 1; /*transform: translateX(100%); opacity:0; margin-top: 3px;*/ line-height: 24px;  border-bottom: 1px solid rgba(0,0,0,0.2); transition: color 0.3s, background-color 0.3s;}
.menu>li .sub_menu a:first-child {margin-top: 0;}




/* 단일 서브 메뉴 호버 */

.menu>li:hover::before {background-color: #006eb8;}
.menu>li:hover .main_menu::after {width: calc(100% + 20px); left: -10px; right: -10px; border-radius: 2px;}
.menu>li:hover .main_menu a {font-weight: bold; color: #fff;}
.menu>li:hover .sub_menu {visibility: visible; height: auto;}
/* .menu>li:hover .sub_menu a {transform: translateX(0); opacity:1; transition: transform 0.3s, opacity 0.3s;} */
/* .menu>li:hover .sub_menu a:nth-child(1) {transition-delay: 0s;}
.menu>li:hover .sub_menu a:nth-child(2) {transition-delay: 0.1s;}
.menu>li:hover .sub_menu a:nth-child(3) {transition-delay: 0.2s;}
.menu>li:hover .sub_menu a:nth-child(4) {transition-delay: 0.3s;}
.menu>li:hover .sub_menu a:nth-child(5) {transition-delay: 0.4s;} */
.menu>li .sub_menu a:hover { background-color: rgba(0,0,0,0.2); color: #006eb8;}


/* 전체 서브 메뉴 */
.bottom_nav {background-color: rgba(255,255,255,0.5); width: 100%; position: absolute; top: 90px; left: 0; /*border-bottom: 1px solid #666;*/ display: block; overflow: hidden; transition: height 0.3s linear; height: 0;}
.all_sub_menu_area_sub { width: 100%; max-width: 1260px; margin: auto; display: flex; justify-content: space-between;}
.all_sub_menu_area_sub::before {width: 158px; height: 0; content: ""; visibility: hidden;}
.all_sub_menu_area_sub::after {width: 150px; height: 0; content: ""; visibility: hidden;}
.all_sub_menu_area { width: auto; display: flex; justify-content: space-between; align-items: flex-start; /*height: 310px;*/ padding-bottom: 15px;}
.all_sub_menu_area > li {position: relative;}
.all_sub_menu_area > li .visibility_p{visibility: hidden;}
.all_sub_menu_area .all_sub_menu {position: absolute; top: 0; left: 34px; padding: 15px 10px; width: 170px;}
.all_sub_menu_area .all_sub_menu li a {font-size: 18px; color: #000; font-weight: bold; height: 50px; display: flex; align-items: center; line-height: 1;}
.all_sub_menu_area .all_sub_menu li a > span {/*color: #000;*/ font-weight: bold; display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; padding-top: 10px;}
.all_sub_menu_area .all_sub_menu li a > span > span { font-size: 12px; /*color: #000;*/ font-weight: bold; padding-top: 1px;}
/* 전체 서브 메뉴 호버 */
.all_sub_menu_area .all_sub_menu li a:hover { color: #2bb673; }

/* 모바일형 메뉴 */

.menu_mobile {position: fixed; width: 100%; max-width: 480px; background-color: #fff; top: 0; right: -100%; height: 100%; z-index: 999999; transition: all 0.5s ease-in-out;  padding-top: 144px; display: none;}
#menu_area_m {width: 100%; overflow: auto; height: 100%; padding-bottom: 60px; border-left: 1px solid #ccc;}
#menu_area_m > p {display: none;}
#menu_area_m .menu_m {width: 100%; border-top: 1px solid #ddd;}
#menu_area_m .main_menu_m {width: 100%; height: 70px; background-color: rgba(255,255,255,0.5); border-bottom: 1px solid #dddddd; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 0 20px; cursor: pointer;}
#menu_area_m .main_menu_m a { color: #333; font-weight: bold; font-size: 20px; }
#menu_area_m .main_menu_m.full { padding: 0;}
#menu_area_m .main_menu_m.on.full {border-color: #ddd; }
#menu_area_m .main_menu_m.full a {width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0 20px; }
#menu_area_m .main_menu_m .icon1 { display: inline-block; color: #151515; font-size: 36px;}
#menu_area_m .main_menu_m .icon2 { display: none; color: #fff; font-size: 20px;}
#menu_area_m .main_menu_m.on {background-color:#0065b2; border-color: #333; font-weight: bold;}
#menu_area_m .main_menu_m.on a {color: #fff;}
#menu_area_m .main_menu_m.on .icon1 {display: none;}
#menu_area_m .main_menu_m.on .icon2 {display: inline-block;}
#menu_area_m .sub_menu_m {overflow: hidden; display: none;}
#menu_area_m .sub_menu_m > li {width: 100%; height: 60px;}
#menu_area_m .sub_menu_m > li > a {width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding-left: 30px; color: #fff; font-size: 16px; background-color:#393939; border-bottom: 1px solid #333;}
#menu_area_m .sub_menu_m > li > a > span{ display: flex; flex-flow: column wrap; justify-content: center; align-items: flex-start; }
#menu_area_m .sub_menu_m > li > a > span > span {font-size: 12px; padding-top: 1px;}
#menu_area_m .sub_menu_m > li.select a {color: #0065b2; background-color: #2e2e2e;}
.menu_close_m {width: 80%; margin: 20px auto; height: 40px; display: flex; justify-content: center; align-items: center; line-height: 1; cursor: pointer; color: #fff;background-color: rgb(102,102,102); font-size: 16px; font-weight: bold;}
/* 메뉴 호버 */
#menu_area_m .sub_menu_m > li > a:hover { color: #0065b2; background-color: #2e2e2e;}
.select.mobile { width: 100%; padding: 20px }
.select.mobile select { width: 100%; display: block; }
.lang_exechange { position: absolute; right: 70px; display: flex; justify-content: flex-start; align-items: center; }
.lang_exechange a { font-size: 16px; color: #333333; margin: 0 3px; line-height: 30px }

@media (min-width:961px){
    .lang_exechange { display: none; }
}
@media (max-width:1460px){
    .header {height: 153px;}
    .top_nav::before { height: 53px; width: 100%; content: ""; border-bottom: 1px solid rgba(0,0,0,0.1); display: block; background-color: #ffffff; }
    .header.fixed .top_nav::before {background-color: rgba(0,0,0,0.6); }
    .nav_area {padding: 0 20px 0 40px;}
    .nav.pc {position: absolute; top: 7px; right: 30px; font-size: 15px;}
}

@media (max-width:1160px){
    .header {height: 165px;}
    .top_nav::before {height: 95px;}
    .nav_area {justify-content: center; height: 70px; padding:0;}
    .logo_area {position: absolute; top: 22px; left: 25px;}
    .menu_sub {width: 100%; height: 70px;}
    .menu>li .main_menu {height: 70px;}
    .menu>li .main_menu a {height: 100%;}
    .menu>li .sub_menu {top: 70px;}
    .nav.pc {top: 26px;}
}

@media (max-width:960px){
    .menu_sub {display: none;}
    .header {height: 81px; width: 100%; }
    .top_nav::before {display: none;}
    .nav_area {justify-content: space-between; height: 81px; background-color: #fff; padding: 0 22px;}
    .header.fixed .nav_area {background-color: #fff;}
    .logo_area {position: static; width: calc(100% - 80px); max-width: 138px;}
    .logo_pc {display: none;}
    .logo_mo {display: block;}
    .nav.pc {display: none;}
    .menu_hamburger.mobile {display: flex; top: 9px;}
    .menu_mobile {display: block; padding-top: 81px;}
}

/****** 헤더 영역 끝 ******/

/****** 푸터 영역 시작 ******/
.footer_sub{ width: 100%; background-color: #fff; position: relative; overflow: hidden;}
.footer { width: 100%; margin: auto; display: flex; justify-content: center; align-items: center; height: auto; min-height: 168px; padding: 60px 10px;}
.footer ul { text-align: left; line-height: 1;  width: auto; width: 100%; position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width:1200px;}
.footer ul li { display: inline-block; color: #121212; line-height: 30px; font-size: 16px;  letter-spacing: 0; word-break: keep-all; letter-spacing: -0.5px; margin: 0 5px; text-align: center;word-break: keep-all;}
.footer ul li.line {font-size: 14px; color: #ccc; position: relative; bottom: 1px; margin: 0 10px;}
.footer ul li.copyright {width: 100%;}
.footer ul li.click_btn { color: #000; font-weight: bold; padding-left: 5px;}

@media (max-width:480px){

    .footer ul li {font-size: 15px;}
    .footer ul li.line {margin: 0 5px;}
    .footer ul li.line:nth-of-type(4),.footer ul li.line:nth-of-type(6),.footer ul li.line:nth-of-type(8) {display: none;}
}

/****** 푸터 영역 끝 ******/

/****** 서브 페이지 공통 ******/
.sub_page_blank_box {display: none; width: 100%; height: 0;}
.sub_title_area { width: 100%; height: 260px; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: #fff; position: relative;}
.sub_title_area .sub_title_text {  width: 100%; height: 100%; z-index: 10; color: #fff; font-size: 30px; display: flex; justify-content: center; align-items: center; font-weight: 600; }

.sub_nav_area.pc { display: none; height: 32px; width: 99%; max-width: 1200px; position: relative; z-index: 100; margin: auto;}
.sub_nav_area.pc > ul { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; position: absolute; left: 0; bottom: 0px; height: 65px; box-shadow: 0px 8px 10px rgba(0,0,0,0.3);}

.sub_nav_area.pc > ul > li { width: 100%; height: 100%;}
.sub_nav_area.pc > ul > li a {width: 100%; height: 100%; font-size: 18px; color: #fff; display: flex; justify-content: center; align-items: center; border-left: 1px solid #32876f; background-color: #1d735b;}
.sub_nav_area.pc > ul > li:first-child a {border: 0;}

.sub_nav_area.pc > ul > li.current a {background-color: #32876f;}
.sub_nav_area.pc > ul > li a:hover {background-color: #32876f;}


@media (max-width:960px){
    /*.sub_nav_area.pc {display: none;}*/
}
@media (max-width:480px){
    .sub_title_area {height: 200px; }
    .subpage_title { font-size: 30px !important; height: 130px !important; }
}
@media (max-width:360px){
    .sub_title_area .sub_title_text {font-size: 35px;}
}


.sub_nav_area.mobile { width: 100%; background-color: #f5f5f5;  }
.sub_nav_area.mobile > ul { width: 100%; max-width: 1200px; margin: auto; height: 60px; display: flex; justify-content: flex-start; align-items: center;  }
.sub_nav_area.mobile > ul > li { width: 50%; max-width: 250px; height: 100%; border-right: 1px solid #cccccc; font-size: 18px; line-height: 20px; text-align: left; display: flex; justify-content: space-between; align-items: center; position: relative;  padding: 0 25px 0 15px; cursor: pointer; color: #000; }
.sub_nav_area.mobile > ul > li:nth-of-type(1) { width: 60px !important; border-left: 1px solid #cccccc; display: flex; justify-content: center !important; padding: 0 !important; align-items: center; }
.sub_nav_area.mobile > ul > li.sub_nav1 {}
.sub_nav_area.mobile > ul > li .menu_name { word-break: keep-all;}
.sub_nav_area.mobile > ul > li .menu_name+p{ position: absolute; font-size: 20px; right: 10px; display: inline-block; top:0; bottom: 0; margin: auto; z-index: 1; height: 29px; line-height: 1;}
.sub_nav_area.mobile .menu_name+p { transform:rotate(0deg); transition: all 0.2s ease; }
.sub_nav_area.mobile > ul > li.open .menu_name+p { transform:rotate(-180deg); }
.sub_nav_area.mobile > ul > li .menu_select {width: calc(100% + 2px); position: absolute; top: 59px; left: -1px; z-index: 100; border: 1px solid #cccccc; background-color: rgb(255,255,255); display: none; }
.sub_nav_area.mobile > ul > li .menu_select a {width: 100%; height: 60px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; font-size: 16px; padding: 0 15px; color: #333;}
.sub_nav_area.mobile .menu_select a.select {background-color: #008fd2; color: #fff;}

@media (max-width:360px){
    .sub_nav_area.mobile > ul > li {font-size: 15px; line-height: 18px;}
    .sub_nav_area.mobile > ul > li .menu_select a {font-size: 15px; line-height: 18px;}
}


/* 컨텐츠 영역 */

#container_wr{ width: 100%; height: auto; min-height: 690px; }

#top_btn{ padding: 6px 0; background-color: rgba(0, 0, 0, 0.5); color: rgb(255,255,255); text-align: center; line-height: 36px; position: fixed; right: 20px; bottom: 20px; z-index: 100; overflow: hidden; transition: all 0.2s ease-in-out; cursor: pointer; border:0;}
#top_btn:hover{ background-color: rgba(0, 0, 0, 0.8); }

/* 컨텐츠 영역 */

.util{height: 47px;padding-top: 17px;}
.util_ul{float: right;}
.util_ul > li{position: relative; float: left;padding: 0 8px;font-size: 12px;color: #555; z-index: 9999;}
.util_ul > li:before{content: "";display: block;position: absolute;left: 0;top: 2px;width: 1px; height: 12px;background: #ccc;}
.util_ul > li:first-child:before, .util_ul > li:last-child:before{display: none;}
.util_ul > li.equipment{padding: 1px 8px;}
.util_ul > li a{display: block;padding: 1px 0;}
.util_ul > li.message a{padding-left: 21px;background: url(../images/icon/icon_message_mini.png) no-repeat left 40%;}
.util_ul > li.member_class a{padding-left: 21px;background-repeat: no-repeat;background-position: left top;}
.util_ul > li.fullmember a{background-image: url(../images/icon/icon_fullmember.png);}
.util_ul > li.associate a{background-image: url(../images/icon/icon_associate.png);}
.util_ul > li em{color: #28aacf}

/* 다국어 셀렉트 */
.language_selector{width: 86px;padding: 0 11px 3px 0px; border:none;border-bottom: 1px solid #e7e7e7;/*background: url(../images/common/select_arrow.png) no-repeat;*/ background-position: right 2px top 50%;font-size: 12px;letter-spacing: -1px;text-align: left;}
.language_selector img{vertical-align:bottom;margin:0 5px;}
.languages {display: none;position: absolute; margin: 0;}
.languages > li {width: 86px;padding:5px;background: white;cursor: pointer;}
.languages > li:hover {background: #aaa;}
.languages > li img{vertical-align:bottom;margin-right: 5px;}

/* GNB 메뉴 */
/* .nav{position: relative;z-index: 500;width: 100%;height: 32px;} */
.nav h1{float: left;}
.nav h1 a{display: block;}
.gnb{float: right;padding-top: 9px;}
.gnb > li{float: left;position: relative;width: 134px;text-align: center;}
.gnb > li > a{padding-bottom: 19px;font-weight: 600;}
.gnb_depth2{display: none;position: absolute;top: 36px;left:7px;z-index: 100;width: 100%;height: 230px;padding: 15px 0 0;border-left: 1px solid #e7e7e7;}
.gnb > li:first-child .gnb_depth2{border-left: none;}
.gnb_depth2:hover{background: #f6fcfe;}
.gnb_depth2 li{width:130px;}
.gnb_depth2 li a{display: block;padding: 10px 0 9px;font-size: 13px;color: #333}
.gnb_depth2 li a:hover{color: #28aacf}
.gnb_bg{display: none;position: absolute;right: 0;top: 45px;z-index: 99;width: 800px;height: 230px;background: white;}

/* 화이트 헤더(비회원) */
.main_white .gnb>li>a, .main_white .language_selector, .main_white .util_ul>li>a{color:#fff;}

/* 로그인 팝업 */
.popup{position: absolute;top: 55px;z-index: 1000;width: 100%;}
.pop_cont{float: right;width: 490px;padding: 38px 43px 30px 40px;background: white;}
.pop_cont h4{margin-bottom: 30px;font-size: 17px;color: #555;}
.log_box{position:relative;}
.log_box ul{float: left;color: #555;}
.log_box ul li{margin-top: 10px;}
.log_box ul li:first-child{margin-top: 0;}
.log_box ul li label{display: block;float: left;width: 73px;padding: 9px 0;font-size: 13px;font-weight: bold;}
.log_box ul li input{display: block;float: right;width: 250px;height: 32px;padding: 8px;border: 1px solid #e7e7e7;background: #f9f9f9;font-size: 14px;}
.log_box .btn{float: right;width: 74px;height: 74px;}
.log_box .alert{display: none;top: -22px;left: 73px;text-align: left;}
.log_plus{margin-top: 30px;}
.log_plus > span{display: block;float: right;width: 176px;font-size: 13px;font-weight: bold;color: #555;}
.log_plus > span:first-child{float: left;text-align: right;}
.log_plus > span a{display: block;float: left;position: relative;margin-left:20px;}
.log_plus > span a:first-child{margin-left: 0;}
.log_plus > span a:first-child:after{content: "";display: block;position: absolute;top: 1px;right: -10px;width: 1px;height: 12px;background: #aaa;}