@import url(reset.css);

body , html {height:100%; background:#eee;}
/******************** header ********************/
#header_wrapper{
	position:relative;
	padding: 3em 0;
	text-align:center;
}
/***** 토글영역 ****/
#header_wrapper > label.right{
	position:absolute;
	top:45%; right:5%;
	display:block;
	
	background:url(../images/toggle.png) no-repeat;
	width:30px; height:24px;
	text-indent:-5000px;
	overflow:hidden;
}
#toggle{display:none;}
#toggle + #page-wrapper > #toggle_gnb_wrap{display:none;}
#toggle:checked + #page-wrapper > #toggle_gnb_wrap{
	display:block;
	width:100%;	height:100%;
	text-align:center;
	background: rgba(255,255,255,0.9);
	z-index:200;
}
#toggle_gnb > ul > li.first {border-top:2px solid #333;}
#toggle_gnb > ul > li {
	border-bottom:2px solid #333;
}
#toggle_gnb > ul > li > a{
	color:#333;
	font-size:2em;
	font-weight:bold;
	
	display:block;
	padding:1em 0;
}
#toggle_gnb > ul > li > ul > h5{
	color:#333;
	font-size:2em;
	font-weight:bold;
	
	padding:2em 0;
}
#toggle_gnb > ul > li > ul > li{
	margin:0 2em;
}
#toggle_gnb > ul > li > ul > li > a{
	border-top:1px solid #acacac;
	font-weight:normal;
	font-size:1.5em;
	
	display:block;
	padding:0.5em 0;
	
}


/******************** main ********************/
.main_content {
	overflow: hidden;
}
.main_section > a{
	position:relative;
	display:block;
}
.main_section > a > img{
	display:block;
	width:100%;
}
.main_section > a > div{
	position:absolute;
	top:0; left:0;
	
	width:100%; height:100%;
	z-index:100;
	
	text-align:center;
}
.main_section > a > div > h3{
	position:absolute;
	top:50%; left:50%;
	
	color:#fff;
	font-size:1.5em;
	font-weight:bold;
	
	padding-right:1.2em;
	/* background:url(../images/arrow.png) right 50% no-repeat; */
	
	padding:0.6em 1em 1em 1em;
	transition-duration:1s;
}
.main_section01 > a > div > h3{
	border-top:1px solid #feb101;
	border-bottom:1px solid #feb101;
}
.main_section02 > a > div > h3{
	border-top:1px solid #9e0b0f;
	border-bottom:1px solid #9e0b0f;
}

.main_section > a:hover > div > h3{
	padding:0.6em 3em 1em 3em;
}

/******************** footer ********************/
#footer_wrapper {
	font-size:1.25em;
	color: #999;
}
#sns{
	overflow:hidden;
}
#sns > li{float:left;}
#sns > li > a > img{	
	display: block;
	width: 90%;
}
#footer_copy p {line-height:180%;}
#footer_copy p span {
	font-weight: bold;
}
#footer_copy p b {
	font-weight: bold;
	color: #666;
}
#footer_wrapper address{
	margin-top:1em;
}
#footer_wrapper address span,
#footer_wrapper address p a span {
	color: #666;
}

/* Desktop */
@media screen and (min-width: 981px) {
.main_section {
	float: left;
	width:50%;
}
/**** main ****/
.main_section01 > a > div{
	background: rgba(254,177,1,0.2);
	width:50%;
	transition-duration:2s;
}
.main_section02 > a > div{
	background: rgba(158,11,15,0.2);
	width:50%;
	transition-duration:2s;
}
.main_section01 > a:hover > div{
	background: rgba(254,177,1,0.8);
	width:100%;
}
.main_section02 > a:hover > div{
	background: rgba(158,11,15,0.8);
	width:100%;
}

.main_section01 > a > div > h3{
	margin-left:-5em;
}
.main_section02 > a > div > h3{
	margin-left:-6.5em;
}

/***** 토글영역 ****/
#toggle:checked + #page-wrapper > #toggle_gnb_wrap{
	position:absolute;
	top:19%; right:0%;
}

/**** footer ****/
#footer_wrapper {padding:3em 0;}
.container{
	position:relative;
	margin:0 10%;
}
#footer_wrapper > .container > #sns{
	position:absolute;
	right:0;
}

}

/* Tablet */
@media screen and (min-width: 737px) and (max-width: 980px) {
.main_section {
	float: left;
	width:50%;
}
/**** main ****/
.main_section01 > a > div{
	background: rgba(254,177,1,0.1);
	width:100%;
	transition-duration:2s;
}
.main_section02 > a > div{
	background: rgba(158,11,15,0.1);
	width:100%;
	transition-duration:2s;
}
.main_section01 > a:hover > div{
	background: rgba(254,177,1,0.8);
}
.main_section02 > a:hover > div{
	background: rgba(158,11,15,0.8);
}

.main_section01 > a > div > h3{
	margin-left:-5em;
}
.main_section02 > a > div > h3{
	margin-left:-6.5em;
}

/***** 토글영역 ****/
#toggle:checked + #page-wrapper > #toggle_gnb_wrap{
	position:absolute;
	top:18%; right:0%;
}

/**** footer ****/
#footer_wrapper {padding:2em 0;}
.container{margin:0 5%;}
#footer_copy{margin-top:1.5em;}
}

/* Mobile */
@media screen and (max-width: 736px) {
/* Basic */
html, body {
	overflow-x: hidden;
}

/**** main ****/
.main_section01 > a > div{
	background: rgba(254,177,1,0.1);
	width:100%;
	transition-duration:2s;
}
.main_section02 > a > div{
	background: rgba(158,11,15,0.1);
	width:100%;
	transition-duration:2s;
}
.main_section01 > a:hover > div{
	background: rgba(254,177,1,0.8);
}
.main_section02 > a:hover > div{
	background: rgba(158,11,15,0.8);
}

.main_section01 > a > div > h3{
	margin-left:-5em;
}
.main_section02 > a > div > h3{
	margin-left:-6.5em;
}

/***** 토글영역 ****/
#toggle:checked + #page-wrapper > #toggle_gnb_wrap{
	position:absolute;
	top:25%; right:0%;
}

/**** footer ****/
#footer_wrapper {padding:1.5em 0;}
.container{margin:0 2%;}
#footer_copy{margin-top:1em;}
}