@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2024-01-30
******************************************************** */

/* ========================================================
 * SETTING
======================================================== */
:root{
	--main-color: #7a13f0;
	--area-box-width: 1600px;
	--area-width: 1280px;
	--area-padding: 30px;
	--header-height: 120px;
	--sub-visual-height: 59.6rem;
	--sub-menu-height: 60px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
	--font-family1: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}
html{font-size:14px;}
body, table, th, td, button, select, input, textarea {
	font-family:var(--font-family1);
	color:#333;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	text-size-adjust:none;
	word-break:keep-all;
}
body {background-color:#fff;}
table, th, td{word-break:break-word;}
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative;}
.spoqa{font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -.5px;}

/* ****************** HEADER ********************** */
/* 상단 */
#header {position: fixed; height: 80px; text-align: center; line-height: 80px; background-color: transparent; left: 0; top: 0; z-index: 999; width: 100%;}
#header.active{background-color: #050009;}
#header.down {background-color:rgba(0,0,0,.8); -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; transition-duration:0.4s; transition-timing-function:ease;}

/* 로고 */
#header .logo {position: absolute; left: 0; top: 0; z-index: 12; padding: 26px 0; line-height: 0; vertical-align: top;}
#header .logo a {float: left; overflow: hidden; width:199px; height: 29px;}
#header .logo a::before {display: block; width: 100%; height: 100%;  background: url('/common/images/layout/logo.png') no-repeat; background-size: 100% auto !important; content: ''; transition: all 0.3s;}

/* 주메뉴 */
nav {vertical-align: top; height: 80px;}
.for_bg{height: 80px;}
.gnb > li > a{font-size:16px; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; height:80px; color: #fff; letter-spacing: -.5px;}
.gnb > li.active > a{color: #8e51d4; font-weight: bold;}
.gnb_w{text-align: right; height: 80px; overflow: hidden;}
#header.active .gnb_w{overflow: initial;}
#gnavigation {display: inline-block; position: relative; z-index: 2;}
#gnavigation::before {position: absolute; left: 50%; top: 80px; z-index: -2; width: 1000%; height: 0; margin-left: -500%; box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2); border-top: 1px solid #1d1820; background-color: #050009; content: ''; opacity: 0;}
#gnavigation li {float: left; width: 11rem; font-size: 1rem; color: #000; text-align: center; vertical-align: top; margin-bottom: 27px;}
#gnavigation .depth2 {overflow: hidden; visibility: hidden; position: relative; height: 0; padding: 0; line-height: 1.875;}
#gnavigation .depth2 li span{font-size: 13px;}
#gnavigation .depth2 a {display: block; color: #939393; font-size: 15px; line-height: 17px;}
#gnavigation .depth2 a.none {text-decoration: none !important; color: #939393 !important; cursor: default;}
#gnavigation .depth2 a:hover,
#gnavigation .depth2 a:focus,
#gnavigation .depth2 a:active {color: #fff;}
#gnavigation + .control {display: none;}

/* 주메뉴 활성화 */
#gnavigation.active::before {visibility: visible; height: 20rem; opacity: 1; transition: all 0.31s;}
#gnavigation.active .depth2 {visibility: visible; height: 20rem; padding: 2rem 0; opacity: 1; transition: all 0.31s;}
#gnavigation .active .depth2::before {left: 0; width: 100%;}
#gnavigation .active .depth2::after {opacity: 1;}

@media (max-width:1280px)
{
    /* 상단 숨김 */
    #header .top_service .tsidemenu,
    #divAllmenu,
    #viewAllmenu {display: none;}

    /* 상단 로고 */
	#header{height:60px; line-height: 60px;}
    #header .logo {display: inline-block; position: relative; padding: 15px 0;}
	#header .logo a{width:180px; height:27px;}

    /* 주메뉴 */
    nav {display: block;}
    #gnavigation {overflow: hidden; visibility: hidden; position: absolute; left: 0; top: 0; z-index: 12; width: 100%; height: 0; background-color: #fff; opacity: 0; transition: all 0.3s;}
    #gnavigation::before {display: block; position: relative; left: 0; width: 100%; height: 3.8rem !important; margin: 0; box-shadow: none; background-color: #fff;}
    #gnavigation li {float: none; position: relative; width: 100%; border-bottom: 1px solid #ddd; color: #000 !important; text-align: left; margin-bottom: 0;}
    #gnavigation li:first-child {border-top: 1px solid #ddd;}
    #gnavigation a {display: block; position: relative; padding: .5rem 1rem; line-height: 2.5rem; transition: all 0.2s; background-color: #fff; height:auto; color: #333;}
    #gnavigation a::after {position: absolute; right: 1rem; top: .5rem; font-family: 'xeicon'; color: #cfcdcd; content: ''; transition: all 0.2s; font-size: 1.5rem;;}
    #gnavigation .depth2 {position: relative; left: 0; height: 0 !important; padding: 0 1rem !important; border: 0 none !important; transition: all 0.2s;}
	#gnavigation .depth2 a:hover, #gnavigation .depth2 a:focus, #gnavigation .depth2 a:active{color: #333;}
    #gnavigation .depth2::before,
    #gnavigation .depth2::after {display: none;}
    #gnavigation .depth2 li {border: 0 none;}
    #gnavigation .depth2 li:first-child {border-top: 0 none;}
    #gnavigation .depth2 li + li {border-top: 1px solid #e4e6ed;}
    #gnavigation .depth2 a {line-height: 2rem;}
    #gnavigation .depth2 a::after {display: none;}
    #gnavigation + .control {display: block; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 13; width: 57px; height: 57px; line-height: 57px; text-align: center;}
    #gnavigation + .control::before {display: block; font-family: 'xeicon'; font-size: 1.8rem; color: #fff; content: ''; }

    /* 주메뉴 활성화 */
    #gnavigation > .active > a {background-color: #333; color: #fff; font-weight: 400;}
    #gnavigation .active > a::after {transform: rotate(180deg);}
    #gnavigation .active .depth2 {visibility: visible; height: auto !important; padding: 1rem !important;}
    #header.active #gnavigation {visibility: visible; height: auto; opacity: 1;}
    #header.active #gnavigation + .control::before {color: #010101; content: '';}
    #header.active .top_service .tsidemenu {display: block; right: auto; z-index: 13; left: 1rem;}
    #header.active .top_service .tsidemenu a {color: #555;}
    #header.active .top_service .gov {display: block; right: auto; left: 5rem; z-index: 13;}
    #header.active .top_service .gov img:first-child {display: none !important;}
    #header.active .top_service .gov img:last-child {display: block !important; height: 2rem;}
	
	#header .gradient-link {right:4rem;}
}

/* layout */
.wrapper_lg{position: relative; width: 100%; margin: 0 auto;}
.wrapper{position: relative; width: 1600px; margin: 0 auto;}
@media(max-width:1600px){
	.wrapper{width: 100%; padding: 0 20px; box-sizing: border-box;}
}
@media(max-width:768px){
	.wrapper{padding: 0 10px;}
}
html.fp-enabled #container{background-color: transparent;}

/* ******************  메인 오른쪽 :: 문의하기버튼 ********************** */
.fixed_menu{z-index: 4; position: fixed;}
.right_inquiry_btn_box.sub_inquiry_btn_box {right:15px; bottom:50px; z-index: 999; margin-right:0; transition:var(--transition-custom);}
body.active .right_inquiry_btn_box.sub_inquiry_btn_box {right:15px; bottom:11rem;}
.sub_inquiry_btn_box .sub_inquiry_btn {width:5.4rem; height:5.4rem; border-radius:5.4rem; border:1px solid #eee; font-size:1.6rem; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1);}
.sub_inquiry_btn_box .sub_inquiry_btn i { transition:var(--transition-custom);}

@media all and (max-width:1280px){
	.right_inquiry_btn_box.sub_inquiry_btn_box {display:block !important;}
	.sub_inquiry_btn_box .sub_inquiry_btn:hover i {transform:translateY(-3px)}
}

.right_inquiry_btn_box {position:fixed; right:30px; bottom: 30px; opacity:1; transition: all 0.8s;}
.right_inquiry_btn{background-color:#7a13f0; border-radius:3.5rem; width:3.5rem; height:3.5rem; color: #fff; font-size:2rem;  display: flex; align-items: center; justify-content: center;  box-sizing: border-box; overflow: hidden; transition: all 0.3s; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1);}
.right_inquiry_btn span{position: absolute; visibility: hidden; opacity: 0; display: block; width: calc(100% - 30px); font-size: 1.2rem; line-height: 1.3; font-weight: 400; letter-spacing: -0.025em; transition: position 0.3s, visibility 0.3s, opacity 0s;}

/* top button */
.to_top_btn{position:fixed; bottom:30px; right:15px; display:block; width:5.4rem; height:5.4rem; background-color:#fff; text-align:center;color:#000; z-index:999; border:1px solid #eee;box-sizing:border-box;opacity:0;	transition:var(--transition-custom);border-radius:50%; box-shadow:5px 5px 20px rgba(0, 0, 0, 0.1); color: #333; font-weight:300;}
body.active .to_top_btn{bottom: 4rem; opacity:.8;}
.to_top_btn i{display:inline-block; font-size:2.4rem; line-height:49px; transition:var(--transition-custom);}
.to_top_btn:hover i{transform:translateY(-3px)}
.fp-enabled .to_top_btn {display:block; position:fixed; right:30px; bottom:5rem; opacity:1; width:49px; height:49px; display:none; transition: bottom 0.8s ease; }
.fp-enabled .to_top_btn i {font-size:1.5rem; line-height:49px;}
.fp-enabled body.active .to_top_btn {bottom:30px;}

@media all and (min-width:1271px) and (max-height:850px){
	.fp-enabled .right_inquiry_btn_box.hide {bottom:3em !important;}
	.right_inquiry_btn_box + .to_top_btn.hide {bottom: 3rem !important;}
}
@media all and (min-width:1271px){
	.fp-enabled .right_inquiry_btn_box.show {bottom:90px;}
	.fp-enabled .right_inquiry_btn_box.hide {bottom:720px;}

	body.active .right_inquiry_btn_box + .to_top_btn.hide {bottom: 652px;}
	.right_inquiry_btn:hover{padding: 0 2.5rem; width:13rem; justify-content: space-between; transition: padding 0.3s, width 0.3s, background-color 0.3s;}
	.right_inquiry_btn:hover span{position: static; visibility: visible; opacity: 1; transition: all 0.3s;}
}
@media all and (max-width:1780px){
	body.active .right_inquiry_btn_box {right:var(--area-padding);}
	.fp-enabled .to_top_btn {right: var(--area-padding);}
}
@media all and (max-width:1270px){
	#fp-nav, .main-scroll-icon , #fullpage #footer .to_top_btn {display:none !important;}	
	.fp-enabled body.active .to_top_btn {bottom:2rem;}
	.fp-enabled .to_top_btn {display:block !important; bottom:3rem}
	.fp-enabled .right_inquiry_btn_box {bottom:7rem; right:var(--area-padding); transition:none; opacity:1;}
}

/* ****************** FOOTER ********************** */
/* 하단 */
#footer {width: 100%; background-color: #010101; padding: 80px 0;}
#footer .wrapper{display: flex; justify-content: space-between; align-items: flex-start;}
.section #footer{padding: 20px 0;}

.footer_left a{margin-bottom: 30px; display: inline-block;}
.footer_left h4{color: #c8c8c8; font-size: 16px; display: inline-block; margin-right: 20px;}
.footer_left p{font-size: 16px; color: #939393; display: inline-block;}
.footer_left div{margin-bottom: 15px;}
.footer_left div h4:nth-of-type(2){margin-left: 20px;}
.footer_right{width: 770px;}
.footer_right > ul{width: 100%; display: flex; align-items: flex-start; justify-content: space-between;}
.footer_right > ul > li{color: #fff; font-size: 18px; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; padding-bottom: 15px; text-align: center;}
.footer_right > ul > li ul{margin-top: 15px;}
.footer_right > ul > li a{font-size: 15px; color: #c8c8c8; display: inline-block; margin-bottom: 15px;}
.footer_right > ul > li a span{font-size: 12px;}
.footer_right > ul > li a:hover{color: #7a13f0;}

@media all and (max-width:1280px){
    #footer .wrapper{flex-direction: column-reverse;}
    .footer_left{margin-top: 30px;}
    .footer_left div{margin-bottom: 5px; text-align: center;}
    .footer_left h4, .footer_left p{font-size: 14px;}
    .footer_left a img{width: 200px;}
    .footer_left a{margin-bottom: 30px;}
    .footer_left, .footer_right{width: 100%; text-align: center;}
    .footer_right > ul > li{font-size: 14px; padding: 0 10px; box-sizing: border-box;}
    .footer_right > ul > li a{font-size: 13px;}
}
@media all and (max-width:400px){
    .more_wrap .main_bg{background-size: cover;}
    .more_wrap{height:350px;}
}

/****** 20240215 모바일 관련 추가 ******/
@media all and (max-width:450px){
    .footer_right > ul > li{padding: 0;}
    #footer .wrapper{padding:40px 10px;}
    body.active .right_inquiry_btn_box{right:10px; bottom: 75px;}
    .fp-enabled body.active .to_top_btn{bottom:15px; right:10px;}
    .fp-viewing-4 .more_wrap{height:auto;}
    .section #footer {padding: 30px 0;}
}

/****** 20240216 모바일 관련 추가 ******/
@media all and (max-width:768px){
    #header .wrapper{height:60px;}
    #header nav{display: contents;}
    #header.active nav{display: block;}
}
@media (max-width: 375px) {
    /* 아이폰 미니 */

}