/****** 공통 영역 ******/
/* 공통 클래스, 레이아웃 */
.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_btn{font-size: 15px; font-weight: bold; text-align: center; display: inline-block; background-color: #28aacf; color: #fff; border-radius: 4px; padding: 5px 10px;}


/* 체크박스 */
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;}



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

html,body{ min-width: 1200px; overflow-x: auto; }
.header{ width: 100%; margin: auto; display: block; position: relative; background-color: #fff;}
.nav_area{ width: 1200px; height: 90px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin: auto;}
.logo_area{ width: 158px; height: auto;}
.logo_area img {cursor: pointer;}
.logo_pc{ width: 100%; height: auto;}
.menu_sub{ width: 700px; height: 90px; }
#menu_area{ width: 100%; display: flex; flex-flow: row wrap; justify-content: center; color: #002853;}
#menu_area>p{ display: none; }
#menu_area>ul>h4{ display: none; }
.menu{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; flex-flow: row nowrap; }
.menu>li{display: block; text-align: center; position: relative; z-index: 100; padding: 0 20px;}
.menu>li .main_menu {display: inline-flex; height: 90px; position: relative; justify-content: center; align-items: center; z-index: 100; }
.menu>li .main_menu::after {position: absolute; width: 0; height: 2px; background-color: #fff; content: ""; bottom: 0; z-index: 100; transition: width 0.4s; left: 0; right: 0; margin: auto;}
.menu>li .main_menu a {font-size: 20px; color: #002853; font-weight: bold; height: 80%; display: flex; align-items: center; justify-content: center; padding: 0 20px; }

/* 서브 메뉴 */
.sub_menu{ display: flex; height: 0; width: 100%; flex-flow: column nowrap; text-align: center; overflow: hidden;}
.sub_menu a {font-size: 16px; color: #fff; display: block; padding: 8px 0; line-height: 1; transform: translateX(100%); opacity:0; }

/* 메뉴 호버 */
.menu>li:hover {background-color: rgba(0,40,83,0.9);}
.menu>li:hover .main_menu::after {width: 90%;}
.menu>li:hover .main_menu a {color: #fff;}
.menu>li:hover .sub_menu { height: auto; padding: 22px 0;}
.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;}
.sub_menu a:hover {color: #01b4cb; }

.nav .nav_btn {border: 1px solid #666; color: #666; display: inline-flex; justify-content: center; align-items: center; font-size: 14px; line-height: 1; padding: 8px 10px; }
.login_btn {width: 90px; height: 35px; border: 1px solid #666; color: #666; display: flex; justify-content: center; align-items: center; font-size: 14px;}
.login_btn img {width: 9px; margin-right: 8px;}

/* 우측 고정 퀵메뉴 */
.q_nav_area { position: fixed; right: 0; top: 300px; width: 100px; z-index: 200;}
.q_nav_area > ul { display: flex; flex-flow: column nowrap; border-top: 1px solid #01b4cb; border-left: 1px solid #01b4cb; background-color: #fff; }
.q_nav_area > ul > li { height: 100px; border-bottom: 1px solid #01b4cb; text-align: center;}
.q_nav_area > ul > li:first-child {height: 120px;}
.q_nav_area > ul > li a { color: #002853; display: flex; flex-flow: column nowrap; width: 100%; height: 100%; padding: 16px 14px; justify-content: space-between; align-items: center; font-size: 14px; font-weight: bold;}
.q_nav_area > ul > li a .icon {display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center;  background-size: auto; }
.q_nav_area > ul > li a .icon1 {background-image: url('../../../img/q_nav_icon_01.png');}
.q_nav_area > ul > li a .icon2 {background-image: url('../../../img/q_nav_icon_02.png');}
.q_nav_area > ul > li a .icon3 {background-image: url('../../../img/q_nav_icon_03.png');}
.q_nav_area > ul > li:hover { background-color: #01b4cb;}
.q_nav_area > ul > li:hover a {color: #fff;}
.q_nav_area > ul > li:hover a .icon1 {background-image: url('../../../img/q_nav_icon_01_h.png');}
.q_nav_area > ul > li:hover a .icon2 {background-image: url('../../../img/q_nav_icon_02_h.png');}
.q_nav_area > ul > li:hover a .icon3 {background-image: url('../../../img/q_nav_icon_03_h.png');}
/****** 헤더 영역 끝 ******/

/****** 푸터 영역 시작 ******/
.footer_sub{ width: 100%; background-color: #002853;}
.footer { width: 1200px; margin: auto;}
.footer ul { padding: 33px 0; text-align: center; line-height: 28px;}
.footer ul li { display: inline-block; color: #fff; line-height: 1; font-size: 16px; padding: 0 5px;}
/****** 푸터 영역 끝 ******/

/****** 서브 페이지 공통 ******/
.sub_title_area{ width: 100%; height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; background-color: #01b4cb; transition: all 0.2s ease-in-out; position: relative;}
.sub_title_area .sub_title_text {width: 1200px; margin: auto; height: 100%; position: absolute; z-index: 10; left: 0; right: 0; color: #fff; font-size: 20px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start;}
.sub_title_area .sub_title_text p.title {font-size: 40px; margin-bottom: 12px; font-weight: 500;}
.sub_title_area .sub_title_text p:not(.title) { color: rgba(255,255,255,0.5);}
.sub_nav_area { height: 60px; width: 100%; border-top: 1px solid #01b4cb; border-bottom: 1px solid #01b4cb; }
.sub_nav_area > ul { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.sub_nav_area > ul > li { width: 140px; height: 100%;  font-size: 17px; text-align: center; display: flex; justify-content: center; align-items: center; margin: 0 12px; position: relative;}
.sub_nav_area > ul > li a { font-size: 20px; color: #264163;}
.sub_nav_area > ul > li.current > a { color: #01b4cb;}
.current::after { width: 100%; content: ''; height: 4px; background-color: #01b4cb; position: absolute; bottom: 0;left: 0;}


/* 컨텐츠 영역 */
#container_wr{ width: 100%; height: auto; min-height: 690px; }
.content_page_title { font-size: 40px; text-align: center; color: #002853; padding: 90px 0; font-weight: bold; margin: auto;}

#top_btn{ padding: 6px 0; background-color: rgba(1, 180, 203, 0.8); color: rgb(255,255,255); text-align: center; line-height: 20px; 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(1, 180, 203, 1); }

/* 컨텐츠 영역 */

.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;}

.small {font-size: 12px; font-style: normal;}
#captcha {display: flex; align-items: center;}