@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body ul {
	list-style-type: none;
}
body a {
	color:#333;
	text-decoration: none !important;
}
/* body a:hover {
	color:#427aff;
} */
.cen {
	max-width:1200px;
	width:100%;
	margin:auto;
	padding:0 0.2em;
}
body {
    font-family: 'NanumSquare', sans-serif !important;
}
input[type=password] {
	font-family: "san-serif";
}
#board {
	max-width:400px;
}
h3 {text-align:left;}

nav .active { background-color: black!important; }

.container { padding: 0 1.5em;}

/* ------------ header 디자인 -------------- */

header {
	height:88px;
	width: 100%;
	padding-top:4px;
	/* margin-bottom:1em; */
}
header .cen {
	position:relative;
}
h1 {
	position:relative;
	width:150px;
}
h1 img {
	max-width:200px;
	max-height:40px;
}
#pcmenu {
	width:100%;
	background-color: black;
	position:absolute;
}
#pcmenu nav {
	width:1000px;
	margin:auto;
}
#gnb {
	position:absolute;
	right:0;
	top:10px;
}
#gnb a {
	/* margin-right:0.7em; */
	font-size:0.9em;
	color:#333;
}
.main {
	float: left;
	width:200px;
	text-align:center;
	position:relative;
	line-height:40px;
	margin-top:-16px;
	transition: all 0.5s;
}
.main>a {
	font-size:1.2em;
	font-weight: bold;
	display:block;
	position:relative;
	color:white;
}

.main:hover {
	background-color: #e7ab3c;
}
.sub a:hover {
	background-color: #e7ab3c;
}
.sub {
	background-color: black;
	width:100%;
	top: 40px;
	position:absolute;
	line-height:2.2em;
	display:none;
	z-index: 9999999;
}
.sub a {
	display:block;
	color:white;
}



#mmenu {
	position: fixed;
	right:0;
	top:0;
	bottom:0;
	width:300px;
	background-color:white;
	text-align:center;
	right:-300px;
	height:100px;
	overflow-y:scroll;
	z-index:999999999999;
}

.mmain>a {
	font-size:1.6em;
	display:block;
	border-bottom:1px solid #ccc;
	line-height:2em;
}
.msub {
	display:none;
}
.msub a {
	line-height:2em;
}
#mgnb {
	padding-bottom:10px;
	position:relative;
}
#mgnb a {
	font-size:0.8em;
}
#bar {
	position:absolute;
	font-size:2em;
	border:none;
	outline:none;
	background-color:transparent;
	top:10px;
	right:0.5em;
	display:none;
	color:#333;
}
#close {
	font-size:2em;
	border:none;
	outline:none;
	background-color:transparent;
	margin-left:0.5em;
	vertical-align: -6px;
	position:absolute;
	right:17px;
	top:15px;
}
.nav-up {
	top: -100px;
}


/* ------------index 메인디자인 ------------ */
#cate {
	overflow:auto;
	padding: 3em 3em;
}
.catebox {
	position:relative;
}
.catebox:last-of-type{
	margin-right:0;
}
.catebox img {
	width:100%;
	opacity: 0.5;
	transition: all 0.3s;
}
.catebox p {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size: 0.9em;
	background-color:white;
	padding: 0.2em 0.3em;
	border-radius:5px;
	transition: all 0.3s;
}
.catebox:hover img {
	opacity:1;
}
.catebox:hover p {
	font-size: 1.2em;
	font-weight:bold;
	color:#333;
}

#mvisual {
	position:relative;
	margin:auto;
	width:100%;
	overflow:hidden;
	height:500px;
	margin-top:1em;
	margin-bottom:1em;
	/* margin-top:100px; */
}

.slider {
	/* width:100%; */
	/* position:absolute;
	display:none;
	left:50%;
	transform:translateX(-50%); */
	position:relative;
}
/* .slider:first-of-type {
	display:block;
} */
.slide_main {
	position:absolute;
	top:30%;
	left:20%;
	font-size:4em;
}
.slide_sub {
	position:absolute;
	top:43%;
	left:20%;
	font-size:2em;
}
.slide {
	width:100%;
	/* opacity:0.7; */
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
/* #prev, #next {
	font-size:5em;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	outline:none;
	background-color:transparent;
	border:none;
	color:white;
	text-shadow:3px 3px 5px rgba(0,0,0,0.3);
	z-index:9999;
}
#prev {
	left:3%;
}
#next {
	right:3%;
} */
.slick-dots {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom: 5%;
}
.slick-dots li {
	float:left;
}
.slick-dots li button {
	display:block;
	width:1em;
	height:1em;
	border:none;
	border-radius:50%;
	text-indent: -9999px;
	outline:none;
	margin:0 7px;
}
.slick-active { 
	background-color: #eff4ff;
	width:2.5em;
	border-radius: 10px;
}

#box {
	overflow:auto;
}
.mvisual_box {
	float:left;
	width:calc(100%/4);
	height:50px;
	
}

h2 {
	text-align:center;
	position:relative;
	font-size:2em !important;
	color:#333;
}
/* h2::after {
	content:"";
	width:6em;
	height:5px;
	display:block;
	background-color: rgba(66,122,255,0.5);
	position:absolute;
	bottom:8px;
	left:50%;
	transform:translateX(-50%);
} */
#product {
	position:relative;
}
.probox {
	background-color:white;
	text-align:center;
	border-radius:10px;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
	margin-top:-20px;
	position:relative;
}
.probox h3 {
	font-size: 3em;
	/* line-height: 1.5em; */
	color:white;
	text-shadow: 3px 3px 5px rgba(0,0,0,0.8);
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%);
}
.probox a {
	position:absolute;
	bottom: 20px;
	left:50%;
	transform:translateX(-50%);
	font-size: 1em;
}


#product img {
	width:100%;
}

#event_product img {
	width:100%;
}

.comm {
	border: 1px solid #ccc;
	margin-right: 1em;
	padding: 1em;
}
.comm:last-of-type {
	margin-right: 0;
}
.comm ul {
	list-style-type: square;
	padding-left:1.2em;
}
.comm h4 {
	float:left;
}
.commtop {
	overflow:hidden;
	border-bottom: 1px solid #ccc;
	margin-bottom: 1em;
}
.plus {
	float:right;
	font-size:2em;
	margin-top:-0.3em;
	transition: all 0.5s;
}
.plus:hover {
	transform:rotate(180deg);
}

#benefit {
	background-color: #f1cd8b;
}
#benefit img {
	width:100%;
}




/* --------로그인페이지---------- */
#loginbox {
	width:300px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#loginbox img {
	position:absolute;
	width:200px;
	left:50%;
	transform:translateX(-50%);
	top:-60px;
}


/* -------페이지 top_back 스타일 ------ */
.top_back {
	height:250px;
	overflow:hidden;
	position:relative;
	margin-top:12px;
}
.top_back img {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100%;
}
.top_back p {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:3em;
	color:white;
	text-shadow:3px 3px 5px rgba(0,0,0,0.5);
}

/* -------leftmenu 스타일 ----------- */
/* .left_title {
	font-size:2em;
	background-color:#f26522;
	color:white;
	padding:1em;
} */
.menu {
	font-size:1.3em;
}

/*-----------게시판스타일--------------*/
.galbox {
    overflow: hidden;
}

.fitimg {
    overflow: hidden;
    position: relative;
    height: 250px;
}

.fitimg img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.txtbox {
    padding: 0.8em 0.6em;
}



.txtbox>div:first-of-type {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.txtbox>div:last-of-type {
    font-size: 0.8em;
}

.txtbox i {
    font-size: 0.9em;
}


/* ----------footer 스타일 ---------- */

footer {
	background-color:#333333;
	color:white;
	overflow:auto;
	padding: 1em 0;
}
.ftop {overflow:auto;}
.foot {
	float:left;
}
.foot:first-of-type {
	border-right: 1px solid white;
	padding-right:1em;
}
.foot:last-of-type {
	padding-left: 1em;
}
.foot a {
	color:white;
	display:block;
	line-height:2.5em;
}
.ftext {background-color: #e7ab3c; color:black;}
.call {float:left; padding-right:1em;}
.escrow {float:right; padding-top:0.5em;}
#fmain {
	position:relative;
}
#fsub {
	position:absolute;
	background-color: white;
	z-index:9999;
	padding:0 1em;
	top:0;
	right:0;
	display:none;
	box-shadow: 2px 2px 3px rgba(255,255,255,0.5);
}
#fsub::after {
	content:"";
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-right:10px solid white;
	position:absolute;
	top:15px;
	left:-4px;
	transform:translateX(-50%);
}
#fsub a {
	color: #666;
	display:block;
	text-align:center;
}

/* ---------FAQ스타일-------- */
.faq_main { 
	font-size: 1.2em!important;
	font-weight: bold!important;
	background-color: #666;
}
.faq_sub { display:none;}
.down {float:right;}


/* -------기타스타일------ */
/* cart.php버튼 */
.cart2 { vertical-align:-19px;}
.list_money { color:#68AC0C; font-weight:bold;}
/* .b_img img { width:100%!important;} */
.phone {
	float:left;
	width: calc(100% / 3)!important;
}
#rt {width:500px;}
.office a {
	font-size: 0.8em;
}
.col { padding: 0!important;}

.pdbox a>img {
	transition: all 0.3s;
}
.pdbox:hover a>img {
	border: 5px solid #333;
}

/* ---------관리자페이지 스타일------------- */
.visual {
	float: left;
	width: calc((100% - 30px)/4)!important;
	margin-right:10px;
}
.visual:nth-of-type(4n){
	margin-right:0;
}
.visual img {width:100%;}

/* 비즈앱 신청페이지 스타일 */
.iphone {
	position:relative;
}
.iphone img {
	width:450px;
	display:block;
	margin:auto;
}
.iphone iframe {
	width:360px;
	height: 640px;
	position:absolute;
	top:135px;
	left:52%;
	transform:translateX(-52%);
	border: none;
}


/* ---------미디어쿼리-------- */

@media all and (max-width:1130px){
	.slide_main { font-size:3em;}
	.slide_sub { font-size:1em;}
	#prev, #next { font-size: 3em;}
}
@media all and (max-width:1135px){
	#gnb { display:none;}
	#bar { display:block;}
}
@media all and (max-width:1015px){
	.foot {float:none;}
	.foot:first-of-type {border: none;padding-bottom:1em;}
	.foot a { text-align:center;}
	#fsub { right:30%;}
}
@media all and (max-width:992px){
	.left_title{ font-size:1.6em;}
	.menu { font-size:1em;}
	#board {max-width:300px;}
	.cart_goods {font-size:0.8em;}
}
@media all and (max-width:900px){
	#floatR { display:none;}
}
@media all and (max-width:935px){
	#pcmenu nav { display:none;}
	h1 { padding-top:15px;margin:auto;}
	#bar {top:25px;}
}
@media all and (max-width:820px){
	#fbot .cen div { margin-left:30px;}
	#fbot .call::after { display: none;}
	.slide_main { font-size:2em;}
	#fsub { right:20%;}
}
@media all and (max-width:768px){
	.leftmenu {display:none;}
	#fbot .cen .flogo { float:none; display:block;margin:auto;}
	#fbot .cen div { float:none; margin-left:0;padding:0 1em;}
	#join_table td { font-size:0.8em;}
	.cart_th td {font-size:0.7em;}
	.cart_goods {font-size:0.5em;}
	.cart_txt {font-size:0.8em;}
	.comm { margin-right:0;}
	.probox { height: 250px;}
	
}
@media all and (max-width:575px){
	#fsub { right:10%;}
}
@media all and (max-width:530px){
	#board { max-width:200px;}
}
@media all and (max-width:515px){
	.join_info { width: 200px!important;}
	.num { width:80px!important; margin-left:0.5em!important;}
	.dash { margin-left:0.2em!important;}
	.bread { font-size: 0.8em;}
	#rt { width: 350px;}
	
}
@media all and (max-width:465px){
	#board { max-width:90px;}
	.slide_sub { display:none;}
	.my_titel img { width:65px;}
	.cart_btn { width:100px;}
	.cart2 { vertical-align:-15px;}
	.top_back p { font-size:2em; margin-top:-0.5em;}
	h2 { font-size: 1.5em!important; }
}
@media all and (max-width:430px){
	#fbot .cen div, #ftop a { font-size:0.8em;}
	#prev,#next {font-size: 2em;}
}
@media all and (max-width:420px){
	.join_info { width: 100px!important;}
	.num { width:50px!important; margin-left:0.3em!important;}
	.basket {font-size: 0.8em;}
	.cart_img img {display:none;}
}
@media all and (max-width:400px){
	.view_img { width: 80px;}
	#rt { width: 300px;}
	#fsub { right:2%;}
}
@media all and (max-width:350px){
	.cart_btn { width:90px;}
	.cart2 { vertical-align:-13px;}
	#fsub { right:-10px;}
}