@charset "utf-8";

/* ------------------------------------------------------- COMMON LAYOUT STYLE ------------------------------------------------------- */

#wrap {margin:0 auto;width:100%;}
.container {position:relative; margin:0 auto; width:1280px;max-width:1280px;padding-left:15px;padding-right:15px;}
.container-l {position:relative; margin:0 auto; width:100%;}


a{color:#aaa;}
a:hover,a:focus{color:#dbdbdb;}

/* img, input, select, textarea, button {transition:all .2s ease;}  transition */
	
	@media (max-width:1440px) {
		.container, .container-l {width:100%;padding-left:15px;padding-right:15px;}	
	}

	@media (max-width:1024px){
		.container, .container-l {width:100%;max-width:1024px;}
	}

	@media (max-width:768px){
		.container, .container-l {max-width:100%;}
	}

	@media (max-width:414px){
		.container, .container-l {padding-left:10px;padding-right:10px;}
	}
	

/* ------------------------------------------------------- HEADER ------------------------------------------------------- */

.bg_black {display:none;}

#hd {position:relative;margin:0 auto;width:100%;z-index:99;border-bottom:1px solid rgba(255,255,255,.3);
	transition:0.15s all linear;-webkit-transition:0.15s all linear;}

#snb.fixed-top,
#hd.fixed-top {position:fixed !important;top:0;left:0;right:0;z-index:20}
#hd:before, #hd:after {clear:both;content:'';display:block;}

.hd_inner {position:relative;text-align:center}


#hd .logo {display:inline-block;/*float:left*/}
#hd .logo a {display:inline-block;width:500px;height:300px;background:url(../img/cmm/logo_w.png) no-repeat 0 10px;overflow:hidden;text-indent:-9999px;}
#hd .logo {margin:auto; width:500px;}

#hd.s-color {background:#fff;border-bottom:1px solid #e0e0e0}
#hd.s-color .gnb nav > .depth1 > li > a {color:#592a80;font-weight:bold}



/* 네비게이션 */

.gnb {display:inline-block;margin:0 auto;text-align:center}
#gnb { display:none; }
.gnb nav {position:relative;padding:0 30px}
.gnb nav ul li a:hover,
.gnb nav ul li a:focus {color:rgba(255,255,255,.6)}
#hd.s-color .gnb nav > .depth1 > li > a:hover,
#hd.s-color .gnb nav > .depth1 > li > a:focus {color:#592a80}

.gnb nav > .depth1 {width:auto;margin:0 auto;text-align:center}
.gnb nav > .depth1 > li {padding:0 15px;text-align:center}
.gnb nav > .depth1 > li > a {display:inline-block;font-size:18px;line-height:100px;color:#fff}

.nav_depth2_wrap {position:absolute;top:80px;left:0;right:0;width:100%;padding:25px 0;margin:0 auto}
.nav_depth2_wrap h2 {display:inline-block;float:left;width:15%;font-size:38px;line-height:48px;font-weight:bold;letter-spacing:-1px;color:#5bc1c6;text-align:left;} 
.nav_depth2_wrap .btn_gnb_cls {position:absolute;bottom:0;right:0}

.gnb nav .depth2 {float:right;width:85%;padding-left:50px;margin:0;border-left:1px solid #e0e0e0}
.gnb nav .depth2 > li {float:left;display:table;width:33.333333%;text-align:left;margin:0;padding:0}
.gnb nav .depth2 > li:hover {border-color:#dd458e;}
.gnb nav .depth2 > li > a {font-size:16px;display:table-cell;vertical-align:middle;padding:10px;color:#666}
.gnb nav .depth2 > li > a:hover,
.gnb nav .depth2 > li > a.on {color:#5bc1c6;cursor:pointer;}

.modal_open .bg_black {display:block;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:99;background:#000;opacity:.8}

/* 사이트맵 버튼 */
.btn_sm {position:relative;display:inline-block; margin:25px; height:22px; line-height:0;z-index:100;vertical-align:middle}
.btn_sm .line{position:absolute;left:0;height:2px;background-color:#fff;transition:0.15s all linear;-webkit-transition:0.15s all linear;font-size:0;line-height:0;}
.btn_sm:hover .line,
.btn_sm:focus .line{background-color:#fff;cursor:pointer}
.btn_sm .tline{top:0;width:28px;}
.btn_sm:hover .tline,
.btn_sm:focus .tline{width:28px;}
.btn_sm .mline{top:50%;margin-top:-1px;width:28px;}
.btn_sm:hover .mline,
.btn_sm:focus .mline{width:28px;}
.btn_sm .bline{bottom:0;width:28px;}
.btn_sm:hover .bline,
.btn_sm:focus .bline{width:28px;}

/* 사이트맵 닫기 버튼 */
.btn_close {position:absolute;top:30px;right:30px;bottom:0;display:inline-block;width:28px;height:22px;font-size:0;line-height:0;z-index:100;}
.btn_close .line{position:absolute;left:0;height:2px;background-color:#131313;transition:0.15s all linear;-webkit-transition:0.15s all linear;font-size:0;line-height:0;}
.btn_close:hover .line,
.btn_close:focus .line{background-color:#fff;cursor:pointer}
.btn_close .tline{top:0;width:28px;}
.btn_close:hover .tline,
.btn_close:focus .tline{width:28px;}
.btn_close .mline{top:50%;margin-top:-1px;width:28px;}
.btn_close:hover .mline,
.btn_close:focus .mline{width:28px;}
.btn_close .bline{bottom:0;width:28px;}
.btn_close:hover .bline,
.btn_close:focus .bline{width:28px;}

.modal_open .btn_close .line {background-color:#131313}
.modal_open .btn_close .tline,
.modal_open .btn_close:hover .tline,
.modal_open .btn_close:focus .tline{width:28px;top:10px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.modal_open .btn_close .mline{display:none;}
.modal_open .btn_close .bline,
.modal_open .btn_close:hover .bline,
.modal_open .btn_close:focus .bline{width:28px;bottom:10px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

/* 사이트맵 전체 메뉴 */

.menu #m-menu {display:block;opacity:1;z-index:9999;}
#m-menu {position:fixed;top:0;right:0;left:0;bottom:0;margin:auto auto;padding:40px 50px;background:#fff;width:1200px;height:80%;transition:all .3s ease;z-index:-1;overflow-y:scroll;opacity:0;display:none}

#m-menu .m-menu-tit {font-size:30px;text-align:center;padding-bottom:30px;border-bottom:3px solid #444}
#m-menu .m-body {}
#m-menu .m-top,
#m-menu .m-btm {display:none}

#m-menu .depth1 {border-left:1px solid #d9d9d9}
#m-menu .depth1:before,
#m-menu .depth1:after {clear:both;content:'';display:block;}
#m-menu .depth1 > li {width:25%; float:left;padding:20px 30px 0 30px;border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9; height:100%;height:300px;overflow:hidden;overflow-y:scroll;}
#m-menu .depth1 > li > a {font-size:18px;font-weight:bold;line-height:28px;color:#444}
#m-menu .depth2 {display:block;margin-top:15px;}
#m-menu .depth2 li {padding:5px 0}
#m-menu .depth2 li a {color:#888;line-height:26px;}
#m-menu .depth2 li a:hover {color:#4d3494}

	@media (max-width:1024px){

		.btn_sm{top:20px;right:22px;font-size:0;line-height:0;}

		.hd_t,
		.hd_m .sns,
		.hd_m .util,
		.gnb nav {display:none}
		
		/* 사이트맵 클릭 시 닫기 버튼 */
		.modal_open .btn_close .line {background-color:#fff}
		
		/* 모바일 사이드 메뉴 */

		.menu #m-menu {display:block;opacity:1;}
		#m-menu {position:fixed;top:0;right:0;left:auto;width:60%;height:100%;margin:0 0;padding:0;overflow-y:scroll;display:none;}


	}

	@media (max-width:768px){

		.btn_close {top:24px;right:20px;}
		#m-menu {width:70%}
		#hd .logo a {width:100%; background-size: contain;}
		#hd .logo {margin:auto; width:90%;}
	}

	@media (max-width:414px){
		
		#m-menu {width:90%}
		#hd .logo a { height:210px;}
	}




/* ------------------------------------------------------- FOOTER ------------------------------------------------------- */

#ft {position:relative;padding:0;margin:0;/*background:#5a2a82*/background:#222;color:#444;padding:0;text-align:center}
#ft .footer_inner {position:relative;padding:40px 0;border-top:1px solid rgba(255,255,255,.1)}
#ft .footer_inner:before,
#ft .footer_inner:after {content:'';display:block;clear:both}

#ft .foot_social {position:relative;padding:25px 0}
#ft .foot_social ul li {padding:0 25px}

#ft .fnb {position:absolute;top:0;left:0;}
#ft .fnb ul li {position:relative;}
#ft .fnb ul li:after {content:'';position:absolute;top:2px;right:0;display:inline-block;width:1px;height:14px;background:#fff;opacity:.2}
#ft .fnb ul li a {color:#aaa;padding:0 10px;}
#ft .fnb ul li a:hover {color:#ddd}
#ft .fnb ul li:first-child a {padding:0 10px 0 0}
#ft .fnb ul li:last-child:after {content:none}

#ft .add ul li  {position:relative;text-align:center;color:#aaa;padding:0 15px;font-size:14px}

#ft .copyright {padding-top:40px;color:#fff;font-size:13px;opacity:0.3;}




/*탑버튼*/
.btn_top {display:block; position:fixed;bottom:40px;right:20px;width:40px;height:40px;background:url(/umff/img/cmm/btn_top.gif) no-repeat 0 0; z-index:98;}

			@media (max-width:768px){
			
				.btn_top {bottom:13px; right:13px;background:url(/umff/img/cmm/btn_top_m.gif) no-repeat 0 0;width:40px;height:40px;background-size:40px 40px;-webkit-background-size:40px 40px}

			}

/* 드래그 블록 색상 */
::selection {background:#4d3494;color:#FFF;text-shadow:none;}
::-moz-selection {background:#4d3494;color:#FFF;text-shadow:none;}
::-webkit-selection {background:#4d3494;color:#FFF;text-shadow:none;}