@charset "utf-8";
/* ---------------------------------------------------------
* FileName : layout.css
* ProjectName : E9Pay (Responsive Web)
* Description : 레이아웃 스타일시트
* Author : ideumotion.com
* Date : 2017.11
--------------------------------------------------------- */

@import url(base-1.css);
@import url(common-1.css);
@import url(contents.css);
/*
 
2022 05.09 신규 CSS
*/
/* basic */
.inner{width:100%; max-width:1400px; margin:0 auto; position:relative;}
.inner.narrow {
	max-width: 1200px;
}
.pret{font-family:'Pretendard', sans-serif;}
.poppins{font-family: 'Poppins', sans-serif;}

@media all and (max-width:1400px){
	.inner{width:93.75%;}
}
:root {
	--drop_header_height: 200px;
}
/*=========================================================
	header
==========================================================*/
#header{position:relative; font-sizE:0; letter-spacing:-4px; z-index:100; background:#fff; width:100%; transition:all .5s;}
#dropHeaderBg {
	display: none; 
	width: 100%; 
	height: var(--drop_header_height); 
	position: absolute; 
	top: 100px; 
	left: 0;
	background-color: #fff; 
}
#header.fixed{left:0; top:0; position:fixed;}
#header .logo{display:inline-block; vertical-align:middle; width:180px;}
#header .logo a{display:inline-block;}
#header .logo img{height:56px; width:auto; max-width:100%; object-fit:contain;}
#header .right_box{display:inline-block; vertical-align:middle; width:calc(100% - 180px); text-align:right;}
#header .right_box .gnb{display:inline-block; vertical-align:middle; text-align:left;}
#header .right_box .gnb > ul > li{display:inline-block; vertical-align:top; height: 100px; display: inline-flex; align-items: center; padding: 0 20px;}
#header .right_box .gnb > ul > li:last-of-type{margin-right:0;}
#header .right_box .gnb > ul > li > a{display:block; min-width: 76px; text-align: left; font-size:20px; font-weight:600; letter-spacing:-0.04em; color:#222222;}
#header .right_box .gnb > ul > li:hover > a {text-decoration: underline; font-weight: 700; text-underline-offset: 10px; text-decoration-color: #ffd21d; text-decoration-thickness: 2px;}
#header .right_box .gnb ul.depth02 {
	display: none;
	max-width: 100px;
	/* height: var(--drop_header_height); */
	position: absolute;
	top: 100px; 
}
#header .right_box .gnb ul.depth02 .sub_hide {display: none !important;}
#header .right_box .gnb ul.depth02:hover,
#header .right_box .gnb > ul:hover ul.depth02,
#header #dropHeaderBg:hover + div .right_box .gnb ul.depth02 {
	display: block;
}
#header .right_box .gnb ul.depth02 li {
	padding-bottom: 10px;
}
#header .right_box .gnb ul.depth02 li a {
	color: #858585;
	font-size: 16px;
	letter-spacing: -1px;
}
#header .right_box .gnb ul.depth02 li a:hover {
	color: #000;
}
#header .right_box .lang{display:inline-block; vertical-align:middle; margin-left:65px; position:relative; text-align:left; z-index:10;}
#header .right_box .lang > a{display:block; width:104px; height:38px; line-height:38px; background:#000000 url('../images/main/lang_arrow.png') no-repeat right 19px center; padding:0 39px 0 9px; box-sizing:border-box; border-radius:19px; font-size:14px; font-weight:normal; letter-spacing:-0.04em; color:#fff;}
#header .right_box .lang a img{display:inline-block; vertical-align:middle; margin-right:7px; margin-top:-3px;}
#header .right_box .lang ul{display:none; position:absolute; left:0; top:calc(100% + 13px); width:100%; background:#fff; padding:10px; box-sizing:border-box; border-radius:5px; box-shadow:3px 3px 20px rgbA(0,0,0,0.1)}
#header .right_box .lang ul:before{content:''; position:absolute; left:15px; top:-7px; width:0; height:0; border-bottom:14px solid #fff; border-right:14px solid transparent; border-left:14px solid transparent;}
#header .right_box .lang ul li + li{margin-top:10px;}
#header .right_box .lang ul li a{display:block; font-size:14px; font-weight:300; letter-spacing:-0.04em; color:#666666;}
#header .right_box .m_btn {margin-left:20px; display:none; vertical-align:middle; width:24px; text-align:right; cursor:pointer;}
#header .right_box .m_btn i{display:inline-block; width:100%; height:2px; margin:4px 0; background:#000; transition:all 0.5s;}
#header .right_box .m_btn i:nth-of-type(2){width:84%;}

.m_menu_bg {z-index:101; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.7); cursor:pointer; }
#m_menu {z-index:102; position:fixed; right:-100%; top:0; width:500px; max-width:80%; height:100%; background-color:#fff; box-sizing:Border-box; transition:all 0.5s; }
#m_menu.on {right:0; }
#m_menu .top_box {position:relative; padding:20px; box-sizing:border-box; }
#m_menu .top_box .close_btn {position:absolute; right:20px; top:calc(50% - 15px); width:30px; height:30px; }
#m_menu .top_box .close_btn i {display:block; width:100%; height:2px; background-color:#333; }
#m_menu .top_box .close_btn i:first-of-type {-webkit-transform:rotate(45deg) translate(9px,9px); -moz-transform:rotate(45deg) translate(9px,9px); -ms-transform:rotate(45deg) translate(9px,9px); -o-transform:rotate(45deg) translate(9px,9px); transform:rotate(45deg) translate(9px,9px); }
#m_menu .top_box .close_btn i:last-of-type {-webkit-transform:rotate(-45deg) translate(-7px,8px); -moz-transform:rotate(-45deg) translate(-7px,8px); -ms-transform:rotate(-45deg) translate(-7px,8px); -o-transform:rotate(-45deg) translate(-7px,8px); transform:rotate(-45deg) translate(-7px,8px); }
#m_menu .gnb_box {border-top:1px solid #ddd; }
#m_menu .gnb_box > ul > li {border-bottom:1px solid #dddddd; }
#m_menu .gnb_box > ul > li > a{position:relative; display:block; padding:20px 36px 20px 20px; font-size:20px; font-weight:bold; color:#222222; letter-spacing:-0.04em; box-sizing:border-box; }
#m_menu .gnb_box > ul > li > a:not(.sub_none):before {
	content: "";
	width: 16px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 20px;
	background: url(../images/common/btn/btn_select_arrow.png)no-repeat center center / contain;
	transition: all .2s;
}
#m_menu .gnb_box > ul > li > a.active:before {
	transform: rotate(180deg);
}
#m_menu .gnb_box .depth02 {display:none; background-color:#f3f3f3; }
#m_menu .gnb_box .depth02 li a {position:relative; display:block; padding:10px 20px; font-size:16px; letter-spacing:-0.04em; box-sizing:border-box; }
#m_menu .gnb_box .depth02 .sub_hide {display: none !important;}

@media all and (max-width:1000px){
	#header{padding:20px 0;}
	#header .right_box .gnb{display:none;}
	#header .right_box .m_btn{display:inline-block;}
}

/*=========================================================
	footer
==========================================================*/
#footer{position:relative; padding:95px 0 85px; font-size:0; letter-spacing:-4px;}
#footer .logo{display:inline-block; vertical-align:top; width:190px; text-align: center;}
#footer .logo a{display:inline-block;}
#footer .logo a + a{display:block; margin-top:40px;}
#footer .logo a span{display:block; font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#666666; margin-top:10px;}
#footer .addr_box{display:inline-block; vertical-align:top; width:calc(50% - 95px); box-sizing:border-box; text-align:center;}
#footer .addr_box ul{display:inline-block; text-align:left;}
#footer .addr_box ul li{font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#666666; margin-bottom:15px;}
#footer .addr_box ul li:last-of-type{margin-bottom:0;}
#footer .addr_box ul li b{font-size:22px; font-weight:500; color:#222222;}
#footer .fnb_box{display:inline-block; vertical-align:top; width:calc(50% - 95px); box-sizing:border-box; text-align:center;}
#footer .fnb_box .box{display:inline-block; text-align:left;}
#footer .fnb_box .box dl{display:inline-block; vertical-align:top; margin-right:110px;}
#footer .fnb_box .box dl:last-of-type{margin-right:0;}
#footer .fnb_box .box dl dt{font-size:20px; font-weight:400; letter-spacing:-0.04em; color:#222222;}
#footer .fnb_box .box dl dd ul li{margin-top:20px;}
#footer .fnb_box .box dl dd ul li a{display:block; font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#666666;}
#footer .fnb_box .box dl dd ul li:hover a{color:#222222;}
 .quick{position:absolute; /*bottom:calc(100% + 155px); right:-35px;*/left:85%; top:800px}
.quick a{display:block; width:70px; height:70px; background:url('../images/main/footer_quick_off.png') no-repeat; }
.quick:hover a{background:url('../images/main/footer_quick_on.png') no-repeat; }

@media all and (max-width:1450px){
	.quick{right:0;}
}
@media all and (max-width:1000px){
	#footer{padding:60px 0 50px;}
	#footer .addr_box{padding-left:0; width:100%; margin-top:40px;}
	#footer .addr_box ul{display:block; }
	#footer .fnb_box{width:100%; margin-top:40px;}
	#footer .fnb_box .box{display:block;}
	.quick{righT:0;}
}


#footer .privacy_policy_popup_bg{display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100;}
#footer .privacy_policy_popup{display:none; position:fixed; left:50%; top:50%; z-index:101; transform:translate(-50% , -50%) ; width:540px; background:#fff; border-radius:30px; padding:40px 0; box-sizing:border-box;}
#footer .privacy_policy_popup .pop_con{padding:0 20px; box-sizing:border-box;}
#footer .privacy_policy_popup .tit_box:after{content:''; display:table; clear:both; padding-bottom:30px;}
#footer .privacy_policy_popup .tit_box p{float:left; font-size:20px; font-weight:bold; letter-spacing:-0.04em; color:#000000;}
#footer .privacy_policy_popup .tit_box a{float:right; display:inline-block;}
#footer .privacy_policy_popup .search_box{margin-top:20px; position:relative;}
#footer .privacy_policy_popup .search_box input{border-radius:10px; height:50px; width:100%; background:#f5f5f5; border:0; padding:0 15px 0 45px; box-sizing:border-box; font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#222;}
#footer .privacy_policy_popup .search_box a{position:absolute; left:15px; top:50%; display:inline-block; transform:translateY(-50%)}
#footer .privacy_policy_popup .box_con{max-height:550px; overflow-y:auto; padding:0 20px; box-sizing:border-box; }
#footer .privacy_policy_popup .box_con::-webkit-scrollbar {width: 6px;}
#footer .privacy_policy_popup .box_con::-webkit-scrollbar-thumb {background-color: #b9b9b9; border-radius:3px;}
#footer .privacy_policy_popup .box_con::-webkit-scrollbar-track {background-color: #fff;}
#footer .privacy_policy_popup .box{padding:30px 0; }
#footer .privacy_policy_popup .box + .box{border-top:1px solid #eeeeee}
#footer .privacy_policy_popup .box .major{padding:6px 10px; display:inline-block; font-size:16px; font-weight:400; letter-spacing:-0.04em; color:#ffffff; border-radius:4px; background:#000000; }
#footer .privacy_policy_popup .box ul{font-size:0; letter-spacing:-4px;}
#footer .privacy_policy_popup .box ul li{display:inline-block; vertical-align:top; width:50%; padding-right:10px; box-sizinG:border-box;}
#footer .privacy_policy_popup .box ul li {margin-top:20px;}
#footer .privacy_policy_popup .box ul li input{display:none;}
#footer .privacy_policy_popup .box ul li label{display:block; box-sizing:border-box; font-size:0; letter-spacing:-4px; border:1px solid transparent; padding:3px 8px; border-radius:8px;}
#footer .privacy_policy_popup .box ul li label i{display:inline-block; vertical-align:middle; width:40px; border:1px solid #d2d2d2; box-sizing:border-box; }
#footer .privacy_policy_popup .box ul li label i.border_none{border:0; }
#footer .privacy_policy_popup .box ul li label span{display:inline-block; vertical-align:middle; max-width:calc(100% - 50px); font-size:16px; font-weight:400; letter-spacing:-0.04em; color:#222222; margin-left:10px; box-sizing:border-box;}
#footer .privacy_policy_popup .box ul li label span b{display:block; font-size:14px; font-weight:400; color:#999999}
#footer .privacy_policy_popup .box ul li label:hover{border-color:#ffda44}
#footer .privacy_policy_popup .box ul li input:checked + label {background-color:#ffda44}

@media all and (max-width:1000px){
	#footer .privacy_policy_popup{width:93.75%}
	#footer .privacy_policy_popup .box_con{max-height:500px;}
}

.inner .pageing_wrap {clear:both; font-size:0; text-align:center; margin-top:25px; overflow:hidden;}
.inner .pageing_wrap a.btn_first {display:inline-block; *display:inline; zoom:1; width:40px; height:40px; vertical-align:middle; margin-right:2px; overflow:hidden;}
.inner .pageing_wrap a.btn_first:before {content:'<<'; font-size:14px; color:#fff; line-height:38px;}
.inner .pageing_wrap a.btn_prev {display:inline-block; *display:inline; zoom:1; width:40px; height:40px; vertical-align:middle; margin:0 11px 0 0; overflow:hidden;}
.inner .pageing_wrap a.btn_prev:before {content:'<'; font-size:14px; color:#fff; line-height:38px;}
.inner .pageing_wrap a.btn_next {display:inline-block; *display:inline; zoom:1; width:40px; height:40px; vertical-align:middle; margin:0 0 0 11px; overflow:hidden;}
.inner .pageing_wrap a.btn_next:before {content:'>'; font-size:14px; color:#fff; line-height:38px;}
.inner .pageing_wrap a.btn_last {display:inline-block; *display:inline; zoom:1; width:40px; height:40px; vertical-align:middle; margin-left:2px; overflow:hidden;}
.inner .pageing_wrap a.btn_last:before {content:'>>'; font-size:14px; color:#fff; line-height:38px;}
.inner .pageing_wrap ul.num {display:inline-block; *display:inline; zoom:1; font-size:0; vertical-align:middle; overflow:hidden;}
.inner .pageing_wrap ul.num li {display:inline-block; *display:inline; zoom:1; vertical-align:middle; margin:0 1px 0 1px; overflow:hidden;}
.inner .pageing_wrap ul.num li a {display:block; width:30px; height:30px; font-size:14px; color:#555; line-height:30px; }
.inner .pageing_wrap ul.num li.active a {border:1px solid #a9a9a9; border-radius:50px }