@charset "utf-8";



/**********************************************/
/* 01. 레이아웃 - header ************************/
/**********************************************/
#header.main-header {
	display: block;
	background: #020202;
}
#header.main-header > .container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
#header.main-header h1 {

}
#header.main-header h1 > a {
	display: block;
}
#header.main-header h1 > a > img {
	vertical-align: middle;
}
#header.main-header h1 + p {
	margin-left: 1rem;
	color: #cfa972;
	font-family: 'Noto Serif KR';
}
#header.main-header .sns-wrap ul > li:not(:first-child) {
	margin-left: 1rem;
}
#header.main-header .sns-wrap ul > li > a {
	display: inline-block;
	font-size: 1.5rem;
	color: var(--white);
	width: 44px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	background: #2e2e2e;
	border-radius: 50%;
}
#header.main-header .sns-wrap ul > li > a:hover {
	color: #cfa972;
}
#header.main-header .sns-wrap ul > li > a img {
	display: inline-block;
	width: 1rem;
	margin-top: -2px;
	margin-right: 0.3rem;
	vertical-align: middle;
}
#header.main-header .nav-wrap {
	margin-top: 1rem;
}
#header.main-header .nav-wrap > ul > li:not(:first-child) {
	margin-left: 2rem;
}
#header.main-header .nav-wrap > ul > li > a {
	letter-spacing: 2px;
	color: var(--white);
}
#header.main-header .mobile-menu {
	margin-left: auto;
}
#header.main-header .mobile-menu button {
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.5rem;
	color: var(--white);
}





/**********************************************/
/* 02. footer *********************************/
/**********************************************/
#footer {
	padding: 1.5rem 1rem;
	background:#020202;
	color: var(--grey);
}
#footer > .container {
	width: 100%;
	max-width: 1600px;
	padding-top: 1rem;
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var(--grey);
}
#footer .address,
#footer .terms {
	margin-top: 0.5rem;
	font-size: 0.8rem;
}
#footer .address address {
	display: inline-block;
}
#footer ul.terms > li > a {
	display: block;
	color: var(--grey);
}
#footer .copyright {
	margin-top: 0.5rem;
	font-size: 0.7rem;
}

@media screen and (max-width: 1200px) {
	#footer > .container {

	}
}






.container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}


/**********************************************/
/* 01. 메인페이지 *******************************/
/**********************************************/



/**********************************************/
/* 02. 서브페이지 - About Gachon ****************/
/**********************************************/
#main.sub .visual-wrap {
	position: relative;
	padding: 6rem 0;
	background-color: rgba(0,0,0,0.4);
}
#main.sub .visual-wrap:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/sub_visual_img01.jpg) center 52% no-repeat;
	background-size: cover;
	content: '';
	z-index: -1;
}
#main.sub .visual-wrap .visual-txt {
	text-align: center;
	color: #ffffff;
}
#main.sub .visual-wrap .visual-txt .visual-title {
	font-size: 2.5rem;
	font-weight: 600;
}
#main.sub .visual-wrap .visual-txt .visual-lnb li {
	display: inline-block;
	position: relative;
}
#main.sub .visual-wrap .visual-txt .visual-lnb li:not(:first-of-type) {
	padding-left: 30px;
}
#main.sub .visual-wrap .visual-txt .visual-lnb li:not(:first-of-type):after {
	position: absolute;
	top: 0;
	left: 5px;
	width: 1rem;
	height: 1rem;
	content: '>';

}
#main.sub .visual-wrap .visual-txt .visual-lnb li a {
	color: #ffffff;
	text-transform: capitalize;
}
#main.sub .contents-wrap .video-wrap {
	width: 100%;
	margin-bottom: 7rem;
}
#main.sub .contents-wrap .video-wrap video {
	width: 100%;
}
#main.sub .contents-wrap {
	padding: 7rem 0;
}
#main.sub .contents-wrap .about-box {
	position: relative;
	padding: 100px 0;
}
#main.sub .contents-wrap .about-box .about__title {
	position: absolute;
	top: 0;
	left: 100px;
	width: 500px;
	height: 600px;
	padding: 10rem 5rem;
	background: #ffffff;
	box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.2);
}
#main.sub .contents-wrap .about-box .about__title.about__title--right {
	left: auto;
	right: 100px;
}
#main.sub .contents-wrap .about-box .about__title h3 {
	font-size: 3rem;
}
#main.sub .contents-wrap .about-box .about__title h3 + p {
	margin-top: 3rem;
}
#main.sub .contents-wrap .about-box .about__bg {
	height: 600px;
	background: url(../images/sample_img01.jpg) center 52% no-repeat;
	background-size: cover;
}
#main.sub .contents-wrap .about-box .about__bg img {
	display: none;
}
#main.sub .contents-wrap .about-box .about__text {
	position: relative;
	padding: 5rem 0;
}
#main.sub .contents-wrap .about-box .about__text:after {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 4rem;
	background: #000000;
	content: '';
}
#main.sub .contents-wrap .about-box .about__text p {
	font-size: 1.2rem;
	line-height: 2;
}

@media screen and (max-width: 1200px) {
	#main.sub .contents-wrap .about-box .about__title {
		position: unset;
		width: 100%;
		height: auto;
		padding: 3rem 2rem;
	}
	#main.sub .contents-wrap .about-box .about__title h3 + p {
		margin-top: 1rem;
	}
	#main.sub .contents-wrap .about-box .about__bg {
		background: none;
		height: auto;
	}
	#main.sub .contents-wrap .about-box .about__bg img {
		display: block;
		width: 100%;
	}
	#main.sub .contents-wrap .about-box .about__text p {
		font-size: 1rem;
		line-height: 1.5;
	}
}
@media screen and (max-width: 997px) {
	#main.sub .visual-wrap {
		padding: 3.5rem 0;
	}
	#main.sub .visual-wrap:before {
		background-size: 997px;
	}
	#main.sub .contents-wrap .about-box .about__title h3 {
		font-size: 2rem;
	}
}










/* sparePage */
#header {
	display: block;
	background: #020202;
}
#header > .container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
#header h1 {

}
#header h1 > a {
	display: block;
}
#header h1 > a > img {
	vertical-align: middle;
	height: 32px;
}
#header h1 + p {
	margin-left: 1rem;
	color: #cfa972;
	font-family: 'Noto Serif KR';
}
#header .sns-wrap ul > li:not(:first-child) {
	margin-left: 1rem;
}
#header .sns-wrap ul > li > a {
	font-size: 0.9rem;
	color: var(--white);
}
#header .sns-wrap ul > li > a:hover {
	color: #cfa972;
}
#header .sns-wrap ul > li > a img {
	display: inline-block;
	width: 1rem;
	margin-top: -2px;
	margin-right: 0.3rem;
	vertical-align: middle;
}
#header nav {
	margin-left: auto;
}
#header nav > ul > li:not(:first-child) {
	margin-left: 2rem;
}
#header nav > ul > li > a {
	letter-spacing: 2px;
	color: var(--white);
}
#header .mobile-menu {
	margin-left: auto;
}
#header .mobile-menu button {
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.5rem;
	border: 1px solid red;
}
@media screen and (max-width: 1024px) {
	#header > .container {
		padding-top: 1.2rem;
		padding-bottom: 1.2rem;
	}
}
@media screen and (max-width: 768px) {
	#header h1 + p {
		margin-top: 0.5rem;
		font-size: 0.9rem;
	}
}

.spare-visual {
	position:relative;
	height:0;
	padding-bottom:56.25%;
	overflow:hidden;
}
.spare-visual video {
	position:absolute;
	left:0;
	top:0;
	height:100%;
}
.spare-visual video::-webkit-media-controls-fullscreen-button {
	display: none;
}
.spare-visual video::-webkit-media-controls-timeline {
	display: none;
}
.spare-visual video::-webkit-media-controls-timeline {
	display: none;
}
.spare-visual video::-webkit-media-controls-time-remaining-display {
	display: none;
}
.spare-visual .spare-visual video::-webkit-media-controls-mute-button {
	display: none;
}
.spare-visual video::-webkit-media-controls-volume-slider {
	display: none;
}
.spare-visual video::-webkit-media-controls-current-time-display {
	display: none;
}
address {
	text-decoration: none;
}




@media screen and (max-width: 1200px) {
	.spare-visual {
		padding-bottom: calc(100vh - 150px);
	}
	.spare-visual video {;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
	}
}
@media screen and (max-width: 768px) {

}




/* Main - 팝업 ***************************************/
.popup-wrap {
	position: relative;
}
.popup-wrap .popup-img img {
	display: block;
	width: 100%;
	max-width: 400px;
	max-height: 700px;
}
.popup-wrap .popup-tool {
	padding: 0.7rem;
	font-size: 0.9rem;
}
.popup-wrap .popup-tool .checkbox .checkbox__group {
	padding: 0;
}
.popup-wrap .popup-tool label span {
	top: inherit;
}
.popup-wrap .popup-tool .btn {
	font-size: 0.8rem;
}