@charset "utf-8";

/* =========================================================
   GOJIN HEADER - 최종 통합본
   구성:
   01. 헤더 기본
   02. 로고 / 1차 메뉴 / 고객센터
   03. 스크롤·Hover 상태
   04. 전체 폭 2차 메가메뉴
   05. 모바일 메뉴
   06. 서브 비주얼 sv01 ~ sv10
   07. 반응형
   ========================================================= */

body.menu-open{
	overflow:hidden;
}

/* =========================================================
   01. 헤더 기본
   ========================================================= */
#hd{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:0;
	background:transparent;
	border-top:1px solid rgba(255,255,255,.28);
	border-bottom:1px solid rgba(255,255,255,.45);
	z-index:9998;
	transition:
		background-color .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}

#hd_h1{
	position:absolute;
	width:1px;
	height:1px;
	font-size:0;
	line-height:0;
	overflow:hidden;
}

#hd_wrapper{
	width:100%;
	max-width:none;
	height:100px;
	margin:0;
	padding:0;
	position:relative;
}

#hd_wrapper .header-inner{
	display:grid;
	grid-template-columns:minmax(220px,310px) minmax(0,1fr) minmax(190px,260px);
	align-items:center;
	column-gap:20px;
	width:100%;
	max-width:1920px;
	height:100%;
	margin:0 auto;
	padding:0 28px;
}

/* =========================================================
   02. 로고 / 1차 메뉴 / 고객센터
   ========================================================= */
#logo{
	position:relative;
	width:260px;
	height:62px;
	margin:0;
}

#logo a{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	background:url("../img/common/logo.png") no-repeat left center;
	background-size:contain;
	text-indent:-9999px;
	filter:brightness(0) invert(1);
	transition:filter .25s ease,opacity .25s ease;
}

/* 1차 메뉴 */
#gnb{
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	border:0;
	position:relative;
	z-index:10000;
}

#gnb h2{
	position:absolute;
	width:1px;
	height:1px;
	font-size:0;
	line-height:0;
	overflow:hidden;
}

#gnb_1dul{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	align-items:stretch;
	width:100%;
	height:100px;
	margin:0;
	padding:0;
}

#gnb .gnb_1dli{
	float:none;
	width:auto;
	min-width:0;
	height:100%;
	position:relative;
	text-align:center;
}

#gnb .gnb_1da{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	padding:0 8px;
	font-size:18px;
	font-weight:650;
	line-height:1.25;
	letter-spacing:-.025em;
	color:#fff;
	white-space:nowrap;
	text-shadow:0 1px 5px rgba(0,0,0,.28);
	position:relative;
	transition:color .22s ease,text-shadow .22s ease;
}

#gnb .gnb_1da span{
	position:absolute;
	left:50%;
	right:auto;
	top:auto;
	bottom:0;
	width:0;
	height:3px;
	background:#ea5413;
	transform:translateX(-50%);
	overflow:hidden;
	transition:width .25s ease;
}

#gnb .gnb_1da span:before,
#gnb .gnb_1da span:after{
	display:none !important;
	content:none !important;
}

#gnb .gnb_1dli:hover .gnb_1da,
#gnb .gnb_1dli.is-open .gnb_1da,
#gnb .gnb_1da.on{
	color:#ea5413;
}

#gnb .gnb_1dli:hover .gnb_1da span,
#gnb .gnb_1dli.is-open .gnb_1da span,
#gnb .gnb_1da.on span{
	width:70%;
}

/* 개별 2차 메뉴는 PC에서 사용하지 않음 */
#gnb .gnb_1dli > .gnb_2dul{
	display:none;
}

/* 고객센터 */
.header-contact{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	padding-left:24px;
	border-left:1px solid rgba(255,255,255,.45);
	line-height:1.1;
	transition:border-color .22s ease;
}

.header-contact span{
	margin-bottom:5px;
	font-size:15px;
	font-weight:700;
	color:#fff;
	text-shadow:0 1px 5px rgba(0,0,0,.3);
	transition:color .22s ease,text-shadow .22s ease;
}

.header-contact a{
	font-size:29px;
	font-weight:800;
	letter-spacing:-1px;
	color:#fff;
	white-space:nowrap;
	text-shadow:0 1px 5px rgba(0,0,0,.3);
	transition:color .22s ease,text-shadow .22s ease;
}

/* 모바일 메뉴 버튼 */
.res-header-btn{
	display:none;
	align-items:center;
	justify-content:center;
	position:relative;
	top:auto;
	right:auto;
	width:48px;
	height:48px;
	margin-left:auto;
	padding:0;
	border:0;
	background:transparent;
	color:#fff;
	font-size:25px;
	text-indent:0;
	z-index:10;
	transition:color .22s ease;
}

/* =========================================================
   03. Hover / Focus / 스크롤 상태
   ========================================================= */
#hd.hd-hover,
#hd:hover,
#hd:focus-within,
#hd.hd-bb,
#hd.hd-down{
	background:#fff;
	border-top-color:#e9e9e9;
	border-bottom-color:#e5e5e5;
	box-shadow:0 8px 26px rgba(0,0,0,.10);
}

#hd.hd-bb,
#hd.hd-down{
	position:fixed;
	top:0;
	left:0;
}

#hd.hd-hover #logo a,
#hd:hover #logo a,
#hd:focus-within #logo a,
#hd.hd-bb #logo a,
#hd.hd-down #logo a{
	background-image:url("../img/common/logo.png");
	background-repeat:no-repeat;
	background-position:left center;
	background-size:contain;
	filter:none;
	opacity:1;
}

#hd.hd-tt:not(.hd-hover):not(.hd-bb):not(.hd-down) #logo a{
	background-image:url("../img/common/logo.png");
	filter:brightness(0) invert(1);
}

#hd.hd-hover .gnb_1da,
#hd:hover .gnb_1da,
#hd:focus-within .gnb_1da,
#hd.hd-bb .gnb_1da,
#hd.hd-down .gnb_1da{
	color:#333;
	text-shadow:none;
}

#hd.hd-hover .header-contact,
#hd:hover .header-contact,
#hd:focus-within .header-contact,
#hd.hd-bb .header-contact,
#hd.hd-down .header-contact{
	border-left-color:#e4e4e4;
}

#hd.hd-hover .header-contact span,
#hd:hover .header-contact span,
#hd:focus-within .header-contact span,
#hd.hd-bb .header-contact span,
#hd.hd-down .header-contact span{
	color:#555;
	text-shadow:none;
}

#hd.hd-hover .header-contact a,
#hd:hover .header-contact a,
#hd:focus-within .header-contact a,
#hd.hd-bb .header-contact a,
#hd.hd-down .header-contact a{
	color:#e75b11;
	text-shadow:none;
}

#hd.hd-hover .res-header-btn,
#hd:hover .res-header-btn,
#hd:focus-within .res-header-btn,
#hd.hd-bb .res-header-btn,
#hd.hd-down .res-header-btn{
	color:#222;
}

/* 스크롤 축소 */
#hd_wrapper,
#gnb_1dul,
#logo{
	transition:height .25s ease;
}

#hd.hd-bb #hd_wrapper,
#hd.hd-bb #gnb_1dul,
#hd.hd-down #hd_wrapper,
#hd.hd-down #gnb_1dul{
	height:78px;
}

#hd.hd-bb #logo,
#hd.hd-down #logo{
	height:50px;
}

/* =========================================================
   04. 전체 폭 2차 메가메뉴
   ========================================================= */
.gnb-mega-panel{
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	background:#fff;
	border-top:1px solid #e5e5e5;
	border-bottom:1px solid #e6e6e6;
	box-shadow:0 12px 24px rgba(0,0,0,.08);
	opacity:0;
	visibility:hidden;
	transform:translateY(-10px);
	pointer-events:none;
	transition:
		opacity .18s ease,
		visibility .18s ease,
		transform .18s ease;
	z-index:9997;
}

#hd:hover .gnb-mega-panel,
#hd:focus-within .gnb-mega-panel,
#hd.hd-hover .gnb-mega-panel{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	pointer-events:auto;
}

#hd:not(:hover):not(:focus-within):not(.hd-hover) .gnb-mega-panel{
	opacity:0;
	visibility:hidden;
	transform:translateY(-10px);
	pointer-events:none;
}

.gnb-mega-inner{
	display:grid;
	grid-template-columns:minmax(220px,310px) minmax(0,1fr) minmax(190px,260px);
	column-gap:20px;
	width:100%;
	min-height:190px;
	margin:0 auto;
	padding:30px 28px 34px;
}

.gnb-mega-logo,
.gnb-mega-contact{
	min-width:0;
}

.gnb-mega-columns{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	align-items:start;
	width:100%;
	margin:0;
	padding:0;
}

.gnb-mega-column{
	width:auto;
	min-width:0;
	min-height:130px;
	padding:0 8px;
	text-align:center;
	border-left:1px solid #f0f0f0;
}

.gnb-mega-column:first-child{
	border-left:0;
}

.gnb-mega-title{
	display:none;
}

.gnb-mega-column ul,
.gnb-mega-column li{
	width:100%;
	margin:0;
	padding:0;
}

.gnb-mega-column li + li{
	margin-top:13px;
}

.gnb-mega-column li a{
	display:block;
	width:100%;
	color:#555;
	font-size:16px;
	font-weight:400;
	line-height:1.35;
	letter-spacing:-.03em;
	text-align:center;
	transition:color .18s ease,transform .18s ease;
}

.gnb-mega-column li a:hover,
.gnb-mega-column li a:focus{
	color:#e75b11;
	transform:translateY(-1px);
}

/* =========================================================
   05. 모바일 메뉴
   ========================================================= */
#sideMask{
	position:fixed;
	inset:0;
	display:none;
	overflow:hidden;
	background:rgba(0,0,0,.55);
	z-index:99999;
}

#sideMask .menu-in{
	position:absolute;
	top:0;
	right:-360px;
	bottom:0;
	left:auto;
	width:min(360px,88vw);
	min-height:100%;
	background:#fff;
	color:#222;
	box-shadow:-10px 0 25px rgba(0,0,0,.2);
	overflow-y:auto;
	transition:right .25s ease;
}

#sideMask .menu-in.open{
	right:0;
}

#sideMask #side-menuTop{
	position:relative;
	background:#fff;
}

#sideMask .side-close{
	position:absolute;
	top:14px;
	right:14px;
	width:42px;
	height:42px;
	padding:0;
	border:0;
	background:transparent;
	text-indent:-9999px;
	z-index:5;
}

#sideMask .side-close:before,
#sideMask .side-close:after{
	content:"";
	position:absolute;
	top:20px;
	left:8px;
	width:27px;
	height:2px;
	background:#222;
}

#sideMask .side-close:before{
	transform:rotate(45deg);
}

#sideMask .side-close:after{
	transform:rotate(-45deg);
}

#sideMask #sgnb h1{
	padding:20px 70px 20px 20px;
	text-align:left;
	border-bottom:1px solid #eee;
}

#sideMask #sgnb h1 img{
	width:auto;
	max-width:210px;
	height:45px;
	object-fit:contain;
}

#sideMask #sgnb .sgnb_1dli{
	position:relative;
}

#sideMask #sgnb .sgnb_1da{
	display:block;
	position:relative;
	height:56px;
	margin:0;
	padding:0 52px 0 22px;
	border:0;
	border-bottom:1px solid #e8e8e8;
	background:#fff;
	color:#222;
	font-size:17px;
	font-weight:650;
	line-height:56px;
}

#sideMask #sgnb .sgnb_1da span:before,
#sideMask #sgnb .sgnb_1da span:after{
	content:"";
	position:absolute;
	top:27px;
	right:22px;
	width:14px;
	height:2px;
	background:#777;
	transition:transform .2s ease;
}

#sideMask #sgnb .sgnb_1da span:after{
	transform:rotate(90deg);
}

#sideMask #sgnb .sgnb_1dli.on .sgnb_1da{
	color:#ea5413;
}

#sideMask #sgnb .sgnb_1dli.on .sgnb_1da span:after{
	transform:rotate(0);
}

#sideMask #sgnb .sgnb_2dul{
	display:none;
	position:static;
	width:100%;
	padding:8px 0;
	border:0;
	background:#f5f7f8;
	box-shadow:none;
	transform:none;
}

#sideMask #sgnb .sgnb_2da{
	display:block;
	padding:10px 24px 10px 36px;
	border:0;
	background:transparent;
	color:#555;
	font-size:15px;
	line-height:1.4;
	text-align:left;
}

#sideMask #sgnb .sgnb_2da:before{
	content:"";
	display:inline-block;
	width:4px;
	height:4px;
	margin:0 9px 3px 0;
	border-radius:50%;
	background:#9aa4aa;
}

.mobile-contact{
	padding:24px 22px;
	border-top:1px solid #e5e5e5;
	background:#fafafa;
}

.mobile-contact span{
	display:block;
	margin-bottom:5px;
	color:#666;
	font-size:14px;
	font-weight:700;
}

.mobile-contact a{
	color:#e75b11;
	font-size:26px;
	font-weight:800;
}

/* =========================================================
   06. 서브 비주얼 공통
   head.01.php = sv01
   head.02.php = sv02 ...
   ========================================================= */
#svisual-section{
	position:relative;
	width:100%;
	height:440px;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

#svisual-section:before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.18);
	z-index:1;
}

#svisual-section .svisual-inner{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	max-width:1361px;
	height:100%;
	margin:0 auto;
	padding:100px 30px 0;
	text-align:center;
}

#svisual-section .svisual-copy{
	color:#fff;
}

#svisual-section .svisual-kicker{
	margin:0 0 14px;
	color:#fff;
	font-size:20px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.02em;
	text-shadow:0 2px 10px rgba(0,0,0,.28);
}

#svisual-section .svisual-title{
	margin:0;
	color:#fff;
	font-size:64px;
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.05em;
	text-shadow:0 3px 16px rgba(0,0,0,.30);
}

/* 이미지 번호 체계 */
#svisual-section.sv01{background-image:url("../img/common/sub_visualimg1.jpg");}
#svisual-section.sv02{background-image:url("../img/common/sub_visualimg2.jpg");}
#svisual-section.sv03{background-image:url("../img/common/sub_visualimg3.jpg");}
#svisual-section.sv04{background-image:url("../img/common/sub_visualimg4.jpg");}
#svisual-section.sv05{background-image:url("../img/common/sub_visualimg5.jpg");}
#svisual-section.sv06{background-image:url("../img/common/sub_visualimg6.jpg");}
#svisual-section.sv07{background-image:url("../img/common/sub_visualimg7.jpg");}
#svisual-section.sv08{background-image:url("../img/common/sub_visualimg8.jpg");}
#svisual-section.sv09{background-image:url("../img/common/sub_visualimg9.jpg");}
#svisual-section.sv10{background-image:url("../img/common/sub_visualimg10.jpg");}
#svisual-section.sv100{background-image:url("../img/common/sub_visualimg100.jpg");}

/* =========================================================
   07. 반응형
   ========================================================= */
@media screen and (max-width:1450px){
	#hd_wrapper .header-inner{
		grid-template-columns:220px minmax(0,1fr) 210px;
		column-gap:10px;
		padding-left:20px;
		padding-right:20px;
	}

	#logo{
		width:220px;
		height:54px;
	}

	#gnb .gnb_1da{
		padding:0 5px;
		font-size:17px;
	}

	.header-contact{
		padding-left:18px;
	}

	.header-contact a{
		font-size:24px;
	}

	.gnb-mega-inner{
		grid-template-columns:220px minmax(0,1fr) 210px;
		column-gap:10px;
		padding-left:20px;
		padding-right:20px;
	}
}

@media screen and (max-width:1120px){
	#hd_wrapper,
	#gnb_1dul{
		height:78px;
	}

	#hd_wrapper .header-inner{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:15px;
	}

	#logo{
		width:220px;
		height:52px;
	}

	#gnb,
	.header-contact,
	.gnb-mega-panel{
		display:none !important;
	}

	.res-header-btn{
		display:flex;
	}

	#hd.hd-bb #hd_wrapper,
	#hd.hd-down #hd_wrapper{
		height:68px;
	}

	#hd.hd-bb #logo,
	#hd.hd-down #logo{
		height:45px;
	}
}

@media screen and (max-width:1024px){
	#svisual-section{
		height:340px;
	}

	#svisual-section .svisual-inner{
		padding-top:75px;
	}

	#svisual-section .svisual-title{
		font-size:48px;
	}
}

@media screen and (max-width:768px){
	#svisual-section{
		height:260px;
	}

	#svisual-section .svisual-inner{
		padding:65px 20px 0;
	}

	#svisual-section .svisual-kicker{
		margin-bottom:10px;
		font-size:16px;
	}

	#svisual-section .svisual-title{
		font-size:36px;
	}
}

@media screen and (max-width:600px){
	#hd_wrapper{
		height:68px;
	}

	#hd_wrapper .header-inner{
		padding-left:14px;
		padding-right:14px;
	}

	#logo{
		width:190px;
		height:45px;
	}

	.res-header-btn{
		width:44px;
		height:44px;
		font-size:23px;
	}
}

@media screen and (max-width:480px){
	#svisual-section{
		height:230px;
	}

	#svisual-section .svisual-inner{
		padding:55px 15px 0;
	}

	#svisual-section .svisual-kicker{
		font-size:14px;
	}

	#svisual-section .svisual-title{
		font-size:31px;
	}
}

@media screen and (max-width:390px){
	#logo{
		width:165px;
		height:40px;
	}
}

/* =========================================================
   이용약관 head.100 상단 탭 메뉴
   ========================================================= */
#sub-tab-section{
	width:100%;
	background:#f5f5f5;
	border-bottom:1px solid #e5e5e5;
}

#sub-tab-section .sub-tab-inner{
	width:100%;
	max-width:1361px;
	margin:0 auto;
	padding:0 20px;
	box-sizing:border-box;
}

#sub-tab-section .sub-tab-menu{
	display:flex;
	align-items:stretch;
	justify-content:center;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

#sub-tab-section .sub-tab-menu > li{
	position:relative;
	flex:1 1 0;
	min-width:0;
	border-left:1px solid #e3e3e3;
}

#sub-tab-section .sub-tab-menu > li:last-child{
	border-right:1px solid #e3e3e3;
}

#sub-tab-section .sub-tab-menu > li > a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:82px;
	padding:12px 10px;
	background:#f5f5f5;
	color:#222;
	font-size:18px;
	font-weight:600;
	line-height:1.3;
	text-align:center;
	box-sizing:border-box;
	transition:background-color .2s ease,color .2s ease;
}

#sub-tab-section .sub-tab-menu > li > a:hover,
#sub-tab-section .sub-tab-menu > li > a:focus,
#sub-tab-section .sub-tab-menu > li.curr-snb > a{
	background:#fff;
	color:#ea5413;
}

#sub-tab-section .sub-tab-menu > li.curr-snb:after{
	content:"";
	position:absolute;
	right:0;
	bottom:-1px;
	left:0;
	height:3px;
	background:#ea5413;
}

#container.sub-full{
	width:100%;
	float:none;
}

@media screen and (max-width:768px){
	#sub-tab-section .sub-tab-inner{
		padding:0;
	}

	#sub-tab-section .sub-tab-menu{
		display:grid;
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	/* 탭이 1개일 때는 모바일에서도 전체 너비 사용 */
	#sub-tab-section .sub-tab-menu > li:only-child{
		grid-column:1 / -1;
		width:100%;
	}

	#sub-tab-section .sub-tab-menu > li > a{
		min-height:58px;
		padding:10px 8px;
		font-size:15px;
	}
}

/* =========================================================
   모바일 메뉴 클릭/펼침 안정화 패치
   - PC 헤더 영역에는 적용되지 않음
   - 1120px 이하에서 #sideMask 내부에만 적용
   ========================================================= */
@media screen and (max-width:1120px){
	#sideMask{
		pointer-events:auto;
	}

	#sideMask .menu-in{
		left:auto !important;
		right:-360px;
		z-index:1;
		pointer-events:auto;
		-webkit-overflow-scrolling:touch;
	}

	#sideMask .menu-in.open{
		right:0;
	}

	#sideMask #sgnb,
	#sideMask #sgnb_1dul,
	#sideMask #sgnb .sgnb_1dli,
	#sideMask #sgnb .sgnb_1da,
	#sideMask #sgnb .sgnb_2dul,
	#sideMask #sgnb .sgnb_2da{
		pointer-events:auto;
	}

	#sideMask #sgnb .sgnb_1da{
		cursor:pointer;
		touch-action:manipulation;
	}

	#sideMask #sgnb .sgnb_2da{
		position:relative;
		z-index:2;
		touch-action:manipulation;
	}
}