@charset "utf-8";
/*-------------------------------------------------------------------
    파일정의 : 반응형 스타일
    작성날짜 : 2020-04-14 이형석
    참고사항 : 레이아웃, 상세스타일, 메뉴스타일 분류
    분류순서 : Wrapper > Header > Content > Footer > Navigation
    속성순서 : 표시 > 위치 > 넘침/흐름 > 박스모델 > 박스모양 > 문단모양 > 기타
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
 css 수정 /삭제시 주석 작성 방식
 2013.01.01(수정/삭제일자) | 홍길동(수정/삭제자) | 디자인 변경으로 인한 기존 칼라값 변경(수정/삭제사유) 
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    ## 반응형 기본
-------------------------------------------------------------------*/
/* 공통 레이아웃 */
.ver_mo { display:none;}

/*-------------------------------------------------------------------
    ## 레이아웃 수정
-------------------------------------------------------------------*/

/**************************************
			1240px 이하
**************************************/
@media screen and (max-width:1240px) {
	
/* 공통 레이아웃 */
.ver_pc { display:none;}
.ver_mo { display:block;}
.inner { width:100%; margin:0;}

/* 모바일 슬라이드 메뉴 */
.dim { display:none; position:fixed; top:0; left:0; z-index:100; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#gnb_all, #gnb_all_bg { display:none !important;}
.mobile_navigation { position:fixed; right:-120%; top:0; z-index:101; transition:right 0.7s; width:calc(100% - 100px); height:100%; background:#fff;}
.mobile_navigation.on { right:0;}
.mobile_navigation.on .slide_close_btn { position:absolute; top:0; left:-50px; width:50px; height:50px; background:#f5821e; font-size:1.714em; color:#fff;}
.mobile_navigation:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap { position:relative; width:100%; height:100%; overflow-y:scroll;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top { line-height:50px;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_user { text-align:center; font-size:1.714em; font-weight:100;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_user span { margin-right:5px; font-weight:500; color:#368adb;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_login { padding:10px 0; text-align:center;}
.user_btn{ display:inline-block; line-height:26px; padding:0 10px; letter-spacing:-.5px; border:1px solid #dfdee5; -webkit-border-radius:2px;border-radius:2px; vertical-align:top;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area { padding:15px 20px;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area .mlogo { display:inline-block; width:150px; height:100%;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area .mlogo img { width:100%;}

/* 1depth 메뉴 */
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav {  border-top:1px solid #f5821e;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 > li { position:relative; line-height:5vh;border-bottom:1px solid #eee;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 li { position:relative; line-height:5vh;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 li a { display:block;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 > li > a { position:relative; padding:13px 20px;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 > li > a:before {content:""; position:absolute; top:50%; right:20px; width:12px; height:2px; background:#f5821e; margin:-1px 0 0 -6px;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 > li > a:after {content:""; position:absolute; top:50%; right:25px; width:2px; height:12px; background:#f5821e; margin:-6px 0 0 -1px;transition: all 0.3s; -webkit-transition: all 0.3s;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_nav .mobile_depth1 > li.active > a:after {transform:rotate(90deg);}

/* 2depth 메뉴 */
.mobile_navigation .slide_mobile_nav .mobile_depth1 > li > ul > li { height:0px; overflow:hidden; transition: all 0.3s; -webkit-transition: all 0.3s; }
.mobile_navigation .slide_mobile_nav .mobile_depth1 > li.active > ul > li { height:auto;}
.mobile_navigation .slide_mobile_nav .mobile_depth1 > li.active > ul > li > a { padding:10px 30px; background:#a79a96; color:#fff;}
.mobile_navigation .slide_mobile_nav .mobile_depth1 > li.active > ul > li > a:after { content:""; position:absolute; top:50%; left:20px; width:5px; height:1px; background:#fff;}

/* 로그인,로그아웃 버튼 메뉴 */
.mobile_navigation .slide_mobile_wrap .slide_mobile_bottom { position:absolute; bottom:0; left:0; width:100%; line-height:50px; text-align:center;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_bottom:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap .slide_mobile_bottom .mobile_member:after { display:block; visibility:hidden; clear:both; content:""}
.mobile_navigation .slide_mobile_wrap .slide_mobile_bottom .mobile_member li { float:left; width:50%; height:50px; background:#f3f5f9;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_bottom .mobile_member li a { display:block; color:#00479d;}

/* 기본 레이아웃 */
.gnb_box { display:none;}
.gnb_back { display:none;}
.header_wrap .logo_box { margin:20px 0 0 15px;}

}

/**************************************
		1000px 초과 1200px 이하
**************************************/
@media screen and (min-width:1000px) and (max-width:1200px) {

	
}

/**************************************
			1000px 이하
**************************************/
@media screen and (min-width:691px) and (max-width:999px) {

/* 메인 화면 */
.main_st { padding:0 15px;}
.pt_list .pt_ul { justify-content:center;}
.pt_list .pt_ul li { width:calc(50% - 10px); margin:0 10px 20px 0;}
.pt_list .pt_ul li:nth-child(2n) { margin-right:0;}

.bn_list .bn_ul { gap:10px; justify-content:center;}
.bn_list .bn_ul li { width:calc(50% - 10px); margin:0 0 20px 0;}
	
}

/**************************************
			690px 이하
**************************************/
@media screen and (max-width:690px) {

/* 기본 레이아웃 */
.header_wrap .logo_box { margin:20px 0 0 20px}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area img { width:230px;}
.mobile_navigation .slide_mobile_wrap .slide_mobile_top .mobile_logo_area .mlogo { width:130px;}
.footer_wrap { font-size:12px; letter-spacing:-1px;}

/* 메인 화면 */
.main_st { padding:0 15px;}
.pt_list .pt_ul { justify-content:center;}
.pt_list .pt_ul li { width:100%; margin:0 0 20px 0;}
.pt_list .pt_ul li:last-child { margin:0;}

.bn_list .bn_ul { gap:10px; justify-content:center;}
.bn_list .bn_ul li { width:calc(50% - 10px); margin:0 0 20px 0;}
.bn_list .bn_ul li a { font-size:15px;}

.footer_wrap .mo_navi { display:block;}
.footer_wrap .mo_navi li:nth-child(1) { margin:20px 0;}
.footer_wrap .mo_navi li a { display:block; padding:15px 0; font-size:16px; text-align:center; background:#42B342; color:#fff;}

#m_qbtn { display:block; position:fixed; right:0; top:45%; width:70px; z-index:99;}
#m_qbtn .qbtn01 { position:relative; width:100%; height:70px; line-height:70px; background:#555; border-radius:15px 0 0 15px; text-align:center; font-size:20px; font-weight:700; color:#fff;}
#m_qbtn .qbtn01 a { display:inline-block; position:relative; width:100%; height:100%;}

}

/**************************************
			350px 이하
**************************************/
@media screen and (max-width:350px) {

/* 메인 화면 */
.bn_list .bn_ul li { font-size:12px;}

}

/*-------------------------------------------------------------------
    ## 폰트사이즈
-------------------------------------------------------------------*/
/**************************************
			1240px 이하
**************************************/
@media screen and (max-width:1240px) {

em {font-size:0.97em}

}

/**************************************
			1000px 이하
**************************************/
@media screen and (max-width:1000px) {

em {font-size:0.91em}

}

/**************************************
			900px 이하
**************************************/
@media screen and (max-width:900px) {

em {font-size:0.88em}

}

/**************************************
			800px 이하
**************************************/
@media screen and (max-width:800px) {

em {font-size:0.85em}

}

/**************************************
			700px 이하
**************************************/
@media screen and (max-width:700px) {

em {font-size:0.82em}

}

/**************************************
			600px 이하
**************************************/
@media screen and (max-width:600px) {

em {font-size:0.79em}

}

/**************************************
			500px 이하
**************************************/
@media screen and (max-width:500px) {

em {font-size:0.76em}

}

/**************************************
			450px 이하
**************************************/
@media screen and (max-width:450px) {

em {font-size:0.73em}

}

/**************************************
			400px 이하
**************************************/
@media screen and (max-width:400px) {

em {font-size:0.71em}

}