/*공통*/
@import url("reset.css");

:root {
	
	/*폰트*/
	--font-k : 'Pretendard';
	--font-e : 'Barlow', sans-serif;

	/*폰트 사이즈*/
	--font-14 : 14px;
	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-24 : 24px;
	--font-30 : 30px;
	--font-40 : 40px;
	--font-50 : 50px;
	--font-60 : 60px;

	/*마진, 패딩*/
	--gap-8 : 8px;
	--gap-16 : 16px;
	--gap-24 : 24px;
	--gap-30 : 30px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-60 : 60px;
	--gap-80 : 80px;

	/*컬러*/
	--main-color : #F26539;
	--black : #111;

	/*기타*/
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);
	--max-w : 1760px;
	--conts-w : 1400px;
	--min-w : 280px;
	--header : 100px;
}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
	:root {
		--font-14 : 12px;
		--font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-24 : 22px;
		--font-30 : 26px;
		--font-40 : 32px;
		--font-50 : 42px;
		--font-60 : 52px;

		--gap-16 : 14px;
		--gap-24 : 18px;
		--gap-30 : 25px;
		--gap-32 : 27px;
		--gap-40 : 32px;
		--gap-60 : 52px;
		--gap-80 : 62px;

		--header : 80px;
	}
}

@media screen and (max-width: 480px) {
	:root {
		--font-14 : 11px;
		--font-16 : 12px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-24 : 17px;
		--font-30 : 20px;
		--font-40 : 25px;
		--font-50 : 32px;
		--font-60 : 38px;

		--gap-8 : 5px;
		--gap-16 : 12px;
		--gap-24 : 15px;
		--gap-30 : 20px;
		--gap-32 : 22px;
		--gap-40 : 24px;
		--gap-60 : 36px;
		--gap-80 : 52px;

		--header : 70px;
	}
}

#wrap {min-width:280px;}


header {width:100%; min-width:var(--min-w); position:fixed; left:0; top:0; z-index:1000; transition:all 0.3s ease-in-out;}
header > .inner {width:96%; max-width:var(--max-w); margin:0 auto; display:flex; align-items:center;}
header .logo > a {width:78px; height:32px; background:url(/img/com/logo.svg) center no-repeat; background-size:cover; font-size:0; display:block;}
header .gnb-wrap {flex-grow:1;}
header .gnb-wrap .gnb-box {display:flex; align-items:center; justify-content:center; gap:0 60px; width:fit-content; margin:0 auto; position:relative;}
header .gnb-wrap .gnb-box li.gnb {flex-grow:0; display:flex; align-items:center; justify-content:center; height:100px;}
header .gnb-wrap .gnb-box li.gnb > a {font-size:var(--font-18); font-weight:600; color:#fff;}
header .gnb-wrap .gnb-box li.gnb .snb-wrap {width:100%; height:100px; position:absolute; left:0; top:100px; background:yellow; display:flex; align-items:center; visibility:hidden; opacity:0; transition:all 0.2s ease-in-out;}
header .gnb-wrap .gnb-box li.gnb .snb-wrap:before {content:""; width:120vw; height:100%; background:#fff; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0; border-top:1px solid #EBEBEB;}
header .gnb-wrap .gnb-box li.gnb .snb-wrap .snb-box {display:flex; align-items:center; gap:20px 60px; flex-wrap:wrap; z-index:1;}
header .gnb-wrap .gnb-box li.gnb .snb-wrap .snb-box li.snb a {font-size:var(--font-18);}
header .gnb-wrap .gnb-box li.gnb .snb-wrap .snb-box li.snb:hover a {color:var(--main-color); text-decoration:underline; text-underline-position:under;}
header .gnb-wrap .gnb-box li.gnb:hover > a {color:var(--main-color) !important;}
header .gnb-wrap .gnb-box li.gnb:hover > .snb-wrap {visibility:visible; opacity:1;}
header .gnb-wrap .gnb-box li.gnb:nth-child(2) .snb-wrap {width:150%;}
header .header-util .btn-wrap {width:100%; display:flex; align-items:center; gap:0 var(--gap-8);}
header .header-util .btn-wrap > span {position:relative; display:block;}
header .header-util .btn-wrap > span > a {width:80px; height:36px; display:flex; align-items:center; justify-content:center; font-size:var(--font-16); font-weight:600; color:#fff;}
header .header-util .util-lan .btn-language > span {display:block; position:relative; padding-left:calc(var(--gap-8) + 18px);}
header .header-util .util-lan .btn-language > span:before {content:""; width:18px; height:18px; background:url(/img/com/icon_language.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}
header .header-util .util-lan .language-list {width:100%; position:absolute; left:50%; top:calc(var(--gap-16) + 36px); background:#fff; border-radius:8px; border:1px solid #EBEBEB; transform:translateX(-50%); visibility:hidden; transition:all 0.2s ease-in-out; opacity:0;}
header .header-util .util-lan .language-list ul {width:100%; padding:var(--gap-8) 0;}
header .header-util .util-lan .language-list ul li {width:100%; text-align:center; padding:5px 0;}
header .header-util .util-lan .language-list ul li a {color:var(--black); position:relative;}
header .header-util .util-lan .language-list ul li a.active {color:var(--main-color); text-decoration:underline; text-underline-position:under;}
header .header-util .util-lan:hover .language-list {visibility:visible; opacity:1;}
header .header-util .util-menu .btn-menu {border-radius:18px; border:1px solid #fff; background:rgba(255,255,255,0.2);}

header.on {background:#fff;}
header.on .logo > a {background-image:url(/img/com/logo_on.svg);}
header.on .gnb-wrap .gnb-box li.gnb > a {color:var(--black);}
header.on .header-util .btn-wrap > span > a {color:var(--black);}
header.on .header-util .util-lan .btn-language > span:before {background-image:url(/img/com/icon_language_on.svg);}
header.on .header-util .util-menu .btn-menu {border-color:#000;}

header.fix {transform:translateY(-100%);}

header.sub-fix {background:#fff;}
header.sub-fix .logo > a {background-image:url(/img/com/logo_on.svg);}
header.sub-fix .gnb-wrap .gnb-box li.gnb > a {color:var(--black);}
header.sub-fix .header-util .btn-wrap > span > a {color:var(--black);}
header.sub-fix .header-util .util-lan .btn-language > span:before {background-image:url(/img/com/icon_language_on.svg);}
header.sub-fix .header-util .util-menu .btn-menu {border-color:#000;}


@media screen and (max-width: 1280px) {
	header > .inner {height:100px; justify-content:space-between;}
	header .gnb-wrap {display:none;}
}

@media screen and (max-width: 768px) {
	header > .inner {height:80px;}
	header .logo > a {width:68px; height:28px;}
}

@media screen and (max-width: 480px) {
	header > .inner {height:70px;}
	header .logo > a {width:59px; height:24px;}
	header .header-util .btn-wrap > span > a {width:70px; height:32px;}
	header .header-util .btn-language > span {padding-left:calc(var(--gap-8) + 16px);}
	header .header-util .btn-language > span:before {width:16px; height:16px;}
	header .header-util .language-list {top:calc(var(--gap-8) + 32px); border-radius:6px;}
}


footer {width:100%; background:#111; position:relative; z-index:100;}
footer > .inner {width:96%; max-width:var(--conts-w); margin:0 auto;}
footer .footer-conts {width:100%; padding:var(--gap-60) 0;}
footer .footer-conts .logo {width:254px; height:38px; background:url(/img/com/logo_gray.svg) center no-repeat; background-size:cover; font-size:0;}
footer .footer-conts .info {width:100%; margin-top:var(--gap-16);}
footer .footer-conts .info li {display:flex; align-items:center; gap:0 var(--gap-16); color:#999; margin-top:var(--gap-8); font-size:var(--font-16);}
footer .footer-conts .info li:nth-child(1) {margin-top:0;}
footer .footer-conts .info li span {position:relative;}
footer .footer-conts .info li span.company {font-weight:600;}
footer .footer-conts .info li span.fax:before {content:""; width:1px; height:38%; box-sizing:border-box; border-left:1px solid #999; position:absolute; left:calc((var(--gap-16) / 2) * -1); top:50%; transform:translateY(-50%);}
footer .copyright {width:100%; border-top:1px solid #333; padding:var(--gap-16) 0 var(--gap-40) 0; text-align:right; font-size:var(--font-14); color:#666; font-weight:600;}

@media screen and (max-width: 480px) {
	footer .footer-conts .logo {width:201px; height:30px; margin:0 auto;}
	footer .footer-conts .info li {justify-content:center; flex-wrap:wrap; gap:var(--gap-16);}
	footer .copyright {text-align:center;}
}


.scroll-wrap {width:100%;}
.scroll-wrap.x {overflow-x:auto; padding-bottom:var(--gap-8);}

.scroll-wrap::-webkit-scrollbar {width:4px;}
.scroll-wrap::-webkit-scrollbar-thumb {border-radius:5px; background:var(--main-color);}
.scroll-wrap::-webkit-scrollbar-track {background:transparent;}
.scroll-wrap.x::-webkit-scrollbar {height:4px;}

.button {display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.button.basic {min-width:160px; height:48px; border-radius:24px; background:#fff; border:1px solid #CCCCCC; padding:0 var(--gap-32); font-size:var(--font-16); font-weight:600; transition:background 0.3s ease-in-out;}
.button.basic:hover {background:#333; border-color:#333; color:#fff;}

.button.dir span {padding-right:calc(var(--gap-16) + var(--gap-8)); position:relative;}
.button.dir span:after {content:""; width:var(--gap-16); height:100%; background:url(/img/conts/icon_more_b.svg) center no-repeat; background-size:100% auto; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.button.dir:hover span:after {background-image:url(/img/conts/icon_more.svg);}

.button.fill {border:none; background:rgba(242,101,57,1); color:#fff;}
.button.fill:hover {background:rgba(242,101,57,0.6);}
.button.fill.dir span:after {background-image:url(/img/conts/icon_more.svg);}
.button.fill.dir:hover span:after {background-image:url(/img/conts/icon_more.svg);}

.button.line {border-color:var(--main-color); color:var(--main-color); opacity:1; transition:opacity 0.3s ease-in-out;}
.button.line:hover {background:#fff; border-color:var(--main-color); color:var(--main-color); opacity:0.6;}

.button.w-line {border-color:#fff; color:#fff; background:transparent; transition:background 0.3s ease-in-out;}
.button.w-line:hover {background:#fff; border-color:#fff; color:var(--back);}

.button.download span {padding-right:calc(var(--font-16) + var(--gap-8)); position:relative;}
.button.download span:after {content:""; width:var(--font-16); height:var(--font-16); background:url(/img/conts/icon_download_w.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.button.download.w span:after {background-image:url(/img/conts/icon_download.svg);}

.button.w {background:#fff; border-color:#fff; color:var(--main-color);}
.button.w:hover {background:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.6); color:var(--main-color);}


@media screen and (max-width: 768px) {
	.button.basic {min-width:120px; height:42px;}
}

@media screen and (max-width: 480px) {
	.button.basic {min-width:100px; height:38px;}
}


.select {width:fit-content; min-width:120px; height:56px; border-radius:28px; box-sizing:border-box; border:1px solid #DCDCDC; background:#fff; position:relative; cursor:pointer; padding:0 var(--gap-24); background:#fff; z-index:100;}
.select .selected {width:100%; height:100%; font-size:var(--font-18); display:flex; align-items:center; padding-right:16px; position:relative;}
.select .selected:after {content:""; width:16px; height:16px; background:url(/img/conts/icon_down_arrow.svg) center no-repeat; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.select .option-box {width:max-content; min-width:120px; background:#fff; border-radius:28px; border:1px solid #DCDCDC; overflow:hidden; position:absolute; left:50%; top:64px; transform:translateX(-50%); display:none; box-shadow:0 10px 10px rgba(0,0,0,0.1);}
.select .option-box > .wrap {width:100%; max-height:200px; overflow-y:auto;}
.select .option-box > .wrap::-webkit-scrollbar {width:4px;}
.select .option-box > .wrap::-webkit-scrollbar-thumb {border-radius:5px; background:#f7f7f7;}
.select .option-box > .wrap::-webkit-scrollbar-track {background:transparent;}
.select .option-box ul {width:100%; padding:10px 0;}
.select .option-box ul li.option {width:100%; font-size:var(--font-18); color:#999; padding:var(--gap-8) var(--gap-24);}
.select .option-box ul li.on {color:var(--black);}
.select select {width:0; height:0; position:absolute; left:0; top:0; visibility:hidden; opacity:0;}
.select.on {border-color:var(--main-color);}
.select.on .option-box {display:block;}

@media screen and (max-width: 768px) {
	.select {min-width:110px; height:52px;}
	.select .selected {padding-right:14px;}
	.select .selected:after {width:14px; height:14px; background-size:12px auto;}
	.select .option-box {min-width:110px; top:60px;}
	.select .option-box > .wrap {max-height:180px;}
}

@media screen and (max-width: 480px) {
	.select {min-width:90px; height:46px;}
	.select .selected {padding-right:12px;}
	.select .selected:after {width:12px; height:12px; background-size:10px auto;}
	.select .option-box {min-width:90px; top:51px;}
	.select .option-box > .wrap {max-height:140px;}
}


.check {position:relative;}
.check input[type="checkbox"] {width:0; height:0; opacity:0; visibility:hidden; position:absolute; left:0; top:0;}
.check input[type="checkbox"] + label {font-size:var(--font-18); position:relative; padding-left:calc(var(--font-18) + var(--gap-8)); cursor:pointer;}
.check input[type="checkbox"] + label:before {content:""; width:var(--font-18); height:var(--font-18); box-sizing:border-box; background:#fff; border:1px solid #DCDCDC; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.check input[type="checkbox"]:checked + label:before {background:var(--main-color); border-color:var(--main-color);}
.check input[type="checkbox"]:checked + label:after {content:""; width:var(--font-18); height:var(--font-18); box-sizing:border-box; background:url(/img/conts/check.svg) center no-repeat; background-size:cover; position:absolute; left:0; top:50%; transform:translateY(-50%);}

.check.small input[type="checkbox"] + label {font-size:var(--font-16); padding-left:calc(var(--font-16) + var(--gap-8));}
.check.small input[type="checkbox"] + label:before {width:var(--font-16); height:var(--font-16);}
.check.small input[type="checkbox"]:checked + label:after {width:var(--font-16); height:var(--font-16);}



.sitemap {width:100%; min-width:280px; height:var(--nvh); position:fixed; left:0; top:0; z-index:10001; visibility:hidden;}
.sitemap:before {content:""; width:0; height:100%; background:var(--main-color); position:absolute; z-index:0; left:0; top:0; transition:all 0.6s ease;}
.sitemap .sitemap-top {width:100%; height:var(--header); visibility:hidden; opacity:0; transition:all 0.5s 0.5s ease-in-out; z-index:10; position:relative;}
.sitemap .sitemap-top > .wrap {width:95%; max-width:var(--max-w); margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between;}
.sitemap .sitemap-top .logo > a {width:78px; height:32px; background:url(/img/com/logo.svg) center no-repeat; background-size:cover; font-size:0; display:block;}
.sitemap .sitemap-top .btn-sitemap-close {width:32px; height:32px; background:url(/img/com/icon_close.svg) center no-repeat; font-size:0; background-size:cover; cursor:pointer;}
.sitemap .sitemap-conts {width:100%; height:calc(var(--nvh) - var(--header)); position:relative; visibility:hidden; opacity:0; transition:all 0.5s 0.6s ease-in-out;}
.sitemap .sitemap-conts > .wrap {width:92%; max-width:var(--conts-w); margin:0 auto; height:100%; display:flex; align-items:center; position:relative; z-index:10;}
.sitemap .sitemap-conts > .wrap:before {content:""; width:50%; height:100%; position:absolute; right:0; bottom:0; z-index:0; background:url(/img/com/sitemap_obj_04.png) right bottom no-repeat; background-size:100% auto;}
.sitemap .sitemap-conts ul.gnb-box {width:100%;}
.sitemap .sitemap-conts ul.gnb-box li.gnb {width:100%; display:flex; align-items:center; margin-top:var(--gap-60);}
.sitemap .sitemap-conts ul.gnb-box li.gnb:nth-child(1) {margin-top:0;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 {width:320px; transform:translateX(100px); opacity:0; transition:transform 0.5s 0.7s ease-in-out, opacity 0.3s 0.7s ease-in-out;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 a {display:inline-block; vertical-align:middle; font-size:var(--font-50); letter-spacing:-2px; font-weight:600; color:rgba(255,255,255,0.6); position:relative;}
.sitemap .sitemap-conts ul.gnb-box li.gnb:hover .depth-1 a {color:rgba(255,255,255,1);}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap {padding-left:140px; width:calc(100% - 320px); transform:translateX(100px); opacity:0; transition:transform 0.8s 0.7s ease-in-out, opacity 0.3s 0.7s ease-in-out;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box {display:flex; align-items:center; gap:var(--gap-32) 0; flex-wrap:wrap;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb {position:relative;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb:before {content:""; width:1px; height:40%; box-sizing:border-box; border-left:1px solid rgba(255,255,255,0.6); position:absolute; right:0; top:50%; transform:translateY(-50%);}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb:last-child:before {display:none;}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb a {font-size:var(--font-20); font-weight:600; padding:0 var(--gap-32); color:rgba(255,255,255,0.6);}
.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb:hover a {color:rgba(255,255,255,1);}
.sitemap .sitemap-conts .obj-box .obj {position:absolute; z-index:0;}
.sitemap .sitemap-conts .obj-box .obj-1 {width:160px; height:160px; background:url(/img/com/sitemap_obj_01.png) center no-repeat; background-size:cover; left:2.5%; bottom:24%; animation:floatingObject 1.5s 1s forwards;}
.sitemap .sitemap-conts .obj-box .obj-2 {width:200px; height:200px; position:absolute; right:8%; top:23%; animation:circularMotion 30s linear infinite;}
.sitemap .sitemap-conts .obj-box .obj-2:before {content:""; width:120px; height:120px; background:url(/img/com/sitemap_obj_02.png) center no-repeat; background-size:cover; position:absolute; right:0; bottom:0; transform-origin:50% 50%; animation:circluarMotion 50s linear infinite;}
.sitemap .sitemap-conts .obj-box .obj-3 {width:400px; height:400px; background:url(/img/com/sitemap_obj_03.png) center no-repeat; background-size:cover; right:-5%; top:5%;}
.sitemap .sitemap-conts > .wrap::-webkit-scrollbar {width:4px;}
.sitemap .sitemap-conts > .wrap::-webkit-scrollbar-thumb {border-radius:5px; background:var(--main-color);}
.sitemap .sitemap-conts > .wrap::-webkit-scrollbar-track {background:transparent;}

.sitemap.open {visibility:visible;}
.sitemap.open:before {width:100%; left:auto; right:0%;}
.sitemap.open .sitemap-top {visibility:visible; opacity:1;}
.sitemap.open .sitemap-conts {visibility:visible; opacity:1;}
.sitemap.open .sitemap-conts ul.gnb-box li.gnb .depth-1,
.sitemap.open .sitemap-conts ul.gnb-box li.gnb .snb-wrap {transform:translateX(0); opacity:1;}

.sitemap .sitemap-top.close,
.sitemap .sitemap-conts.close {display:none;}

@keyframes floatingObject {
	0% {opacity:0; transform:translateY(50px,50px);}
	100% {opacity:1; transform:translateY(0px,0px);}
}

@keyframes circularMotion {
	100% {transform:rotate(360deg);}
}



@media screen and (max-width: 1280px) {
	.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 {width:250px;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 a {font-size:var(--font-40);}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap {padding-left:50px; width:calc(100% - 250px);}
}

@media screen and (max-width: 900px) {
	.sitemap .sitemap-conts {padding:var(--gap-80) 0;}
	.sitemap .sitemap-conts:before {content:""; width:92%; height:100%; background:url(/img/com/sitemap_obj_04.png) right bottom no-repeat; background-size:70% auto; position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:0;}
	.sitemap .sitemap-conts > .wrap {align-items:stretch; overflow-y:auto;}
	.sitemap .sitemap-conts > .wrap:before {display:none;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb {flex-wrap:wrap; margin-top:var(--gap-32);}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 {width:100%;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 a {padding-right:calc(var(--gap-16) + var(--gap-24));}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .depth-1 a:after {content:""; width:var(--gap-24); height:var(--gap-24); background:url(/img/com/button_down.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.sitemap .sitemap-conts ul.gnb-box li.gnb.open .depth-1 a:after {transform:translateY(-50%) scaleY(-1);}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap {width:100%; padding:var(--gap-32) var(--gap-24); padding-bottom:0; display:none;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box {flex-wrap:wrap;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb {width:100%;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb:before {display:none;}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box li.snb a {padding:0;}
	.sitemap .sitemap-conts .obj-box .obj-2 {display:none;}
	.sitemap .sitemap-conts .obj-box .obj-3 {right:-20%;}
}

@media screen and (max-width: 768px) {
	.sitemap .sitemap-top .logo > a {width:68px; height:28px;}
}

@media screen and (max-width: 480px) {
	.sitemap .sitemap-top .logo > a {width:59px; height:24px;}
	.sitemap .sitemap-top .btn-sitemap-close {width:24px; height:24px;}
	.sitemap .sitemap-conts {padding:30px 0;}	
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap {padding:var(--gap-24);}
	.sitemap .sitemap-conts ul.gnb-box li.gnb .snb-wrap ul.snb-box {gap:var(--gap-24) 0;}
	.sitemap .sitemap-conts .obj-box .obj-1 {width:100px; height:100px;}
	.sitemap .sitemap-conts .obj-box .obj-3 {width:300px; height:300px; right:-30%;}
}

.quick {position:fixed; right:var(--gap-60); bottom:var(--gap-60); z-index:1002; visibility:hidden; opacity:0; transition:all 0.3s ease-in-out;}
.quick.active {visibility:visible; opacity:1;}
.quick ul li {height:56px; position:relative; margin-top:var(--gap-16);}
.quick ul li:first-child {margin-top:0;}
.quick ul li a {display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:0; width:56px; height:56px; border-radius:28px; background:#fff; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.quick ul li a i {width:32px; height:32px; background-size:cover; background-position:center; background-repeat:no-repeat;}
.quick ul li a.btn-ppl i {background-image:url(/img/com/icon_ppl.svg);}
.quick ul li a.btn-file i {background-image:url(/img/com/icon_file.svg);}
.quick ul li a.btn-top {background-color:var(--main-color);}
.quick ul li a.btn-top i {background-image:url(/img/com/icon_top.svg);}
.quick ul li span {font-size:var(--font-16); font-weight:600; color:var(--main-color); visibility:hidden; opacity:0; width:0; transition:all 0 0.1s ease;}
.quick ul li a.btn-file {transition:width 0.5s ease;}
.quick ul li a.btn-file:hover {width:115px;}
.quick ul li a.btn-file:hover span {visibility:visible; opacity:1; width:auto;}

@media screen and (max-width: 480px) {
	.quick {right:var(--gap-24); bottom:var(--gap-24);}
	.quick ul li {height:42px;}
	.quick ul li a {width:42px; height:42px;}
	.quick ul li a i {width:24px; height:24px;}
	.quick ul li a.btn-file:hover {width:90px;}
}