﻿/* 서브화면 공통 */

/* 페이지별 간략 설명 */
.expl_sub {display:block; margin-top:180px; color:#fff; text-shadow:#1a3870 0 0 10px;}

/* 서브페이지 공통 입력창 레이아웃 */
.page_input_box {display:block; background:#fff; border:1px solid rgba(0, 0, 0, 0.4); border-radius:3px; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 10px; 
                 left:50%; margin-left:-512px; width:1024px; /*height:350px;*/ top:270px; position:absolute;}
/*.page_input_box:hover { border:1px solid #00a0e9; transition:all ease 0.1s;}
.page_input_box:hover .page_tit_img {cursor:pointer; width:80px; height:80px; margin:-3px 0 0 -3px; opacity:1 !important; transition:all ease 0.1s;}*/
.inner_layout_box {width:100%; height:100%;}

.page_input_box .page_tit_img {display:none; width:74px; height:74px; transition:all ease 0.1s; }

.page_input_inner {display:block; width:100%; height:100%; padding:30px 15px 30px 30px;}
.page_input_inner .input_title {width:100%; height:50px; font-size:1.2rem; font-weight:bold;}

/*메뉴소개*/
.outer_intro_btn {top:-27px; right:20px;}
.intro_btn_css {height:26px; line-height:26px; display:inline-block; font-size:0.9rem; color:#fff; background:#00a8ff; border:1px solid #7cd2ff; border-bottom:none; border-radius:5px 5px 0 0; padding:0 20px;
                  transition:all ease 0.1s; box-sizing:border-box; position:relative; top:0;}
.intro_btn_css:hover {height:29px; padding:0 20px 3px; margin-bottom:3px; transition:all ease 0.1s; top:-3px;}

/*메뉴소개 팝업창 내부*/
#introduceMenuDialog {overflow-y:auto;}
#introduceMenuIFrame {padding:20px;}

.icon_help {background:url('/images/btn/btn_help_odf.png') no-repeat center center; width:22px; height:22px; display:inline-block; vertical-align:middle; border:1px solid #ff5400; border-radius:50%;}
.icon_help:hover {cursor:pointer;}

/* 실제 입력 영역 - 영역별 공통 설정 */
.page_input_inner .input_area {min-height:60px; display:block; width:100%; line-height:60px;}
.page_input_inner .input_area div.tit {display:inline-block; font-size:14px; vertical-align:middle; line-height:16px; font-weight:bold; margin-right:3px;}
.page_input_inner .input_area div.tit > span {display:block; background:url('../images/blt/blt_input_tit.png') no-repeat left top 2px; padding-left:8px; width:150px;}
.page_input_inner .input_area div.tit em {display:inline-block; color:#e02222; font-size:18px; line-height:5px; vertical-align:top; margin-top:8px; margin-right:2px;}

.page_input_inner .input_area .cont {display:inline-block; max-width:780px; line-height:14px; vertical-align:middle; }
/*.page_input_inner .input_item input {border:0; width:calc(100% - 35px); float:left; margin-top:4px; height:26px;}*/


/* 도움말 팝업 버튼 */
.page_input_inner .help_area {width:30px; height:50px; line-height:50px; float:right;}
.page_input_inner .btn_pop_help {background:url('/images/btn/btn_pop_help.png') no-repeat center center; width:24px; height:24px; opacity:0.4; display:inline-block; vertical-align:middle;}
.page_input_inner .btn_pop_help:hover {opacity:1; cursor:pointer;}

/* 인풋창 닫기 버튼 */
.page_input_box .close_input {display:none; position:absolute; background:url('/images/btn/close_bk.png') no-repeat center center; width:30px; height:30px; background-size:17px; top:15px; right:15px; opacity:0.6;}
.page_input_box .close_input:hover {cursor:pointer; opacity:1;}

/* 클릭하라는 유도 멘트 */
.do_click_box {display:none; width:500px; bottom:150px; left:50%; margin-left:-250px; }
.do_click {font-size:1rem; color:#333; }


/* 메인메뉴 */
.main_menu_outer {width:100%; margin:-38px auto 0;}
.main_menu_inner {text-align:left; left:50%; margin-left:-470px; z-index:14;}
#mainMenu {width:74px; height:74px; text-align:center; border-radius:37px; background:#fff; /*border:1px solid rgba(0, 0, 0, 0.3);*/ box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 10px; overflow:hidden; transition:all ease-in-out 0.2s;}
/*#mainMenu:hover {width:940px; padding:0 20px 0 5px; transition:all ease 0.2s;}*/
#mainMenu:hover li a {transition:all ease 0.2s;}
#mainMenu li {display:block; float:left; width:100px; height:148px; box-sizing:border-box; }
#mainMenu li:last-child {margin-right:0;}
#mainMenu li a:hover .menu_img {margin-top:-74px; transition:all ease-in-out 0.2s;}
/*#mainMenu .main_menu_m:hover .menu_img_m {margin-left:0;}*/

#mainMenu li a {display:block; width:100px; height:148px; }
#mainMenu .menu_img {width:100px; height:74px; margin-top:0; transition:all ease-in-out 0.2s;}
#mainMenu .menu_img_m {/*background:url('/images/menu/menu_icon_m.png') no-repeat center center; background-size:74px; margin-left:-13px;*/ position:relative; text-align:center;}
#mainMenu .menu_img_h {background:url('/images/menu/menu_icon_h.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_1 {background:url('/images/menu/menu_icon_01.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_2 {background:url('../images/menu/menu_icon_02.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_3 {background:url('../images/menu/menu_icon_03.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_4 {background:url('../images/menu/menu_icon_04.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_5 {background:url('../images/menu/menu_icon_05.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_6 {background:url('../images/menu/menu_icon_06.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_7 {background:url('../images/menu/menu_icon_07.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_img_8 {background:url('../images/menu/menu_icon_08.png') no-repeat center center; background-size:74px;}
#mainMenu .menu_name { height:74px; width:100%; line-height:70px; }
#mainMenu .menu_name span {color:#333;display:inline-block; vertical-align:middle; line-height:16px;}

#mainMenu .mbar {position:absolute; width:74px; left:0;}
#mainMenu:hover {cursor:pointer;}

#mainMenu .mbar_1 {top:-11px; transition:all ease 0.2s;}
#mainMenu .mbar_2 {top:0px; transition:all ease 0.2s;}
#mainMenu .mbar_3 {top:11px; transition:all ease 0.2s;}

/*#mainMenu:hover .mbar_1 {transform:rotate( 45deg ); width:60px; top:-2px; left:8px; transition:all ease 0.2s;}
#mainMenu:hover .mbar_2 {opacity:0; transition:all ease 0.2s;}
#mainMenu:hover .mbar_3 {transform:rotate( -45deg ); width:60px; top:15px; left:8px; transition:all ease 0.2s;}*/

/*@media screen and (max-width:842px) {
#mainMenu { width:calc(100% - 40px); box-sizing:border-box; }
}*/

/* 결과보기, 리셋버튼 */
.btn_rslt {width:100%; left:0; text-align:center; z-index:13;}
.btn_rslt button {height:74px; box-sizing:border-box; padding:0 30px; text-align:center; border-radius:37px; min-width:200px; font-size:1.4rem; font-weight:bold; box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 10px;}
.btn_submit {display:inline-block; background:#339ded; color:#fff; border:1px solid #1f80ca; margin-right:20px;}
.btn_submit:hover {background:#2891e0; cursor:pointer;}
.btn_reset {display:inline-block; background:#f9f9f9; color:#333; border:1px solid #ccc; }
.btn_reset:hover {background:#f1f1f1; cursor:pointer;}

/* 콤보 박스 크기 조정*/
.custom-combobox {position: relative; display: inline-block;}
.custom-combobox-input, .grayInput {/*margin-top: 9px;*/ padding: 3px 7px; /*float: left;*/ width: 175px; height: 24px;}
.custom-combobox-toggle {/*position: absolute;*/ margin-top: 0px; /*top: 21%; float: left;*/ margin-left: -1px; padding: 15px;}