@charset "utf-8";


/* main css */
label, input, select{vertical-align:middle;}

/* ========== 01. layout ========== */
/* body{overflow-x:hidden;} */
#wrap{width:100%}
#header{width:100%;}
#container{width:100%;}
#footer{width:100%;}



/* header */
#header {position: fixed; top: 0; left: 0; z-index: 10000;}
#header .h_inner {max-width: 1722px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; position: relative;}
#header .logo {position: absolute; width: 199px; height: 44px; background: url(../images/common/logo_nam.png) no-repeat center; left: 0; top: 38px; font-size: 0;}
#header .r_bx {font-size: 0; position: absolute; right: 45px; top: 40px;}
#header .r_bx .btn {display: inline-block; box-sizing: border-box; padding: 0 20px; width: 150px; font-size: 16px; color: #ffffff; letter-spacing: -0.05em; word-break: keep-all; background-color: rgba(255,255,255,.1); border-radius: 20px; border: 1px solid transparent; vertical-align: middle; margin-left: 10px;}
#header .r_bx .btn:first-child {margin-left: 0;}
#header .r_bx .btn span {display: block; line-height: 38px; position: relative;}
#header .r_bx .btn span::before {content: ''; width: 14px; height: 14px; background: url(../images/icon/link1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -7px;}
#header .menu_btn {display: inline-block; width: 26px; height: 24px; position: relative; vertical-align: middle; margin-left: 20px; cursor: pointer; position: absolute; z-index: 10; right: 0; top: 48px;}
#header .menu_btn span {position: absolute; width: 100%; left: 0; height: 2px; background-color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
#header .menu_btn span:nth-child(1) {top: 0;}
#header .menu_btn.on span:nth-child(1) {transform: rotate(135deg); top: 50%; margin-top: -1px;}
#header .menu_btn span:nth-child(2) {top: 11px;}
#header .menu_btn.on span:nth-child(2) {opacity: 0;}
#header .menu_btn span:nth-child(3) {top: 22px;}
#header .menu_btn.on span:nth-child(3) {transform: rotate(-135deg); top: 50%; margin-top: -1px;}
#header .menu_btn.on span:nth-child(3) {transform: rotate(-135deg); top: 50%; margin-top: -1px;}
#header .menu_bx {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.8); overflow-y: auto; overflow-x: hidden; display: none;}
#header .menu_bx .menu_w { max-width: 480px; width: 100%; position: absolute; right: 0; top: 0; height: 100%; background: url(../images/common/menu_bg.jpg) no-repeat center; background-size: cover; box-sizing: border-box; padding: 130px 0; display: table; transform: translate(100%, 0); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
#header .menu_bx.on .menu_w {transform: translate(0%, 0);}
#header .menu_bx .dep1_wrap { display: table-cell; vertical-align: middle; height: 100%;}
#header .menu_bx .dep1 {text-align: center; margin-bottom: 46px;}
#header .menu_bx .dep1:last-child {margin-bottom: 0;}
#header .menu_bx .dep1 > a {font-size: 34px; color: #ffffff; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; display: inline-block; line-height: 55px;}
#header .menu_bx .sns_bx {position: absolute; bottom: 84px; max-width: 480px; width: 100%; right: 0; box-sizing: border-box; font-size: 0; text-align: center;}
#header .menu_bx .sns_bx li {display: inline-block; vertical-align: middle; margin-right: 27px;}
#header .menu_bx .sns_bx li:last-child {margin-right: 0;}
#header .menu_bx .sns_bx li a {display: block;}



/* footer */
#footer {background-color: #141e19; padding: 54px 0 120px;}
#footer .f_inner {max-width: 1722px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; position: relative; text-align: left;}
#footer .info_bx li {font-size: 16px; color: rgba(255,255,255,.5); letter-spacing: -0.05em; font-weight: 350; word-break: keep-all; position: relative; padding-left: 117px; min-height: 30px; line-height: 30px;}
#footer .info_bx li span {position: absolute; left: 0; top: 0; color: #fff; font-weight: 700;}
#footer .sns_bx {position: absolute; font-size: 0; right: 0; top: 29px;}
#footer .sns_bx li {display: inline-block; margin-right: 27px;}
#footer .sns_bx li:last-child {margin-right: 0;}
#footer .sns_bx li a {display: block;}
#footer .link_bx {font-size: 0; position: absolute; right: 0; bottom: 0;}
#footer .link_bx li {display: inline-block; margin-right: 20px;}
#footer .link_bx li:last-child {margin-right: 0;}
#footer .link_bx li a {display: block; font-size: 16px; color: #ffffff; letter-spacing: -0.05em; word-break: keep-all; line-height: 30px; cursor: pointer;}
#footer .link_bx li a.bold {font-weight: 700;}
#footer .btm_txt {font-size: 16px; color: rgba(255,255,255,.5); font-weight: 350; letter-spacing: -0.05em; word-break: keep-all; line-height: 30px; margin-top: 24px;}



/* popup */
.popup_bx {position: fixed; z-index: 100000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); box-sizing: border-box; padding: 50px 0; overflow-y: auto; display: none;}
.popup_bx .pop_w {display: table; table-layout: fixed; width: 100%; height: 100%;}
.popup_bx .pop_inner {display: table-cell; vertical-align: middle; height: 100%;}
.popup_bx .pop_con {max-width: 960px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; background-color: #fff; border-radius: 20px; padding: 49px 80px; position: relative;}
.popup_bx .pop_con .close_btn {font-size: 0; width: 24px; height: 24px; background: url(../images/icon/close1.png) no-repeat center; position: absolute; right: 40px; top: 40px;}
.popup_bx .pop_con .ttl_bx {}
.popup_bx .pop_con .ttl_bx strong {font-size: 34px; color: #111111; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all;}
.popup_bx .pop_con .txt_bx {font-size: 18px; color: #444444; line-height: 30px; letter-spacing: -0.05em; word-break: keep-all; margin-top: 15px; max-height: 457px; overflow-y: auto;}



/* 전자상거래 표준약관 */
.yg{font-size:14px; line-height:24px; word-break:keep-all}
.yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;}
.yg h3{margin-top:40px; margin-bottom:5px; font-size:18px; font-weight:700; color:#444;}
.yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;}
.yg p{margin:5px 0;}

.fly_w{margin-top:10px; background:#f2f2f2; box-sizing:border-box; padding:20px;}
.fly_w > li:first-child{margin-top:0;}
.fly_w > li > ul{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ul > li{padding:0; margin:0;}
.fly_w > li > ul > li:before{display:none;}
.fly_w > li > ol{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ol > li{padding:0; margin:0;}
.fly_w > li > ol > li:before{display:none;}

ul.fly_w > li{position:relative; padding-left:10px; margin-top:5px; color:#777;}
ul.fly_w > li:before{content:'-'; position:absolute; top:0; left:0;}
ol.fly_w > li{position:relative; margin-top:5px; color:#777;}

.yg_table{overflow:hidden; margin-top:15px;}
.yg_table div{float:right; width:calc(50% - 10px);}
.yg_table div:first-child{float:left;}
.yg_table div > strong{display:block; text-align:center; background:#333; color:#fff; font-size:15px; font-weight:500; padding:15px 0;}
.yg_table div table{width:100%; box-sizing:border-box;}
.yg_table div table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;}
.yg_table div table tbody th{text-align:center; border-bottom:1px solid #ddd; color:#333; padding:10px 0; font-weight:500; background:#f9f9f9}
.yg_table div table tbody td{border-bottom:1px solid #ddd; padding:5px 20px; border-left:1px solid #ddd;}

#privacy_box select { padding-left:10px; margin-top: 20px; width: 320px; height: 40px; font-size: 14px; border-color: #bbb;}

	.quick_bar3 {position: fixed; z-index: 100; width: 100%; left: 0; bottom: 0px; background-color: #d1ba7f; height: 80px; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
	.quick_bar3 .txt {font-size: 20px; color: #ffffff; letter-spacing: -0.05em; word-break: keep-all;}




.pc_show2 {display: block !important;}
.m_show2 {display: none !important;}

/* PC */
@media all and (min-width:1025px){
	.pc_show{ display:block !important;}
	.pc_i_show{ display:inline-block !important;}
	.m_show{ display:none !important;}
	.m_i_show{ display:none !important;}

	
	
	/* header */
	#header .r_bx .btn {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#header .r_bx .btn:hover {box-shadow: 0 0 15px rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3);}



	/* quick */
	#quick_bx {position: fixed; max-width: 1722px; width: calc(100% - 40px); left: 50%; bottom: 40px; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); z-index: 1000; -webkit-transition: bottom 0.6s; -moz-transition: bottom 0.6s; transition: bottom 0.6s;}
	#quick_bx.on {position: absolute; bottom: 369px;}
	#quick_bx ul {position: absolute; bottom: 0; right: 0; text-align: right; font-size: 0;}
	#quick_bx ul li {margin-bottom: 10px;}
	#quick_bx ul li:last-child {margin-bottom: 0;}
	#quick_bx ul li a {display: inline-block; width: 60px; height: 60px; position: relative; border-radius: 30px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(17,17,17,0.2);}
	#quick_bx ul li .ct_btn {background-color: #22392a; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s;}
	#quick_bx ul li .ct_btn:hover {width: 200px;}
	#quick_bx ul li .ct_btn::before {content: ''; width: 26px; height: 25px; position: absolute; right: 17px;; top: 50%; margin-top: -13px;}
	#quick_bx ul li .ct_btn.tel::before {background: url(../images/icon/tel1.png) no-repeat center;}
	#quick_bx ul li .ct_btn.ct::before {background: url(../images/icon/contact1.png) no-repeat center;}
	#quick_bx ul li .ct_btn.kakao::before {background: url(../images/icon/kakao1.png) no-repeat center;}
	#quick_bx ul li .ct_btn span {font-size: 16px; color: #ffffff; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; display: block; width: 140px; line-height: 60px; position: absolute; right: 60px; top: 0; text-align: left; box-sizing: border-box; padding-left: 30px;}
	#quick_bx ul li .ct_btn.tel span::after {content: '';}
	#quick_bx ul li .ct_btn.ct span::after {content: '';}
	#quick_bx ul li .ct_btn.kakao span::after {content: '';}
	#quick_bx ul li.top_btn a {background-color: #fff; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
	#quick_bx ul li.top_btn a::before {content: ''; width: 21px; height: 21px; background: url(../images/icon/top.png) no-repeat top center; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;}
	#quick_bx ul li.top_btn a:hover {background-color: #22392a;}
	#quick_bx ul li.top_btn a:hover::before {background-position: bottom center;}
	#quick_bx ul li.pc_show {display: inline-block!important;}


}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){	
	.pc_show{ display:none !important;}
	.pc_i_show{ display:none !important;}
	.m_show{ display:block !important;}
	.m_i_show{ display:inline-block !important;}

	
	
	/* header */
	#header .logo {width: 150px; height: 33px; background-size: 150px 33px!important; top: 19px;}
	#header .r_bx {top: 20px;}
	#header .r_bx .btn {font-size: 12px; padding: 0 15px; width: 120px; margin-left: 5px;}
	#header .r_bx .btn span {line-height: 28px;}
	#header .r_bx .btn span::before {width: 10px; background-size: 10px auto;}
	#header .menu_btn {top: 23px;}
	#header .menu_bx .dep1_wrap {vertical-align: top;}
	#header .menu_bx .menu_w {padding: 120px 0;}
	#header .menu_bx .dep1 {margin-bottom: 30px;}
	#header .menu_bx .dep1 > a {font-size: 25px; line-height: 40px;}
	#header .menu_bx .sns_bx {bottom: 55px;}
	#header .menu_bx .sns_bx li {margin-right: 19px;}
	#header .menu_bx .sns_bx li a img {max-width: 22px;}
	
	
	
	/* quick */
	#quick_bx {position: fixed; z-index: 1000; width: 100%; left: 0; bottom: 0; background-color: #22392a;}
	#quick_bx ul {display: table; table-layout: fixed; width: 100%;}
	#quick_bx ul li {display: table-cell; vertical-align: middle; position: relative;}
	#quick_bx ul li::before {content: ''; width: 1px;height: 10px; background-color: rgba(255,255,255,.5); position: absolute; left: 0; top: 50%; margin-top: -5px;}
	#quick_bx ul li:first-child::before {display: none;}
	#quick_bx ul li a {display:flex; justify-content:center; align-items:center; table-layout:fixed; text-align: center; height: 70px; }
	#quick_bx ul li a span {display: inline-block; padding-left: 23px; font-size: 13px; color: #ffffff;}
	#quick_bx ul li a.tel span {background: url(../images/icon/tel1.png) no-repeat left center; background-size: 17px auto;}
	#quick_bx ul li a.tel span {font-size: 0;}
	#quick_bx ul li a.tel span::after {content: '전화문의'; font-size: 13px; color: #ffffff;}
	#quick_bx ul li a.ct span {background: url(../images/icon/contact1.png) no-repeat left center; background-size: 17px auto;}
	#quick_bx ul li a.kakao span {background: url(../images/icon/kakao1.png) no-repeat left center; background-size: 17px auto;}
	#quick_bx ul li.top_btn {display: none!important;}
	#quick_bx ul li.m_show {display: table-cell;!important;}

	.quick_bar3 {bottom: 70px; height: 50px;}
	.quick_bar3 .txt {font-size: 11px; line-height: 16px;}



	/* footer */
	#footer {padding: 25px 0 120px;}
	#footer .info_bx li {font-size: 12px; line-height: 20px; min-height: 20px; padding-left: 90px;}
	#footer .sns_bx {top: 20px;}
	#footer .sns_bx li {margin-right: 19px;}
	#footer .sns_bx li a img {max-width: 23px;}
	#footer .link_bx li {margin-right: 15px;}
	#footer .link_bx li a {font-size: 12px; line-height: 20px;}
	#footer .btm_txt {font-size: 12px; line-height: 20px; margin-top: 20px;}
	
	
	
	/* 팝업 */
	.popup_bx .pop_con {padding: 30px 20px; border-radius: 10px;}
	.popup_bx .pop_con .close_btn {top: 30px; right: 20px;}
	.popup_bx .pop_con .ttl_bx strong {font-size: 20px;}
	.popup_bx .pop_con .txt_bx {font-size: 13px; line-height: 18px; max-height: 200px;}
	
	
	
	/* 전자상거래 표준약관 */
	.yg{font-size:12px; line-height:18px;}
	.yg h2{margin-top:50px; font-size:18px;}
	.yg h3{margin-top:20px; margin-bottom:5px; font-size:15px;}
	.yg h4{margin-top:10px; margin-bottom:5px; font-size:14px;}
	.yg p{margin:5px 0;}

	.fly_w{margin-top:5px; padding:10px;}
	.fly_w > li > ul{padding:0 0 0 5px;}
	.fly_w > li > ol{padding:0 0 0 5px;}

	ul.fly_w > li{padding-left:10px; margin-top:3px;}
	ol.fly_w > li{margin-top:3px;}

	.yg_table{margin-top:10px;}
	.yg_table div{width:100%; margin-top:10px;}
	.yg_table div:first-child{margin-top:0;}
	.yg_table div > strong{font-size:12px; padding:8px 0;}
	.yg_table div table{ table-layout:fixed; }
	/* .yg_table div table colgroup col:nth-of-type(1){width:80px !important;}
	.yg_table div table colgroup col:nth-of-type(2){width:calc(100% - 80px) !important;} */
	.yg_table div table thead th{padding:5px 0;}
	.yg_table div table tbody th{padding:5px 0;}
	.yg_table div table tbody td{padding:0 10px}
	#privacy_box select { margin-top: 15px; width: 300px; height: 30px; font-size: 12px; }
}


/* 모바일 */
@media all and (max-width:768px){
	.pc_show2 {display: none !important;}
	.m_show2 {display: block !important;}

	
	
	/* header */
	/* #header .r_bx {display: none!important;} */
	#header .r_bx {top: 20px;}
	#header .r_bx .btn {font-size: 12px; padding: 0 10px; width: 70px; margin-left: 5px;}
	#header .r_bx .btn span {line-height: 28px; text-align: center;}
	#header .r_bx .btn span::before {display: none!important;}

	#header .menu_bx .menu_w {transform: translate(0%, 0)!important; max-width: 100%;}
	#header .menu_bx .sns_bx {max-width: 100%;}



	/* footer */
	#footer .sns_bx {position: relative; top: auto; right: auto; margin-top: 20px;}
	#footer .link_bx {position: relative; top: auto; right: auto; margin-top: 20px;}
}