/****** 공통 영역 ******/
/* 공통 클래스, 레이아웃 */
.wrap{width: 100%;min-width: 1100px;}
.center{width: 1100px;margin: 0 auto;}
.sup_center{width: 900px;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(71,71,162);font-size: 14px;color: white;text-align: center;line-height:1;}
/* 취소 버튼 */
.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: 10; background: rgba(0,0,0,0.5); display:none; }


#header{ width: 100%; margin: auto; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; }
#header .nav_area{ width: 100%; height: 100%; position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgb(34,34,34); }
#header .logo_area{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
#header .logo{ width: 203px; min-width: 203px; height: auto; margin-right: 50px; cursor: pointer; transition: all 0.2s ease-in-out; cursor: pointer; }
#header .logo_left{ width: auto; height: auto; max-height: 60px; }
#header .logo_right{ width: auto; height: auto; max-height: 60px; }
#header .nav a{ color: rgb(255,255,255); font-size: 14px; cursor: pointer; }
#header .bar_line{ width: 1px; height: 15px; margin: 0 8px; background-color: rgb(255,255,255); }
#header .menu_sub{ width: 620px; height: auto; color: rgb(255,255,255); }
#header .menu{ width: 100%; height: 75px; margin: auto; padding: 0 20px; display: flex; justify-content: space-around; align-items: center; flex-flow: row nowrap; }
#header .menu li{ width: auto; position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
#header .menu li p{ width: auto; font-size: 16px; font-weight: bold; cursor: pointer; display: inline; text-align: center; }
#header .menu li p .space{ display: inline; }
#header .menu li p .line_feed{ display: none; }
#header .add_btn{ font-size: 14px; color: rgb(153,153,153); display: flex; flex-flow: row nowrap; align-items: center; }
#header .add_btn>p{ cursor: pointer; }
#header .add_btn>div{ width: 1px; height: 14px; margin: 0 10px; background-color: rgb(153,153,153); }

/****** 모바일 헤더 영역 ******/
#header_m{ width: 100%; height: 80px; margin: auto; padding: 0; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; background-color: rgb(34,34,34); }
#header_m .nav_sub{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-end; }
#header_m .nav_area{ width: 100%; height: 56px; position: relative; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; }
#header_m .logo_area{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
#header_m .logo{ width: 203px; min-width: 203px; height: auto; margin: 0 50px 0 20px; cursor: pointer; transition: all 0.2s ease-in-out; cursor: pointer; }
#header_m .logo_left{ width: auto; height: auto; max-height: 60px; }
#header_m .logo_right{ width: auto; height: auto; max-height: 60px; }
#header_m .nav{ padding-right: 20px; display: flex; flex-flow: row nowrap; align-items: center; }
#header_m .nav a{ color: rgb(255,255,255); font-size: 14px; cursor: pointer; }
#header_m .bar_line{ width: 1px; height: 15px; margin: 0 8px; background-color: rgb(153,153,153); }
#header_m .menu_sub{ width: auto; height: auto; color: rgb(255,255,255); }
#header_m .menu{ width: 200px; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-flow: row wrap; position: absolute; top: 0px; right: -200px; z-index: 100; transition: all 0.5s ease-in-out; }
#header_m .menu li{ width: 100%; position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 0; font-size: 16px; background: rgb(34,34,34); cursor: pointer; color: rgb(255,255,255); }
#header_m .menu li p{ width: auto; padding: 16px 40px; font-size: 16px; font-weight: bold; cursor: pointer; display: inline; text-align: center; }
#header_m .menu li p .space{ display: inline; }
#header_m .menu li p .line_feed{ display: none; }
#header_m .add_btn{ font-size: 14px; color: rgb(153,153,153); display: flex; flex-flow: row nowrap; align-items: center; }
#header_m .add_btn>p{ cursor: pointer; }
#header_m .add_btn>div{ width: 1px; height: 14px; margin: 0 10px; background-color: rgb(153,153,153); }
#header_m .menu_hamburger_sub{ width: 47px; height: 40px; padding: 3px; border: 2px solid rgb(255,255,255); position: absolute; top: 5px; left: -60px; background-color: rgb(34,34,34); }
#header_m .menu_hamburger{ width: 25px; height: 20px; margin: 4px auto 0; position: relative; cursor: pointer; }
#header_m .menu_hamburger div{ width: 100%; height: 2px; background: rgb(255,255,255); position: absolute; left: 0; transition: all 0.3s ease-in-out; }
#header_m .menu_hamburger div:nth-of-type(1){ top: 0; }
#header_m .menu_hamburger div:nth-of-type(2){ top: 50%; right:0; left: 0; margin: auto; }
#header_m .menu_hamburger div:nth-of-type(3){ top: 100%; }
#header_m .sub_menu{ display: none; width: 100%; position: static; top:49px; left:0; z-index: 1000; background-color: transparent; box-shadow: 1px 1px 3px 1px transparent; }
#header_m .sub_menu li{ height: 60px; margin: 0; padding: 14px 0; border-left: 0 solid; font-weight: normal; background: rgb(71,71,162); }
#header_m .sub_menu li:hover{ font-weight: normal; border-left: 0px solid; }


/* 단일 서브 메뉴 */
.sub_menu{ display: none; width: 160px; margin-left: -80px; padding-bottom: 10px; position: absolute; top:49px; left:50%; z-index: 1000; background-color: rgb(34,34,34); }
.sub_menu li{ height: 40px; margin: 0px 10px 0px 0px; padding: 5px 0; font-weight: normal; transition: all 0.2s ease-in-out; font-size: 14px; display: flex; align-items: center; cursor: pointer; }
.sub_menu li:hover{ font-weight: bold; color: rgb(215,159,94); }

/* 전체 서브 메뉴 */
.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; background-color: rgb(34,34,34); z-index: 10; }
.all_sub_menu_area{ width: 100%; max-width: 1100px; height: auto; margin: auto; padding: 0 20px 20px; display: none; flex-flow: row nowrap; justify-content: space-around; align-items: flex-start; }
.all_sub_menu{ width: 100%; height: auto; }
.all_sub_menu li{ width: 100%; height: 40px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; cursor: pointer; font-size: 14px; transition: all 0.1s ease-in-out; }
.all_sub_menu li:hover{ background-color: rgb(100,100,100); color: rgb(215,159,94); }


/****** 서브 페이지 공통 ******/
.sub_title_area{ width: 100%; height: 200px; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; color: rgb(255,255,255); font-size: 30px; font-weight: bold; transition: all 0.2s ease-in-out; }
.sub_title_area_m{ width: 100%; height: 140px; max-height: 200px; min-height: 140px; background-position: center; background-repeat: no-repeat; background-size: cover; display: none; justify-content: center; align-items: center; color: rgb(255,255,255); font-size: 16px; font-weight: bold; transition: all 0.2s ease-in-out;}
@media (max-width:560px){
    .sub_title_area{ display: none; }
    .sub_title_area_m{ display: flex; }
}
.sub_nav{ width: 100%; height: auto; display:block; border-top: 1px solid rgb(18, 18, 105); border-bottom: 1px solid rgb(18, 18, 105); }
.sub_nav ul{ width: 100%; height: 40px; margin: auto; display: flex; align-items: center; justify-content: flex-start; flex-flow: row nowrap; background-color: rgb(237, 237, 249); }
.sub_nav ul li{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; }
.sub_nav ul li{ width: 300px; height: 100%; border-right: 1px solid rgb(18, 18, 105); position: relative; }
.sub_nav ul li:first-of-type{ border-left: 1px solid rgb(18, 18, 105); }
.sub_nav .menu_name, .sub_nav .sub_menu_name{ width: auto; text-align: center; margin-right: 10px; font-size: 16px; }
.sub_nav .menu_select, .sub_nav .sub_menu_select{ width: 201px; position: absolute; top: 40px; left: -1px; z-index: 10; border: 1px solid rgb(18, 18, 105); background-color: rgb(255,255,255); display: none; }
.sub_nav i{ transition: all 0.2s ease-in-out; font-size: 14px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.sub_nav .menu_select p, .sub_nav .sub_menu_select p{ height: 40px; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; font-size: 16px; }
.sub_nav .menu_select p:hover, .sub_nav .sub_menu_select p:hover{ background-color: rgb(240,240,240); color: rgb(71,71,162); font-weight: bold; }
.content_title{ width: 100%; height: auto; margin: auto; padding: 50px 20px 40px; max-width: 1100px; }
.content_title dt{ text-align: center; font-size: 36px; font-weight: bold; color: rgb(51,51,51); }
.content_title dd{ text-align: center; font-size: 16px; color: rgb(204,204,204); }

.sub_nav .menu_hide{ display: none; }
.sub_title{ width: 90%; min-height: 90px; margin: 0 auto 20px; border-bottom: 1px solid rgb(204,204,204); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 22px; color: rgb(51,51,51); font-weight: bold; text-align: center; }




.subpage_content{ width: 1100px; margin: 50px auto; display: flex; flex-flow: row nowrap; justify-content: space-between; }
.aside_area{ width: 210px; }
.aside_area>dl{ width: 100%; height: auto; border: 1px solid rgb(221,221,221); }
.aside_area>dl>dt{ width: 100%; height: 85px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgb(248,248,248); font-weight: bold; font-size: 22px; color: rgb(51,51,51); }
.aside_area>dl>dd{ width: 100%; height: 50px; padding-left: 20px; border-top: 1px solid rgb(221,221,221); display: flex; flex-flow: row nowrap; align-items: center; cursor: pointer; color: rgb(102,102,102); font-size: 16px; position: relative; }
.aside_area>dl>dd>i{ height: 100%; position: absolute; top:0; right: 20px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.aside_area>dl>dd.product_sub{ height: auto; padding: 10px 20px; background-color: rgb(248,248,248); font-size: 14px; color: rgb(102,102,102); flex-flow: row wrap; cursor: auto; }
.aside_area>dl>dd.product_sub>h5{ width: 100%; margin: 25px 0 10px; font-size: 15px; font-weight: bold; color: rgb(50,171,102); }
.aside_area>dl>dd.product_sub>h5:first-of-type{ margin-top: 5px; }
.aside_area>dl>dd.product_sub>p{ width: 100%; margin: 3px 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 13px; cursor: pointer; }
.aside_area>ul{ width: 100%; height: auto; margin-top: 50px; border: 1px solid rgb(221,221,221); }
.aside_area>ul>li{ width: 100%; }
.aside_area>ul>li:first-of-type{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.aside_area>ul>li:first-of-type>div{ width: 50%; height: 104px; padding: 10px 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; cursor: pointer; }
.aside_area>ul>li:first-of-type>div>img{ width: 50px; height: auto; }
.aside_area>ul>li:first-of-type>p{ width: 1px; height: 70px; background-color: rgb(221,221,221); }
.aside_area>ul>li:last-of-type{ padding: 20px 15px; border-top: 1px solid rgb(221,221,221); }
.aside_area>ul>li:last-of-type>h4{ width: 100%; font-weight: bold; font-size: 16px; }
.aside_area>ul>li:last-of-type>h6{ width: 100%; margin: 10px 0 15px; font-weight: bold; font-size: 21px; color: rgb(71,71,162); }
.aside_area>ul>li:last-of-type>p{ width: 100%; font-size: 14px; color: rgb(153,153,153); }
.content_area{ width: 840px; height: auto; }
.content_area>.content_title_area{ width: 100%; margin-bottom: 30px; padding: 30px 0; border-bottom: 1px solid rgb(204,204,204); }
.content_area>.content_title_area>dt{ width: 100%; margin-bottom: 5px; font-size: 26px; color: rgb(51,51,51); font-weight: bold; display: flex; flex-flow: row nowrap; align-items: baseline; }
.content_area>.content_title_area>dd{ width: 100%; font-size: 12px; color: rgb(153,153,153); }
.content_area>.content_title_area>dd>span{ cursor: pointer; }
.content_area>.content_title_area>dd>span:hover{ font-weight: bold; }
.content_area>.content_title_area>dd>i{ margin: 0 3px; }

.product_sub_m{ width: 90%; margin: 50px auto 20px; display: flex; flex-flow: row wrap; border-top: 1px solid rgb(204,204,204); border-left: 1px solid rgb(204,204,204); }
.product_sub_m>li{ width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.product_sub_m>li>p{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border-right: 1px solid rgb(204,204,204); border-bottom: 1px solid rgb(204,204,204); cursor: pointer; }

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



/* 푸터 영역 */
.footer_sub_sub{ width: 100%; border-top: 1px solid rgb(204,204,204); }
.footer_sub_sub .footer_sub{ width: 100%; max-width: 1100px; height: auto; margin: auto; padding: 30px 20px 40px; color: rgb(255,255,255); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.footer_sub_sub .footer{ width: 100%; margin: auto; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; font-size: 14px; }
.footer_sub_sub .footer>div{ width: 100%; margin: 3px 0; display: flex; align-items: center; justify-content: flex-start; flex-flow: row wrap; }
.footer_sub_sub .footer div>h4{ margin-right: 20px; display: flex; flex-flow: row nowrap; font-weight: normal; color: rgb(102,102,102); }
.footer_sub_sub .footer div>h4>i{ margin: 0 3px; font-size: 10px; display: flex; align-items: center; }
.footer_sub_sub .footer div>h4>span{ font-size: 12px; cursor: pointer; }


/* 모바일 푸터 영역 */
.footer_sub_sub_m{ width: 100%; border-top: 1px solid rgb(204,204,204); }
.footer_sub_sub_m .footer_sub{ width: 100%; height: auto; margin: auto; padding: 30px 20px 40px; color: rgb(255,255,255); display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; }
.footer_sub_sub_m .footer{ width: 100%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; flex-flow: row wrap; font-size: 14px; }
.footer_sub_sub_m .footer>div{ width: 100%; margin: 3px 0; display: flex; align-items: center; justify-content: flex-start; flex-flow: row wrap; }
.footer_sub_sub_m .footer div>h4{ margin-right: 10px; display: flex; flex-flow: row wrap; font-weight: normal; color: rgb(102,102,102); }
.footer_sub_sub_m .footer div>h4>i{ margin: 0 3px; font-size: 10px; display: flex; align-items: center; }
.footer_sub_sub_m .footer div>span{ margin-right: 10px; font-size: 12px; cursor: pointer; color: rgb(150,150,150); }


.select-script{position:relative; width:200px; height:32px; line-height:30px; border:1px solid #606976; text-transform:uppercase; background:#fff;}
.select-script label{position:absolute; width:90%; font-size:.86em; color:#606976; top:0; left:0; padding:0 5%;}
.select-script label:after{content:'▼'; width:30px; height:30px; position:absolute; top:0; right:-14px; font-size:.76em; color:#606976; text-align:center; border-left: 1px solid #606976; }
.select-script select{width:100%; height:30px; opacity:0; padding: 5px; font-size: 14px; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0)/* IE 8 */;}