@charset "UTF-8";

:root {
	--color-white: #fff;
	--color-white-80: rgba(255, 255, 255, 0.80);
	--color-black: #000;
	--color-bg01: #222;
	--color-point01: #7d4cfc;
	--color-text-primary: #111;
	--color-text-secondary: #343434;
	--color-text-tertiary: #666;
}

.pc { display: block;}
.mob { display: none;}

@media all and (max-width: 768px){
	.pc { display: none;}
	.mob { display: block;}
}

header{position:fixed;left:0;top:0;width:100%;height: 80px;z-index:999;padding: 0 clamp(24px,8.3333vw,160px);overflow:hidden;;transition:0.4s;}
header.on { background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); --webkit-backdrop-filter: blur(10px);}
header .head_in{position:relative;height: 100%;display:flex;align-items:center;justify-content:space-between;}
header h1{width:90px;height:34px;}
header h1 a{display:block;background:url(../images/logo.svg) no-repeat left center / contain; height:100%;}
header .gnb_dim{display:none;background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:0.6s;}
header .gnb{display:flex; align-items: center; gap:0 63px; height: 100%;}
header .gnb > li{position:relative;}
header .gnb > li > a{display:block;}
header .gnb > li > a span{display:flex;align-items:center;position:relative;color:var(--color-text-secondary);font-size:clamp(16px,1.0416vw,20px);line-height:2em; font-weight: 700;}
header .gnb > li:hover > a span,
header .gnb > li.active > a span { color:var(--color-point01);}
header .info{display:none;gap:0 2vw;align-items:center;z-index: 1;}
header .gnb_btn{display:none;width:32px; height:32px;}
header .gnb_btn span{display:block; background-color:#000;width:20px;height:2px;transition:0.4s;}
header .gnb_btn span:nth-child(2) { width:25px;}
header .gnb_btn span ~ span{margin-top:7px;}
.sub header{background-color:var(--color-white);}
.sub header .head_in::after{opacity:1;}

@media all and (max-width: 1600px){
	header{padding:0 40px;}
}

@media all and (max-width: 1024px){
	header{overflow: visible;}
	header .gnb_dim{display:block; min-height:100vh;}
	header .gnb{position:fixed;top:0;right:0;background-color:var(--color-white);width:50%;height:100%; min-height:100vh; display:block;padding: 15vw 5vw 0;transform:translate(100%,0);transition:0.8s;}
    header .info { display: flex;}
	header .gnb_btn{display:block; cursor: pointer;}
	header .gnb > li { height:auto;}
	header .gnb li ~ li {margin-top:5vw;}
	header .gnb > li > a{padding:0;display: flex;}
	header .gnb > li > a span{line-height:1.3em;padding:0;font-size: 2.8vw;}
	header .gnb_btn span:not(:nth-child(2)) { position:relative; left:5px;}
	header.gnb_on .head_in::after{opacity:0;}
	header.gnb_on .gnb_dim{opacity:1;pointer-events:auto;}
	header.gnb_on .gnb_btn span:nth-child(1){transform: translateY(9px) rotate(45deg);transform-origin: center center;}
	header.gnb_on .gnb_btn span:nth-child(2){opacity: 0;}
	header.gnb_on .gnb_btn span:nth-child(3){transform: translateY(-9px) rotate(-45deg);transform-origin: center center;}
	header.gnb_on .gnb{transform:none;}
	header .depth01.on > li > a span::before{transform:none;}
}

@media all and (max-width:768px){
	header{height:70px; padding:0 24px;}
	header .head_in{height:100%;}
	header h1{width: 58px;height: 23px;}
	header .info .tel i{width:5vw;height:5vw;}
	header .info .tel p{font-size: 3.8vw;}
	header .gnb{width: 60%;padding: 20vw 9vw 0;}
	header .gnb li ~ li{margin-top:8vw;}
	header .gnb > li > a span{font-size:5vw;}
}

footer {padding:50px 100px; background: var(--color-bg01);}
footer .footer_in { padding:0 3.125vw; font-size: clamp(12px,0.729vw,14px);}
footer .top { display: flex; justify-content: space-between; padding-bottom: 24px;}
footer .top h2 { color:var(--color-white); font-size: clamp(12px,0.729vw,14px);}
footer .top .info li { display: flex; align-items: baseline; gap:0 1.0416vw; margin-top: clamp(10px,0.625vw,12px); color:var(--color-white-80);}
footer .top .info li strong { display: block; min-width: 5.7291vw;}
footer .top .sns {display: flex; align-items: center; justify-content: flex-end;}
footer .top .sns li a {display: flex; align-items: center; justify-content: center; width:50px; height:50px; border-radius: 50%; background: #3D3D3D;}
footer .bot { padding-top: 24px; border-top:1px solid #313131;}
footer .copy { color:var(--color-text-tertiary);}

@media all and (max-width:1024px){
	footer {padding:40px;}
}
@media all and (max-width:768px){
	footer {padding:40px 20px;position:relative;}
	footer .top h2 { line-height: 30px;}
	footer .top .info li {gap:0;}
	footer .top .info li strong { width: 98px; min-width: auto;}
	footer .top .info li p { width:calc(100% - 98px); word-break: keep-all;}
	footer .top .sns { position: absolute; right:20px; top:35px;}
	footer .top .sns li a { width: 30px; height: 30px;}
	footer .top .sns li a img { width: 16px;}
}

.quick_btn { position:fixed; right:57px; bottom:69px; z-index: 99; transition:.6s;}
.quick_btn.on { bottom:60px;}
.quick_btn.bottom {bottom:256px;}
.quick_btn a {display: inline-flex; align-items: center; padding:0 24px; height:60px; border-radius: 60px; background: var(--color-white);box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.15);}
.quick_btn a span { padding-left: 30px; background:url(../images/ico_quick.svg) left center no-repeat; font-size:clamp(14px,1.04166vw,20px); color:#272727; font-weight: 700;}

@media all and (max-width:1024px){
	.quick_btn a { height:50px;}
}

@media all and (max-width:768px){
	.quick_btn {right:20px;}
	.quick_btn.on { bottom:25px;}
	.quick_btn.bottom {bottom:277px;}
	.quick_btn a { padding:0 16px; height:40px;}
	.quick_btn a span { padding-left: 23px; background-size: 15px auto;}
}

.inner { margin: 0 auto;}

.tag { display: inline-flex; align-items: center; padding:0 14px; height:38px; border-radius: 100px; background: #FFE100; font-size: clamp(13px,1.1458vw,22px); font-weight: 700; color:var(--color-text-primary);}
.highlight { display: inline-block; position:relative; z-index: 2; padding:0 14px; color:var(--color-text-primary);}
.highlight::before { content:''; position: absolute; left:0; top:0; bottom:0; z-index: -1; width:100%; background: #FFE100; transition:.6s;}
.highlight.on::before { width:100%;}
.highlight02 { display: inline-block; position:relative; z-index: 2; padding:0 15px; color:#FFE100;}
.highlight02::before { content:''; position: absolute; left:0; top:0; bottom:0; z-index: -1; width:100%; background: var(--color-text-primary); transition:.6s;}
.highlight02.on::before { width:100%;}

.btn_wrap {margin-top: 60px; text-align: center;}
.btn01 {display: inline-flex; align-items: center; padding:0 30px; height:60px; border-radius: 60px; background:var(--color-point01);}
.btn01.border { border:2px solid var(--color-black); box-sizing: border-box;}
.btn01 span { font-size:clamp(15px,1.1458vw,22px); color:var(--color-white); font-weight: 700;}
.btn02 {display: inline-flex; align-items: center; padding:0 30px; height:60px; border-radius: 60px; border: 2px solid var(--color-black); background: var(--color-white);}
.btn02 span { font-size:clamp(15px,1.1458vw,22px); font-weight: 700; color:var(--color-text-primary);}
.btn03 {display: inline-flex; align-items: center;  padding:0 64px; height:96px; border-radius: 100px; background: linear-gradient(113deg, #8455FF 35.13%, #3872EF 102.57%);}
.btn03 span { padding-right:44px; background:url(../images/ico_arrow01.svg) right center no-repeat; font-size:clamp(17px,1.5625vw,30px); font-weight: 700; color:var(--color-white);}
.btn04 {display: inline-flex; align-items: center; padding:0 30px; height:60px; border-radius: 60px; background:#4D6AF3;}
.btn04.border { border:2px solid var(--color-black); box-sizing: border-box;}
.btn04 span { font-size:clamp(15px,1.1458vw,22px); color:var(--color-white); font-weight: 700;}
.btn05 {display: inline-flex; align-items: center;  padding:0 30px; height:60px; border-radius: 100px; background: linear-gradient(113deg, #8455FF 35.13%, #3872EF 102.57%);}
.btn05 span { font-size:clamp(15px,1.1458vw,22px); color:var(--color-white); font-weight: 700;}

/* ::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-track {background: rgba(255,255,255,0.3);}
::-webkit-scrollbar-thumb {background: rgba(125, 76, 252,1);border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: rgba(125, 76, 252,.8);} */

@media all and (max-width: 1320px){
	.btn03 {padding:0 44px; height:60px;}
	.btn03 span { padding-right: 34px; background-size: 28px auto;}
}
@media all and (max-width: 1024px){
	.btn01,
	.btn02,
	.btn04 { height:52px;}
}
@media all and (max-width: 768px){
	.tag { padding:0 10px; height:24px;}
	.btn_wrap {margin-top: 40px;}
	.btn01, .btn02, .btn03, .btn04 {padding:0 30px; height:44px;}
	.btn03 span {padding-right: 24px; background-size: 18px auto;}
	.btn01 { padding:0 16px; height:44px;}
	.btn05 {height: 44px;}
	.highlight,
	.highlight02 { padding:0 10px;}
}