@charset "utf-8";
/* CSS Document */
*{box-sizing: border-box;}
/*#wrap {width:100%; position:relative; }*/
/*
#quick { position:fixed; right:100px; top:150px; z-index:99999;}
#quick .sns {width:110px; height:35px; background:#191919;}
#quick .sns li {float:left; padding:5px 5px;}
#quick .quickForm {width:100px;  background:#978775; padding:10px 5px; }
#quick .quickForm h1 {font-size:12px; color:#fff; text-align:center; margin-bottom:10px !important; margin-top:0 !important; margin-left:0 !important; margin-right:0 !important; }
#quick .quickForm .personalTxt,#quick .quickForm .personalTxt a:hover {font-size:11px; color:#443728; }
#quick .quickForm .smsFormBtn { width:100px; height:30px; color:#fff; text-align:center; background:#443728; margin-top:5px;}
*/


.quick-menu {
	z-index:99999; display:none;
	position:fixed; right:60px; bottom:45px; transition:.1s;
	width:100px; height:100px;
	background:url(../img/main/quick-iconRed.png)no-repeat center/100px;
}

.quick-menu.show {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
	0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        opacity: .7;
        -webkit-transform: scale(0.7);
        transform: scale(0.7)
    }

	100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


/*common*/
.inner{
	width: 1280px;
	margin: 0 auto;
}
/* header */
.header{left:0;top:730px;z-index:9999999;width:100%;background: #fff;border-bottom: 1px solid #eee;}
.header-inner {width: 1280px;height: 80px;margin:0 auto !important;padding:0;zoom:1;position: relative;}
.headerFixed{position:fixed; top:0;}/*스크롤시 header fixed*/
.header-display{width: 100%;height: 80px;display: flex;justify-content: space-between;align-items: center;}
.header-display .logo{width: 130px;height: 60px;}
.header-display .logo a{display: block;width: 100%;height: 100%;}
.header_menu{float:left;margin-left:50px}
.header_menu:after{display:block;clear:both;content:""}
.header_menu .menu_1dep{float:left;margin:32px 0 0 30px}
.header_menu .menu_1dep:first-child{margin-left:0}
.header_menu .menu_1dep .btn_dep1{display:block;height:100px;text-indent:-9000px; cursor:pointer;}
.header_menu .menu_1dep .btn_dep1:hover{background-position:0 -35px;}
.header_menu .menu_1dep11 .btn_dep1{width:110px; height:35px; background:url("../img/common/menu_01.png") 0   top no-repeat;}
.header_menu .menu_1dep12 .btn_dep1{width:110px; height:35px; background:url("../img/common/menu_02.png") 0   top no-repeat;}
.header_menu .menu_1dep13 .btn_dep1{width:110px; height:35px; background:url("../img/common/menu_03.png") 0   top no-repeat;}
.header_menu .menu_1dep14 .btn_dep1{width:110px; height:35px; background:url("../img/common/menu_04.png") 0   top no-repeat;}
.header_menu .menu_1dep15 .btn_dep1{width:110px; height:35px; background:url("../img/common/menu_05.png") 0   top no-repeat;}

#gnb_1dul{
	width: 740px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.gnb_1dli{
	width: calc(100% / 5);
	height: 30px;
}
.gnb_1dli a{
	display: block;
	width: 100%;
	height: 100%;
	text-align:center;
	font-size: 19px;
	font-weight: bold;
	color: #333;
}
.gnb_1dli:hover a{color:#e94609;}

.gnb_2dul {display:none;position:absolute;top:35px;width:200px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#333;color:#fff}
.gnb_2da:focus, .gnb_2da:hover {background:#666;text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}

/* 물류발주/점주공간 */
.header_menu2 .menu_2dep{display: inline-block;width: 100px;height: 50px;}
.header_menu2 .menu_2dep a{
	display:block;
	width: 100%;
	height: 100%;
	line-height: 50px;
	text-align: center;
	color: #8f8f8f!important;
}
.header_menu2 .menu_2dep a:hover{
	color: #111111!important;
}
.header_menu2 .btn_dep2 span{width: 16px;height: 16px;display: inline-block;margin-right: 5px;background-repeat: no-repeat;}
.header_menu2 .menu_2dep11 .btn_dep2 span{background-image: url("../img/common/top_icon1.png");}
.header_menu2 .menu_2dep12 .btn_dep2 span{background-image: url("../img/common/top_icon2.png");}
.header_menu2 .menu_2dep11{position: relative;}
.header_menu2 .menu_2dep11::after{content: '';display: block;width: 1px;height: 40%;background: #8f8f8f;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

/* sub menu(※ css에서 조정하는게 아니여서 부득이하게 important를 많이 사용하였습니다.) */
.category_submenu_box{
	width: 100%!important;
	background: #efefef!important;
	margin-left: 0!important;
	left: auto!important;
	top: 80px!important;
	padding-left: 0!important;
	overflow:hidden; display:none; position:fixed; z-index:999999;
/*
	display: block!important;
	height: 250px!important;
*/
}
.category_submenu_box-inner{
	width: 740px!important;
	display: flex!important;
	justify-content: space-between!important;
	margin: 0 auto!important;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.category_submenu_box li{
	width: calc(100% / 5)!important;
	float:left;
	position:relative;
/*	margin: 0 2px;*/
}
.category_submenu_box li:not(:last-child){border-right: 1px solid rgba(255,255,255,.5);}
.category_submenu dd{margin-inline-start: 0;}
.category_submenu_box li .category_submenu{padding:8px 0; font-size:14px;color:#111;}
.category_submenu_box li .category_submenu a{padding:8px 15px; font-size:15px;color:#111;display:block;font-weight: 500;opacity:.8;}
.category_submenu_box li .category_submenu a:hover{color:#e94609;display:block;text-decoration:none;opacity:1;}

.subcategorybg{position:absolute;left:-20px;top:-122px;}
.category_submenu_box li .category_submenu dd{margin-left:0px;}

/* quick menu */
#quick{
	position: fixed;
	bottom:160px;
	right: 50px;/*130px → 80px*/
	z-index: 999;

}
#quick li{
	width: 130px;
	height: 130px;
}
#quick li img{
	width: 100%;
	height: 100%;
}
#quick li:first-child{margin-bottom: 20px;}
#quick li:last-child{margin-top: 20px;}

/**************************** best-menu ********************************/
.best-menu{
	width: 100%;
}
.best-title{
	width: 100%;
	text-align: center;
}
.best-title h1{
	font-size: 58px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #111;
}
.best-title p{
	margin-top: 30px;
	color: #111;
	opacity: .7;
	font-size: 22px;
}
.best-visualWrap{
	width: 100%;
}
.best-visual{
	width: 100%;
	position: relative;
	padding: 0 0 80px;
}
.best-slide{
	margin: 0 10px;
}
.best-slide .best-image{
	width: 100%;
	height: 280px;
}
.best-visual .best-image img{
	width: 100%;
}
.best-slide-arrow{
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: 0;
}
.best-slide-arrow.prev-arrow{
	right: 50.5%;
	background: url('/theme/creasor_renew/img/main/menu-arrow-prev.png') no-repeat center center/ cover;
}
.best-slide-arrow.next-arrow{
	left: 50.5%;
	background: url('/theme/creasor_renew/img/main/menu-arrow-next.png') no-repeat center center/ cover;
}
.best-title{
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}

/**************************** community ********************************/
.community{
	margin: 140px 0 140px 0;
}
.community-title{
	width: 100%;
	text-align: center;
}
.community-title h1{
	font-size: 58px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: #111;
}
.community-title p{
	margin-top: 30px;
	color: #111;
	opacity: .7;
	font-size: 22px;
}
.community-content{
/*	margin-top: 50px;*/
	height: 770px;
	background: url(/theme/creasor_renew/img/main/community-bg.png) no-repeat center -260px;
	position: relative;
}
.community-content-inner{
	width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	/*content 가운데 정렬*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.community-content-inner > div{width: 600px;}

/* slick css */
#slider-div div{
	height: 470px;
	border-radius: 30px;
	text-align: center;
	font-size: 1rem;
	line-height: 470px;
}
#slider-div div a{
	display: block;
}
#slider-div div a,
#slider-div div img{
	width: 100%;
	height: 100%;
}
.slick-dots{
	width: 100%;
	margin-bottom: 0!important;
}
.slick-dots li button{
	width: 10px!important;
	height: 10px!important;
	background: #c6c6c6!important;
	border-radius: 50%;
}
/*
.slick-dots li button:before{
	font-size: 40px!important;
	top: -10px!important;
	left: -4px!important;
}
*/
.slick-dots li.slick-active button:before{
	width: 10px!important;
	height: 10px!important;
    color: #e94609!important;
}
.slick-dots li.slick-active button{
	background: #e94609!important;
}
.community-news *{color: #111;}
.community-news{height: 470px;}
.community-news > div{height: 50%;}

/**************************** benefit ********************************/
.benefit{
	background:url("../img/main/benefit_img_new0324.jpg") no-repeat center 0;  height:2215px;  min-width:1400px; box-sizing:border-box;
}

.con13_bg{
	background:url("../img/main/event_0106_pc.jpg?ver=1") no-repeat center 0;  height:1080px;  min-width:1400px; box-sizing:border-box;
}

/**************************** consult ********************************/
.consult{
	width: 100%;
}
.consult_cont{
	position:relative;
	top: 50px;
	width:1280px;
	margin:0 auto;
}
.consult_form1{
	width: 100%;
	height: 324px;
	background: #f3f3f3;
	border-radius: 10px;
	padding: 30px 0;
	position: relativere;
}
.form1_cont{
	width: 760px;
	height: 220px;
	margin:16px auto;
}
.consult_title{
	font-size: 36px;
	font-weight: 500;
	margin-bottom: 20px;
	text-align: center;
	color: #111;
}
.form1_cont iframe{
	height: 220px;
}
.consult_form2{
	width: 450px;
	height: 350px;
	position: absolute;
	top: 48%;
	transform: translateY(-50%);
	background: url(/theme/creasor_renew/img/main/consult-form2.png) no-repeat center center/ 99%;
}

/**************************** footer ********************************/
.footer {
	margin-top: 140px;
	background: #353535;
	height: 255px;
}
.footer-inner{
	display: flex;
	justify-content: space-between;
	padding: 49px 0;
}
.footer-information{
	width: 1100px;
	display: flex;
}
.footer-information .logo{
	width: 130px;
	height: 60px;
	margin-right: 80px;
	margin-top: -14px;
}
.footer-information .logo a{
	display: block;
	width: 100%;
	height: 100%;
}
.footer-information .info{
	color: #fff;
	opacity: .5;
	line-height: 28px;
	clear: both;
}
.footer-information .info span {margin-right:15px;display:inline-block}
.footer-sns{
	margin-top: 15px;
	width: 290px;
    justify-content: flex-start;
}
.footer-sns li{
	opacity: .7;
}
.footer-sns li:not(:first-child){margin-left: 20px;}
/*************************************** ---- 메인 ---- ********************************/

/* 메인 점주배너 슬라이드 */
.main_banner{position:relative;padding-left:5px; width:665px; height:260px; float:left; margin-right:4px;}
.main_banner .slide{overflow:hidden;position:relative;width:665px;height:260px;}
.main_banner .slide li{display:block;width:665px;height:260px; }
.main_banner .slide li a{display:block}
.main_banner .page{z-index:100;position:absolute;top:230px;right:10px; list-style:none}
.main_banner .page li{display:inline-block; display:inline ;margin:0 3px;_zoom:1; float:left;}
.main_banner .page li a{display:block;overflow:hidden;width:12px;height:12px;background:url(../img/main/sp_page.png) 0 0 no-repeat;line-height:999px;vertical-align:top}
.main_banner .page li.current a{background-position:0 -12px}

.cont22_slide{position:relative; padding:160px 50px 0 50px; width:1000px; height:355px;}
.cont22_slide .slide{overflow:hidden;position:relative;  width:1000px; height:355px;}
.cont22_slide .slide li{display:block; width:1000px; height:355; }
.cont22_slide .slide li a{display:block}
.cont22_slide a.prev,.cont22_slide a.next{display:inline-block;z-index:100;overflow:hidden;position:absolute;top:330px;width:35px;height:60px;background:url(../img/main/arrow.png) 0 0 no-repeat;line-height:999px;vertical-align:top}
.cont22_slide a.prev{left:70px;background-position:0 0}
.cont22_slide a.next{right:70px;width:35px;background-position:-35px 0;}


.cont3 {background:url(../img/main/cont3_bg.jpg) center ; text-align:center; height:920px;}
.contMou {background:url(../img/main/contMou_bg.jpg) center ; text-align:center; height:1000px;}
.cont4 {background:url(../img/main/cont4_bg.jpg) center repeat-x; text-align:center;}


.mCont3 {width:100%; background-color:#d2e7d1; position:relative; }
.mCont3 .mContStory {width:90%; margin:0 auto; position:relative; }


/**************************** subPage ********************************/
/* 자담스토리 */
#topMenu1dep {
	background:#fff;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.topMenu2dep1,
.topMenu2dep2,
.topMenu2dep3,
.topMenu2dep4,
.topMenu2dep5{
	list-style:none;
	margin:0;
	padding:0;
	width:1280px;
	height: 100%;
	margin: 0 auto;
	display: flex;
}
.topMenu2dep5 li {
	width: calc(100% / 5);
	height: 80px;
	text-align: center;
	font-size: 20px;
}
.topMenu2dep1 li,
.topMenu2dep3 li,
.topMenu2dep4 li{
	width: calc(100% / 4);
	height: 80px;
	text-align: center;
	font-size: 20px;
}
.topMenu2dep1 li a,
.topMenu2dep2 li a,
.topMenu2dep3 li a,
.topMenu2dep4 li a,
.topMenu2dep5 li a{
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 20px;
	line-height: 80px;
	color:#333333;
}
.topMenu2dep a:hover {
	text-decoration: none;
}


#subTab { width:1000px; margin:0 auto;  height:50px; text-align:center; padding-bottom:30px;}
#subTab li {float:left; min-width:490px; border:1px solid #CCC; text-align:center; font-size:17px; height:50px; line-height:50px; margin-right:-1px; cursor:pointer;  }
#subTab li:hover { color:#7fa53c;}
#subTab .subTabOn {float:left; height:50px;  border-bottom:0; border-top:2px solid #89b23f; color:#7fa53c; text-align:center;}

#subMobileTab { width:95%; margin:0 auto;  height:50px; text-align:center; padding-bottom:30px;}
#subMobileTab li {float:left; min-width:47%; border:1px solid #CCC; text-align:center; font-size:17px; height:50px; line-height:50px; margin-right:-1px; cursor:pointer;  }
#subMobileTab li:hover { color:#7fa53c;}
#subMobileTab .subTabOn {float:left; height:50px;  border-bottom:0; border-top:2px solid #89b23f; color:#7fa53c; text-align:center;}


#subTab_1dep { position: relative; width:1000px; margin:0 auto; height:100%; text-align:center; padding-top:30px;}
#subTab_1dep .tabs {width:100%;  margin:0 auto;}
#subTab_1dep .tabs li {float:left; min-width:100%;  border:1px solid #CCC; text-align:center; font-size:20px; height:60px; line-height:60px; margin-right:-1px; cursor:pointer;  }
#subTab_1dep .tabs li.active {background:#7fa53c; color:#fff;}
#subTab_1dep .tab_container { padding-top:30px;}

#subMobileTab_1dep { position: relative; width:100%; height:100%; text-align:center; padding-top:30px;}
#subMobileTab_1dep .tabs {width:95%;  margin:0 auto;}
#subMobileTab_1dep .tabs li {float:left; min-width:45%;  border:1px solid #CCC; text-align:center; font-size:14px; height:60px; line-height:60px; margin-right:-1px; cursor:pointer;  }
#subMobileTab_1dep .tabs li.active {background:#7fa53c; color:#fff;}
#subMobileTab_1dep .tab_container { padding-top:30px;}


#subTab_2dep { position: relative; width:1000px; margin:0 auto; height:100%; text-align:center; padding-top:30px;}
#subTab_2dep .tabs {width:665px;  margin:0 auto;}
#subTab_2dep .tabs li {float:left; min-width:330px;  border:1px solid #CCC; text-align:center; font-size:20px; height:60px; line-height:60px; margin-right:-1px; cursor:pointer;  }
#subTab_2dep .tabs li.active {background:#7fa53c; color:#fff;}
#subTab_2dep .tab_container {
/*	padding-top:30px;*/
	margin-top: 225px;
}

#subMobileTab_2dep { position: relative; width:100%; height:100%; text-align:center;}
#subMobileTab_2dep .tabs {width:90%;height: 60px; margin:0 auto;background: #efefef;border-radius: 40px;padding: 5px; display: flex;}
#subMobileTab_2dep .tabs li {min-width:50%;text-align:center; font-size:14px;line-height:50px;cursor:pointer;border-radius: 40px;padding: 0 5px;font-size: 1.2rem;}
#subMobileTab_2dep .tabs li.active {background:#006e3f; color:#fff;}
/*#subMobileTab_2dep .tab_container { padding-top:30px;}*/

#subTab_3dep { position: relative; width:1000px; margin:0 auto; height:100%; text-align:center; padding-top:30px;}
#subTab_3dep .tabs {width:1000px; margin:0 auto; }
#subTab_3dep .tabs li {float:left; min-width:330px; border:1px solid #CCC; text-align:center; font-size:20px; height:60px; line-height:60px; margin-right:-1px; cursor:pointer;  }
#subTab_3dep .tabs li.active {background:#7fa53c; color:#fff;}
#subTab_3dep .tab_container { padding-top:30px;}

#subMobileTab_3dep { position: relative; width:100%; margin:0 auto; height:100%; text-align:center; padding-top:30px;}
#subMobileTab_3dep .tabs {width:95%; margin:0 auto; }
#subMobileTab_3dep .tabs li { border:1px solid #CCC; text-align:center; font-size:1.2em; height:30px; line-height:30px; margin-right:-1px; cursor:pointer;  }
#subMobileTab_3dep .tabs li.active {background:#7fa53c; color:#fff;}
#subMobileTab_3dep .tab_container { padding-top:10px;}

#subTab_interior { position: relative; width:100%; margin:0 auto; text-align:center; padding-top:6em}
#subTab_interior .tabs {width:100%;  margin:0 auto;overflow:hidden;}
#subTab_interior .tabs li {float:left; width:50%;  border:1px solid #000000; text-align:center; font-size:20px; height:70px; line-height:70px;box-sizing:border-box; cursor:pointer;  }
#subTab_interior .tabs li:first-child {background:#f7f8e7}
#subTab_interior .tabs li:last-child {border-left:none;background:#ebf0f4}
#subTab_interior .tabs li.active {border-bottom:none;background:url(../img/sub/Interiortab.gif) no-repeat center bottom #fff}
#subTab_interior .tab_container { padding-top:30px;}

.subPageBtn {
	margin: 60px auto 150px;
	width: 100%;

}
.subPageBtn a{
	width: 450px;
	height: 80px;
	display: block;
	margin: 0 auto;
	line-height: 80px;
	text-align:center;
	background: #006e3f;
	color: #fff;
	font-size: 30px;
}
.procedureBtn{
	width:450px;
	margin: auto;

	bottom: 150px;
	left: 50%;
}
.subPageBtn2 {  margin:2em auto 0; text-align:center; width:50%; min-width:280px; background:#333333; font-size:18px;  }
.subPageBtn2 a {padding:20px 0;color:#fff;display:block}
@media screen and (max-width:720px) {
.procedure .subPageBtn a,
.subPageBtn,
.subPageBtn a{
	width:180px;
	line-height:40px!important;
	height:40px;
	font-size:1.3em!important;
	margin-bottom:50px;
	bottom:10px
	}
#subTab_interior .tabs li {height:50px; line-height:50px;font-size:16px; }
}
@media screen and (max-width:400px) {
	.galleria-thumbnails-container {display:none}
}

.procedure .subPageBtn {
	position:absolute;
	/*bottom:60px;*/
	transform: translateX(-50%)
}
.procedure .subPageBtn a{
	width:100%;
	font-size: 27px;
	line-height: 80px;
	/*height: 40px;*/
}

/************* 하단 *************/
#foot_consult { position:relative; width:100%; height:828px; background:#3f3f3f url(../img/sub/sfoot_consult.jpg) center repeat-x; }
#foot_consult .sfoot_consult_form {position:absolute; top:345px; left:50%; margin-left:10px; width:510px; height:330px; background:url(../img/sub/sfoot_consult_form.jpg) center repeat-x; }


#sitemap_1dul {width:1000px; margin:0 auto; }
#sitemap_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.sitemap_1dul_1dli { float:left; height:250px; border-right:1px solid #ebebeb; text-align:center;}
.sitemap_1dul_1dli a { color:#525252;}
.sitemap_1dul_1dli:first-child {border-left:1px solid #ebebeb;}

.sitemap_1dli {margin:30px 0 0 30px; z-index:10;position:relative;  }
.sitemap_1da {display:inline-block;padding:20px 0 20px 10px; font-weight:bold; line-height:26px; text-decoration:none; font-size:18px;  }
.sitemap_2dul {width:198px;}
.sitemap_2dli a {font-size:14px; line-height:18px; text-align:center; letter-spacing:-1px;}
.sitemap_2dli a:hover {font-size:14px; line-height:18px; text-align:center; letter-spacing:-1px; color:#999;}
.sitemap_2da {display:block;padding:5px 10px;text-align:left;text-decoration:none}


#sitemap_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#sitemap_empty a {text-decoration:underline}




#personal1 {
display:none; z-index:99999; position:absolute; padding:5px 5px 5px 5px; width:300px;
font-size:11px; text-align:left; top:100px; left:0;  background:#fff; border:2px solid #F60; line-height:16px; color:#000;}
#personal1 b { color:#f00; font-weight:bold; }

#personalM {
	display:none;
	z-index: 99999;
    position: absolute;
    padding: 5px 5px 5px 5px;
    width: 300px;
    font-size: 11px;
    text-align: left;
    top: 40%;
    left: 5%;
    background: #fff;
    border: 2px solid #F60;
    line-height: 16px;
    color: #000;
}
#personalM b { color:#f00; font-weight:bold; }

#personal_quick {
display:none; z-index:99999; position:absolute; padding:5px 5px 5px 5px; width:300px;
font-size:11px; text-align:left; top:331px; left:-90%;  background:#fff; border:2px solid #000; line-height:16px; color:#000;}
#personal_quick b { color:#f00; font-weight:bold; }


#grid li{}
#grid .details h3{padding-left: 40px;}