@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");

body, body *, input, select, div {  font-family: 'Pretendard Variable', sans-serif; }
h2 {vertical-align:middle;}
h2 img {display:inline-block; vertical-align:middle; margin:0 0 7px 5px;}

.mainslider {float:left; width:100%; height:82vh; background:var(--color-darkgray); position:relative; overflow:hidden;}
	.mainslider h1 {font-size:3rem; }
	.mainslider:after {position:absolute; left:0; top:0; width:100%; height:100%; background:#19192c; opacity:0.8; z-index:2; content:'';}
	#myvideo { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);	min-width: 150%; width:auto; height:auto; min-height: 140%; z-index: -100;	background: #333;	background-size: cover; z-index:1;}
	.mainslider .layerbox {top:52%; width:100%;}
	.mainslider .img {position:absolute; right:-30px; top:-35px; transform:scaleX(-1);}
	.mainslider .prline {font-size:15px; font-weight:500; color:#b4b4c1;}
		.mainslider .prline img {margin-bottom:3px; vertical-align:middle; filter:brightness(1.2); }
	.mainslider .prtxt {font-size:1.04rem; font-weight:500;}

@media (max-width:83rem) {
	.mainslider .layerbox {top:57%;}
	.mainslider h1 {font-size:2.4rem;}
	.mainslider a {margin-bottom:10px;}
}

#what {}
	#what .one {height:260px; position:relative;}
	#what .one img {position:absolute; right:20px; bottom:20px; height:50px;}

.process {}
	.process .one {height:300px;}
	.process .step {background:#f5e5de; color:#e34500; border-radius:20px; padding:5px 20px; font-size:16px; font-weight:500;}
	.process h2 {display:block; margin:1.5rem 0 2rem 0; font-size:1.4rem;}
	.process ul li:before {display:inline-block; width:4px; height:4px; border-radius:100%; background:gray; content:''; margin-right:7px; vertical-align:middle;}
	.process ul li {font-size:1rem; color:gray; margin-bottom:5px;}
	.process a {color:gray;}

.prc {float:left; width:100%; position:relative;}
	.prc .one {float:left; width:24.25%; margin:0 1% 1% 0; background:#fff; border:2px solid #fff; padding:30px; position:relative; height:650px; transition:all .2s;}
	.prc .one:nth-of-type(4n) {margin-right:0;}
	.prc .one.active {border-color:#10ad97;}
	.prc .one.active:before {position:absolute; top:-37px; left:-2px; background:#10ad97; content:'가장 인기 많은 상품'; width:calc(100% + 4px); height:35px; line-height:35px; padding:0 20px;color:#fff; font-weight:500; font-size:1rem;}
	.prc .one:hover {filter:drop-shadow(rgba(1, 30, 60, 0.14) 0px 15px 30px); }

	.prc_head {}
		.prc_head h2 {font-size:2rem; border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:30px;}
		.prc_head .total {font-size:2rem; font-weight:700;}
		.prc_head .total span {font-size:1.1rem;  }
		.prc_head .ovv {font-weight:700; margin:20px 0 0 0;}
		.prc_head .ovv span {color:#10ad97; }
		.prc_head a {display:block; height:50px; line-height:50px; text-align:center; border:1px solid #10ad97; color:#10ad97; background:transparent; width:100%; font-weight:500; margin:30px 0; position:relative;transition:all .1s; }
		.prc_head a:hover {color:#fff !important; background:#10ad97;}

	.prc_cont {float:left; width:100%;}
		.prc_cont h2 {font-size:1rem; margin-bottom:20px; color:gray;}
		.prc_cont li {font-size:.94rem; margin-bottom:10px; }
		.prc_cont li:before {display:inline-block; content:'✓'; margin-right:15px; color:#10ad97;}

	.prc .one.free {border-color:#3f80d1;}
		.prc .one.free .prc_head h2 {color:#3f80d1;}
		.prc .one.free .prc_cont li:before {color:#3f80d1; content:'•'; margin-right:5px;}
		.prc .one.free .prc_cont li {color:#3f80d1; font-weight:500; margin-bottom:15px;}
		.prc .one.free .prc_cont li p {color:gray; font-size:0.84rem; margin-top:3px; padding-left:13px;}

	.prc .etcs {float:left; width:100%;}
		.prc .etcs li:before {display:inline-block; content:'•'; margin-right:5px; color:gray;}
		.prc .etcs li {font-size:1rem;}

	.prc.type_1 {}
		.prc.type_1 .one.active {border-color:#d51258;}
		.prc.type_1 .one.active:before {background:#d51258;}
		.prc.type_1 .prc_head .ovv span {color:#d51258;}
		.prc.type_1 .prc_head a {border-color:#d51258; color:#d51258;}
		.prc.type_1 .prc_head a:hover {background:#d51258;}
		.prc.type_1 .prc_cont li:before {color:#d51258;}
		.type_1.hlight:after {background:#ffbdd5 !important;}

	.prc.type_3 {}
		.prc.type_3 .one.active {border-color:#8836c5;}
		.prc.type_3 .one.active:before {background:#8836c5;}
		.prc.type_3 .prc_head .ovv span {color:#8836c5;}
		.prc.type_3 .prc_head a {border-color:#8836c5; color:#8836c5;}
		.prc.type_3 .prc_head a:hover {background:#8836c5;}
		.prc.type_3 .one {height:540px;}
		.prc.type_3 .prc_cont li:before {color:#8836c5;}
		.type_3.hlight:after {background:#efafff !important;}

	.prc.type_4 {}
		.prc.type_4 .one.active {border-color:var(--color-indigo);}
		.prc.type_4 .one.active:before {background:var(--color-indigo);}
		.prc.type_4 .prc_head .ovv span {color:var(--color-indigo);}
		.prc.type_4 .prc_head a {border-color:var(--color-indigo); color:var(--color-indigo);}
		.prc.type_4 .prc_head a:hover {background:var(--color-indigo);}
		.prc.type_4 .prc_cont li:before {color:#c9c9c9;}
		.type_4.hlight:after {background:#ffbdd5 !important;}

.prc.renew .one {width:24.25%; height:730px; }
.prc.renew .one:nth-of-type(4n) {margin-right:1%;}
.prc.renew .one:nth-of-type(5n) {margin-right:0;}

.prc.renew .prc_head h2 { }
.prc.renew .prc_head h2 {font-size:1.7rem;border-radius:5px;}
.prc.renew .total {color:var(--color-indigo);}
.prc.renew .total span {color:#000;}

.prc.renew .one .tab1 {position:absolute; left:-86px; top:105px; background:var(--color-indigo); color:#fff; padding:7px 20px; font-weight:600; font-size:1.1rem; }

#seclast {}
	#seclast .btns {margin:0 10px;}
	#seclast h2 img {filter:invert(1); height:30px;}

footer {padding:5rem 0 4rem 0; font-size:1rem; color:gray; font-weight:500;}
footer .gotobtn {padding:10px 20px; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.6);}
footer a { color:rgba(255,255,255,0.6);}

.qcontact {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:700px; max-height:80vh; overflow-y:auto; border:4px solid var(--color-indigo); border-top:0; box-shadow:0 40px 60px rgba(0,0,0,0.1); display:none; z-index:12; background:#fff; padding:0;}
	.qcontact.show {display:block;}
	.qcontact h2 {font-size:1.4rem;padding:20px; background:var(--color-indigo); color:#fff;}
	.qcontact .close {float:right; font-size:1.5rem; cursor:pointer;}

	.qcontact .agrcont {float:left; width:100%; font-size:14px; height:120px; border:1px solid #ddd; padding:20px; overflow-y:scroll; background:#f7f7f7; }
	.qcontact .contform {padding:20px;}
	.qcontact .agrline {text-align:right; float:left; width:100%; margin:10px 0; font-size:14px;}

.quickcall {position:fixed; bottom:40px; right:40px; background:var(--color-indigo); color:#fff; font-weight:500; border-radius:5px; height:60px; line-height:60px; padding:0 20px; cursor:pointer;}

.quickbanner {position:fixed; bottom:120px; right:40px; background:url('../../img/qb_bg.jpg'); background-position:80% 70%; background-size:200%; border-radius:5px; height:163px; width:163px; color:#fff; padding:1rem; z-index:11; cursor:pointer;}
	.quickbanner h2 {font-size:1.3rem;}
	.quickbanner p {position:absolute; bottom:20px; right:20px; color:#84aafe; font-size:12px;}

.mob_scroll {display:none; position:absolute; bottom:30%; left:50%; transform:translate(-50%,0%); background:rgb(102 73 141 / 60%); z-index:4; padding:20px 40px; text-align:center; color:#fff; border-radius:20px; font-weight:bold;}

@media (max-width:83rem) {
	.mainslider .img {top:-15px; }

	.prc { padding:0 0 30px 0;}
	.prc .one, .prc.renew .one { width:100%; height:initial; float:left; padding:20px; margin-bottom:20px; border-color:var(--color-indigo);}
	.prc .one.active {margin-top:40px;}
	.prc.renew .one .tab1 {left:initial; right:20px; top:12px;}
	.vats {text-align:left !important; margin-top:20px;}

	.prc_head h2 {font-size:1.5rem;}
	.prc_head .total {font-size:1.35rem;}
	.prc_cont li {white-space:initial;}
	.mob_scroll {display:none;}

	#clients .one img {max-width:90%;}

	#what .one p {font-size:1rem;}

	#seclast {}
		#seclast .btns {margin:10px 0px;}

	.quickcall {bottom:20px;}
	.quickbanner {bottom:90px; height:140px;}

	footer {padding:5rem 0 12rem 0;}
	footer .gotobtn {display:none;}

	.quickcall, .quickbanner {right:20px;}
}