@charset "utf-8";
/* Global Styles */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);


/* Main content of the site */
#swrap {
	align:center;
	width:100%;
	height: auto;
	background-color: #3f3f3f !important;
	position: absolute;
}



/* Sidebar */
#swrap .sidebar {
	font-family: 'Noto Sans KR', sans-serif;
	color: white;
	float: left;
	width: 30%;
	height: 100%;
	height:inherit;

	padding-left: 3%;
	padding-right: 3%;
	text-align: right;
	background-color: #3f3f3f;
	padding-top: 0rem;

}

#swrap .sidebar h2{

	font-family: 'Noto Sans KR',sans-serif !important;
    margin-left:10px;

	align-items: left;
	font-size: 3rem;
	color:white;

}

.title_l{ padding-bottom: 0rem;
align: center;
}
/* main content of the site */
#swrap .mainContent {

	width:70%;
	display: block;
	float: left;
	text-align: left;
	background: #303030;
	padding-left: 4%;
	padding-right: 4%;
	padding-bottom: 4%;

}

#swrap .mainContent #com_box{

	    width: 90%;

	    padding-top: 0rem;
	    paading-left: 3%;
	  	display: inline-block;
	    color: white;
	    font-family: 'Noto Sans KR',sans-serif !important;

}


#com_box h2{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 100;
	line-height: 1.5;
	margin: 2px 0;
	color:white;

}

#com_box h4{
	font-family: 'Noto Sans KR',sans-serif !important;
	line-height: 3;
	margin-bottom: -1.5rem;


  color: #FCAD24;

}


.title_line{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 500!important;
	line-height: 3 !important;

	text-decoration: underline;
	color:white;

}


.title_b{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 500!important;




}



@media screen and (max-width:480px) {

#com_box h2{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 300;
	line-height: 1.5;
	margin: 2px 0;
	font-size:1.2rem;
	color:white;

}

#com_box h4{
	font-family: 'Noto Sans KR',sans-serif !important;
	line-height: 1.5;
	margin: 0;

  color: #FCAD24;
  padding-top:1rem;
  font-size: 1.2rem;

}
	.title_line{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 500!important;
	line-height: 1.2 !important;

	text-decoration: underline;
	color:white;

}

}




 p{


	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 100;
	line-height: 1.5;
	margin: 2px 0;
	font-size: 1.1rem;
	color:white;
	text-align: justify;

}

#com_box img{ min-width:100%; height: auto }


#swrap .footer {

	width:100%;
	display: block;
	float: left;
	text-align: center;
	background: black;



}


#mainWrapper {
	width: 100%;

}
/*menu elements */
#swrap .sidebar #menubar {
	text-align: right;
	position: relative;
	left: 0%;

}
.menu ul li {
	list-style-type: none;
	position: relative;

	padding-top: 12px;
	text-align: right;
}

.sidebar #menubar .menu ul li a {
	color: white;
	text-decoration: none;
	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 500;
	transition: font-weight .1s ease;
}

.sidebar #menubar .menu ul li a:hover {
	color: white;
	/*text-decoration: underline;*/
	font-weight: 800;
	font-family: 'Noto Sans KR',sans-serif !important;
}
/* Menu headings in sidebar */

/*Links under menus in sidebar */
#menubar .menu ul li a {
	font-size: 1.5rem;
	font-family: 'Noto Sans KR',sans-serif !important;
}
/* Menus in sidebar */
.sidebar #menubar .menu {
	margin-bottom: 1rem;

}
@media screen and (max-width:1300px) {


	#swrap .mainContent #com_box{

	    width: 100%;

	    padding-top: 0rem;
	    paading-left: 3%;
	  	display: inline-block;
	    color: white;
	    font-family: 'Noto Sans KR',sans-serif !important;
	    font-size: 16px;

}

}




/* Media query for tablets */
@media screen and (max-width:700px) {


	#swrap .mainContent #com_box{

	    width: 100%;

	    padding-top: 0rem;
	    paading-left: 3%;
	  	display: inline-block;
	    color: white;
	    font-family: 'Noto Sans KR',sans-serif !important;
	    font-size: 16px;

}


	#swrap .mainContent {

	width:100%;
	display: block;
	float: left;
	text-align: left;
	background: #303030;
	padding-left: 4%;
	padding-right: 4%;
	padding-bottom: 4%;

}
.title_l{
text-align: center;

}

	#swrap .sidebar h2{

	font-family: 'Noto Sans KR',sans-serif !important;
    margin-right: 1rem;


}


/* search field in sidebar */
#swrap .sidebar #search {
	display: none;
}
/* sidebar */
#swrap .sidebar {
	float: none;
	width: 100%;
	height: auto;
	overflow: auto;
	padding-top: 0px;
	margin-top: 1rem;
}
/* horizontal separators in sidebar */
#swrap .sidebar hr {
	display: none;
}
/*The sidebar and maincontent of page */
#swrap {
	position: relative;
	top: -22px;
	width: 100%;
	overflow: hidden;
}
/*menu headings in sidebar */

/* Unordered List of links */
#menubar .menu ul {
	display: inline;

}
/*list elements */
#menubar .menu ul li {
	display: inline;

	padding-left: 0%;
	padding-right: 3%;
}
/*The link to be hidden in tablet view */
.sidebar #menubar .menu ul .notimp {
	display: none;
}
/* menus in sidebar */
.sidebar #menubar .menu {
	width: 100%;
	text-align: center;
	position: relative;

}
/*menubar in sidebar */
#swrap .sidebar #menubar {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 0px;
}
/* offer banners content */
#mainWrapper #offer p {
	font-size: small;
}
/* main content region of page */
#mainWrapper #swrap .mainContent {
	overflow: hidden;
	width: 100%;
}
/* Prices of products in catalog view */
.productRow .productInfo .price {
	font-size: 19px;
}
/* Content holders in catalog view */
.productRow .productInfo .productContent {
	font-size: 16px;
}
/* Buy buttons in catalog view */
.productRow .productInfo .buyButton {
	font-size: 15px;
}
/* Container for links in footer */

}

/*media query for small screen devices */
@media screen and (max-width:480px) {


.title_l{
  align: center;
  margin-top:0.5rem;
}
  .title_l img{ width: 20px;}

#swrap .sidebar h2{

	font-family: 'Noto Sans KR',sans-serif !important;

	font-size: 1.5rem;
  text-align: center;
	}


/*Menu headings in sidebar */
#menubar .menu h2 {
	width: 100%;
	display: block;
}


#swrap .sidebar #menubar {

	position: relative;


}
.menu ul li {
	list-style-type: none;
	position: relative;

	padding-top: -10px;
	text-align: right;

}

.sidebar #menubar .menu ul li a {
	color: white;
	text-decoration: none;
	font-family: 'Noto Sans KR',sans-serif !important;
	font-size: 16px;

}



.sidebar #menubar .menu ul li a:hover {
	color: white;
	text-decoration: none;
	font-family: 'Noto Sans KR',sans-serif !important;
}
/* Menu headings in sidebar */

/*Links under menus in sidebar */
#menubar .menu ul li a {
	font-size: 1.5rem;
	font-family: 'Noto Sans KR',sans-serif !important;
}
/* Menus in sidebar */
.sidebar #menubar .menu {
	margin-bottom: 0.5rem;
  text-align: center;

}




/* Main content which excludes the sidebar */
#swrap .mainContent {

	text-align: left;
	width: 100%;
	padding-left: 10px;
}
}




/*  SECTIONS  ============================================================================= */

.section1 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group1:before,
.group1:after {
    content:"";
    display:table;
}
.group1:after {
    clear:both;
}
.group1 {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col1 {
	display: block;
	float:left;
	margin: 1% 0.5% ;
}

.col1:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col1 {
		margin: 1% 0 1% 0%;
	}
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 55%;
}

.span_1_of_2 {
	width: 40%;
}


.span_0_of_2 {
	width: 48%;
}

.span3_of_2 {
	width: 55.45%;
}
.span32_of_2 {
	width: 41%;
}
.span4_of_2 {
	height:auto;
	width: 41%;

}

.span4_of_2 {
	width: 62.6%;
}
.span5_of_2 {
	height:auto;
	width: 35.7%;

}


/* 3grd*/

.span_3_of_3 {
	width: 100%;
}

.span_2_of_3 {
	width: 66.13%;
}

.span_1_of_3 {
	width: 32.26%;
}






/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%;
	}
	.span_1_of_2 {
		width: 100%;
	}

	.span_0_of_2 {
	width: 100%;
}

	.span3_of_2 {
	width: 100%;
	}
	.span4_of_2 {
	width: 100%;

	}

	.span4_of_2 {
		width: 100%;
	}
	.span5_of_2 {
		height:auto;
		width: 100%;

}

	.span_3_of_3 {
		width: 100%;
	}
	.span_2_of_3 {
		width: 100%;
	}
	.span_1_of_3 {
		width: 100%;
	}


}

/*  SECTIONS  ============================================================================= */

.section1 {
	clear: both;
	padding: 0px;
	margin: 0px;
}