﻿#Floating_bg {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    isolation: isolate;
}
#Floating_bg > #bg {
    position: fixed;
    width: 100%;
    height: 100%; 
    top: 0;
    left: 0;    text-align: center;  background: rgba(0, 0, 0, .4);
    transition: background 0.4s;     z-index: 8;
    display:none;
}
#Floating_bg.is-open > #bg {
    pointer-events: auto;
}

#Floating_bg > #Floating,
#Floating_bg > #Floating + div {
    z-index: 1;
    pointer-events: auto;
}

#Floating {       background: #F5F3EF;
    border: 2px solid rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding: 15px 25px;
    border-radius: 29px;
    position: fixed; 
    font-family: "SelectaTrial", sans-serif;
    cursor:pointer;    position: fixed;
    left: 50%;
    bottom: 50px;    z-index: 10;
    transform: translateX(-50%); transition:all .3s;
} 
 
#Floating img {    width: 14px;    vertical-align: middle;
    margin-left: 7px;
}
#Floating_bg > #Floating + div {     left: 50%;
    bottom: 45px;
    transform: translateX(-50%);
    position: fixed;
    width: calc(100% - 6vw);
}
#Floating_bg > div > p {
     display:inline-block;
}

#Floating_bg #Floating  > p {  
    width: auto;
    text-align: left;
    padding-right: 0vw;
    padding-bottom: 0;
}





#Floating_bg > div > p span {
    display:inline-block;color:#282623; transition:all .3s;
    font-size: clamp(12px, 1.25vw, 24px);    display: inline-block;
    vertical-align: middle;    font-weight: 500;
}
#Floating_bg #Floating.on {
    background:#232323;
    border: 2px solid rgba(239, 237, 234, 1);
   
}
#Floating_bg  #Floating.on  > p span {
     color:#EFEDEA; 

}
#Floating_bg > div > p {
     font-family: "SelectaTrial", sans-serif;
     color:#fff;    
       display: inline-block;
    font-weight: 100; 
    font-size: clamp(10px, 0.8333vw, 16px);
    width: 100%;
    text-align: right;
    padding-right: 4vw;
    padding-bottom: 30px;
}
#Floating_bg > div > p  > a {
     color:#fff;
     text-decoration:underline;
}
#Floating_bg .box {         background: #F5F3EF;
    margin: 0 ;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8vw;
    padding: 31px 35px 31px 60px;
    border-radius: 65px;
    overflow: hidden;
    box-sizing: border-box; 
    position: relative;    z-index: 9;
}
#Floating_bg .box > b {
    font-size: clamp(12px, 2.2917vw, 44px);
    color:#232323;    text-transform: uppercase;

}
#Floating_bg .box > b {
}

#wpcf7-f36-o1 {

}
#wpcf7-f36-o1 .screen-reader-response{

}
#wpcf7-f36-o1 .screen-reader-response{

}
#wpcf7-f36-o1 form {    display: flex;  align-items: center;  justify-content: center;
}
#wpcf7-f36-o1 form .hidden-fields-container{border: none;
}
#wpcf7-f36-o1 form > div {    text-align: left;
max-width: 15vw;
}
#wpcf7-f36-o1 form > div.submit {
      border: 2px solid rgba(35, 35, 35, 0.3);
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    width: 70px;
    height: 70px;
    position: absolute;
     right: 28px;
    top: 24px;
    box-sizing: border-box;
}
#wpcf7-f36-o1 form > div.submit.on{

    background: rgba(35, 35, 35, 1);
}
#wpcf7-f36-o1 form > div.submit img {
    padding-top: 0;
    margin-left: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#wpcf7-f36-o1 form > div.select {
    
}

#wpcf7-f36-o1 form > div > p {    height: 100%;
}
#wpcf7-f36-o1 form > div > p label {
    color:#282623; 
    font-size: clamp(12px, 1.25vw, 24px); 


}
#wpcf7-f36-o1 form > div > p span {
}
#wpcf7-f36-o1 form > div > p input {
    background:transparent;font-size: clamp(12px, 1.25vw, 24px);
    border:none;max-width:90%;margin-top:5px; color:#282623;      font-weight: 900;

}





#wpcf7-f36-o1 form > div > p input.wpcf7-validates-as-email {
    color: rgba(56, 88, 251, 1) !important;
}
#wpcf7-f36-o1 form > div > p input.wpcf7-validates-as-email:focus,
#wpcf7-f36-o1 form > div > p input.wpcf7-validates-as-email:active{ color: rgba(56, 88, 251, 1) !important;
}
#wpcf7-f36-o1 form > div > p input:focus {
    background:transparent;
}
#wpcf7-f36-o1 form > div > p select {
    background:transparent;font-size: clamp(12px, 1.25vw, 24px);margin-top:5px;
    border:none;    text-indent: -5px;color:rgba(35, 35, 35, 0.3);max-width:100%;font-weight:normal;
}
#wpcf7-f36-o1 form > div > p select option{
    font-size: clamp(12px, 1.0417vw, 20px);
}
#wpcf7-f36-o1 form > div > p input::placeholder {
    color:rgba(35, 35, 35, 0.3); font-family: "SelectaTrial", sans-serif;
    font-weight:normal;

}



#wpcf7-f36-o1 form > div > p input {
}
#wpcf7-f36-o1 form > div > p input.wpcf7-submit {
     font-size: 0;
    /* DISPLAY: INLINE-BLOCK; */
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-top: 0;cursor: pointer;
}
#wpcf7-f36-o1 form > div > p input[type='submit'] {
     font-size: 0;
    /* DISPLAY: INLINE-BLOCK; */
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin-top: 0;    cursor: pointer;
}
#wpcf7-f36-o1 form span[name='Need'] {
}

#wpcf7-f36-o1 form span[name='Need'] select {
}
#wpcf7-f36-o1 form span[name='Need'] select option {
}

/* 처음에는 버튼만 클릭 가능 */
#Floating_bg { 
    pointer-events: none;
    
}

#Floating {
    pointer-events: auto;
}

/* 문의 영역 숨김 */
#Floating_bg > #Floating + div {
    visibility: hidden;
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
    pointer-events: none;

    transition:
        clip-path 0.65s ease,
        opacity 0.4s ease,
        visibility 0.65s;
}

/* 클릭 후 배경과 문의 영역 표시 */
#Floating_bg > #Floating + div {
    visibility: hidden;
    opacity: 0;
    clip-path: none;
    transform: translateX(-50%) scale(0.85);
    transform-origin: center center;
    pointer-events: none;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        visibility 0.7s;
}
#Floating_bg.is-open {
    display:block;
}
#Floating_bg.is-open > #bg {display:block;
}
#Floating_bg.is-open > #Floating + div {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;    z-index: 9;
}
#Floating_bg.is-open > #Floating {
    display: none !important;
}
/* Morph animation overrides */
#Floating_bg > #bg {
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:0;
    transition:opacity .35s ease, visibility .35s;
}
#Floating_bg.is-open > #bg {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
#Floating_bg #Floating {
    box-sizing:border-box;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color .35s ease, border-color .35s ease;
    z-index:3;
}
#Floating_bg #Floating > p { margin:0; }
#Floating_bg #Floating > p span { transition:color .3s ease; }
#Floating_bg.is-open > #Floating {
    display:inline-flex !important;
    visibility:hidden;
    pointer-events:none;
}
#Floating_bg > #Floating + div,
#Floating_bg.is-open > #Floating + div {
    transform:translateX(-50%);
    clip-path:none;
    transition:none;
    z-index:2;
}
#Floating_bg > #Floating + div {
    visibility:hidden;
    opacity:0;
    pointer-events:none;
}
#Floating_bg.is-open > #Floating + div {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}
#Floating_bg.is-morphing > #Floating + div > .box {
    background:transparent;
}
#Floating_bg .floating-morph-shell {
    display:none;
    position:fixed;
    box-sizing:border-box;
    border:2px solid transparent;
    pointer-events:none;
    z-index:1;
}
#Floating_bg .submit img { pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
    #Floating_bg > #bg,
    #Floating_bg #Floating { transition:none; }
}
.wpcf7 .wpcf7-response-output .formclose {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 12px auto 0;
    padding: 5px 10px;
    border: 1px solid rgba(35, 35, 35, 0.3);
    border-radius: 20px;color: #282623;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.wpcf7-response-output {
    border-color: #fff;
    background: #fff;
    z-index: 9;
    position: fixed;
    top: -5vw;    color: #282623;
    left: 50%;
    padding: 20px 30px 15px;
    transform: translate(-50%, -50%);


}
@media (max-width:760px) {
    body:has(#gallery.expanded) #Floating_bg {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
    #Floating_bg .box {
    background: #F5F3EF;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4vw;
    padding: 15px 20px 15px 20px;
    border-radius: 65px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    z-index: 9;



}

    #wpcf7-f36-o1 form > div.submit {
    border: 2px solid rgba(35, 35, 35, 0.3);
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top: 18px;
    box-sizing: border-box;
}

    #wpcf7-f36-o1 form > div.submit img { 
    max-width: 35%;
}


}


/* Contact us 버튼: 글자와 화살표를 한 줄로 유지 */
#Floating_bg #Floating {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

#Floating_bg #Floating > p {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

#Floating_bg #Floating > p .floating-label {
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

#Floating_bg #Floating > img {
    flex: 0 0 14px;
    width: 14px;
    max-width: none;
    margin-left: 7px;
}
