@charset "utf-8";








/******************************* 전체 레이아웃 ******************************************/

/* header */
.header{position:absolute; left:0; top:0; right:0; z-index:600;}

.header_layout{height:120px; background-color:#fff; border-bottom:1px solid #cbcccc; position:relative;}


.gnb_area{width:304px; background-color:#fff; box-shadow:3px 3px 12px rgba(79,79,79,0.33); 
  position:fixed; left:-500px; top:0; bottom:0; z-index:1001;

  -webkit-transition:left 0.3s, -webkit-transform 0.3s;
  transition:left 0.3s, transform 0.3s;
}

.btn_gnb.on + .gnb_area_bg .gnb_area{left:-1px;

  -webkit-transition:left 0.3s, -webkit-transform 0.3s;
  transition:left 0.3s, transform 0.3s;
}


.gnb_area_bg{background-color:rgba(0,0,0,0.5); position:fixed; left:-200%; top:0; bottom:0;}
.btn_gnb.on + .gnb_area_bg{left:0; right:0;}


.l_gnb_list{margin-top:120px; border-top:1px solid #bdbdbd;}
.l_gnb_list > li{padding:0 20px; border-bottom:1px solid #bdbdbd;}
.l_gnb_list > li > a{display:block; font-size:20px; color:#505050; line-height:70px;}

.l_gnb_2depth{margin-bottom:40px; border-top:1px solid #eee;}
.l_gnb_2depth li{margin-top:30px;}
.l_gnb_2depth li a{display:block; font-size:20px; color:#505050; font-weight:300;}


.logo{margin:0; position:absolute; left:109px; top:27px;}
.logo a{display:inline-block; width:225px; height:64px;}
.logo img{width:225px; height:64px;}

.gnb_list{width:1294px; padding-right:20px; text-align:right;}
.gnb_list > li{display:inline-block; margin-left:44px;}
.gnb_list > li > a{font-size:24px; color:#4e4e4e; font-weight:300; line-height:120px;}
.gnb_list > .on > a{color:#1e1e1e; font-weight:700;}

.gnb_2depth_area{border-bottom:1px solid rgba(255,255,255,0.3);
  position:absolute; left:0; top:121px; right:0; z-index:3;
}
.gnb_2depth{width:1294px; padding-right:20px; text-align:right;}
.gnb_2depth li{display:inline-block; margin-left:40px;}
.gnb_2depth li a{font-size:20px; color:#fff; line-height:59px;}




/* container */
.container{padding-top:162px;}




/* footer */
.footer{padding:20px 0; background-color:#383e48;}

.f_logo{float:left; padding-top:15px; margin-right:200px;}

.f_info_area{float:left; font-size:16px; color:#fff; font-weight:300;}
.f_info_area a{font-size:16px; color:#fff; font-weight:300;}

.address_area{margin-top:15px; line-height:22px;}
.address_area strong{display:block; margin-top:5px; font-weight:400;}
.address_area strong:first-child{margin-top:0;}
.address_area address{display:inline; margin-right:6px; padding-right:10px; font-style:normal; position:relative;}
.address_area address:after{content:"|"; position:absolute; right:0; top:0;}

.copyright{margin-top:5px; color:#9fa2a7;}


.m_none{display:block;}
.pc_none{display:none;}







/* ~ 1024px ----------- */
@media only screen 
and (max-width : 1023px)
{
	
	.cont_center{width:auto;}

	
	/* header */
	.header_layout{height:130px; border-bottom:0;}

	.user_menu_area{padding:0 30px;}

	.gnb_area{text-align:left;}

	.l_gnb_list{margin-top:0; overflow-y:auto; position:absolute; left:0; top:172px; bottom:0; right:0;}


	.logo{padding-top:30px; text-align:center; position:static;}
	.logo a{width:240px; height:68px;}
	.logo img{width:240px; height:68px;}

	.gnb_list{display:none;}


	/* header */
	.user_menu_area{display:none;}


	.btn_gnb{display:block; width:40px; height:26px; position:absolute; left:auto; right:6.8%; top:50px; z-index:10;
	  transition:all .4s;
	}
	.btn_gnb span{display:inline-block; width:100%; height:6px; background-color:#010101;
	  text-indent:-9999px; position:absolute; left:0; top:10px;
	  transition:all .4s;
	}
	.btn_gnb:before, .btn_gnb:after{display:inline-block; content:""; width:100%; height:6px; background-color:#010101;
	  position:absolute; left:0;
	  transition:all .4s;
	}
	.btn_gnb:before{top:0;}
	.btn_gnb:after{bottom:0;}

	.btn_gnb.active-1:before{
	  -webkit-transform:translateY(10px) rotate(-45deg);
	  transform:translateY(10px) rotate(-45deg);
	}
	.btn_gnb.active-1 span{opacity:0;}
	.btn_gnb.active-1:after{
	  -webkit-transform:translateY(-10px) rotate(45deg);
	  transform:translateY(-10px) rotate(45deg);
	}

	
	/* gnb */
	.mobile_gnb_bg{width:100%; background-color:rgba(0,0,0,0.9); position:fixed; top:0; bottom:0; right:0; z-index:5; display:none;}
	.mobile_gnb_area{width:84.01%; padding-top:129px; background-color:#e0e0e0; overflow-y:auto;
	  position:fixed; right:0; top:0; bottom:0; z-index:6;
	  display:none;
	}

	.gnb_logo{width:84.01%; height:130px; padding-top:30px; padding-left:5.23%; 
	  background-color:#f9f9f9; border-bottom:1px solid #cacaca; box-sizing:border-box;
	  position:fixed; right:0; top:0; z-index:2;
	}
	.gnb_logo img{height:66px;}

	.gnb_login_info{padding:38px 22px 45px 30px; background-color:#fff; border:1px solid #cacaca; border-bottom:1px solid #a7a7a7;}

	.login_link a{width:50%; font-size:30px; color:#333; text-align:center; position:relative;}
	.login_link a:before{content:""; width:1px; height:40px; margin-top:-20px; background-color:#a7a7a7;
	  position:absolute; left:0; top:50%;
	}
	.login_link a:first-child:before{display:none;}

	.profile_img_area{width:58.50%; font-size:30px; position:relative;}
	.profile_img_area > img{width:76px; height:76px; margin-right:30px; border-radius:100%;}
	.profile_img_area span{margin:auto 0;}

	.add_profile_area{width:32px; height:32px;
	  background:#fff url("../images/m/header/icon_camera.png") no-repeat center center;
	  border-radius:100%; box-shadow:5px 5px 5px rgba(0,0,0,0.2); 
	  text-indent:-9999px; overflow:hidden; position:absolute; top:49px; left:48px;
	}

	.file_input_hidden{width:100%; height:100%; position:absolute; right:0px; top:0px; opacity:0; 
	  filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0;
	}

	.user_link_list{margin-left:auto; margin-top:auto;}
	.user_link_list li{float:left; width:70px;}
	.user_link_list li a{display:block; font-size:14px; color:#8d8d8d; text-align:center; position:relative;}
	.user_link_list li img{display:block; margin:0 auto 10px;}
	.user_link_list li .alarm_num{display:block; width:20px; height:20px; background-color:#fc0505; border-radius:100%;
	  font-size:14px; color:#fff; line-height:20px; text-align:center;
	  position:absolute; right:12px; top:0;
	}

	.personal_info_link{margin-top:-1px; background-color:#fff; 
	  border-top:1px solid #d8d8d8; border-bottom:1px solid #a7a7a7; border-left:1px solid #cacaca; border-right:1px solid #cacaca;
	}
	.personal_info_link li{width:33.33%; border-left:1px solid #d8d8d8;}
	.personal_info_link li:first-child{border-left:0;}
	.personal_info_link li a{display:block; font-size:22px; color:#666; line-height:74px; text-align:center; position:relative;}
	.personal_info_link li a:after{display:inline-block; content:""; width:7px; height:12px; margin-left:20px; margin-right:-20px;
	  background-image:url("../images/m/header/arrow_personal.png");
	}

	.gnb_banner_list{margin-top:11px;}
	.gnb_banner_list li{margin-top:5px;}
	.gnb_banner_list li:first-child{margin-top:0;}
	.gnb_banner_list li a{display:block; border:1px solid #cacaca;}
	.gnb_banner_list li img{width:100%;}

	.mobile_gnb_list{margin-top:10px;}
	.mobile_gnb_list > li > a{display:block; height:75px; background-color:#f5f5f5; border-bottom:1px solid #e0e0e0; 
	  font-size:24px; color:#333; font-weight:700; line-height:75px; text-indent:8.98%;
	  position:relative;
	}
	.mobile_gnb_list > li > a:after{content:""; width:19px; height:11px; margin-top:-5.5px;
	  background-image:url("../images/m/header/gnb_up.png");
	  position:absolute; right:8.98%; top:50%;
	}
	.mobile_gnb_list > li > .no_depth:after{display:none;}

	.m_gnb_sub{display:none;}
	.m_gnb_sub li a{display:block; background-color:#f9f9f9; border-bottom:1px solid #e0e0e0;
	  font-size:20px; color:#666; line-height:49px; text-indent:10.84%;
	}

	.mobile_gnb_list .on .m_gnb_sub{display:block;}
	.mobile_gnb_list .on > a:after{
	  -webkit-transform:rotate(180deg);
	  transform:rotate(180deg);
	}

	.gnb_footer{padding:40px 6.19% 30px; margin-top:10px; background-color:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc;}
	.gnb_footer .notice{display:block; width:73%; padding-left:35px;
	  background:url("../images/m/header/icon_notice.png") no-repeat left center; 
	  font-size:20px; color:#666; line-height:21px;
	  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
	.gnb_footer .btn_gnb_top{display:block; height:17px; padding-left:25px; margin-left:auto; 
	  background:url("../images/m/header/icon_top.png") no-repeat left bottom; 
	  font-size:18px; color:#666; position:relative;
	}
	.gnb_footer .btn_gnb_top:before{content:""; width:1px; height:24px; background-color:#d2d2d2; 
	  position:absolute; left:-24px; top:-2px;
	}

	
	body.open{height:100%; overflow:hidden;}
	body.open .mobile_gnb_bg, body.open .mobile_gnb_area{right:0; display:block;}



	/* container */
	.container{padding-top:130px;}



	/* footer */
	.footer{padding:40px 30px 44px;}

	.f_logo{display:none;}

	.f_info_area{float:none; font-size:22px;}
	.f_info_area a{font-size:22px;}

	.address_area{margin-top:15px; line-height:31px;}
	.address_area strong{display:block; margin-top:18px; font-weight:400;}
	.address_area address{display:block; margin-right:0; padding-right:0;}
	.address_area address:after{display:none;}

	.copyright{margin-top:15px;}


	.m_none{display:none;}
	.pc_none{display:block;}

}



/* ~ 768px ----------- */
@media only screen 
and (max-width : 766px)
{

	.wrap{min-height:100%; padding-bottom:217px; box-sizing:border-box; position:relative;}
	
	/* header */
	.header_layout{height:65px;}

	.user_menu_area{padding:0 15px;}


	.logo{padding-top:17px;}
	.logo a{width:120px; height:34px;}
	.logo img{width:120px; height:34px;}

	.gnb_list{display:none;}


	/* header */
	.btn_gnb{width:20px; height:13px; top:25px;}
	.btn_gnb span{height:3px; top:5px;}
	.btn_gnb:before, .btn_gnb:after{height:3px;}


	.btn_gnb.active-1:before{
	  -webkit-transform:translateY(5px) rotate(-45deg);
	  transform:translateY(5px) rotate(-45deg);
	}
	.btn_gnb.active-1:after{
	  -webkit-transform:translateY(-5px) rotate(45deg);
	  transform:translateY(-5px) rotate(45deg);
	}

	
	/* gnb */
	.mobile_gnb_area{padding-top:64px;}

	.gnb_logo{height:65px; padding-top:17px;}
	.gnb_logo img{height:33px;}

	.gnb_login_info{padding:19px 11px 22.5px 15px;}

	.login_link a{font-size:15px;}
	.login_link a:before{height:20px; margin-top:-10px;}

	.profile_img_area{width:47.5%; font-size:15px;}
	.profile_img_area > img{width:38px; height:38px; margin-right:15px;}

	.add_profile_area{width:16px; height:16px;
	  background-size:auto 7px; box-shadow:2px 2px 2px rgba(0,0,0,0.2); top:24px; left:24px;
	}

	.file_input_hidden{width:100%; height:100%;}

	.user_link_list li{width:50px;}
	.user_link_list li a{font-size:10px;}
	.user_link_list li img{height:22.5px; margin:0 auto 5px;}
	.user_link_list li .alarm_num{width:12px; height:12px; font-size:10px; line-height:12px; right:10px;}

	.personal_info_link li a{font-size:12px; line-height:37px;}
	.personal_info_link li a:after{width:3.5px; height:6px; margin-left:10px; margin-right:-10px;
	  background-size:100%;
	}

	.gnb_banner_list{margin-top:5.5px;}
	.gnb_banner_list li{margin-top:2.5px;}

	.mobile_gnb_list{margin-top:5px;}
	.mobile_gnb_list > li > a{height:42px; font-size:15px; line-height:42px;}
	.mobile_gnb_list > li > a:after{content:""; width:10px; height:6px; margin-top:-3px; background-size:100%;}

	.m_gnb_sub li a{font-size:13px; line-height:30px;}

	.gnb_footer{padding:20px 6.19% 15px; margin-top:5px;}
	.gnb_footer .notice{padding-left:20px; background-size:auto 100%;
	  font-size:12px; line-height:13px;
	}
	.gnb_footer .btn_gnb_top{height:13px; padding-left:13px; background-position:left center; background-size:auto 9px;
	  font-size:12px; line-height:13px;
	}
	.gnb_footer .btn_gnb_top:before{height:12px; left:-12px; top:-1px;}


	/* container */
	.container{padding-top:65px;}



	/* footer */
	.footer{padding:20px 15px 22px; position:absolute; left:0; right:0; bottom:0;}

	.f_info_area{font-size:11px;}
	.f_info_area a{font-size:11px;}

	.address_area{margin-top:7.5px; line-height:16px;}
	.address_area strong{margin-top:9px;}

	.copyright{margin-top:7.5px;}

}