@charset "utf-8";

/* base */
::selection{background:rgba(17,19,59,.35); color:#fff;}
body{font-size:16rem; word-break:keep-all;}
th[data-view="file"] + td ul li a{line-height:1em;}
ul li:last-child{margin-right:0;}

.wrap{width:1200rem; margin:0 auto;}
.wrap02{width:1080rem; margin:0 auto; position: relative;}
.wrap03{width:1350rem; margin:0 auto; position: relative;}

html,
body{height:100vh; height: var(--vh);}


/* root */
:root{--vh: 100%;--color-point:#4fbac1; --bg-gray:#f7f7f7; --animation-basic:all 0.4s ease; --animation-lazy:all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); --lang-kor:"Pretendard", Sans-serif; --lang-mob:Sans-serif;}

/* common */
div[data-scroll-section]{display:flex; justify-content:center; align-items:center;}

/* popup */
.layerPop{overflow:hidden; border:1rem solid #353535; border-radius:14rem;}
.layerPop .btn button{font-size:13rem;}
.layerPop .btn{padding:13rem 10rem; background:#353535; text-align:left;}
.layerPop .btn button:last-child{float:right; margin:0 12rem 0 0;}


/* header */
#header{position:relative; width:100%; height:95rem; background:#fff; transition:0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
#header h1{position:absolute;left:120rem;top: 50%;transform: translateY(-50%);}
#header h1 a{display:block; line-height: 0;}
#header h1 img{height:60rem}

#header .area_util{position:absolute; right:0; right:120rem;top: 50%;transform: translateY(-50%);}
#header .area_util ul{display:flex;height: 60rem;align-items: center;}
#header .area_util ul li{position:relative; padding:0 17rem;}
#header .area_util ul li:before{content:''; position:absolute; left:-2rem; top:6rem; display:block; width:1rem; height:14rem; background:#ddd;}
#header .area_util ul li:first-child:before{display:none;}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:25rem; right:20rem; z-index:9999; width:23rem; height:13rem; font-size:0rem; transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0rem; width:100%; height:2rem; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:0;}
#header .btn_menu > span:nth-of-type(2){top:50%; margin-top:-1rem; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:100%;}
#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{position:fixed; top:27rem; transform:rotate(180deg);}
#header .btn_menu.active > span:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10rem; 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:fixed; opacity:0; visibility:hidden; top:0rem; left:0rem; z-index:99; width:-webkit-calc(100% - 320rem); width:100%; height:-webkit-calc(100vh - -0rem * 1); height:calc(100vh - -0rem * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

#header nav .gnb{text-align:center;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 30rem;}
#header nav .gnb > li:after{content:""; position:absolute; opacity:0.28; top:8rem; right:0; width:1rem; height:15rem; background:#fff;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block; font-size:18rem;color:#000;line-height: 95rem;}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on{color: #976DF2;}

/* footer */
#footer{position:relative; padding:85rem 0; background: #0a0e27;}
#footer .wrap{position:relative;}
#footer h1 img{height:60rem}
#footer .menu li{position:relative; float:left; margin-right:19rem;padding-right:19rem}
#footer .menu li:before{content:''; position:absolute; right:0; top:7rem; display:block; width:1rem; height:14rem; background:#6a6a6a;}
#footer .menu li:last-child:before{display:none;}
#footer .menu li a{display:block; font-size:18rem; color:#fff;}
#footer .menu{overflow:hidden; margin:30rem 0;}

#footer .info li{float:left; margin-right:15rem; font-size:16rem; color:#6f6e6f}
#footer .info{overflow:hidden; padding-bottom:40rem;}
#footer .info li *{display:inline-block; color:#6f6e6f;}
#footer .info li em{opacity:0.4; margin-right:10rem; font-weight:bold;}
#footer .info li p{font-weight:300;}

#footer .cpright{color:#6b6a6b;}

#footer .btn_top{position:fixed; opacity:1; opacity:0; right:50rem; bottom:70rem; z-index:99; transition:all 0.4s ease-out 0s;width:61rem;height:61rem;background: #cb1919;background-size:7rem;background-position:50% 50%;font-size:0;transform:rotate(270deg);-webkit-transform:rotate(270deg);background-repeat:no-repeat;}
#footer .btn_top.active{position:fixed; opacity:0; bottom:50rem;}
#footer .btn_top.hidden{opacity:0;}
#footer .btn_top.fiexd.active{position:fixed; opacity:1; top:auto; bottom:50rem;}
#footer .btn_top.fiexd{position:absolute;opacity:1;top: -24rem;bottom:auto;}

.cs_center{position:absolute; right:0; top:0}

.cs_center > ul{overflow:hidden;}
.cs_center > ul > li{float:left; margin-right:15rem;}
.cs_center > ul > li a{display:flex;width:40rem;height:40rem;border-radius:50%;background:#000;align-items: center;justify-content: center;}
.cs_center > ul > li img{height:18rem}
.cs_center > div{color:#fff;}
.cs_center > div h3{margin:40rem 0 15rem; font-size:18rem;}
.cs_center > div ul li{line-height:1.8; opacity:0.7}

/* quick */
.area_quick{position:fixed;right:10rem;bottom:30rem;z-index: 20;}
.area_quick a{display:flex; flex-direction: column; justify-content: center; width:98rem; height:98rem; border-radius:50%; background:#fee101; border:2rem solid #111; text-align:center; color:#000}
.area_quick a img{height:50rem;}
.area_quick a p{margin-top:5rem;}

.area-quick {position: fixed; right: 30rem; bottom: 30rem; background: #fddb00; border-radius: 20rem; box-sizing: border-box; z-index: 90;}
.area-quick a {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110rem; height: 110rem;}
.area-quick a::before {content: ''; width: 35rem; height: 37rem; background: url('../images/main/ic-kakao-ch.svg') no-repeat;}
.area-quick a span {display: block; font-size: 15rem; font-weight: 500; padding-top: 10rem;} 

@media (min-width:2000px){
	html{font-size:0.05254860746190225vw;}
}

@media screen and (max-width:1800px){
	#header h1{left:20rem}
	#header .area_util{right:20rem}
}

@media screen and (max-width:1600px){
	#header nav .gnb {margin-right: 80rem;}
	#header nav .gnb > li {padding: 0 20rem;}
}

@media (max-width:1480px){
	html{font-size:0.06756756756756757vw;}
}

@media all and (max-width:1023px){
	html{font-size:0.09775171065493645vw;}
	body.active{overflow:hidden;}
	#header .btn_menu > span:nth-of-type(2){margin-top:0;}
}

@media screen and (max-width:1480px){
	.wrap,
    .wrap02,
    .wrap03{width:auto; margin:0 30rem}
}

@media screen and (max-width:1279px){
	/* body,
	p,
	li,
	a{font-size:15rem;} */
}

@media all and (min-width:1024px){
	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:15rem; right:0; width:100%; padding:8rem 17rem; background:#fff; border:1rem solid #444; box-shadow:15rem 20rem 29rem 0rem rgba(0, 0, 0, 0.23); transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}

	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:35rem; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10rem 0rem; background:#fff; border-top:1rem solid #e1e1e1; font-size:15rem; color:#404040; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0rem;}
	
	a[data-link="call"]{cursor:auto; pointer-events:none;}
}

@media all and (max-width:1023px){
	#header{height:60rem}
	#footer h1 img,
	#header h1 img{height:40rem}

	#header .btn_menu,
	#header .btn_close{display:block;}
	
	#header nav{position:fixed; top:0rem; right:-100%; z-index:998; width:375rem; height:100%; margin:0; background:#fff;}
	#header nav.active{right:0rem;box-shadow:-5rem 0rem 15rem rgba(0,0,0,0.1);transition:all 0.5s ease-out 0s;background: #111;}
	#header nav .gnb > li{display:block;}
	#header nav .gnb{width:100%;overflow-y:auto;box-sizing: border-box;padding: 20rem;}
	#header nav .gnb > li{padding:0;}
	#header nav .gnb > li > a{line-height:1;display:block;padding:15rem 0;font-size:18rem;color: #fff;text-align:left;transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; padding:0rem 0 20rem;}
	#header nav .gnb > li ul > li > a{display:block; padding:10rem 0rem;}
	#header nav .gnb > li ul li.active a{color:#eeaf5e;}
	#header nav .gnb > li:after{display:none;}
	
	#header .area_util{position: static;transform:none;background: #ffe345;height: 60rem;}
	#header .area_util ul li a{color: #111;font-size: 15rem;font-weight: 500;}
	#header .area_util ul li:before{background: #bda626;width: 3rem;height: 3rem;top: 12rem;}


}


@media (max-width:860px){
	html{font-size:0.13020833333333335vw;}

	.wrap,
    .wrap02,
    .wrap03{width:auto; margin:0 20rem}

}

@media (max-width: 540px){

	html{font-size:0.26666666666666665vw;}
	
	#footer h1 img, #header h1 img {height: 32rem;}
	#header nav{width:100%;}

	#footer{padding:50rem 0}
	
	#footer .menu{margin:20rem 0}
	#footer .menu li:before{display:none;}
	#footer .menu li{margin-right:15rem; padding-right:0}
	#footer .menu li a{font-size:14rem;}
	
	.cs_center{position:static; margin-bottom:25rem}
	.cs_center > div h3{margin:25rem 0 6rem}

	#footer .cpright,
	#footer .info li,
	.cs_center > div ul li{font-size:14rem;}

	.area_quick a {width: 60rem; height: 60rem;}
	.area_quick a img {height: 20rem;}
	.area_quick a p {font-size: 12rem; margin-top: 3rem;}

    .area-quick {right: 20rem; bottom: 20rem; border-radius: 5rem;}
    .area-quick a {width: 75rem; height: 75rem; padding: 5rem;}
    .area-quick a::before {flex: none; width: 22rem; height: 23rem;}
    .area-quick a span {font-size: 14rem; line-height: 1.3; text-align: center; padding-top: 7rem;}
}


@media all and (max-width:360px){
	body,
	p,
	li,
	a{font-size:13rem;}
}