.page_contact{background: rgba(246, 242, 238, 1); padding: 110px 40px 0; min-height: 100dvh;}

.c_title{padding: 20px 0 22px; white-space: nowrap; width: calc(100% + 80px); margin-left: -40px; overflow: hidden;}

.line_100_2{margin-bottom: 0;}
.c_title h1{color: #fff; font-family: "Gelion"; font-size: 72px; font-style: normal; font-weight: 600; line-height: 120%; /* 86.4px */ display: inline-block; animation: repeatX 4s cubic-bezier(0, 0, 0, 0) infinite;}
.c_title h1 i{color: #FFF; font-family: "Gelion"; font-size: 72px; font-style: normal; font-weight: 600; line-height: 120%;}

@keyframes repeatX {
  0% {transform: translateX(0); opacity: 1;}
  100% {transform: translateX(-50%); opacity: 1;}
}

.c_body{padding: 20px 0; border-top: 1px solid #000; position: relative; min-height: calc(100vh - 300px); display: flex; gap: 40px;}
.c_body::after{content: ''; display: block; width: 1px; height: calc(100% - 40px); left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; background-color: #000;}
.flex_left{width: calc(50% - 20px); display: flex; flex-direction: column; justify-content: space-between;}
.flex_left .fade-w{margin: 20px 0 32px;}
.flex_left_txt{padding: 0 60px 0 40px;}
.flex_left h1{color: #000; font-family: "Gelion"; font-size: 64px; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -1.28px;}
.flex_left span{font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%; display: block;}
.c_body_img_w{border-top: 1px solid #000; padding-top: 20px;}
.c_body_img_w img{width: 100%; height: 100%; object-fit: cover;}

.flex_right{width: calc(50% - 20px); padding-top: 20px; display: flex; flex-direction: column; padding-bottom: 100px; position: relative;}

.select_w{display: flex; gap: 72px; white-space: nowrap; margin-bottom: 20px;}
.select_w label{display: flex; align-items: center; padding-left: 28px; position: relative; cursor: pointer;}
.select_w label input{display: none;}
.select_w label::before{content: '';display: block; position: absolute; left: 0; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #000; background-color: #fff; border-radius: 100%; transition: ease 0.3s background-color;}
.select_w label:has(input:checked)::before {background-color: #000;}
.select_w label span{font-size: 15px; font-weight: 400;}
.input_w{display: flex; flex-direction: column; gap: 8px; padding:20px 0 8px; border-bottom: 1px solid #000;}
.input_w span{font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%;}
.input_w input{text-align: right; font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; border: 0; outline: 0; background-color: unset;}
.input_w textarea{color: #000; text-align: left; font-size: 15px; font-weight: 400; line-height: 150%;outline: none; border: 0; background-color: unset; resize: none; height: 180px; width: 100%; /*padding-left: calc((100% / 6) * 1);*/ margin-bottom: 38px; padding-right: 8px;}
.input_w textarea::-webkit-scrollbar {width: 6px; border-radius: 10px;}
.input_w textarea::-webkit-scrollbar-thumb {background-color: #FFF;border-radius: 12px 12px 12px 12px; cursor: pointer;}
.upload_w{display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #000;}
.upload_btn{display: inline-flex; align-items: center; padding: 8px 13px 8px 20px; border-radius: 80px; gap: 16px; border: 1px solid #000; cursor: pointer; margin: 14px 0;}
.upload_btn input{visibility: none; display: none;}
.upload_btn img{width: 10px; height: 10px; object-fit: contain;}
.upload_btn span{font-size: 14px; font-style: normal; font-weight: 500; line-height: 130%; letter-spacing: 1.12px; text-transform: uppercase;}

.upload_list{padding: 20px 0; gap: 12px; display: flex; flex-direction: column;}
.upload_list li{display: flex; align-items: center; justify-content: flex-end;}
.upload_list span{text-align: right; font-size: 15px; font-weight: 400; line-height: 150%;}

.upload_list li:not(:first-child) .close_btn{pointer-events: none; opacity: 0;}
.close_btn{width: 20px; height: 20px;display: flex; align-items: center; justify-content: center; position: relative; border-radius: 100%; border: 1px solid #000; cursor: pointer; margin-left: 14px;}
.close_btn::before, .close_btn::after{content: ''; display: block; width: 12px; height: 1px;  background-color: #000; position: absolute;}
.close_btn::before{transform: rotate(45deg);}
.close_btn::after{transform: rotate(315deg);}


.btn_send{color: #FFF; font-family: "Gelion"; font-size: 32px; font-weight: 600; line-height: 130%; text-transform: capitalize; background-color: #000; display: flex; align-items: center; justify-content: center; height: 80px;  cursor: pointer; margin-top: 20px; position: absolute; bottom: 0; left: 0; width: 100%;}

.faq_w{position: fixed; left: 20px; bottom: 20px; background-color: #fff; border-radius: 182px; width: 225px; height: 62px; transition: ease 0.3s all; z-index: 1; overflow: hidden; padding: 0; border: 1px solid #000;}
.faq_w.active{width: calc(100% - 80px); height: calc(100% - 182px); bottom:40px; left: 40px; border-radius: 8px; padding: 10px;}
.faq_w.active .faq_open{pointer-events: none;}
.faq_w.active .faq_inner, .faq_w.active .faq_close{opacity: 1;}
.faq_w:not(.active) .faq_inner, .faq_w:not(.active) .faq_close{pointer-events: none; opacity: 0;}

.faq_open{color: #000; font-family: "Chronicle Display"; font-size: 32px; font-style: normal; font-weight: 325; line-height: 130%;  display: inline-flex; justify-content: center; align-items: center; cursor: pointer;  padding: 10px 80px; opacity: 1; position: absolute; transition: 0.3s opacity ease; transition-delay: 0.3s;}
.active .faq_open{opacity: 0; pointer-events: none; transition-delay: 0.0s;}
.faq_inner{padding: 60px calc((100% / 12) * 2); width: 100%; box-sizing: border-box; position: relative; flex-direction: column; overflow-y: scroll; height: 100%;}


.work-list-wrap{padding:120px 8px 0px 8px; box-sizing: border-box; width: 100%; height: 100%;}

.faq_inner::-webkit-scrollbar {width: 6px; border-radius: 10px;}
.faq_inner::-webkit-scrollbar-thumb {background-color: #a0a0a5;border-radius: 12px 12px 12px 12px;}
.faq_title{font-family: "Gelion"; font-size: 48px; font-weight:600; line-height: 120%; border-bottom: 1px solid #000; padding-bottom: 20px; text-align: center;}

.faq_li{padding: 40px 0; border-bottom: 1px solid #000;}

.faq_q_w{display: flex; padding: 0 0; width: 100%; position: relative;}
.faq_h4{font-family: "Chronicle Display"; font-size: 32px; font-weight: 325; line-height: 1; text-transform: capitalize; width: calc((100% / 8) * 1); display: flex; justify-content: center;}
.faq_q{font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; width: calc((100% / 8) * 6)}
.faq_btn{width: 36px; height: 36px; border-radius: 100%; border:1px solid #000; position: absolute; display: flex; align-items: center; justify-content: center; right: 20px; top: 0; cursor: pointer;}
.faq_btn::after{content: ''; display: block; width: 14px; height: 8px; background-image: url(../img/arrow_down.png); background-size: contain;  transform: rotate(0deg); transition: ease 0.3s transform;}

.faq_a_w{padding: 0 calc((100% / 8) * 1) 0; height: 0; transition: ease 0.3s height; overflow: hidden;}
.faq_a{font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%; padding-top: 20px; box-sizing: border-box; display: block;}

.faq_li.active .faq_btn::after{transform: rotate(180deg);}
.faq_li.active .faq_a_w{height: auto;}
.faq_li:not(.active) .faq_a_w{height: 0!important;}
/*.faq_btn::after{content: ''; display: block; width: 14px; height: 8px; background-image: url(../img/arrow_down.png); background-size: contain;}*/

.faq_close{position: absolute; top: 32px; right: 32px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1;}
.faq_close::after, .faq_close::before{content: ''; display: block;width: 130%; height: 1px; background-color: #000; position: absolute;}
.faq_close::after{transform: rotate(45deg);}
.faq_close::before{transform: rotate(315deg);}

.footer{display: none;}
@media(min-width:1025px) and (max-width:1360px){
  .select_w{gap: 26px;}
}
@media(max-width:1024px){
  .page_contact{padding: 74px 20px 0;} 
  .line_100:not(.line_100_2){margin-bottom: 8px;}
  .c_title h1, .c_title h1 i{font-size: 36px;}
  .c_title{padding: 8px 0; width: calc(100% + 40px); margin-left: -20px;}

  .c_body{padding: 60px 0 236px; flex-direction: column; gap: 0;}
  .c_body::after{display: none;}
  .flex_left{width: 100%; align-items: center;}

  .flex_left_txt{padding: 0 0 11.11vw; text-align: center; border-bottom: 1px solid #000; display: flex; flex-direction: column; align-items: center; width: 100%;}
  .flex_left .fade-w{margin: 0 0 11.11vw;}
  .flex_left h1{font-size: 8.89vw;}
  .flex_left span{font-size: 3.33vw; max-width: 86.11vw;}
  .c_body_img_w{display: none;}
  .flex_right{width: 100%; padding-bottom: 17.78vw;}

  .category_w{display: flex; align-items: center; z-index: 1; margin-bottom: 5.56vw;}
  .category_span{font-size: 3.33vw; line-height: 1.5; font-weight: 400;}

  .select_mob_w{height: 11.11vw; position: relative; margin-left: 5.56vw; width: 100%;}
  .select_w{display:block;  width: 100%; max-height: 11.11vw; margin-bottom: 0; overflow: hidden; position: relative; cursor: pointer;}
  .select_w.active{max-height: unset; z-index: 1;}
  .select_w::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 1px solid #000; box-sizing: border-box; pointer-events: none; z-index: 1;}
  .select_w::after{content: ''; display: block; width: 3.89vw; height: 2.22vw; position: absolute; right: 4.44vw; top: 4.44vw; background-image: url(../img/arrow_down.png); background-size: contain; transform: rotate(0deg); transition: ease 0.3s all; pointer-events: none;}
  .select_w.active::after{ transform: rotate(180deg);}
  .select_w label::before{display: none;}
  .select_w label{padding-left: 5.56vw; height: 11.11vw; pointer-events: none; background-color: rgba(246, 242, 238, 1);}
  .select_w label span{font-size: 3.33vw;}
  .select_w.active label{pointer-events: unset;}

  .input_w{gap: 3.33vw;}
  .input_w span{font-size: 3.33vw;}
  .input_w input{font-size: 4.44vw;}
  .input_w textarea{font-size: 3.33vw; margin-bottom: 14.44vw;}
  .faq_inner::-webkit-scrollbar {width: 0.56vw; border-radius: 2.78vw;}
  .upload_w{flex-direction: column; gap: 0; justify-content: space-between; align-items: stretch;}
  .upload_btn{margin: 5.56vw 0; padding: 2.5vw 5.56vw 1.94vw 5.56vw; width: 40.56vw; justify-content: center;}
  .upload_btn span{ font-size: 3.06vw; letter-spacing: 0.24vw;}
  .upload_list{padding: 0;  gap: 2.22vw;}

  .upload_list li:last-child{padding-bottom: 5.56vw;}
  .upload_list span{font-size: 3.33vw; line-height: 1.1;}
  .close_btn{margin-left: 3.33vw;}

  .btn_send{height: 12.22vw; font-size: 5.56vw; border-radius: 1.11vw;}
  .faq_open{font-size: 4.44vw;padding: 2.22vw 4.44vw;}
  .faq_w{right: 20px; position: fixed; left: unset; width: 18.33vw; height: 10.56vw;}
  .faq_w.active{left: unset;  right: 20px; bottom: 20px; width: calc(100% - 40px); height: calc(100dvh - 90px); padding: 2.78vw;}
  .faq_close{top: 4.44vw; right: 4.44vw; height: 6.67vw; width: 6.67vw;}
  .faq_inner{padding: 2.78vw;}
  .faq_title{padding-top: 11.11vw; font-size: 8.89vw;}
  .faq_li{padding: 4.44vw 0;}
  .faq_h4{font-size: 5.56vw; width: 8.89vw; justify-content: flex-start;}
  .faq_q{font-size: 3.89vw; width: calc(100% - 20px);}
  .faq_btn{width: 6.67vw; height: 6.67vw; right: 0; top: -0.56vw;}
  .faq_btn::after{background-position: center center; width: 2.5vw; height: 1.67vw; background-repeat: no-repeat;}
  .faq_a_w{padding: 0 0 0 8.89vw;}
  .faq_a{font-size: 3.33vw; padding-top: 5.56vw;}

}