@charset "utf-8";
/* ================================================================== */
/* Name	: common.css
/* Script : Font, Layout CSS
/* Author : Design Geulggol
/* Date	: 2017-10-10
/* ================================================================== */

/* ----------------------------- */
/* font
/* ----------------------------- */ 
@font-face{
	font-family:'NotoT';
	font-style: normal;
	font-weight: 100;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Thin.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Thin.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Thin.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Thin.woff') format('woff');
}
@font-face{
	font-family:'NotoL';
	font-style: normal;
	font-weight: 100;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Light.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Light.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Light.woff') format('woff');
}
@font-face{
	font-family:'NotoDL';
	font-style: normal;
	font-weight: 100;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-DemiLight.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-DemiLight.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-DemiLight.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-DemiLight.woff') format('woff');
}
@font-face{
	font-family:'NotoR';
	font-style: normal;
	font-weight: 300;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Regular.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Regular.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Regular.woff') format('woff');
}
@font-face{
	font-family:'NotoM';
	font-style: normal;
	font-weight: 500;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Medium.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Medium.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Medium.woff') format('woff');
}
@font-face{
	font-family:'NotoB';
	font-style: normal;
	font-weight: 700;
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Bold.eot');
	src:url('//storage.ggad.co.kr/css/font/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Bold.woff2') format('woff2'),
	url('//storage.ggad.co.kr/css/font/NotoSans-Bold.woff') format('woff');
}

/* 한줄 말줄임 */
.text-ellipsis {
	width: 100%;
	white-space: nowrap;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 여러줄 말줄임 (3줄기준) */
.multi-ellipsis {
	width: 100%;
	height: 3.5em;
	white-space: normal;
	line-height: 120%;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----------------------------- */
/* Responsive
/* ----------------------------- */
/* Layout Max Size : 1800px
/* Tablet Landscape ~ Desktop : 980px < Screen ≤ 1440px
/* Tablet Portrait ~ Landscape : 768px ≤ Screen ≤ 980px
/* Mobile Portrait ~ Landscape : 480px ≤ Screen < 768px (landscape)
/* Mobile Landscape : 320px  ≤ Screen < 480px (portrait)
/* ----------------------------- */


/* Desktop */
.visibleM { display: none !important; }		 /* Visible Mobile */
.visibleT { display: none !important; }		 /* Visible Tablet */
.visibleD { display: inherit !important; }		/* Visible Desktop */

.hiddenM {}		 											/* Hidden Mobile */
.hiddenT {}		 											/* Hidden Tablet */
.hiddenD { display: none !important; }		 /* Hidden Desktop */

/* Tablet Portrait  ~ Desktop */
@media screen and (min-width:768px) and (max-width:1070px) {
	.visibleD { display: none !important; }
	.visibleT { display: inherit !important; }
	.visibleM {}

	.hiddenD { display: inherit !important; }
	.hiddenT { display: none !important; }
	.hiddenM {}
}

/* Mobile Landscape ~ Tablet Portrait */
@media screen and (max-width:767px) {
	.visibleD { display: none !important; }
	.visibleT {}
	.visibleM { display: inherit !important;}

	.hiddenD { display: inherit !important; }
	.hiddenT {}
	.hiddenM { display: none !important;}
}


/* ----------------------------- */
/* Basic
/* ----------------------------- */
* { -webkit-box-sizing:border-box; box-sizing:border-box; }
html, body {
	font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
body {
	font-family: 'RobotoR', 'NotoDL', 'malgun gothic', 맑은고딕, 'Dotum', 돋움, 'Arial', 'sans-serif';
    font-size: 1rem;
	font-weight: 400;
    line-height: 1.5;
    color: #444;
}
h1, h2, h3, h4, h5, h6 { font-weight:normal; line-height: 1.2em;}


.hover,
a.hover:hover,
a.hover:focus,
a.hover:active,
.hover a:hover,
.hover a:focus,
.hover a:active {
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

a { color: inherit; } 

.sub-margin-l200 {
    margin-left: 200px !important;
}
.sub-margin-t10 {
    margin-top: 10px !important;
}
.sub-margin-t30 {
    margin-top: 30px !important;
}
.sub-margin-b20 {
    margin-bottom: 20px !important;
}
.sub-margin-b40 {
    margin-bottom: 40px !important;
}
.sub-margin-r10 {
    margin-right: 10px !important;
}
.sub-margin-r15 {
    margin-right: 15px !important;
}


/* ----------------------------- */
/* Common Layout
/* ----------------------------- */
#accessibility {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
 }
#accessibility a {
    position: absolute;
    top: 0;
    left: -9999px;
    width: 100%;
    height: 50px;
    font-size: 0.85em;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    z-index:  -1;
}
#accessibility a:focus, #accessibility a:active {
    top: 0;
    left: 0;
    padding: 12px 0 15px;
    text-align: center;
}


/* ----------------------------- */
/* Layout style
/* ----------------------------- */
#wrap {
	position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#container {
    overflow: hidden;
}

.inner {
    max-width: 1400px;
    padding: 6.25rem 3.125rem;
    margin: 0 auto;
}
.inner2 {
    max-width: 1400px;
    margin: 0 auto;
}


/* ----------------------------- */
/* Header
/* ----------------------------- */
#header {
    /*position: relative;*/
    max-width: 1400px;
	width: 96%;
    height: 90px;
	margin: auto;
}
#header::after {
    content: '';
    display: block;
    clear: both;
}
.logo {
    /* position: absolute;
    top: 30px;
    left: 60px; */
    width: 100%;
	margin-top: 26px;
}
.logo img {
    width: 126px;
}

.top_menu{
	width: 100%;
}
.top_menu > ul{
	display: flex;
	justify-content: space-between;
}
.top_menu > ul > li:nth-child(2){
	width: 69%;
}

/* ----------------------------- */
/* Header > Navigation
/* ----------------------------- */
#nav {
    /*float: left;*/
    width: 100%;
    padding-top: 30px;
    margin: 0 auto;
}
#nav ul {
	/*max-width: 800px;*/
	margin: 0 auto;
}
#nav ul:after {
    content: '';
    display: block;
    clear: both;
}
#nav ul  li {
	float: left;
    width: 20%;
}
#nav  ul  > li {
	position: relative;
	font-size: 1.125rem;
    text-align: center;
}
#nav ul > li > a {
	color: #000;
	display: inline-block;
}
#nav ul > li > a:hover {
	color: #6C00F7;
}
#nav ul > li > a > span{
	background-color: transparent;
	height: 4px;
	width: 4px;
	display: inline-block;
	vertical-align: top;
	border-radius: 4px;
}
#nav ul > li > a:hover > span{
	background-color: #6C00F7;
	height: 4px;
	width: 4px;
	display: inline-block;
	vertical-align: top;
	border-radius: 4px;
}
#nav li li a{
	font-size: 1.125rem;
	color: #fff;
}
#nav li li a:hover {
	color: #CFB6FF;
	text-decoration:underline;
}
#nav ul ul {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	/*margin: 60px 0;*/
    padding: 80px 0;
	z-index: 140;
	display: none;
}
#nav li li {
	width: 100%;
	margin: 5px 0;
	text-align: center;
	font-size: 0.8em;
	color: #fff;
 }
#header .util {
    /* position: absolute;
    top: 36px;
    right: 60px; */
    width: 100%;
    text-align: right;
	margin-top: 30px;
}
#header .util a {
    display: inline-block;
    height: 24px;
    text-align: right;
	margin-left: 15px;
}
#header .util a:first-child{
	margin-left: 0;
}
#header .util a span {
    /* position: absolute; */
    font-size: 0.9375rem;
    color: #b5b5b5;
}
#header .util a > img{
	vertical-align: text-bottom;
}
.login-bg {
	position: relative;
}


.nav_bg	{
	position:absolute;
	top: 90px;
	left: 0;
	width: 100%;
	height: 250px;
	display:none;
    background: rgba(0,0,0,.8);
    z-index: 135;
}

#nav_mb,
.nav_mb_btn,
#header #nav_mb .language {
	display: none;
}

.mapmanage {
    width: 100%;
    padding: 50px 1% 60px;
	text-align:center;
}

.mapmanage a {
    padding: 5px 10px;
    border: 1px solid #b1b6be;
    border-radius: 5px;
}
.mapmanage a:hover,
.mapmanage a:focus,
.mapmanage a:active {
    border: 1px solid #576e9f;
    background: #576e9f;
    color: #fff;
}



.wrap{position:relative; width:1400px; margin-right:auto; margin-left:auto;}







/* ----------------------------- */
/* mail 관련 페이지
/* ----------------------------- */
.join-mail {
    background: #f4f4f4;
    text-align: center;
    padding: 100px 0;
    border-radius: 30px;
    border: 2px solid #7109b6;
}
.join-mail h1 {
    color: #585555 !important;
    font-size: 1.75rem !important;
    font-family: 'NotoB' !important;
    padding-bottom: 20px;
}
.join-mail h1:before {
    content: "";
    display: block;
    position: relative;
    width: 73px;
    height: 74px;
    background: url(/css/images/common/join-mail.png) no-repeat center;
    margin: 0 auto 20px;
}
.join-mail p {
    color: #555555;
    font-size: 1.25rem;
    border-bottom: 1px solid #c4c4c4;
    width: 85%;
    margin: 0 auto;
    padding-bottom: 40px;
    margin-bottom: 45px;
    font-family: 'NotoL';
}
.join-mail span {
    font-family: 'NotoL';
    font-size: 1.125rem;
    display: block;
    padding-bottom: 20px;
}
.join-mail a {
    font-family: 'NotoM';
    font-size: 1.0rem;
    background: #7109b6;
    color: #fff;
    padding: 12px 45px;
    display: inline-block;
}





/* Mobile */
@media screen and (max-width:768px) {
   
   .join-mail {
		padding: 50px 10px;
	}
   .join-mail h1 {
		font-size: 1.625rem !important;
	}
	.join-mail p {
		color: #555555;
		font-size: 1.125rem;
		border-bottom: 1px solid #c4c4c4;
		width: 85%;
		margin: 0 auto;
		padding-bottom: 20px;
		margin-bottom: 25px;
		font-family: 'NotoL';
	}
	.join-mail span {
		font-size: 1.0rem;
	}

}






/* ----------------------------- */
/* Footer
/* ----------------------------- */
footer {
    width: 100%;
}
/* 하단 */
#footer { padding-bottom:70px; }

/* 하단 링크 */
#footer .link {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    /* font-size: 0; */
    line-height: 0;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}
#footer .link-item { 
	display:inline-block;
	position:relative;
	padding-left:25px;
	padding-right:25px;
}
#footer .link-item:first-child { padding-left:0; }
#footer .link-item:last-child { padding-right:0; }
#footer .link-item:before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 12px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #555555;
}
#footer .link-item:first-child:before { display:none; }
#footer .link-anchor {
	display:block; 
	padding-top:1px; 
	color:#555555; 
	font-size:1.0rem; 
	line-height:30px;
}
#footer .link-item.n1 .link-anchor { 
	color:#3b434f;
	font-weight:500;
}

/* 하단 정보 */
#footer .footer-content { 
	position:relative; 
	margin-top:30px;
}
#footer .info {
	display:inline-block; 
	margin-top:8px; 
	color:#969696; 
	font-size:15px; 
	line-height:24px; 
	vertical-align:top;
}
#footer .info address {
    color: #000;
    padding-bottom: 20px;
}
#footer .info .info-address {
    width: 100%;
    display: block;
}
#footer .info .info-copyright {
	font-family:'NotoL';
}

#footer .flogo { 
	transition-property:all; 
	transition-duration:0.25s; 
	transition-timing-function:linear;
}
#footer .flogo { 
	position:absolute; 
	top:0; 
	right:0; 
	transition-property:right;
}
#footer .f-logo {
    display: inline-block;
    padding-right: 50px;
    position: relative;
}
#footer .f-logo:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 25px;
    right: 0;
    width: 1px;
    height: 25px;
    background-color: #c5c5c5;
    margin-right: 20px;
}

#nav_mb .m_menu_off{
	display: none;
}
/* -------------추가---------------- */
.line_190{line-height: 190%;}



/* ----------------------------- */
/* Responsive
/* ----------------------------- */
/* Layout Max Size : 1680px (1640px)
/* Desktop : 1200px < Screen ≤ 1680px
/* Tablet Landscape ~ Desktop : 981px ≤ Screen ≤ 1240px
/* Tablet Portrait ~ Landscape : 768px ≤ Screen ≤ 980px
/* Mobile Portrait ~ Landscape : 480px ≤ Screen < 768px (landscape)
/* Mobile Landscape : 320px  ≤ Screen < 480px (portrait)
/* ----------------------------- */

@media screen and (min-width:1920px) {

}

@media screen and (max-width:1400px) {
    
	.wrap {
		position: relative;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		padding: 0 3%;
	}

}

@media screen and (max-width:1240px) {
    
		
	#header .util {
		width: 100%;
		/* right: 0; */
	}

}




@media screen and (max-width:1024px) {
    h1 {
        font-size: 4.4rem
    }
    #header .logo {
        width:100%;
        /* left: 20px; */
    }
    #nav {
        width: 80%;
    }
    #header .util {
        /* right: 20px; */
		width: 100%;
    }

}


/* Tablet Portrait  ~ Landscape*/
@media screen and (max-width:1070px) {

    #header {
		height: 80px;
		padding:18px 2.6%;
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-ms-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		transition:all 0.5s ease;
	}
    #header .logo {
        width: 100%;
		margin-top: 5px;
    }
    .logo {
        top: 25px;
    }
	#nav_mb {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 70px 0 30px;
		background: #444;
		z-index: 999;
	}
    #nav_mb .util {
        /* top: 25px;
        left: 0; 
        width: 100%; */
        text-align: left;
		position: absolute;
		top: -5px;
		left: 29px;
    }
	#nav_mb .util > a{
		margin-right: 50px;
	}
	#nav_mb a {
		display: block;
		color: #fff;
	}
	#nav_mb > nav > ul > li {
		padding: 17px 30px 14px;
		border-bottom: 1px solid #000;
	}
	#nav_mb > nav > ul > li > a {
		position: relative;
        font-family:'NotoM';
		font-size: 1.25rem;
		color: #fff;
	}
	#nav_mb > nav > ul > li > a:after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 9px;
		right: 0;
		border-top: 6px solid #fff;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}
	#nav_mb > nav > ul > li > a.active:after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 9px;
		right: 0;
		width: 10px;
		height: 2px;
		background: #fff;
		border: none;
		/*border-top: 5px solid #fff;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;*/
	}
	#nav_mb li ul { margin-top: 15px; }
	#nav_mb li li a { padding: 5px 10px 5px 0; }
	#nav_mb li li a:before {
		content: '';
		display: inline-block;
		width: 4px;
		height: 2px;
		margin: 0 5px 5px 0;
		background: #ccc;
	}
	#header #nav_mb .language {
		display: block;
		position: relative;
		margin: 20px 0;
		top: auto;
		left: 10px;
		/*right: 30px;*/
	}
	#header #nav_mb .language a {
		color: #fff;
	}
	#header #nav_mb .language a:before {
		background: #fff;
	}
	#header #nav_mb .language a:hover:before,
	#header #nav_mb .language a:focus:before,
	#header #nav_mb .language a.active:before {
		background: #e62117;
	}
	.nav_mb_btn {
		display: block;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 30px;
		height: 40px;
		padding-top: 20px;
		z-index: 99999;
	}
	.nav_mb_btn span,
	.nav_mb_btn span:before,
	.nav_mb_btn span:after {
		width:100%;
		height: 2px;
		background-color: #7109b6;
		-webkit-transition:all 0.5s ease;
		-moz-transition:all 0.5s ease;
		-ms-transition:all 0.5s ease;
		-o-transition:all 0.5s ease;
		transition:all 0.5s ease;
		-webkit-transform:translate3d(0,0,0);
	}
    .nav_mb_btn.show {
        top:15px;
    }
    .nav_mb_btn.show span,
    .nav_mb_btn.show  span:before,
	.nav_mb_btn.show  span:after {
        background-color: #fff;
    }

	.nav_mb_btn span{
		display: block;
		position: relative;
	}
	.nav_mb_btn span:before,
	.nav_mb_btn span:after {
		content: '';
		position: absolute;;
		margin-top: -0.7em;
	}
	.nav_mb_btn span:after {
		margin-top: 0.7em;
	}
	.nav_mb_btn.show {
		display: none;
	}
	.nav_mb_btn.show span {
		background: transparent;
	}
	.nav_mb_btn.show span:before {
		-moz-transform: rotate(45deg) translate(.5em, .5em);
	    -ms-transform: rotate(45deg) translate(.5em, .5em);
	    -o-transform: rotate(45deg) translate(.5em, .5em);
	    -webkit-transform: rotate(45deg) translate(.5em, .5em);
	    transform: rotate(45deg) translate(.5em, .5em);
	}
	.nav_mb_btn.show span:after {
		-moz-transform: rotate(-45deg) translate(.45em, -.45em);
		-ms-transform: rotate(-45deg) translate(.45em, -.45em);
		-o-transform: rotate(-45deg) translate(.45em, -.45em);
		-webkit-transform: rotate(-45deg) translate(.45em, -.45em);
		transform: rotate(-45deg) translate(.45em, -.45em);
	}
    #nav_mb .m_menu_off {
    	display: block;
        background: #666;
    }
	.nav_bg	{
		height: 0px;
	}

	#footer {
		padding-bottom: 40px;
	}
	#footer .info {
		width: 100%;
	}
	#footer .flogo {
		position: relative;
		top: 0;
		right: 0;
		transition-property: right;
		padding-top: 20px;
	}

	#footer .wrap ul {
		text-align: center;
	}
	#footer .footer-content {
		text-align: center;
	}

}


/* Mobile Portrait ~ Landscape */
@media screen and (max-width:768px) {
    #header .logo {
        width: 100%;
    }
}


/* Mobile Portrait  ~ Landscape */
@media screen and (max-width:480px) {
	
	#footer .link-anchor {
		font-size: 0.875rem;
	}
	#footer .link-item {
		padding-left: 15px;
		padding-right: 15px;
	}
	#footer .f-logo {
		width: 100%;
		padding-right:0;
	}
	#footer .f-logo:before {
		display: none;
	}

}

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

}