body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    background: linear-gradient(0, #F03141 24%, #FF7802 100%);
    border-radius: 100px;
}
body::-webkit-scrollbar-track {
    background-color: #5f5f5f;
}
.mob {display: none;}

#mobileBtn {display: none;}
header {position: fixed; top: 0; left: 0; z-index: 99; width: 100%; justify-content: center;display: flex; padding: 24px 60px; align-items: center; justify-content: space-between;}

h1  {display: flex ; flex-direction: row; gap: 20px}
h1 svg path{fill:#fff}
header nav  {display: flex; gap: 18px;}
header nav a {color: #fff; font-size: 1.125rem; padding: 11px 20px ; font-weight: 600; transition: 0.3s; } 
header.topP {background-color: #fff; box-shadow: -0 5px 4px rgb(180 180 180 / 20%);}
header.topP  h1 svg path {fill: #121212;}
header.topP nav a:not(.btn) {color: #121212;}
header nav a.btn {background: linear-gradient(278deg, #F03141 24%, #FF7802 100%); border-radius: 100px; font-size: 15px; padding: 11px 30px; font-weight: 500;}
header nav a.btn i {margin-right: 5px;}
header nav a:hover { opacity: 0.8;}

.in h2 {font-size: 62px; color: #fff; line-height:125%; font-weight: 800; letter-spacing: -0.025em;} 
.in h2 b {background: linear-gradient(278deg, #F03141 24%, #FF7802 100%); background-clip: text;  -webkit-text-fill-color: transparent; }

main > .pin-spacer:first-of-type {background: #121212; }
.topVis { width: 100%;  min-height: 100vh;  position: relative; perspective: 800px; overflow:hidden; }
#three-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.topVis .topTitle { position: relative; width: 100%;  padding-top: 13vh; }
.topVis .topTitle h2 {font-size: 9VW; color: #fff;   text-align: center; background: linear-gradient(278deg, #F03141 24%, #FF7802 100%); background-clip: text;  -webkit-text-fill-color: transparent;   font-weight: 800;letter-spacing: 0.15em;}
.topVis .topTitle p { color: #fff; text-align: center; font-size: 36px; font-weight: 600; letter-spacing: 0.15em;}

.topVis .obj { background: #000; width: 540px; height: 340px; position: absolute; top: 42vh; left: 50%; transform: translateX(-50%) rotateY(331deg) rotateX(358deg);  display: flex; flex-direction: column;  align-items: center; overflow: hidden;  gap: 20px; border-radius: 10px; border: 4px solid #000; box-sizing: border-box;}
.topVis .obj > img:first-child { width: 100%; height: 100%; object-fit: cover;  position: absolute;  top: 0; left: 0;  z-index: 1; }
.topVis .obj > div {color: #ffffffd1; opacity: 0.8 ; font-weight: 700; font-size: 2.6vw; text-align: center; width: 80%; opacity: 0;  }

.cubeSec { background: #232323;  position: relative; width: 100%; min-height: 100vh; }
.cube-viewport { width: 100%; height: 100vh; position: relative; perspective-origin: 50% 50%;  overflow: hidden;perspective: 1000px;   will-change: transform;}

.cube-rotator { width: 720px;  height: 200px; position: absolute;  transform-style: preserve-3d;  }
.cube-face { position: absolute;  width: 100%; height: 100%;  backface-visibility: hidden; display: flex; flex-direction: column;  justify-content: center; align-items: center;  color:#fff;  text-align: center;}

aside {position: fixed; top: 50%; right: 0; transform: translate(-30px,-50%); z-index: 9;  display: flex; flex-direction: column ;}
aside nav {display: flex; justify-content: flex-end; flex-direction: column; gap:10px}
aside nav button {text-align: right;  color: #fff; font-size: 20px;  opacity: 0.5; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap:10px; font-weight: 500;}  
aside nav button::after {content: ''; display: inline-block; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
aside nav button.has {opacity: 1;}

/* .face-1 .face-content{ background: linear-gradient(278deg, #F03141 24%, #FF7802 100%);} 
.face-2 { background-color:#f1f1f1 ;} 
.face-3 { background-color:  #333; } 
.face-4 { background-color: #444;}  */

.cube-description-sec { position: fixed; bottom: 10%; left: 0;  width: 100%; padding: 20px; color: #fff; text-align: center; z-index: 1;}
.description-container {position: relative; }

.face-content {width: 100%; height: 100%; display: flex ; justify-content: center; align-items: center; position: relative;  background: linear-gradient(278deg, #F03141 24%, #FF7802 100%);}
.face-content > .objWrap {max-width: 530px; margin-top: 30px; position: relative;}
.objFrame {position: absolute; top: 50%;left: 50%; transform: translate(-50%, -54%); width: 97%; border-radius: 4px; display: block; padding-bottom: 55.5%; overflow: hidden; background: #000;} 
.objFrame img {position: absolute; top: 0; left: 0;width: 100%; height: 100%; object-fit: cover; }
.abImg {position: absolute; top: 50%; left:50%; box-shadow:0px 2px 5px 3px #00000040;}
/* .face-1 .abImg {transform: translate(-50%, -40%) ;}
.face-2 .abImg {transform: translate(-50%, -50%) ;}
.face-3 .abImg {transform: translate(-50%, -60%) ;} */

.description-text {color: #fff; padding-bottom: 20px; display: flex ; flex-direction: column; gap: 5px; transform: translateY(-60%);}
.description-text > span {display: block; font-weight: 500; font-size: 24px; opacity: .8;}
.description-text > strong {font-weight: 600; font-size: 34px;}
.description-text > strong b {background: linear-gradient(278deg, #F03141 24%, #FF7802 100%); background-clip: text;   -webkit-text-fill-color: transparent; font-weight: 800; }
.description-text.active { opacity: 1; }

.expert {min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #121212; position: relative ; overflow: hidden;} 
.expert .in {position: relative; z-index: 9;}
.expert > div:first-of-type {max-width: 1420px; width: 100%; color: #fff; padding-bottom: 10vh;}
.expert > div:first-of-type > span {font-size: 30px; font-weight: 500; opacity: 0.8; display: block; padding-bottom: 10px;}
.expert > div:first-of-type > div {display: flex; flex-direction: column; gap: 20px; margin-top: 14vh;}
.expert > div:first-of-type > div > p {display: flex; align-items: center; gap: 15px; font-size: 30px; font-weight: 600; opacity: .9;} 
.expert > div:first-of-type > div > p::before {content: ''; display: block; width: 30px; height: 30px; background: url('../Images/randing/expert_p_bl.png') no-repeat center center; background-size: cover; position: relative;} 
.cardWrap {position: absolute; bottom: 0; right: 0; display: flex; flex-direction: column; gap: 40px;z-index: 2; transform: rotate(-45deg) translateY(65%);}
.cardWrap .coardRow {display: flex ; gap: 40px} 
.cardWrap .coardRow:nth-of-type(odd) {padding-left: 25%;}
.cardWrap .card { position: relative; width:360px; height: 198px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 5px 5px #000;}
.cardWrap .card > img {width: 100%; height: 100%; position: absolute; object-fit: cover;}

.textAc {min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2e2e33; } 
.textAc div {text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column ; gap: 16px; position: relative ;}
.textAc div > img {max-width:160px;}
.textAc h2 {text-align: center; line-height: 130%; }

.advantageSec {min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2e2e33;text-align: center; } 
.advantageSec span {font-size: 36px; font-weight: 500; opacity: 0.8; display: block; padding-bottom: 10px; color: #fff;}
.advantageSec > .in > div {display: flex; position: relative; min-height: 550px;} 
.advantageSec > .in > div img {position: absolute; top: 50%; left: 50%; }
.advantageSec > .in > div img:first-of-type {order: 2;z-index: 9; width: 580px;}
.advantageSec > .in > div img:nth-of-type(2) {max-width: 500px; }

.ratingSec {min-height: 100vh;  background: #232323 ; text-align: center; display: flex; align-items: center; justify-content: center;}
.ratingSec h2 {margin-bottom: 40px;}
.ratingSec span {font-size: 36px; font-weight: 500; opacity: 0.8; display: block; padding-bottom: 10px; color: #fff;}
.ratingSec > div > div {display: flex; flex-wrap: wrap; max-width: 1562px; width:100%; gap: 14px} 
.ratingSec > div > div img {border-radius: 24px; width: calc(50% - 7px);}

.receipt {min-height: 50vh; padding:10vh 0; background: linear-gradient(278deg, #F03141 55%, #FF7802 100%); display: flex; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden;} 
.receipt > .in {position: relative; z-index: 9; }
.receipt > .in > span {color: #fff; font-size: 38px; font-weight: 600;}
.receipt > .in .info {padding: 30px 0 26px 0 ; display: flex; flex-direction: column ; gap:16px}
.receipt > .in .info > p:first-of-type {font-size: 38px;color: #fff; opacity: 0.5; text-decoration: line-through; font-weight: 600;}
.receipt > .in .info > p:last-of-type {font-size: 60px; color: #fff; font-weight: 800;}
.receipt > .in .info > p:last-of-type span {font-size: 38px;padding-left: 4px;}
.receipt > .in > a {background: #292929; color: #fff; border-radius: 200px; display: flex; justify-content: center; align-items: center; align-content: center; font-size: 24px; font-weight: 600; padding:  20px 0; gap: 14px}
.receipt > .in > a::after {content: '\f054'; font: var(--fa-font-solid); font-size: 22px;}

.receipt .bg {position: absolute; top: 50%; left: 50%; z-index: 1; opacity: 0.6; max-width: 950px; width: 100%;}
.receipt .bg img {width: 100%;}

.notice {min-height: 30vh; background:#292929; display: flex; justify-content: center; color: #fff; padding: 50px 0 100px 0; } 
.notice .in {opacity: 0.8; display: flex; flex-direction: column; gap: 16px;}
.notice .in strong {font-size: 20px; font-weight: 600;} 
.notice .in  p {line-height: 138%; font-size: 18px; opacity: 0.7;}

.modal {display: none;}
.fixBar {visibility: visible; opacity: 1; position: fixed; left:0; bottom: 0;  width: 100%; z-index: 99; display: flex; justify-content: center; align-content: center; line-height: 1;  background: #101010d1;  padding:1rem 0; gap:0.5rem;}
.fixBar > a,
.fixBar button { background: #f42740; font-size: 1.125rem; height: 3rem; line-height: 3rem; color:#fff; border-radius: 100rem; padding: 0 4rem; transition: 0.3s; transform: scale(1);}
.fixBar > a:first-of-type,
.fixBar button:first-of-type { background: #fa590d;}

footer { width: 100%; background: #e9e9e9; padding: 2.875rem 60px 3.375rem 60px; position: relative; z-index: 9; } 
footer > .footer_inner {  width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.56rem; } 
.footer_inner > div { display: flex; position: relative; align-items: flex-end; } 
.footer_inner > div > select { position: absolute; top: -0.5rem; right: 0; width: 13.75rem; height: 2.87rem; padding: 0 1.18rem;  color:#434343; border-radius: 0.25rem; border: 1px solid #aaa; } 
.footer_inner > div span { margin-right : 2.18rem; } 
.footer_inner > div span svg path { fill : #a5a5a5; } 
.footer_inner > div a { color:#97959D; font-size:1.06rem; font-weight: 600; letter-spacing: 0; cursor: pointer;} 
.footer_inner > div > a:nth-of-type(1) { margin-right: 1.125rem; } 
.footer_inner > p { color:#9f9da5; line-height: 152%; font-weight: 400; } 
.footer_inner > p span { opacity: 0.5; padding: 0.35rem; font-weight: 200; } 

@media (max-width: 1562px) {
    header {padding: 22px 30px;}
    section,
    section .in {width: 100%;}
    .topVis .obj > div {font-size: 4vw;}
    .topVis .obj > div:last-of-type {margin-bottom: 10vh;}
    .ratingSec > div > div {max-width: 100%; width: 96%; align-items: center; justify-content: center; margin: 0 auto; gap: 10px;}
    .ratingSec > div > div img {border-radius: 10px;}
    .expert > div:first-of-type {width: calc(100% - 60px); padding-bottom: 0;}
    .expert > div:first-of-type > div {margin-top: 8vh ;}
    .cardWrap { gap: 10px;}
    .cardWrap .coardRow {gap:10px;}
    .cardWrap  .coardRow .card {width: 200px;  height: 114px;}
    .receipt .in > a {max-width: 468px; margin: 0 auto;}
    .notice {padding-left: 30px; padding-right: 30px;}
    .ratingSec h2 {margin-bottom: 30px;}
}

@media (max-width: 1260px) {
    .cube-viewport {perspective: 2000px;}
    .cube-rotator {width: 80%;}
}

@media (min-width:992px){
    
.footer_inner > div span > a:first-of-type {margin-right: 10px;}
}
@media (max-width: 991px) {
    body.menuOn {overflow: hidden;}
    header {padding-left: 26px; padding-right: 26px;}
    header h1 svg {width: 80px;}
    footer > .footer_inner { align-items: center; } 
    .footer_inner > div { flex-direction: column; align-items: center; gap: 1.5rem; } 
    .footer_inner > div > select { position: relative; top:0; width: 100%; max-width: 16.75rem; border:1px solid #ccc; color:#787878;} 
    .footer_inner > p { text-align: center; } 
    .footer_inner > p br { display: none; } 
    .footer_inner > div span {margin-right: 0; display: flex; gap:1.25rem;}
    .footer_inner > div span a {font-size: 1.125rem;}   
    .fixBar > :last-of-type {display: none;}
    aside {display: none;}
    .menuOn  nav a.goAAMS,
    header nav {  display: none;}
    header nav::before { content: ''; width: 100vw; height: 100vh; position:absolute; background: #000; top:0; left:0;  backdrop-filter: blur(5px);  z-index: 98; opacity: 0; visibility: hidden; transition: 0.4s;}
    header nav a {color :#fff; font-size: 1.85rem; padding: 1.85rem 2rem; z-index: 99; opacity: 0; visibility: hidden;}
    
    #mobileBtn { display: flex; flex-direction: column; width: 2rem; height: 2rem; position: relative; gap: 7px; z-index: 9999;}
    #mobileBtn span { width: 100%; height: 3px; border-radius: 2px; display: block; transition: .5s; background: #fff; }
    .menuOn #mobileBtn span { position: absolute; top:50%; } 
    .menuOn #mobileBtn span:nth-of-type(1) { transform: translateY(-50%) rotate(45deg); transform-origin:center; } 
    .menuOn #mobileBtn span:nth-of-type(2) { opacity: 0; } 
    .menuOn #mobileBtn span:nth-of-type(3) { transform: translateY(-50%) rotate(-45deg); } 

	.menuOn nav {display: flex; align-items: center; justify-content: center; flex-direction: column;   position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;}
	.menuOn nav::before,
    .menuOn nav a {opacity: 0.9; visibility: visible; }
    .menuOn  nav a.down_btn {width: 100%; border-radius: 0.25rem; font-size: 1.25rem; height: 3.65rem; padding: 0;}
    .topVis .topTitle h2  {font-size: 15vw;}
    .topVis .topTitle p {font-size: 5vw;}
    .topVis .obj  {  width: 70vw; aspect-ratio: 540 / 340;  top: 40%; }
    .description-text > strong,
    .in h2 {font-size: 5vw;}
    .advantageSec > .in > div {min-height:0; padding-bottom: 50%; }
    .advantageSec > .in > div img:first-of-type {width: 50%;}
    .advantageSec > .in > div img:last-of-type {width: 48%;}

    .expert {align-items: flex-start; padding-top: 15vh;}
    .cardWrap { transform: rotate(-45deg) translate(25%, 79%);}

    .cubeSec {padding-top: 25vh;}
    .cube-viewport { perspective: 800px; height: 70vh; }
    .cube-rotator { width: 90%; height: 150px; }
    .description-text {transform: translateY(-40%); }
    .description-text > span {font-size: 16px; }
    .description-text > strong {font-size: 24px; margin-bottom: 10px;}
    .face-content > .objWrap { max-width: 80%; margin-top: 15px; }
}

@media (max-width: 680px) {
    h1  {gap:12px}
    h1 > a:last-of-type img {max-width: 96px; position: relative; top: 4px;}
    .topVis .topTitle h2 {font-size: 10vw;}
    .topVis .obj  {  top: 32%; }
    .expert .in h2 {font-size: 34px;}
    .ratingSec h2 {margin-bottom: 20px;}
    footer {padding: 2rem 30px 60px 30px;}
    .footer_inner > p { font-size: 13px;}
    .description-text > strong,
    .in h2 {font-size: 7vw;} 
    .mob {display: block;}
    .expert {align-items: flex-start; padding-top: 13vh;}
    .advantageSec span,
    .ratingSec span,
    .description-text > span,
    .expert > div:first-of-type > span {font-size: 18px;}
    .expert > div:first-of-type > div {margin-top: 30px; gap:15px;}
    .expert > div:first-of-type > div > p {font-size: 16px;}
    .expert > div:first-of-type > div > p::before {width: 16px; height: 16px; gap:7px;}
    .cardWrap { transform: rotate(-45deg) translate(25%, 100%);}
    .textAc div > img {max-width: 100px;}

    .ratingSec > div > div { flex-direction: column; flex-wrap: nowrap; }
    .ratingSec > div > div img { width:80%; }

    .cube-viewport { perspective: 600px; height: 80vh;}
    .cube-rotator { width: 95%; height: 120px;}
    .description-text > span { font-size: 14px;}  
    .description-text > strong { font-size: 20px; margin-bottom: 22;}   
    .face-content > .objWrap { max-width: 78%; margin-top: 10px;}

    .receipt > .in > span {font-size: 7vw;}
    .receipt .in h2 {font-size: 9vw; padding-bottom: 2vw;}
    .receipt > .in .info {padding: 3vw 0 5vw 0 ; gap: 5px;} 
    .receipt > .in .info > p:first-of-type {font-size: 5vw;}
    .receipt > .in .info > p:last-of-type {font-size: 9vw;}
    .receipt > .in .info > p:last-of-type span {font-size: 5vw;}
    .notice {padding-bottom: 60px; padding-top: 60px;}
    .notice .in p {font-size: 16px;}
    .receipt .in > a {width: 90%; margin: 0 auto; font-size: 18px; padding: 14px 0;}
    .receipt > .in > a::after {font-size: 16px;}
    .fixBar button {font-size: 14px; height: 2.4rem; line-height: 2.4rem;}
    header nav a {padding : 13px 0; font-size: 7.5vw; }
}

@media (max-width: 480px) {
    .topVis .obj { width: 100vw;}
    .cube-viewport { perspective: 500px;}
    .cube-rotator { width: 100%; height: 100px;  }    
    .description-text { transform: translateY(-30%); padding-bottom: 10px; }
    
}



/*모달*/
.modal { display: none; position: fixed; justify-content: center;align-items: center; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;  background-color: rgba(0,0,0,0.8); }
.modal-content { background-color: #fefefe; width: 92%; max-width: 1100px; }

.t_c_view .modal_body h3 { display: inline-block; color:#111; font-size: 1.75rem; font-weight: 700; padding-bottom: 0.25rem; margin-bottom: 2rem;} 
.t_c_view .modal_body  {font-weight: 400; color:#676767; line-height: 160%; letter-spacing: -0.05em; font-size: 1rem;}
.t_c_view .modal_body .txt_tit01 {display: block; font-size: 1.125rem; font-weight: 600; color:#222; }
.t_c_view .modal_body .txt_tit02 {font-size: 1rem; font-weight: 600; color:#222; }
.t_c_view .modla_footer button { display: flex; font-weight: 600; justify-content: center; align-items: center; border-radius: 0.25rem; padding: 1rem 3rem; width: 100%; max-width: 16rem; transition: 0.3s; background: #181818; color:#fff;}

.modal-content .modal_body { max-height: calc(90vh - 2rem); padding: 2rem; overflow-y: auto; }
.modal-content {  border-radius: 0.5rem;}
.modal-content .modal_body {max-height: calc(90vh - 2rem); padding: 2rem; overflow-y: auto;}
.modal-content .modal_body::-webkit-scrollbar { width: 3px; }
.modal-content .modal_body::-webkit-scrollbar-thumb { background-color: #f83042; }
.modal_body::-webkit-scrollbar-track {  background-color: #f1f1f1; }
.modla_footer {display: flex; padding: 1rem 1rem 1.5rem 1rem ; justify-content: center; align-items: center;}
.modla_footer button {display: flex; font-weight: 600; justify-content: center; align-items: center; border-radius: var(--btn-radius);  padding: 1rem 3rem; width: 100%; max-width: 16rem; border:1px solid #aaa; transition: 0.3s; background:var(--color-purple); border:1px solid var(--color-purple); color:#fff;} 
.modla_footer button:hover { opacity: 0.8;}

@media (max-width: 1000px) {
    .modal-content {
        width: 90%; 
    }
}
@media (max-width: 900px) {
	.t_c_view .modla_footer {padding:0;}
    .t_c_view .modla_footer button {max-width: 100%; border: 0;   border-radius: 0 0 0.25rem 0.25rem; padding:1.125rem 0;}
	.modal-content .modal_body {padding: 1rem; }
	.t_c_view .modal_body h3 {background-image: none; line-height: 135%; margin-bottom: 1.5rem;}
	#refund_form.t_c_view .modla_footer {gap: 0;}
	#refund_form.t_c_view .modla_footer button {width: 50%;}
	#refund_form.t_c_view .modla_footer button:nth-of-type(1) {border-radius: 0 0 0 0.25rem;}
	#refund_form.t_c_view .modla_footer button:nth-of-type(2) {border-radius: 0 0 0.25rem 0;}
}
@media (max-width:640px) {
	.t_c_view .modal_body h3  {font-size: 1.35rem;}
}