.main .Tit {font-size: 2.5rem; color:var(--pointcolor); text-align: center; font-weight: 300;}



/* pseudo element 공통 */
.raonBtn:before,
.raonBtn:after {
    position: absolute;
    content: "";
}


/* button 기본 */
.raonBtn {position: relative; display: inline-block; width: auto; height: auto; background-color: transparent; border: none; cursor: pointer; margin: 3rem auto 0; min-width: 20rem;}
.raonBtn span {position: relative; display: inline-block; font-size: 1.125rem; top: 0; left: 0; width: 100%; padding: .7rem 2rem; transition: 0.3s;}
.raonBtn:before {background-color: var(--pointcolor); transition: 0.3s ease-out;}
.raonBtn span {color: rgb(255, 255, 255); border: 1px solid var(--pointcolor); transition: 0.2s 0.1s;}
.raonBtn span:hover {transition: 0.2s 0.1s;}
.raonBtn:before {top: 0; left: 0; right: 0; height: 100%; width: 100%;}
.raonBtn:hover:before {height: 0%;}




/* intro */
#intro {height: calc(100vh - 2rem); position: relative;}
#intro .container {height: 100%; display: flex; align-items: center; justify-content: center;}
#intro .notice {display: flex; align-items: center; justify-content: center; gap: 3rem; background-color: var(--pointcolor); padding: .3rem 0;}

#intro .search_wrap {display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .3rem 1rem; border: 1px solid var(--pointcolor); max-width: 37.5rem; width: 90%; margin-left: auto; margin-right: auto;}
#intro .search_wrap input {width: 80%; background-color: var(--black); border: none; color: var(--white);}
#intro .search_wrap input::placeholder {font-size: 1rem;}
#intro .search_wrap .search_btn {padding: .5rem 1.5rem; background-color: var(--pointcolor); color: var(--white); font-size: 1rem;}
#intro .search_wrap .searchImg {width: 1.25rem;}

/* solution */
#solution {background-color: #141413;}
#solution .Inner {max-width: 1180px; margin: auto; width: 100%;}
#solution .box {padding: 3.5rem 2.5rem; aspect-ratio: 12 / 14; display: flex; flex-direction: column; gap: 8rem; border: 1px solid transparent;  background: linear-gradient(#141413, #141413) padding-box, linear-gradient(180deg, var(--pointcolor), #fff) border-box;}
#solution .box > img {width: 3.75rem; margin-left: auto;}

@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#solution .box {--border-angle: 0deg; padding: 3.5rem 2.5rem; aspect-ratio: 12 / 14; cursor: pointer; display: flex; flex-direction: column; gap: 8rem; border: 1px solid transparent; background: linear-gradient(#141413, #141413) padding-box, conic-gradient(from var(--border-angle), var(--pointcolor) 0deg, #fff 180deg, var(--pointcolor) 360deg) border-box;}
#solution .box:hover {animation: solutionBorderRotate 2s linear infinite;}
@keyframes solutionBorderRotate {to {--border-angle: 360deg;}}

#solution .box > img {width: 3.75rem; margin-left: auto;}
#solution .box > img {width: 3.3rem; margin-left: auto; transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);}
#solution .box:hover > img {transform: translateY(-8px) scale(1.1);}
@media(max-width:768px) {
    #solution .box {justify-content: space-between; padding: 2.5rem 1rem; gap: 3rem; aspect-ratio: 12 / 13;}
}

/* plan */
#plan .box {padding: 2rem 2rem; border: 1px solid var(--gray); display: flex; flex-direction: column; gap: 3rem; position: relative;}
#plan .box:after {content:''; width: calc(100% + 2px); height: .5rem; background-color: transparent; position: absolute; top: -.5rem; left: -1px;}
#plan .box.on:after {background-color: var(--pointcolor);}
#plan .box.on {border-color: var(--pointcolor);}
#plan .plan_name {font-family: var(--pointfont); font-size: 1.875rem;}
#plan .plan_Btn {text-align: center; width: 100%; padding: .5rem 1rem; text-align: center; font-size: 1rem; display: block; background-color: rgba(255,79,3,.5);}
#plan .plan_Btn.free {background-color: var(--gray);}
#plan .plan_Btn:hover {background-color: var(--pointcolor);}

#plan .won span {font-family: var(--mainfont);}

#plan .day_wrap {display: flex; justify-content: space-between;}
#plan .day_wrap select {background-color: var(--black); color: var(--white); border: none; font-size: 1rem;}

#plan .marker {display: none; width: 1.375rem;}
#plan .marker.on {display: block; position: absolute; top: -.2rem; right: 1rem;}

#plan .planTB {width: 100%; border-radius: 1.875rem 1.875rem 0 0; border: 1px solid var(--gray); font-size: 1rem; text-align: center; padding: 0 2rem; border-spacing: 0; table-layout: fixed;}
#plan .planTB th {padding: 1rem; border-bottom: 1px solid var(--gray); font-weight: 500;}
#plan .planTB td {padding: .5rem 1rem; border-bottom: 1px solid var(--gray);}
#plan .planTB tr td:first-child {text-align: left; padding-left: 2rem;}
#plan .planTB tr:last-child td {border-bottom: none; color: var(--light-gray);}

#plan .planTB .check {color: var(--pointcolor);}
#plan .planTB .infoBtn {position: relative; padding-right: 1.5rem; width: fit-content; margin: auto; opacity: .5; font-size: .875rem;}
#plan .planTB .infoBtn:hover {opacity: 1;}
#plan .planTB .infoBtn:after {content:''; width: 1rem; height: 1rem; background-image: url('/include/img/info.svg'); background-repeat: no-repeat; background-size: cover; position: absolute; right: 0; bottom: 2px;}

#plan .hiddenBox {background-color: #141413; padding: 1rem; position: absolute; font-size: .875rem; color: var(--light-gray); top: 2.5rem; left: 0; right: 0; margin: auto; max-width: 15rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s;}
#plan .hiddenBox:after {content: ''; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: .8125rem; height: 11px; background-color: #141413; display: block; position: absolute; top: -11px; left: 0; right: 0; margin: auto;}
#plan .hiddenBox.on {opacity: 1; visibility: visible; transform: translateY(0);}
@media(max-width:768px) {
    #plan .planTB {padding: 0 1rem;}
    #plan .planTB .TBTit {width: 35%;}
    #plan .planTB td {padding: .5rem;}
    #plan .planTB tr td:first-child {padding-left: 1rem;}

    #plan .hiddenBox {top: 3.5rem; padding: .7rem;}
}


footer {background-color: #141413; padding: 6.25rem 0;}
footer a {color: var(--gray);}