html{ height:auto }
body{ height:auto }

.WRAPPER{
	width : 100%;
	margin : 0;
}

header{
	
}
header > .WRAPPER > h1{
	position : static;
	width : auto;
	height : 1.6rem;
	padding : 1.2rem 0;
	margin : 0 1.2rem;
	background-image : url("/images/ci_60_color.png");
	background-repeat : no-repeat;
	background-size : auto 1.6rem;
	background-position : left;
}
header > .WRAPPER > h1 > a#MAINLOGO{
	display : block;
	width : 12rem;
	height : 1.6rem;
	padding : 0;
	margin : 0;
}

nav#MAINMENU{
	bottom : 0;
	left : auto;
	width : 50%;
	height : 100%;
	margin-right : -50%;
	background-color : transparent;
	overflow : visible;
	transition :
		background-color .3s ease-in-out
}
nav#MAINMENU:hover{
	height : 100%;
	background-color : inherit;
	transition : none
}
nav#MAINMENU > .WRAPPER{
	position : fixed;
	top : 0;
	right : 0;
	bottom : 0;
	width : 50vw;
	margin-right : -50vw;
	background-color : rgba(0,0,0,.75);
	transition : margin-right .3s ease-in-out
}
nav#MAINMENU > .WRAPPER > a#MOBILE-CALLMENU{
	display : block;
	position : absolute;
	top : 1rem;
	left : -3rem;
	width : 2rem;
	height : 2rem;
	font-size : 0;
	background-color : rgba(0,0,0,.75);
	background-image : url("/images/icon-mobile-callmenu.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.2rem;
	border-radius : 1rem;
	transition : transform .5s ease-in-out
}
nav#MAINMENU > .WRAPPER > ul{
	width : 100%;
	height : 100%;
	text-align : left;
	overflow : auto
}
nav#MAINMENU > .WRAPPER > ul > li{
	display : block;
	width : auto;
}
nav#MAINMENU > .WRAPPER > ul > li > a{
	width : auto;
	height : 3rem;
	padding : 0 1rem;
	font : normal 1rem/3rem normal;
	text-align : left
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a{
	width : auto;
	height : 2rem;
	padding : 0 1rem;
	margin : 1rem;
	border-radius : 1rem;
	background-color : rgba(0,115,213,.75);
	font : normal .8rem/2rem normal;
	color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a:hover{
	background-color : rgba(0,115,213,.75);
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a{
	background-color : rgba(255,102,102,.75);
	color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a:hover{
	background-color : rgba(255,102,102,.75);
}
nav#MAINMENU > .WRAPPER > ul > li > ul{
	padding : 0;
	margin : 0 1rem;
}
nav#MAINMENU > .WRAPPER > ul > li > ul:before{
	display : none
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li{
	margin-bottom : .7rem
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li > a{
	color : #AAA;
	font : normal .75rem/normal normal
}

body.MENUON{ overflow : hidden }
body.MENUON > nav#MAINMENU{
	width : 100%;
	margin-right : 0;
	background-color : rgba(33,66,99,.5);
	transition :
		background-color .3s ease-in-out
}
body.MENUON > nav#MAINMENU > .WRAPPER{
	margin-right : 0
}
body.MENUON > nav#MAINMENU > .WRAPPER > a#MOBILE-CALLMENU{
	transform : rotate(45deg)
}

footer > .FOOTER-INFO > .FOOTER-LOGO {
	width: 100%;
    height: 60px;
	border:none;
	text-align:center;
}

footer > .FOOTER-INFO > address {
	width:95%;
	height: 120px;
}

footer > .FOOTER-INFO > address > span {
	font: normal 0.7rem/normal 'Noto Sans KR', sans-serif;
}

footer > .FOOTER-INFO > address > span > strong {
	width: 100px;
    margin-right:8px;
    font-size:0.8rem;
}

footer > .FOOTER-INFO > .GOTO-LINKS {
    width: 100%;
	padding:0;
	text-align:center;
}

footer > .FOOTER-INFO > .GOTO-LINKS > a {
	display:inline-block;
	width:28%;
	padding:12px 6px;	
}
footer > .FOOTER-INFO {padding: 15px 0;}
footer > .FOOTER-INFO > .GOTO-LINKS {height:auto;}

.SUBHEAD{
	height : 8rem;
	padding : 0;
	margin : 0;
	background-position : center;
	background-size : cover;
	background-repeta : no-repeat
}


.PATH-NAVIGATOR > .WRAPPER > div > a {
	min-width: 28%;
}

h1.SUBTITLE {   
 	margin: 24px 0 12px;
    font: 700 1.2rem/normal 'Noto Sans KR', sans-serif;
}

.SUBTITLE + .SUBMENU {width:100%;}