@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR);

html{ height:100%; padding:0; margin:0; font-family : 'Noto Sans KR', sans-serif, 'MalgunGothic' }
body{ height:100%; padding:0; margin:0; }
a{ color : inherit; text-decoration : none }

.WRAPPER{
	position : relative;
	width : 1100px;
	margin : 0 auto;
}

header{
}
header > .WRAPPER{
}
header > .WRAPPER > h1{
	position : fixed;
	top : 15px;
	left : 50%;
	width : 250px;
	height : 50px;
	padding : 0;
	margin : 0 0 0 -550px;
	background-image : url("/images/ci_60.png");
	background-repeat : no-repeat;
	background-size : auto 40px;
	background-position : left;
	z-index : 1200;
	transition : background-image .3s ease-in-out
}
header > .WRAPPER > h1 > #MAINLOGO{
	display : block;
	width : 250px;
	height : 40px;
	font-size : 0
}
header > .WRAPPER > h1 > #MAINLOGO > img{
	height : 100%
}

nav#MAINMENU{
	position : fixed;
	top : 0;
	right : 0;
	left : 0;
	height : 70px;
	background-color : rgba(33,44,66,.6);
	z-index : 1100;
	overflow : hidden;
	transition :
		height .25s ease-in-out,
		background-color .3s ease-in-out
}
nav#MAINMENU > .WRAPPER{
}
nav#MAINMENU > .WRAPPER > #MOBILE-CALLMENU{
	display : none
}
nav#MAINMENU > .WRAPPER > ul{
	padding : 0;
	margin : 0;
	text-align : right;
	font-size : 0;
}
nav#MAINMENU > .WRAPPER > ul > li{
	display : inline-block;
	width : 140px;
	list-style : none;
	vertical-align : top;
}
nav#MAINMENU > .WRAPPER > ul > li > a{
	display : block;
	width : 160px;
	height : 70px;
	font : normal 15px/70px 'Noto Sans KR', sans-serif, 'MalgunGothic';
	text-align : center;
	color : #E9E9E9;
	transition : color .3s ease-in-out
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a{
	width : 130px;
	height : 50px;
	margin : 10px 15px;
	border-radius : 25px;
	line-height : 50px;
	color : #F66;
	transition : background-color .3s ease-in-out
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a{
	color : #F66
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a:hover{
	background-color : #F66;
	color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a:hover{
	background-color : #F66
}

nav#MAINMENU > .WRAPPER > ul > li > ul{
	padding : 16px 0;
	margin : 0 0 0 52px;
}
nav#MAINMENU > .WRAPPER > ul > li > ul:before{
	content : '';
	display : block;
	width : 30px;
	height : 2px;
	margin : 0 0 16px 0;
	background-color : #789;
	transition : background-color .3s ease-in-out
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li{
	margin-bottom : 12px;
	list-style : none;
	text-align : left
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li > a{
	display : block;
	font : normal 13px/normal 'Noto Sans KR', sans-serif, 'MalgunGothic';
	color : #789;
	transition : color .3s ease-in-out
}

nav#MAINMENU:hover{
	height :320px;
	padding-bottom:10px;
	background-color : rgba(33,44,66,.75);
	transition :
		height .3s ease-in-out,
		background-color 5s linear
}
nav#MAINMENU > .WRAPPER > ul > li:hover > ul:before{
	background-color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li:hover > ul > li > a{
	color : #FFF
}

header.REVERSE > .WRAPPER > h1{
	/*background-image : url("/images/ci_60_color.png")*/
}

nav#MAINMENU.REVERSE{
	background-color : rgba(33,44,66,.75);
	/*
	background-color : #FFF;
	border-bottom : solid 1px #CCC;
	*/
}



/*
footer{
	padding-top : 70px;
	background-image : url("/images/footer-bg.png");
	background-repeat : no-repeat;
	background-size : cover;
	background-position : top;
}
footer > nav{
	display : none;
	padding : 24px 0 160px 0;
	background-image : url("/images/footer-bg.png");
	background-size : cover;
	background-position : bottom
}
footer > nav > ul{
	padding : 0;
	margin : 0;
	font-size : 0;
	text-align : center
}
footer > nav > ul > li{
	display : inline-block;
	width : 200px;
	list-style : none;
	text-align : left;
	vertical-align : top
}
footer > nav > ul > li:first-child{
	margin-left : 80px
}
footer > nav > ul > li > a{
	display : block;
	font : 500 15px/normal NanumBarunGothic
}
footer > nav > ul > li > a:after{
	content : '';
	display : block;
	width : 36px;
	height : 2px;
	margin : 16px 0;
	background-color : #69C
}
footer > nav > ul > li > ul{
	padding : 0;
	margin : 0
}
footer > nav > ul > li > ul > li{
	margin-bottom : 6px;
	font : normal 11px/normal Dotum;
	color : #666;
	list-style : none;
}

footer > .FOOTER-INFO{
	width : 960px;
	padding : 36px 0;
	overflow : hidden;
}
footer > .FOOTER-INFO > img{
	float : left;
	height : 26px;
}
footer > .FOOTER-INFO > .GOTO-LINKS{
	margin-left : 210px;
	font-size : 0
}
footer > .FOOTER-INFO > .GOTO-LINKS > a{
	font-size : 12px;
	color : #444
}
footer > .FOOTER-INFO > .GOTO-LINKS > a:after{
	content : '|';
	color : #CCC;
	margin : 0 12px;
}
footer > .FOOTER-INFO > .GOTO-LINKS > a:last-child:after{
	display : none
}
footer > .FOOTER-INFO > address{
	margin : 12px 0 0 210px;
	font : normal 11px/normal Dotum;
	color : #666
}
footer > .FOOTER-INFO > address > span{
	margin-right : 16px;
}
footer > .FOOTER-INFO > .COPYRIGHT{
	paddng : 0;
	margin : 12px 0 0 210px;
	font : normal 12px/normal Dotum;
	color : #666
}
*/

footer{
	border-top : solid 1px #EEE;
	overflow : hidden
}
footer > .FOOTER-INFO{
	padding : 32px 0;
	overflow : hidden
}
footer > .FOOTER-INFO > .FOOTER-LOGO{
	float : left;
	width : 349px;
	height: 160px;
	border-right : solid 1px #EEE;
	text-align : center
}
footer > .FOOTER-INFO > .FOOTER-LOGO > img{
	height : 46px
}
footer > .FOOTER-INFO > address{
	float : left;
	width : 460px;
	height: 160px;
	padding : 0 20px;
}
footer > .FOOTER-INFO > address > span{
	display : block;
	margin-bottom : 4px;
	font : normal 14px/normal 'Noto Sans KR', sans-serif;
	color : #333
}
footer > .FOOTER-INFO > address > span > strong{
	display : inline-block;
	width : 120px;
	margin-right : 20px;
	font-size : 16px;
	color : #000;
	text-align : right
}
footer > .FOOTER-INFO > .GOTO-LINKS{
	float : left;
	width : 229px;
	height: 160px;
	padding : 0 0 0 20px;
	border-left : solid 1px #EEE
}
footer > .FOOTER-INFO > .GOTO-LINKS > a{
	display : block;
	width : 150px;
	padding : 12px;
	margin-bottom : 6px;
	background-color : #263E67;
	color : #FFF;
	font : normal 12px/normal Dotum
}
footer > .COPYRIGHT{
	padding : 16px;
	background-color : #ADB7C0;
	color : #FFF;
	text-align : center;
	font : normal 13px/normal 'Noto Sans KR', sans-serif
}






/* 서브페이지 공통 스타일 */
.SUBHEAD{
	height : 280px;
	padding : 0;
	margin : 0;
	background-position : center;
	background-size : cover;
	background-repeta : no-repeat
}

.PATH-NAVIGATOR{
	padding : 10px 0;
	border-bottom : solid 1px #DDD;
	text-align : left;
	font-size : 0
}
.PATH-NAVIGATOR > .WRAPPER{
	width : 900px
}
.PATH-NAVIGATOR a{
	color : #999;
	font : normal 11px/normal Dotum
}
.PATH-NAVIGATOR a:after{
	content : '/';
	margin : 0 8px;
	font-size : 10px
}
.PATH-NAVIGATOR a:last-child{
	color : #333;
	font-weight : bold
}
.PATH-NAVIGATOR a:last-child:after{
	display : none
}

h1.SUBTITLE{
	padding : 0;
	margin : 48px 0;
	text-align : center;
	font : 700 27px/normal NanumBarunGothic;
	letter-spacing: 6px;
	background-position : center;
	background-size : cover;
	background-repeta : no-repeat
}
h1.SUBTITLE:after{
	content : '';
	display : block;
	width : 80px;
	height : 4px;
	margin : 24px auto;
	background-color : #06C;
}

.SUBTITLE + .SUBMENU{
	width : 1100px;
	margin : 20px auto;
	font-size : 0;
}

.SUBTITLE + .SUBMENU > span{
	display : inline-block;
	text-align : center;
	border : solid 1px #DDD;
	margin : 2px;
	color : #666;
	transition : background-color .3s ease-in-out;
	box-sizing : border-box
}
.SUBTITLE + .SUBMENU > span > a{
	display : block;
	padding : 20px 0;
	font : normal 15px/normal 'Noto Sans KR', sans-serif, 'MalgunGothic';
	cursor : pointer;
}
.SUBTITLE + .SUBMENU > span.ON{
	background-color : #08C;
	border-color : #08C;
	color : #FFF
}
.SUBTITLE + .SUBMENU > span:not(.ON):hover{
	background-color : #08C;
	border-color : #08C;
	color : #FFF
}











.PAGING{ padding:12px 0; font-size:0; text-align:center; -ms-user-select:none; -webkit-user-select:none }
.PAGING > a{ display:inline-block; min-width:20px; height:20px; padding:3px 2px 1px 2px; margin:2px; border:solid 1px #CCC; color:#999; text-align:center; vertical-align:middle; font:500 16px/normal NanumBarunGothic; cursor:pointer }
.PAGING > a:hover{ border-color:#06C; color:#06C }
.PAGING > a.ON{ background:#06C; border-color:#06C; color:#FFF; cursor:default }
.PAGING > a.GOTO{ font-size:0; background:url(/images/iconset_pagenavigator.png) no-repeat }
.PAGING > a.GOTO.F{ background-position:0 0 }
.PAGING > a.GOTO.P{ background-position:-24px 0 }
.PAGING > a.GOTO.N{ background-position:-48px 0 }
.PAGING > a.GOTO.L{ background-position:-72px 0 }
.PAGING > a.GOTO.F:hover{ background-position:-96px 0 }
.PAGING > a.GOTO.P:hover{ background-position:-120px 0 }
.PAGING > a.GOTO.N:hover{ background-position:-144px 0 }
.PAGING > a.GOTO.L:hover{ background-position:-168px 0 }