@charset "utf-8";

/*----------------------------------------------------------------------------
 * layout.css
 * ---------------------------------------------------------------------------
 * Author	: (주)플랜아이 http://plani.co.kr
 * ---------------------------------------------------------------------------
 * History
 * ---------------------------------------------------------------------------
 * 2018.11.01 : 최초작성_박서진
 * 2021.08 : 메인화면 개선 _KSK
 * -------------------------------------------------------------------------*/

body::after{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:0;
	background:#000;
	opacity:0;
	content:'';
	}
body.search::after {
	height:100%;
	opacity:0.55;
	}
#header {
	position:absolute;
	top:0;
	left:0;
	width:100%; 
	height:8rem;
	z-index:100; 
	}

#header > div {
	width:100%; 
	padding:0 7rem;
	}
#header > div::after {
	display:block; 
	clear:both; 
	content:'';
	}
#header .logo {
	position: absolute;
    left: 7rem;
    top: 0;
    z-index: 1;
	}
#header .logo a {
	position:relative;
	display:block;
	padding: 2.5rem 0;
	width: 29rem;
	height: 7rem;
	}
#header .logo a img{
	max-width: 100%;
	}
#header .logo a .logo-b{
	display: block;
	}
#header .logo a .logo-w{
	display: none;
	}
#gnb {
	position:absolute; 
	left:50%; 
	top:0;
	display:block;
	width:100%; 
	margin:0 auto; 
	transform:translateX(-50%); 
	-webkit-transform: translateX(-50%);
	text-align:center;
	}
/* #gnb::after {
	top: 8rem; 
	width: 300%; 
	height: auto; 
	background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #F9F9F9), color-stop(50%, #fff)); 
	background-image: linear-gradient(to right, #264B8A 50%, #F9F9F9 50%);
	position: absolute; left: 50%; 
	-webkit-transform: translateX(-50%); 
	transform: translateX(-50%); 
	z-index: -1; 
	-webkit-box-shadow: 0.25rem 0.25rem 0.25rem rgba(100, 100, 100, 0.15); 
	box-shadow: 0.25rem 0.25rem 0.25rem rgba(100, 100, 100, 0.15); 
	} */
#gnb li {
	
	}
#gnb .depth1 {
	position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 0rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    padding-left: 2rem;
    white-space: nowrap;
	}
#gnb .depth1 > li {
	display: inline-block;
    margin: 0 5rem;
    line-height: 5rem;
	}
#gnb .depth1 > li:first-child {
	margin-left:0;
	}
#gnb .depth1 > li > a {
	position: relative;
    height: 100%;
    display: block;
	line-height:8rem;
	color:#151515;
	font-size:2.1rem;
	font-weight:600;
	}
#gnb .depth1 > li > .depth2 { 
	position: absolute; 
	left: 0; 
	top:8rem; 
	width: 160rem; 
	height:0;
	left: 50%; 
	-webkit-transform: translateX(-50%); 
	transform: translateX(-50%); 
	font-size: 1.7rem; 
	text-align: center; 
	opacity: 0; 
    overflow:hidden; ;
	}

#gnb.menu .depth1 > li.active > .depth2{
	visibility: visible;
    overflow: visible;
    height: auto;
    opacity: 1;
    z-index: 10;
	}
#gnb .depth2{
    position: relative;
    min-height: 8rem;
    }
#gnb .depth2:before { 
	content: ''; 
	position: absolute; 
	left: 50%; 
	top: 0px;
	width: 300%; 
	height: auto; 
	border-top: 1px #ececec solid;
	background-color:rgba(255,255,255,1);
	-webkit-transform: translateX(-50%); 
	transform: translateX(-50%); 
	-webkit-box-shadow: 0.5rem 0.5rem 0.5rem rgb(100 100 100 / 50%); 
	box-shadow: 0.5rem 0.5rem 0.5rem rgb(100 100 100 / 50%); 
	z-index: -1; 
	}
#gnb .depth2 > li {
    position: relative;
    display: inline-block;
    margin: 2rem;
	line-height: 35px;
    text-align: center;
	}
#gnb .depth2 > li > a {
	position:relative;
	display: block;
    padding: 0.5rem;
    color: #000;
    font-weight: 400;
	}
#gnb .depth2 > li > a:hover {
	font-weight:600;
	letter-spacing: -0.1px;
	}
#gnb .depth2 > li > a:after{
	position:absolute;
	bottom:0.5rem;
	left:0;
	display: block;
	width: 100%;
	height: 1px;
	background-color: #000;
	}
#gnb .depth2 > li > a:hover:after{
	content: "";
	}
#gnb .depth2 > li > a > span {
	position:relative;
	}
#gnb .depth2 > li > a > span::after {
	content:''; 
	position: absolute; 
	bottom:-3px; 
	left:0;  
	width:100%; 
	height:1px; 
	background:#fff; 
	transform:scaleX(0);
	opacity:0; 
	}
#gnb.menu::after ,
#gnb .depth2:before{
	content:'';
	height:100%;
	}
#gnb .depth3 {
	display:none;
	}
#util {
    float: right;
	text-align: right;
	}
#util::after {
	display:block; 
	clear:both; 
	content:'';
	}
#util > * {
    display: inline-block;
    margin-left: 2rem;
    vertical-align: top;
	}
#util > div > a {
	float:left; 
	display:block; 
	line-height:8rem; 
	vertical-align:middle;
	}
#util .search-btn {
	display:none;
	padding:0;
	font-size:2.4rem;
	line-height: 7.5rem;
	}
#util .total-search .close-btn {
	position:absolute;
	display:none;
	height:0; 
	opacity:0; 
	overflow:hidden; 
	transition:all .4s; 
	color:#fff; 
	font-size:24px;
	z-index:1; 
	}
	
.total-search{
	line-height: 7.5rem;
	}
.search-box{
	position: relative;
	}	
.search-box input[type="text"]{
	width:19rem;
	height:3rem;
	padding-right: 3rem;
	background: none;
	border:0;
	border-bottom: 1px #151515 solid;
	line-height:3rem;
	font-size: 1.5rem;
	color: #151515;
	}
.search-box input::placeholder{
	color: #151515;
	}
.search-box button{
	position: absolute;
    right: -0.5rem;
    top: 0;
    height:7.5rem;
    color: #151515;
    font-size: 2.4rem;
	}
	
.all-menu { 
	position: relative; 
	top: 3rem; 
	display: block; 
	width: 25px; 
	height: 19px;
	}
.all-menu [class*="bar"] { 
	display: block;
	width: 100%; 
	height: 3px; 
	background: #151515; 
	position: absolute; 
	left: 0; 
	border-radius: 16%; 
	}
.all-menu .bar1 { 
	top: 0;
	}
.all-menu .bar2 { 
	top: 8px;
	}
.all-menu .bar3 { 
	top: 16px;
	}

#util .sns {
	width:36px; 
	height:36px; 
	margin:9px 0 9px 10px; 
	line-height:36px; 
	border-radius:50%; 
	text-align:center; 
	border:1px solid #47515d;
	}
#util .sns-f {
	margin-left:0;
	background:#336bb1; 
	border-color:#336bb1; 
	color:#fff; 
	font-size:2rem;
	}
#util .sns-y { 
	background:#e60012; 
	border-color: #fff; 
	font-size:2.5rem;
	}
#util .sns-y i {
	color: #fff;
	}
#util .eng {
	font-size:1.4rem; 
	font-weight:600;
	color:#151515;
	z-index: 1;
	}
#util .all-menu:hover .bar span {
	background:#2c518f;
	}
#util .sns:hover {
	border-color:#47515d; 
	color:#fff;
	}
#util .sns-f:hover {
	background:#2c518f;
	}
#util .sns-y:hover {
	background:#fff; 
	color:#e60012;
	}
#util .sns-y:hover i {
	color:#e60012;
	}


#aside-left{
	display: none;
	}
#aside-left:before{
	content: "";
	position:absolute;
	top:0;
	left:4rem;
	display: block;
	width: 1px;
	height: 29%;
	background: rgba(255,255,255,0.2);
	}
#aside-left:after{
	content: "";
	position:absolute;
	bottom:0;
	left:4rem;
	display: block;
	width: 1px;
	height: 29%;
	background: rgba(255,255,255,0.2);
	}
#aside-left .sns{
	display:block;
	width: 4rem;
	height: 4rem;
	margin:1rem 0;
	border-radius: 50rem;
	line-height: 4rem;
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	border: 1px #fff solid;
	}
#aside-left a.sns-f:hover{
	background-color: #1648AD;
	border: 1px #1648AD solid;;
	}
#aside-left a.sns-y:hover{
	background-color: #E52C26;
	border: 1px #E52C26 solid;
	}
#aside-left .aside-rotate{
	position: absolute;
    left: 2rem;
    top: 50%;
    display: inline-block;
    padding-top:11rem;
    transform: translateY(-50%);
    }
#aside-left .aside-rotate .aside-deg .tit,
#aside-left .aside-rotate .aside-museum{
	display: block;
	margin: 4rem 0 0 0.5rem;
	-webkit-transform: ranslateY(-50%) rotate(270deg);
	-moz-transform: ranslateY(-50%) rotate(270deg);
	-ms-transform: ranslateY(-50%) rotate(270deg);
	-o-transform: ranslateY(-50%) rotate(270deg);
	transform: translateY(-50%) rotate(270deg);
	float: left;
	}
#aside-left .aside-rotate .aside-deg .tit{
	
	}
#aside-left .aside-rotate .aside-museum{
	width: 25rem;
	height: 25rem;
	margin: 10rem 0 0 0.5rem;
	padding-top: 0.5rem;
	color: #fff;
	}
#aside-left .aside-rotate .aside-museum:after{
	content: "";
    position: absolute;
    top: 1.5rem;
    right: 6rem;
    display: block;
    width: 1px;
    height: 18%;
    background: rgba(255,255,255,0.2);
	-webkit-transform: ranslateY(-50%) rotate(270deg);
	-moz-transform: ranslateY(-50%) rotate(270deg);
	-ms-transform: ranslateY(-50%) rotate(270deg);
	-o-transform: ranslateY(-50%) rotate(270deg);
    transform: translateY(-50%) rotate(270deg);
	}
#aside-left .aside-rotate  .aside-museum .museum-link{
    display: block;
	}
#aside-left .aside-rotate  .aside-museum .museum-link i{
	margin-left: 1rem;
	}


/* #header.active */
#header.active{
	background-color: #fff;
	}
#header.active .logo a .logo-b{
	display: block;
	}
#header.active #gnb .depth1 > li > a {
	color: #151515;
	}
#header #gnb .depth1 > li > a > span{
	display:block;
	}
#header.active #gnb.menu .depth1 > li.active > a > span:before{
	content: "";
	position:absolute;
	top: 2rem;
	right:-1.5rem;
	display: block;
	width: 7px;
	height: 7px;
	background-color: #F15800;
	border-radius: 50rem;
	}
#header.active #gnb.menu .depth1 > li.active > a > span:after{
	content: "";
	position:absolute;
	bottom:0;
	left:0;
	display: block;
	width:100%;
	height: 4px;
	background-color: #F15800;
	}
#haeder.active #util{
	color: #151515;
	}
#header.active .search-box input[type="text"]{
	color: #151515;
	border-bottom: 1px #151515 solid;
	}
#header.active .search-box input::placeholder{
	color: #151515;
	}
#header.active .search-box button{
	color: #151515;
	}
#header.active #util .search-btn,
#header.active #util .eng{
	color: #151515;
	}
#header.active .all-menu [class*="bar"] { 
	background: #151515; 
	}
	
/* #header.active */


/* all menu */
#gnb_m{
	display: none;
	}
body.all-m .all-menu,
body.all-m #header .logo, 
body.all-m #header #gnb, 
body.all-m #header #util{
	display:none;
	}
body.all-m{
	position:fixed;
	height:100vh;
	overflow:hidden;
	}	
body.all-m #header {
	position:fixed;
	height:100vh;
	overflow:hidden;
	border-bottom:0;
	background-color:#343943;
	background-image:url("/images/custom/web/kor/main/img-allM.svg"); 
	background-repeat:no-repeat;
	background-position: 100% 100%;
	}
	
body.all-m #header #gnb_m {
	position:relative;
	display:block;
	height:100vh;
	padding-top: 10rem;
	color: #fff;
	}
body.all-m #header #gnb_m .depth1{
	display: flex;
	max-width: 1440px;
	
	height:calc(100% - 20rem);
	margin: 0 auto;
	}
body.all-m #header #gnb_m .depth1 > li {
	position: relative;
    display: block;
    width: 20%;
    margin: 0;
    padding: 0.5rem 4rem;
    text-align: left;
    line-height: normal;
	}
body.all-m #header #gnb_m .depth1 > li::after {
	position:absolute; 
	left:0; 
	bottom:0; 
	width:1px; 
	height:100%; 
	background:#4B545D; 
	opacity:.5; 
	content:'';
	z-index: -1;
	}
body.all-m #header #gnb_m .depth1 > li > a {
	position: relative;
    display: block;
    padding: 0 0 4rem;
    vertical-align: top;
    font-size: 2.3rem;
    height: auto;
    line-height: inherit;
    word-break: keep-all;
    font-weight: 600;
	}
body.all-m #header #gnb_m .depth1 > li > a::after {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:#3a5883;
	}
body.all-m #header #gnb_m .depth2 {
	height: auto;
    padding: 0;
    opacity: 1;
    width: auto;
    min-height: auto;
    background: none;
	}
body.all-m #header #gnb_m .depth2 > li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0.5rem 0;
    background: none;
    float: none;
    text-align: left;
	line-height: inherit;
	}
body.all-m #header #gnb_m .depth2 > li > a {
	position: relative;
    display: inline-block;
    padding:0.5rem 0;
    font-size: 1.8rem;
    font-weight: 200;
    background: none;
    border: none;
	}
body.all-m #header #gnb_m .depth2 > li > a:hover{
	letter-spacing: 0;
}
body.all-m #header #gnb_m .depth2 > li > a:hover:before{
	content: "";
	position: absolute;
	left: -4.25rem;
	top:1.5rem;
	display: block;
	width: 7px;
	height: 7px;
	background-color: #EE1010;
	border-radius: 50rem;
	z-index: 5;
	}
body.all-m #header #gnb_m .depth3{
	display: none;
	}

body.all-m #header #gnb_m .depth1 > li.active > a::after {
	background:#fff;
	}
	
body.all-m #util_m{
	position: absolute;
	top: 0;
	right:0;
	display: block;
	height: 7.5rem;
	text-align: right;
	}
body.all-m #util_m > *{
	display: inline-block;
	margin-left:2rem;
	line-height: 7.5rem;
	color:#fff;
	vertical-align: top;
	}
body.all-m #util_m .eng{
	display: none;
	font-size: 1.4rem;
    font-weight: 600;
	}
body.all-m #util_m .close-btn{
	font-size:24px;
	padding: 0;
	}
/* #contents {overflow: hidden;} */
/* footer */
#footer {position:relative; background:#3F4858; padding:5rem 0 8rem;}
#footer .util {margin-bottom:4rem;}
#footer .util::after {display:block; clear:both; content:''}
#footer .util li {position:relative; float:left; padding-left:1rem; margin-left:1rem}
#footer .util li:first-child {padding-left:0; margin-left:0}
#footer .util li::before {position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:10px; background:#5e6b76; content:''}
#footer .util li:first-child::before{content: none;}
#footer .util li a {font-weight:400; color:#bbb;}
#footer .util li.color-d a {color: #FF832D;}
#footer address, #footer .copyright {font-size:1.6rem; font-weight:300; color:#bbb;}
#footer .copyright {margin-top:8px}
#footer address br, #footer .copyright br{display: none;}
#footer .float-left {position: relative; width:calc(100% - 430px)}
#footer .wa-mark  {position: absolute; top: 0; right: 5rem;}
#footer .float-right {position:relative; width:430px;}
#footer .banner {margin-bottom:7px}
#footer .banner .bx-wrapper:after {display:block;clear:both;content:''}
#footer .banner .bx-viewport {width:330px !important; float:right; height:38px}
#footer .banner .bx-controls {position:relative; float:left; width:75px; height: 25px; }
#footer .banner .bx-controls a {display:inline-block; width:18px; height:18px; color:#fff;     line-height: 1;}
#footer .banner .bx-controls a > span {display: block; height: 1px;  text-indent: -9999px;}
#footer .banner .bx-controls-direction a {position:absolute;}
#footer .banner .bx-controls-direction a.bx-prev {left:0}
#footer .banner .bx-controls-direction a.bx-next {right:0}
#footer .banner .bx-controls-auto{position:absolute; left:18px; width: 36px;}
#footer .banner .bx-controls-auto-item {display:inline-block; height: 18px; vertical-align:top; overflow: hidden;}

#footer .banner .bx-controls a::before {font-family:'xeicon'; font-size:1.8rem}
#footer .banner .bx-controls a.bx-prev::before {content:'\e93c'}
#footer .banner .bx-controls a.bx-next::before {content:'\e93f'}
#footer .banner .bx-controls a.bx-stop::before {content:'\ea3b'}
#footer .banner .bx-controls a.bx-start::before {content:'\ea3e'}

#footer .banner li {width:auto !important; margin-right:10px}
#footer .banner li a {display: block;}
#footer .banner li a:focus {outline: 2px solid red}
#footer .related {
	position:relative;
	height:4rem; 
	float:right; 
	z-index:70;
	}
#footer .related .related-btn {
	display:block; 
    width: 25rem;
	padding:1rem 2rem; 
	color:#e3e3e3; 
	font-size:1.4rem; 
	font-weight:200;
	border: 1px #e3e3e3 solid;
    border-radius: 5px;
    text-align: left;
	}
#footer .related .related-btn i {float:right;}
#footer .related ul {
	position:absolute; 
	left:0; 
	bottom:4rem; 
	width:100%; 
	height:0; 
	visibility:hidden; 
	overflow:hidden; 
	background:#2c343b; 
	transition:all .5s;
	}
#footer .related:hover .related-btn,
#footer .related:focus .related-btnl,
#footer .related.active .related-btn {
	background: #fff;
	color: #555;
	}
#footer .related:hover ul,
#footer .related:focus ul,
#footer .related.active ul {
	visibility:visible; 
	overflow-y:auto; 
	height:20rem;
	background: #fff;
	border:1px #ddd solid;
	}
#footer .related ul li {
	line-height:initial
	}
#footer .related ul li a {
	display:block;
	padding:10px;  
	color:#555;
	}
#footer .related ul li a:hover {text-decoration:underline;}
#footer .top-btn {
	position:absolute; 
	right:1rem; 
	top:-3rem; 
	display:block; 
	width:6rem; 
	height:6rem; 
	padding:1.8rem 0; 
	background:#fff; 
	color:#151515; 
	font-size:2.2rem;
	text-align:center; 
	z-index:30;
	}

.sns-box{
	position:absolute;
	top:7rem;
	right:0;
	display: inline-block;
	}
.sns-box .sns{
	display:inline-block;
	width: 4rem;
	height: 4rem;
	margin:0 0.25rem;
	border-radius: 50rem;
	background: #ddd;
	line-height: 4rem;
	text-align: center;
	font-size: 2.4rem;
	color: #fff;
	}
.sns-box .sns-f{
	background-color: #1648AD;
	}
.sns-box .sns-y{
	background-color: #E52C26;
	}
.sns-box .mark{
	position:relative;
	bottom:0.5rem;
	margin-left: 1rem;
	}

@media(max-width:1600px){
	#gnb .depth1 > li{
		margin: 0 2.5rem;
		}
	#gnb .depth2 > li{
		z-index: 1;
		}
	}
@media(max-width:1400px){
	
	#aside-left{
		display:none;
		}
	#header > div{
		padding: 0 1.5rem;
		}
	#header .logo{
		left: 15px;
	}
	#header .logo a{
		width: 22rem;
	}
	#util{
		padding-right: 15px;
		}
	#util .search-btn {display: block;}
	.total-search {position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; z-index:1; height:0; opacity:0; padding:0; overflow:hidden;visibility:hidden;display:none}
	.total-search::after {position:absolute; top:0; left:0; width:100vw; height:100%; background:#0c3164; content:''}
	.total-search > div {position:relative; width:90% margin:auto; z-index:1; text-align:center}
	.total-search .search-box {
		position:relative; 
		margin: 5rem 0;
		}
	.total-search .search-box::after {
		position:absolute; 
		left:50%; 
		bottom:0; 
		width:100%; 
		height:1px; 
		background:#fff; 
		opacity:.5; 
		content:'';
		transform: translateX(-50%);
		}
	.total-search input[type="text"] {width:100%;  padding:0 68px; background:transparent; border:0; text-align:center; color:#fff; height:68px; font-weight:200}
	.total-search input[type="text"]::-webkit-input-placeholder {color:#fff}
	.total-search input[type="text"]::-ms-input-placeholder {color:#fff}
	.total-search input[type="text"]::-moz-placeholder {
		color:#fff;
		}
	.total-search button {position:absolute; right:0; top:0; width:68px; height:67px; line-height:68px; z-index:1; background:#0c3164;}
	.total-search i {color:#fff;font-size:2.6rem}
	.total-search .close-btn {line-height:inherit !important;}
	
	body.search .total-search {
		display:block;
		height:auto; 
		padding:5rem; 
		opacity:1; 
		overflow:visible;
		visibility:visible;
		transition:all .4s;
		transition-delay:.4s;
		}
	body.search .total-search .close-btn {
		opacity:1 !important;
		height:auto !important;
		display:block !important;
		}
}

@media(max-width:1262px){
	#footer .util li {
		margin-left:11px;
		padding-left:11px;
		}
}
@media(max-width:1200px){
	
	#gnb{
		display: none;
		}
	#util .header-eng{
		display: none;
		}
	.all-menu{
		top: 2.7rem;
		}
	#header > div{
		padding: 0;
		}
	body.all-m{
		position:fixed;
		overflow: hidden;
		}
	body.all-m .header_wrap #header,
	body.all-m .header_wrap #aside-left{
		position:fixed;
		}
	body.all-m .header_wrap.active #aside-left{
		position: relative;
	    display: block;
	    width: 100%;
	    height: auto;
	    min-height: 100vh;
	    background: #1A325B;
	    z-index: 50;
		}
    body.all-m #header{
	    left: auto;
	    right: 0;
	    width: calc(100% - 8rem);
	    max-height: 100vh;
	    background-color: #fff;
	    background-image: none;
	    overflow-y: hidden;
		}
	body.all-m #header #gnb_m{
		padding-top:8rem;
		color: #333;
		}
	body.all-m #header #gnb_m .depth1{
		display: block;
		height:100%;
		overflow-y:auto;
		}
	body.all-m #header #gnb_m .depth1 > li{
		width: 100%;
		padding: 0;
		}
	body.all-m #header #gnb_m .depth1 > li::after{
		content: none;
		}
	body.all-m #header #gnb_m .depth1 > li > a{
	    height: 50px;
	    padding: 0 2rem;
	    line-height: 50px;
	    color: #151515;
	    font-size: 1.8rem;
	    font-weight: 400;
	    background: #E6EBF1;
		}
	body.all-m #header #gnb_m .depth1 > li > .depth2{
		display: none;
	}
	body.all-m #header #gnb_m .depth2 > li{
		padding: 0;
	}
	body.all-m #header #gnb_m .depth2 > li  > a{
		position:relative;
	    padding-left:3rem;
	}
	body.all-m #header #gnb_m .depth2 > li  > a:before{
		content: "";
	    position: absolute;
	    left: 1.5rem;
	    top: 1.5rem;
	    display: block;
	    width: 5px;
	    height: 5px;
	    background-color: #F1F1F1;
	    border-radius: 100px;
	}
	body.all-m #header #gnb_m .depth2 > li > a:hover:before{
	    left: 1.5rem;
	    top: 1.5rem;
	    display: block;
	    width: 5px;
	    height: 5px;
		background-color: #EE1010;
	    border-radius: 100px;
	}
	
	/* js addclass active */
	body.all-m #header #gnb_m .depth1 > li.active > a{
		background: #3970CE;
		color: #fff;
	}
	body.all-m #header #gnb_m .depth1 > li.active > .depth2{
		display: block;
	}
	
	/* js addclass active */
	
	body.all-m #util_m{
		right: 15px;
	}
	body.all-m #util_m .eng,
	body.all-m #util_m .close-btn{
		display:inline-block;
		color: #333;
		}
		
	#footer{
		padding: 5rem 0 13rem;
		}
	#footer .related .related-btn{
		margin: 0 auto;
		}
	#footer .related ul{
		width: 25rem;
		left: 50%;
		transform: translateX(-50%);
		}
	#footer .top-btn{
		left: 50%;
		transform: translateX(-50%);
		}
	#footer .wa-mark,
	#footer .mark{
		display: none;
		}
	.sns-box{
		left: 50%;
		transform: translateX(-50%);
		top:9rem;
		}
}
@media(max-width:1026px){
	
	#util .eng{display: none;}
	.all-menu{
		top: 2.5rem;
		}
	#footer .banner {display:none}
	#footer .float-left, #footer .float-right {float:none;width:100%;text-align:center}
	#footer .util {text-align:center}
	#footer .util li {float:none;display:inline-block}
	#footer .related {float:none;margin:2rem auto 0; z-index: 10;}
	#footer .related p {width:100%}
}
@media(max-width:768px){
	body.all-m #header #gnb .depth1 > li > a,
	body.all-m #header #gnb .depth2 > li > a {
		padding:0 2rem;
		}
	#aside-left:before,
	#aside-left:after{
		height: 25%;
		}

	#header .logo a {
		width: 230px;
		height: 8rem;
		}
	#footer{
		padding: 7rem 2rem 13rem;
		}
	#footer .util{
		margin-bottom: 3rem;
		}
	#footer .util li{
		margin-bottom: 1.25rem;
		}
	#footer .util li a{
		display:block;
		font-size: 16px;
		font-weight: 300;
		}
	#footer address, 
	#footer .copyright{
		font-size: 14px;
		word-break: keep-all;
		line-height: 1.5;
		}
	#footer address{
		margin-bottom: 1.5rem;
		}
	#footer address br,
	#footer .copyright br{
		display: block;
		}
	#footer .related .related-btn{
		width:70%;
		font-size: 15px;
		border: 1px #BEBEBE solid;
		}
	#footer .related ul{
		width:70%;
		}
	.sns-box .sns{
		width: 40px;
		height: 40px;
		margin: 0 0.25rem;
		line-height: 40px;
		font-size: 24px;
		}
	}
@media(max-width:560px){
	#header .logo a img {
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		max-width:100%;
	}
}
@media(max-width:455px){
	#header .logo a{
		width: 200px;
	    height: 8rem;
	    padding: 0;
	}
	
	/* #footer .util li::before {
		display:none;
	} */
	body.all-m #header #gnb .depth2 > li > a {
		padding:1.2rem 2rem;
		height:auto;
		line-height:inherit;
	}
	#util > div > a {
		margin-left: 5px;
	}
	
	#util > * {	
		margin-left: 0;
		}
	#util > .all-menu {
		margin-left: 10px;
		}
	#util .eng{
		font-size: 1.8rem;
	}
	#util .sns {
	    width: 25px;
	    height: 25px;
	    margin: 15px 0 15px 5px;
	    line-height: 25px;
	}
	#util .sns-y i {
	    line-height: 1.2;
	}
}