@charset "utf-8";

/* common */
::selection{background:rgba(232, 50, 73, 0.35); color:#fff;}
body{font-size:16px; word-break:keep-all;}
p, li, a{line-height:1.7; font-weight:300; font-size:16px; color:#666;}

#wrap{min-width:320px; opacity:0; transition:all 0.5s ease 0.2s; overflow:hidden;}
#wrap.active{opacity:1;}

/* header */
#header{position:absolute; width:100%;  z-index:99;}
#header h1{position:absolute; left:50%; top:100px; width:225px; height:77px; transform:translateX(-50%);}
#header h1 a{display:block; width:100%; height:100%;}
#header h1 a img{display:block; height:100%;}
#header .btn_menu{position:absolute;top:50%;left:50%;z-index:91; width:35px; height:26px; margin-top:-13px; margin-left:-17.5px; font-size:0px;transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block;position:absolute;left:0px;width:100%;height:2px; background:#fff;}
#header .btn_menu > span:nth-of-type(1){top:0;}
#header .btn_menu > span:nth-of-type(2){top:50%; width:20px; margin-top:-1px; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){bottom:0;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active{transform:rotate(180deg);}
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:absolute; top:0px; left:0px; height:100%; font-size:0;}
/* 햄버거 메뉴 열림 — X(닫기) 버튼 상단 고정 (모바일·PC 공통, 배경 없음) */
body.active #header .menu_fix{
	position:fixed !important;
	top:0 !important;
	right:0 !important;
	left:auto !important;
	z-index:200 !important;
	width:auto !important;
	min-width:64px;
	height:64px !important;
	margin:0 !important;
	padding:0 16px 0 0;
	display:flex !important;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	background:transparent !important;
	border:none !important;
}
body.active #header .menu_fix .btn_menu{
	position:relative !important;
	top:auto !important;
	left:auto !important;
	margin:0 !important;
}
body.active #header nav.active > .btn_close{
	position:fixed !important;
	top:0 !important;
	right:0 !important;
	left:auto !important;
	width:64px !important;
	height:64px !important;
	z-index:199 !important;
}
#header nav{display:inline-block;}
#header nav .gnb{position:relative; text-align:center;}
#header nav .gnb:before{content:''; display:block; position:absolute; left:0; top:40px; width:100%; height:88px; background:url(../images/common/gnb_logo.svg) no-repeat 50%;}
#header nav .gnb > li{position:relative; padding:0 20px; text-align:center;}
#header nav .gnb > li:after{content:''; position:absolute; left:50%; top:0; width:9px; height:9px; margin-left:-4.5px; background:#ffcf3d; border-radius:50%;}
#header nav .gnb > li:first-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block; padding-bottom:30px; font-size:17px; color:#fff;}
#header.mob nav{position:fixed; top:0px; right:-100%; z-index:90; width:50%; height:100%; visibility:hidden; opacity:0; transition:all 0.5s ease-out 0s;}
#header.mob nav.active{right:0; opacity:1; visibility:visible;}
#header.mob nav .gnb{position:absolute; top:0px; left:0px; z-index:91; width:100%; height:100%; padding-top:150px; /*background:#343434 url(../images/common/bg_gnb.png) no-repeat;*/ background:#343434; overflow-y:auto; box-sizing:border-box;}
#header.mob nav .gnb > li > a{display:block; padding:30px 0 25px; font-family:'yg-jalnan'; font-size:38px; color:#fff; transition:all 0.3s ease 0s;}
#header.mob nav .gnb > li > a.active{padding-bottom:10px;}
#header.mob nav .gnb > li ul{display:none; padding:0 20px 10px; box-sizing:border-box;}
#header.mob nav .gnb > li ul > li > a{display:block; padding:10px 0px; color:#eee; font-size:22px; font-weight:500;}
#header .area_util{float:right;position: fixed;right: 0;}
#header .area_util ul li{float:left; text-align:center;}
#header .area_util ul li img{display:block; height:21px; margin:0 auto;}
#header .area_util ul li i{display:block; margin-top:12px; font-size:13px; color:#fff;}
#header .area_util ul li a{display:block; width:100px; padding:23px 0; background:#23282b;}
#header .area_util ul li:last-child a{background:#cab271;}
#header .menu_fix{position:absolute; top:0; right:0; width:134px; height:120px; border-left:1px solid rgba(255, 255, 255, 0.15); border-bottom:1px solid rgba(255, 255, 255, 0.15); transition:left 0.6s ease-in-out 0s, background 0.5s ease 0s; box-sizing:border-box;}
#header .menu_fix.hideMenu{left:-100%;}
#header *[data-layout-menu="white"]{background:#fff;}
#header *[data-layout-menu="black"]{background:rgba(0,0,0,0.16);}
#header *[data-layout-menu="black"] > .btn_menu > span{background:rgba(255, 255, 255, 0.43);}
#header *[data-layout-menu="black"] em{color:#fff;}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){background:#fff;}

/* lnb */
.lnb{position:relative; width:100%; border-bottom:1px solid #ddd; box-sizing:border-box;}
.lnb .inr{max-width:1500px; margin:0 auto;}
.lnb ul li{float:left; height:56px;}
.lnb ul li a{display:block; width:215px; height:100%; padding:15px 20px; color:#222; font-size:17px; font-weight:300; letter-spacing:-0.5px; border-left:1px solid #ddd; box-sizing:border-box;}
.lnb ul li a.on{background:#181c1e; color:#fff;}
.lnb ul li.home a{width:57px; padding:17px 15px;}
.lnb ul li.home span{display:block; width:19px; height:21px; margin:0 auto; background:url(../images/content/ico_home.png) no-repeat 50%; text-indent:100%; overflow:hidden; white-space:nowrap;}
.lnb ul li:last-child{border-right:1px solid #ddd;}
.lnb ul li.active a{font-weight:600; color:#cab271;}
.lnb ul:after{content:''; display:block; clear:both;}
.btn_m_lnb{display:none;}

/* fullMenu */
#fullMenu{position:fixed; right:0; width:134px; height:100%; border-left:1px solid rgba(255, 255, 255, 0.15); z-index:10; box-sizing:border-box; transition:all 0.3s ease-out 0s;}
#fullMenu ul{position:absolute; top:50%; margin-top:-70px;}
#fullMenu li{margin-bottom:10px;}
#fullMenu li a{display:block; position:relative; padding-left:15px; color:rgba(255, 255, 255, 0.3); font-size:15px; font-weight:300; letter-spacing:-0.5px;}
#fullMenu li a:before{content:''; display:block; position:absolute; top:50%; left:-3px; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:rgba(255, 255, 255, 0.3);}
#fullMenu li.active a{color:#fff;}
#fullMenu li.active a:before{background:#fff;}
#fullMenu li.active a:after{content:''; display:block; position:absolute; top:4px; left:-9px; width:15px; height:15px; border-radius:50%; border:1px solid #fff;}
.fp-viewing-service #fullMenu{border-left:1px solid rgba(232, 50, 73, 0.15);}
.fp-viewing-service #fullMenu li a{color:rgba(232, 50, 73, 0.3);}
.fp-viewing-service #fullMenu li a:before{background:rgba(232, 50, 73, 0.3);}
.fp-viewing-service #fullMenu li.active a{color:#e83249;}
.fp-viewing-service #fullMenu li.active a:before{background:#e83249;}
.fp-viewing-service #fullMenu li.active a:after{border:1px solid #e83249;}
.fp-viewing-yogo #fullMenu{border:1px solid rgba(255, 255, 255, 0.15);}
.fp-viewing-yogo #fullMenu li a{color:rgba(255, 255, 255, 0.3);}
.fp-viewing-yogo #fullMenu li a:before{background:rgba(255, 255, 255, 0.3);}
.fp-viewing-yogo #fullMenu li.active a{color:#fff;}
.fp-viewing-yogo #fullMenu li.active a:before{background:#fff;}
.fp-viewing-yogo #fullMenu li.active a:after{border:1px solid #fff;}
.fp-viewing-downcenter #fullMenu{border:1px solid rgba(30, 53, 96, 0.15);}
.fp-viewing-downcenter #fullMenu li a{color:rgba(30, 53, 96, 0.3);}
.fp-viewing-downcenter #fullMenu li a:before{background:rgba(30, 53, 96, 0.3);}
.fp-viewing-downcenter #fullMenu li.active a{color:#1e3560;}
.fp-viewing-downcenter #fullMenu li.active a:before{background:#1e3560;}
.fp-viewing-downcenter #fullMenu li.active a:after{border:1px solid #1e3560;}
.fp-viewing-branch-inquiry #fullMenu{border:1px solid rgba(255, 255, 255, 0.15);}
.fp-viewing-branch-inquiry #fullMenu li a{color:rgba(255, 255, 255, 0.3);}
.fp-viewing-branch-inquiry #fullMenu li a:before{background:rgba(255, 255, 255, 0.3);}
.fp-viewing-branch-inquiry #fullMenu li.active a{color:#fff;}
.fp-viewing-branch-inquiry #fullMenu li.active a:before{background:#fff;}
.fp-viewing-branch-inquiry #fullMenu li.active a:after{border:1px solid #fff;}
.fp-viewing-home #fullMenu{height:calc(100% - 120px); bottom:0;}
.fp-viewing-home-footer #fullMenu{opacity:0; display:none;}
#fullMenu .kakao{position:absolute; display:block; top:50%; left:20px; width:80px; height:80px; margin-top:80px; background:#f9e100; border-radius:50%;}
#fullMenu .kakao span{display:block; width:50px; height:50px; margin:16px auto 0; background:url(../images/main/icon_kakao.png)no-repeat 50% 50%;}

/* tab */
.area_tab{position:relative; top:102px; left:720px; width:calc(100% - 720px); background:#f7f7f7;}
.area_tab ul{margin-left:50px;}
.area_tab li{float:left; margin-right:35px;}
.area_tab li a{display:block; position:relative; padding:20px 0; color:#888; font-size:15px; font-weight:300; box-sizing:border-box;}
.area_tab li a.on{color:#cab271; font-weight:500;}
.area_tab li a.on:before{content:''; display:block; position:absolute; top:-1px; left:0; width:47px; height:1px; background:#cab271; z-index:10;}
.area_tab ul:after{content:''; display:block; clear:both;}

/* footer */

#footer{position:relative; background:#181c1e; z-index:100;}
#footer .inr{position:relative; max-width:1500px; margin:0 auto; padding-top:80px;}
#footer h1 img{display:block; width:180px; height:87px; margin:0 auto;}
#footer .info{margin-top:60px; text-align:center;}
#footer .info span{display:inline-block; margin-left:30px; color:rgba(255, 255, 255, 0.7); font-size:14px; font-weight:200;}
#footer .info span:first-child{margin-left:0;}
#footer .info ul{margin-top:10px;}
#footer .info li{display:inline-block; margin-left:25px;}
#footer .info li:first-child{margin-left:0;}
#footer .info li em{display:inline-block; width:20px; height:19px; background-repeat:no-repeat; background-position:0; text-indent:100%; overflow:hidden; white-space:nowrap; vertical-align:middle;}
#footer .info li.tel em{background-image:url(../images/main/ico_tel.png);}
#footer .info li.fax em{background-image:url(../images/main/ico_fax.png);}
#footer .info li.mail em{background-image:url(../images/main/ico_mail.png);}
#footer .info li.inquiry em{background-image:url(../images/main/ico_inquiry.png);}
#footer .info li span{display:inline-block; margin-left:5px; color:rgba(255, 255, 255, 0.7); font-size:14px; font-weight:200; vertical-align:middle;}
#footer .info li.inquiry span{vertical-align:bottom;}
#footer .copy{margin-top:60px; border-top:1px solid rgba(255, 255, 255, 0.08);} 
#footer .copy p{padding:30px 0; color:rgba(255, 255, 255, 0.2); font-size:14px; font-weight:300; text-align:center; box-sizing:border-box; line-height:1.5em;}
#footer a[class^="btn_top"]{display:block; position:absolute; right:0; top:90px; width:155px; height:218px; background:url(../images/common/btn_top.svg) no-repeat right bottom; background-size:155px 218px; text-indent:100%; overflow:hidden; white-space:nowrap; z-index:20; transition:transform 0.25s ease, filter 0.25s ease;}
#footer a[class^="btn_top"]:hover,
#footer a[class^="btn_top"]:focus{transform:translateY(-4px); filter:brightness(1.06);}
#container:after{content:''; display:block; clear:both;}

/* ie */
.ie #header nav .gnb > li:after{top:-12px;}
.ie #header h1{top:60px;}

@media all and (max-width:1700px){
	#header h1{top:40px; left:143px; margin-left:0;}
	.ie #header h1{top:40px;}
}

@media all and (max-width:1600px){
	#footer .inr{max-width:100%; padding:80px 20px 0;}
}

@media all and (max-width:1500px){
	.lnb .inr{max-width:100%;}
}

@media all and (max-width:1350px){
	#footer a[class^="btn_top"]{top:30px; width:115px; height:178px; background-size:115px 178px;}
}

@media all and (max-width:1300px){
	#footer .inr{padding:50px 20px 0;}
	#footer .info{margin-top:40px;}
	#footer .copy{margin-top:40px;}
}

@media all and (max-width:1250px){
	#fullMenu{display:none;}
	#header .menu_fix{border:0;}
	#header h1{left:100px;}
	#header .btn_menu:after{display:none;}
	#footer h1 img{display:none;}
	#footer .info{margin-top:0; text-align:left;}
}

@media all and (max-width:1200px){
	#footer .info span:nth-child(4){display:block; margin-left:0;}
}

@media all and (min-width:1024px){	
	#header nav .gnb > li ul{display:none; width:100%;transition:all 0.4s ease-out;}
	#header nav .gnb > li ul.active{display:block;}
	#header nav .gnb > li ul > li > a{display:block;position:relative;padding:11px 11px; text-align:center; color:#eee;font-size:18px;}
	#header nav .gnb > li ul > li > a:hover{color: #ffcf3d;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
}

@media all and (max-width:1023px){
	#header .btn_menu,
	#header .btn_close{display:block;}
	#header nav{margin:0;}
	#header nav .gnb > li{display:block;}
	#header{position:absolute; width:100%;}
	#header .btn_menu.active:after{transform:rotate(0deg) !important;}
}

@media all and (max-width:1024px){
	#header .menu_fix{width:94px; height:80px;}
	.lnb ul li{height:auto;}
	.lnb ul li a{width:100%; height:auto; padding:12px 50px; font-size:16px;}
	.lnb ul li.home a{padding:15px 15px 12px;}
	#header.mob nav .gnb > li > a{font-size:32px;}
	#header h1{top:25px;}
}

@media all and (max-width:985px){
	#footer .info span{display:block; margin-left:0;}
}

@media all and (max-width:900px){
	#footer .info li{display:block; margin-left:0;}
}

@media all and (max-width:768px){
    #header.mob nav{width:80%;}
	#header .area_util ul li a{width:85px; padding:16px 0;}
	#header .area_util ul li i{margin-top:5px;}
	.lnb ul li a{padding:12px 35px;}
	#header.mob nav .gnb > li > a{font-size:28px;}
    #header.mob nav .gnb > li ul > li > a{font-size:16px;}
}

@media all and (max-width:550px){
	#footer a[class^="btn_top"]{width:95px; height:158px; background-size:95px 158px;}
}

@media all and (max-width:500px){
	#header h1{top:20px; left:120px; height:40px; margin-left:0;}
	#header .menu_fix{width:80px; height:70px;}
	.lnb ul li.home{display:none;}
	#header.mob nav .gnb > li > a{font-size:24px;}
	#footer a[class^="btn_top"]{top:auto; bottom:110px; width:85px; height:148px; background-size:85px 148px;}
}

@media all and (max-width:460px){
	.lnb ul li a{padding:12px 20px; font-size:15px;}
}

@media all and (max-width:400px){
	#footer h1 img{margin:0;}
	#footer .copy p{padding:30px 10px;}
}

@media all and (max-width:385px){
	#footer a[class^="btn_top"]{bottom:170px;}
}