@charset "utf-8";








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

/* header */
.header{border-bottom:1px solid #cfcfcf; position:fixed; left:0; right:0; top:0; z-index:600;}

.user_menu_area{height:60px; background-color:#fff;}

.user_menu{text-align:right;}
.user_menu li{display:inline-block; padding-left:12px; margin-left:8px; position:relative;}
.user_menu li:first-child{padding-left:0; margin-left:0;}
.user_menu li a{font-size:14px; color:#5d5d5d; line-height:60px;}
.user_menu li:before{display:block; content:""; width:1px; height:13px; margin-top:-6.5px;
  background-color:#797979;
  position:absolute; left:0; top:50%;
}
.user_menu li:first-child:before{display:none;}

.user_menu .language{padding-left:0; margin-left:27px;}
.user_menu .language:before{display:none;}
.user_menu .language a{padding-right:10px; background:url("../images/header/arrow_language.png") no-repeat right center;}

.user_menu_area .flexbox{-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;} 

.language_btn{padding-top:8px;}
.language_btn a{display:inline-block; width:68px; height:24px; border:1px solid #999; border-radius:20px;
  font-size:14px; color:#fff; line-height:24px; text-align:center;
}

.gnb_area{height:108px; background-color:#fff; position:relative;}

.logo{float:left; height:93px; padding-top:11px; margin:0; font-size:inherit;}
.logo a{display:inline-block; width:257px; height:63px; color:transparent;}

.gnb_list{float:right; margin-top:28px;}
.gnb_list > li{float:left; margin-left:60px; position:relative; min-width: 80px}
.gnb_list > li:first-child{margin-left:0;}
.gnb_list > li > a{display:inline-block; max-width:160px; font-size:22px; color:#222;}
.gnb_list > li > a:after{content:''; width:100%; height:3px; background-color:var(--primary-color);
  opacity:0; position:absolute; bottom:-10px; left:0;

  -webkit-transition:opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition:opacity 0.3s, -moz-transform 0.3s;
  transition:opacity 0.3s, transform 0.3s;

  -webkit-transform:translateY(10px);
  -moz-transform:translateY(10px);
  transform:translateY(10px);
}
.gnb_list > li > a:hover:after, .gnb_list > li > a:focus:after, .gnb_list > .on > a:after{
  opacity:1;  
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  transform:translateY(0px);
}


.gnb_sub_bg{background-color:#fafafa; border-top:1px solid #cfcfcf; border-bottom:3px solid #283558;  
  position:absolute; left:0; top:108px; right:0; z-index:990; display:none;
}

.gnb_church{width:300px; height:380px; padding:40px 10px 0 10px; box-sizing:content-box;
  background-color:#f8f8f8; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf;
  font-size:16px; color:#666; font-weight:300; text-align:center; line-height:22px;
}
.gnb_church strong{display:block; padding-top:116px; margin-bottom:20px; 
  background:url("../images/header/icon_church.png") no-repeat center top;
  font-size:30px; color:#333; font-weight:700; position:relative;
}
.gnb_church strong:before{display:block; content:""; width:23px; height:2px; margin-left:-11.5px; background-color:#333;
  position:absolute; left:50%; top:91px;
}

.gnb_sub{width:120px; position:absolute; left:0; top:100px; z-index:1000; display:none;}
.gnb_sub li{}
.gnb_sub li a{font-size:16px; color:#666; line-height:42px;}
.gnb_sub li a:hover{border-bottom:1px solid #333; color:#333; font-weight:700;}

.gnb_list > .on .gnb_sub{display:block;}


.header.scroll .user_menu_area{display:none;}
.header.scroll .gnb_list{margin-top:42px;}


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


/* footer */
.footer{padding-bottom:64px; background-color:#373b3e;}

.f_menu_area{margin-bottom:31px; border-bottom:1px solid #484c4f;}

.f_menu_list{float:left;}
.f_menu_list li{float:left; margin-left:15px; padding-left:15px; position:relative;}
.f_menu_list li:first-child{margin-left:0; padding-left:0;}
.f_menu_list li:before{content:""; display:block; width:1px; height:9px; margin-top:-4.5px; background-color:#484c4f; 
  position:absolute; left:0; top:50%;
}
.f_menu_list li:first-child:before{display:none;}
.f_menu_list li a{display:block; font-size:16px; color:#dadada; line-height:58px;}

.f_menu_list li .personal{font-weight:700;}

.btn_go_cafe{float:right; padding-top:20px;}
.btn_go_cafe a{display:block; width:115px; height:23px; background-image:url("../images/footer/btn_daum.png"); text-indent:-9999px;}


.f_banner_list{float:right; width:242px;}
.f_banner_list li{float:left; margin:3px;}
.f_banner_list li a{display:block; width:115px; height:37px; padding-top:11px;
  background-color:#fff; border-radius:5px;
  text-align:center;
}

.f_info_area{float:left;}

.footer_logo{float:left; margin-right:35px;}

.footer_address{float:left; padding-top:3px; font-size:16px; color:#939597; line-height:26px;}
.footer_address address{display:inline; margin-right:20px; font-style:normal;}
.footer_address > span{margin-right:20px;}

.f_served{display:block; margin-top:5px; margin-right:0 !important; font-size:12px;}
.f_served a{color:#888;}
.f_served img{margin-left:3px; vertical-align:-2px; opacity:0.6;}


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


#copyUrl{position:absolute; left:0; bottom:0;}



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


	.user_menu_area{display:none;}

	.gnb_area{height:108px;}

	.logo{height:66px; padding-top:22px;}
	.logo a{width:268px; height:66px;}
	.logo img{width:268px; height:66px; vertical-align:top;}

	.gnb_list{display:none;}


	.user_menu_area{display:none;}


	.btn_gnb{display:block; width:40px; height:26px; position:absolute; right:6.8%; top:33px; z-index:10;
	  transition:all .4s; z-index:610;
	}
	.btn_gnb span{display:inline-block; width:100%; height:6px; background-color:#222;
	  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:#222;
	  position:absolute; left:0;
	  transition:all .4s;
	}
	.btn_gnb:before{top:0;}
	.btn_gnb:after{bottom:0;}

	.btn_gnb.active-1:before{background-color:#010101;
	  -webkit-transform:translateY(10px) rotate(-45deg);
	  transform:translateY(10px) rotate(-45deg);
	}
	.btn_gnb.active-1 span{opacity:0;}
	.btn_gnb.active-1:after{background-color:#010101;
	  -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:107px; background-color:#e0e0e0; overflow-y:auto;
	  position:fixed; right:0; top:0; bottom:0; z-index:600;
	  display:none;
	}

	.gnb_logo{width:84.01%; height:108px; padding-top:23px; 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);
	}
	.mobile_gnb_list li a:hover{font-weight:700;}

	.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;z-index:600;}



	.m_none{display:none !important;}
	.pc_none{display:block !important;}
	
	.t_m_none{display:none;}


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


	/* footer */
	.f_banner_list{float:none; width:242px; margin:0 auto 52px;}

	.f_info_area{float:none;}
	

}



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

	.wrap{min-height:100%; padding-top:54px; position:relative;}

	.cont_center{width:auto; padding:0 15px;}

	.gnb_area{height:54px;}

	.logo{height:33px; padding-top:11px;}
	.logo a{width:134px; height:33px;}
	.logo img{width:134px; height:33px;}


	/* header */
	.header{height:55px; position:fixed; left:0; right:0; top:0; z-index:1001;}

	.gnb_area{}


	.btn_gnb{width:20px; height:13px; top:19px;z-index:610;}
	.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:53px;}

	.gnb_logo{height:54px; padding-top:10px;}
	.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:16px; line-height:35px;}

	.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:0;}


	/* footer */
	.footer{padding-bottom:38px;}

	.f_menu_area{margin-bottom:15px; border-bottom:0;}
	
	.f_menu_list{float:none; margin:0 -15px; border-bottom:1px solid #484c4f; text-align:center;}
	.f_menu_list li{float:none; display:inline-block;}
	.f_menu_list li a{font-size:14px; line-height:48px;}

	.footer_logo{float:none; margin-right:0; text-align:center;}
	.footer_logo img{width:46px;}

	.footer_address{float:none; margin-top:15px; font-size:13px; line-height:17px; text-align:center;}
	.footer_address address{display:block; margin-right:0;}

	.footer_menu li a{font-size:14px;}

	.btn_go_cafe{float:none; padding-top:22px;}
	.btn_go_cafe a{width:98px; height:19px; margin:0 auto; background-size:100%;}

	.f_banner_list{width:242px; margin-bottom:27px;}

	.f_info_area{float:none;}

	
	.f_served{margin-top:10px;}
}