@charset "utf-8";

/***** MediaQuery *****/

/* Mobile+Tablet */
@media (max-width: 1023px) {
	#row1 { height:96px; }
	#row1 #gnb { margin-top:11px; }
	#row1 #gnb .swiper-container { padding:0 16px; }
	#row1 .sticky-wrapper.is-sticky > header { z-index:0!important; }
	#row1 header#header .swiper-wrapper li { float:left; width:auto; margin-left:1rem; padding-bottom:8px; }
	#row1 header#header .swiper-wrapper li a { font-size:16px;  }
	#row1 header#header .swiper-wrapper li:first-child { margin-left:0; }
	#row1 header#header .swiper-wrapper li:last-child { margin-right:15px; }
	#row1 header#header .top-menu h1 { font-size:20px; font-weight:bold; }
	#row1 header#header .mid h1 a { display:inline-block; padding-top:10px; }
	#row1 header#header .mid { height:56px; line-height:56px; margin:0 1rem; }
	#row1 header#header .mid .sch { right:1rem; }
	#row1 header#header .right { z-index:1; position:absolute; right:1rem; top:18px; }
	#row1 header#header .right a { display:inline-block; }
	#row1 header#header .right a+a { margin-left:25px; }
	#row1 header#header .right a.btn-basket { width:22px; height:25px; background:url('../assets/img/btn_basket.svg') no-repeat left bottom / 17px auto; }
	#row1 header#header .right a.btn-basket span.dot { display:block; position:relative; left:15px;  width:5px; height:5px; border-radius:50%; background:#2D9B81; }
	#row1 header#header .right a.btn-sch { width:20px; height:20px; background:url('../assets/img/btn_search.svg') no-repeat left bottom / 20px auto; }
	#row1 header#header .right a.btn-sidebar { width:24px; height:20px; background:url('../assets/img/btn_sidemenu.svg') no-repeat left bottom / 24px auto; }
	#row1 #sch {
		display:none;
		z-index: 4;
		position: fixed;
		top: 0;
		right:0;
		width: 100%;
		height: 100%;
		background:white;
		overflow-y:scroll;
	}
	#row1 #popup {
		transform: translate(-50%, -50%);
		position: fixed;
		top:50%;
		left:50%;
		z-index:0;
		width:100%;
	}
	#row1 #popup .popup-mid { margin:0 16px; }
	#row1 #popup img { width:100%; height:auto; }
	#row1 #gnb-menu { display:none; }
}

/* PC */
@media (min-width: 1024px) {
	#row1 { height:194px; /* padding:0 1rem; */ }	
	#row1 .is-sticky { width:inherit; /* max-width:1248px; */ }
	#row1 .is-sticky .gnb-menu { transform: translateY(40%); }
	#row1 .cont { padding:0 1rem; }
	#row1 .cont > div { /* padding:0 16px; */ max-width:1248px; margin:0 auto; }
	#row1 .sch.cont { padding-left:0; }
	#row1 #gnb { position:relative; margin-top:35px; /* margin-bottom:1rem; */ }	
	#row1 header h1 { text-align:center; }
	#row1 header#header .swiper-container { /* display:flex; flex-direction: column !important; align-items: center !important; */ }
	#row1 header#header .swiper-wrapper { /* display:flex; */ /* width:inherit; */ }
	#row1 header#header .swiper-wrapper:after { content:''; display:block; clear:both; }
	#row1 header#header .swiper-wrapper li { /* display:inline-block; width:auto; margin-left:1rem; */ width:calc(16.6666% - 0px); /* margin:0 60px; */ text-align:center; }
	#row1 header#header .swiper-wrapper li a { display:inline-block!important; position:relative; /* margin:0 60px; */ font-size:18px; }
	#row1 header#header .swiper-wrapper li a span { display:inline-block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; word-wrap: normal !important; padding-bottom:14px; }
	#row1 header#header .swiper-wrapper li.active a span { -webkit-transition:color .35s ease; transition:color .35s ease; color:#2D9B81; }
	#row1 header#header .swiper-wrapper li a span:hover:after {
	    width: 100%;
		color:#2D9B81;
	}
    #row1 header#header .swiper-wrapper li a span:after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  width: 0%;
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	  height: 3px;
	  background: #2D9B81;
	  -webkit-transition: .35s;
	  transition: .35s;
	  color:#2D9B81;
	}
	#row1 .button_container {
		/* position: fixed; */
		position: absolute;
		top: 5%;
		right: 0%;
		height: 18px;
		width: 18px;
		cursor: pointer;
		z-index: 2;
		background: url('../assets/img/arr_down_blk.svg') no-repeat right center / 18px auto white;
		transition: all 0.35s ease;
	}
	#row1 .button_container:hover {
		opacity: 1;
	}
	#row1 .button_container.active {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		transition: all 0.35s ease;
	}
	#row1 .button_container span {
		background: #FF5252;
		border: none;
		height: 5px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	#row1 .gnb-menu {
		position: absolute;
		top: 50%;
		transform: translateY(40%);
		left: 0;
		width: 100%;
		height:100%;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity .35s, visibility .35s, height .35s;
		transition: opacity .35s, visibility .35s, height .35s;
		overflow: hidden;
	}
	#row1 .gnb-menu.open {
		opacity: 1;
		visibility: visible;
		height:100%;
	}
	#row1 .gnb-menu nav {
		z-index:2;
		position: relative;
		top: 50%;
		left:50%;
		border-top:1px solid #EBEBEB;
		-webkit-transform: translate(-50%, -56%);
		transform: translate(-50%, -56%);
		font-size: 16px;
		text-align: left;
		background: white;
	}
	#row1 .gnb-menu ul {
		width:1248px;
		max-width:1248px;
		list-style: none;
		padding: 0;
		padding-top:40px;
		padding-bottom:19px;
		margin: 0 auto;
		display: block;
		position: relative;
		/* height: 100%; */
	}
	#row1 .gnb-menu ul li {
		display:inline-block;
		/* height: 25%; */
		/* height: calc(100% / 4); */
		width:162px; margin-right:1rem;
		min-height: 40px;
		position: relative;
		opacity: 1;
	}
	#row1 .gnb-menu ul li a {
		display: block;
		position: relative;
		color: #4F4F4F;
		text-decoration: none;
		overflow: hidden;
		font-family: 'GmarketSans';
	}
	#row1 .gnb-menu ul li a:hover:after, #row1 .gnb-menu ul li a:focus:after, #row1 .gnb-menu ul li a:active:after {
		width: 100%;
	}
	#row1 header#header .swiper-wrapper li:first-child a { /* padding-left:0; */ }
	#row1 header#header .swiper-wrapper li:last-child a { /* padding-right:0; */ }
	#row1 header#header .top-menu { display:flex; flex-direction: row; position:relative; /* overflow:hidden; */ width:100%; padding:26px 0 0 0; }
	#row1 header#header .top-menu .left,
	#row1 header#header .top-menu .right { position:relative; }
	#row1 header#header .top-menu .left a,
	#row1 header#header .top-menu .right a { display:inline-block; font-size:14px; color:#828282; }
	#row1 header#header .top-menu .left a.btn,
	#row1 header#header .top-menu .right a.btn { padding-bottom:20px; }
	#row1 header#header .top-menu .left a+a { margin-left:20px; }
	#row1 header#header	ul.sub-menu { z-index:2; display:none; position:absolute; left:50%; transform:translateX(17%); top:26px; width:54px; padding:1rem 24px; border:1px solid #E5E5E5; background:white; /* -webkit-transition:opacity .35s ease; transition:opacity .35s ease; */
	}
	#row1 header#header	ul.sub-menu-r { z-index:2; display:none; position:absolute; right:50%; transform:translateX(104%); top:26px; width:52px; padding:1rem 24px; border:1px solid #E5E5E5; background:white; /* -webkit-transition:opacity .35s ease; transition:opacity .35s ease; */
	}
	#row1 header#header	ul.sub-menu > li > a,
	#row1 header#header	ul.sub-menu-r > li > a { display:block!important; }
	#row1 header#header	ul.sub-menu > li+li > a,
	#row1 header#header	ul.sub-menu-r > li+li > a { padding-top:20px; }
	#row1 header#header .top-menu .right > a { display:inline-block; font-size:14px; font-family:'GmarketSans'; }
	#row1 header#header .top-menu .left { /* float:left; */ }
	#row1 header#header .top-menu .right { /* float:right; */ margin-left:auto; }
	#row1 header#header .top-menu .right a+a { margin-left:40px; }
	#row1 header#header .mid { position:relative; margin-top:3px; }
	#row1 header#header .mid h1 { font-size:36px; font-weight:bold; }
	#row1 #sch {
		z-index: 11;
		position: fixed;
		top: 0;
		height: 100%;
		background:white;
		overflow-y:scroll;
		top: 0;
		right: -100%;
		/* right:0; */
		width: 50%;
		height: 100%;
		background:white;
		overflow-y:scroll;
	}
	#row1 header#header .mid .sch { z-index:1; position:absolute; right:0; top:5px; height:40px; border-bottom:1px solid black; }
	#row1 header#header .mid .sch form { position:relative;   }
	#row1 header#header .mid .sch input { /* padding-bottom:10px; */ width:200px; height:40px; padding-right:55px; font-size:16px; font-family:'GmarketSans'; }
	#row1 header#header .mid .sch button[type='button'] { display:inline-block; position:absolute; right:0; bottom:12px; width:18px; height:18px; background:url('../assets/img/btn_search.svg') no-repeat center 0 / 18px auto; }
	#row1 #popup {
		transform: translate(123%, 24%);
		position: absolute;
		top:50%;
		right:50%;
		z-index:0;
	}
	#row1 .popup-mid img { width:512px; }
}

@media screen and (min-width : 1039px) and (max-width : 1130px) {
	#row1 header#header .swiper-wrapper li a { margin: 0 50px; }
}

@media screen and (min-width : 1024px) and (max-width : 1130px) {
	/* #row1 .gnb-menu nav { transform: translate(-50%, -54%); } */
	#row1 .gnb-menu ul { width:inherit; max-width:inherit; }
}

@media screen and (min-width : 1024px) and (max-width : 1280px) {
	#row1 #popup {
		transform: inherit;
		transform: translateY(24%);
		right:1%;
	}
	#row1 .gnb-menu ul { margin: 0 1rem; }
}
@media screen and (min-width : 1024px) and (max-width : 1350px) {
	#row1 header#header	ul.sub-menu-r { right:0%; transform:inherit; }
}

@media screen and (min-width : 601px) and (max-width : 1023px) {
	#row1 #popup { width:inherit; right:50%; left:inherit; transform: translate(100%, -50%); }
}

/* common */
#row1 { z-index:2; position:relative; /* width:100%; */ background:white; }
#row1 header { background:white; }
#row1 .is-sticky { /* width:100%; */ height:194px;  background:white;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#row1 header#header .mid h1 { font-family:'GmarketSans'; }
#row1 header#header .swiper-wrapper li a { display:block; font-weight:normal; font-family:'GmarketSans'; transition: color 0.15s ease-in-out; }
#row1 header#header .swiper-wrapper li.now a { color:#54C7A2; font-weight:500; }
#row1 header#header .swiper-wrapper li.now { border-bottom:2px solid #54C7A2; }
#row1 header#header .sch, .close-icon, .search-wrapper {
	/* position: relative; */
}
#row1 header#header .close-icon {
	border:1px solid transparent;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
	outline: 0;
	cursor: pointer;
	position:absolute; right:0; top:17px;
}
#row1 header#header .close-icon:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background: url('../assets/img/btn_del.svg') no-repeat right center / 20px auto;
	z-index:1000;
	right: 29px;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
}
#row1 #header .sch input:not(:valid) ~ .close-icon {
	display: none;
}
#row1 #header .sch .close-icon2:after {
	right: 14px;
	top: 35px;
	bottom: 0;
}
#row1 #aside {
    z-index: 11;
    position: fixed;
    top: 0;
    right: -100%;
	/* right:0; */
    width: 75%;
    height: 100%;
	background:white;
	/* padding: 20px 10px; */
	overflow-y:scroll;
}
#row1 #aside > .top { position:relative; }
#row1 #aside > .top a.btn-hide { z-index:99; display:block; position:absolute; right:1rem; top:1rem; width:24px; height:24px; background:url('../assets/img/btn_close.svg') no-repeat left top / 24px auto; }
#row1 #aside .txt-link { display:table; margin:0 auto; text-align:center; }
#row1 #aside > .top.bg-green { padding:0 1rem; /* height:184px; */ height:178px; background:#2D9B81; } /* 21/04/20 m */
#row1 #aside .top .flex { padding-top:47px; }
#row1 #aside > .top ul li { width:calc(50% - 10px); height:44px; line-height:44px; font-family: 'GmarketSans'; text-align:center; }
#row1 #aside > .top ul li span { position:relative; /* top:3px; */ top:4px; } /* 21/04/20 m */
#row1 #aside > .top ul:first-child li:first-child {  }
#row1 #aside > .top ul:first-child li:first-child a { border:1px solid white; background:white; color:#2D9B81; }
#row1 #aside > .top ul:first-child li span { display:inline-block; width:15px; height:15px; background:url('../assets/img/ico_login.svg') no-repeat left center / 12px auto; }
#row1 #aside > .top ul:first-child li+li span { background:url('../assets/img/ico_account.svg') no-repeat left center / 15px auto; }
#row1 #aside > .top ul:first-child li+li a { border:1px solid white; }
#row1 #aside > .top ul em { position:relative; top:2px; font-style:inherit; } /* 21/04/20 a */
#row1 #aside > .top ul li a { display:block; font-size:16px; color:white; }
#row1 #aside > .top ul+ul li a { /* font-size:12px; */ font-size:14px; } /* 21/04/20 m */
#row1 #aside > .top ul+ul li span { top:5px; }
#row1 #aside > .top ul+ul li:first-child span,
#row1 #aside > .top ul+ul li+li span:first-child { display:inline-block; width:20px; height:20px; background:url('../assets/img/ico_profile.svg') no-repeat left center / 20px auto; }
#row1 #aside > .top ul+ul li+li span:first-child { background:url('../assets/img/ico_basket.svg') no-repeat left center / 15px auto; }
#row1 #aside > .top ul+ul li+li span+span { top:0; }
#row1 #aside > .top .login { 
	border-bottom: 1px solid rgba(255, 255, 255, .1);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
#row1 #aside > .top .login li p { text-align:left; color:white; font-size:16px; }
#row1 #aside > .top .login li span { top:0; width:inherit!important; background:none!important; }
#row1 #aside .menu { /* padding:0 1rem; */ border-bottom:10px solid #F8F8F8; font-family: 'GmarketSans'; }
#row1 #aside .menu > div > ul { margin:16px 16px 0 16px; padding-bottom:40px; border-top:1px solid #EBEBEB; }
#row1 #aside .menu ul li { padding:30px 0 0; font-size:18px; }
#row1 #aside .menu .top ul li a { display:block; }
#row1 #aside .menu .top li.active a {
	color:#2D9B81; 
	-webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    transition: all 0.15s;
}
#row1 #aside .menu h1 { padding:40px 1rem 0; font-size:14px; color:#2D9B81; font-weight:normal; }
#row1 #aside .menu .mid,
#row1 #aside .menu .bot { border-top:10px solid #F8F8F8; }
#row1 #aside > .top ul+ul li { position:relative; /* padding-left:15px; */ }
#row1 #aside > .top ul+ul li:first-child { padding-left:0; }
#row1 #aside > .top ul+ul li:first-child :before { background:none; }
#row1 #aside > .top ul+ul li > :before { position: absolute; content: '';/*  top: 15px; */  top: 13px; left: -5px; /* height: 13px; */ height: 16px; width: 1px; background: rgba(255, 255, 255, 0.6); } /* 21/04/20 m */
#row1 .mask {
    opacity:0;
    z-index: 11;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
	transition: opacity .15s linear;
	visibility: hidden;
}
#row1 .mask.on { opacity: 0.6; visibility:visible; }

#row1 #sch .cont { padding-top:56px; }
#row1 #sch .inner { position:relative; padding:0 16px; }
#row1 #sch .btn-close { display:block; position:absolute; right:16px; top:19px; width:24px; height:24px; background:url('../assets/img/btn_close_blk.svg') no-repeat left center / 24px auto; font-size:0; }
#row1 #sch dl { padding-top:36px; }
#row1 #sch dt { color:#2D9B81; font-size:16px; font-family: 'GmarketSans'; }
#row1 #sch dd { padding-top:20px; }
#row1 #sch dd a { display:inline-block; height:28px; line-height:28px; margin-right:10px; margin-bottom:10px; padding:0 8px; border:1px solid #1A1A1A; font-size:14px; color:#1A1A1A; font-family: 'GmarketSans'; }
#row1 #sch .close-icon {
	border:1px solid transparent;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
	outline: 0;
	cursor: pointer;
	position:absolute; right:0; top:17px;
}
#row1 #sch .close-icon:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background: url('../assets/img/btn_del.svg') no-repeat right center / 20px auto;
	z-index:1000;
	right: 29px;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
}
#row1 #sch .sch input:not(:valid) ~ .close-icon {
	display: none;
}
#row1 #sch .sch .close-icon2:after {
	right: 14px;
	top: 35px;
	bottom: 0;
}
#row1 #sch .sch { z-index:1;  height:40px; border-bottom:1px solid black; }
#row1 #sch .sch form { position:relative;   }
#row1 #sch .sch input { /* padding-bottom:10px; */ width:100%; height:40px; padding-right:55px; font-size:16px; font-family:'GmarketSans'; }
#row1 #sch .sch button[type='button'] { display:inline-block; position:absolute; right:0; bottom:12px; width:18px; height:18px; background:url('../assets/img/btn_search.svg') no-repeat center 0 / 18px auto; }
#row1 .popup-mid .cont p input { width:100%; padding:0 15px; height:45px; line-height:45px; border:1px solid #DBDBDB; border-radius:8px; }
#row1 .popup-mid .cont h1 { font-size:20px; font-weight:600; }
#row1 .popup-mid .cont { padding:15px; }
#row1 .popup-mid .cont .inner { margin-top:15px; }
#row1 .popup-mid .cont .inner p+p { margin-top:15px; }
#row1 .pop-chk { overflow:hidden; position:relative; width:100%; margin-top:-1px; padding:10px 0; background:white; }
#row1 .pop-chk label { padding-left:41px; font-size:16px; font-weight:200; }
#row1 .pop-chk a.cancel { display:inline-block; float:right; padding-right:12px; font-size:16px; font-weight:400; color:#6B6B6B; }
#row1 input[type="radio"]:checked + span .fake-radiobutton:after,
#row1 input[type="checkbox"]:checked + span .fake-checkbox:after {
	display: block;
}
#row1 .fake-checkbox {
	position: absolute;
	display: block;
	top: 11px;
	left: 12px;
	width: 24px;
	height: 24px;
	background:url('../assets/img/btn_chk_off.svg') no-repeat center center / 24px auto;
}
#row1 .fake-checkbox:after {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	/* background: navy; */
	/* border: 2px solid #dbdbdb; */
	background:url('../assets/img/btn_chk_on.svg') no-repeat center center / 24px auto;
	transform: translateX(-50%) translateY(-50%);
}
#row1 .checkbox input {
	position: absolute;
	margin: 5px;
	padding: 0;
	/* for mobile accessibility (iOS Label Bug) */
	visibility: hidden;
}