/* =================================================
   Contact Page
================================================= */
:root {
    --blue:#145be8;
    --orange:#ff8500;
    --deep-blue:#0b1b3a;
    --text:#17233f;
    --gray:#6d7890;
    --line:#e7edf8;
    --bg:#f5f8ff;
    --white:#ffffff;
}
/* common */
.contact_page {
    width:100%;
    overflow:hidden;
}
.contact_container {
    width:165rem;
    margin:0 auto;
}
.contact_section_tag {
    display:flex;
    align-items:center;
    gap:1.2rem;
    font-size:1.2rem;
    font-weight:700;
    color:var(--blue);
    letter-spacing:.05em;
}
.contact_section_tag span {
    width:3rem;
    height:.2rem;
    background:var(--blue);
    display:block;
}
.contact_title {
    margin-top:2rem;
    font-size:3.2rem;
    line-height:1.25;
    color:var(--deep-blue);
    font-weight:700;
}
.contact_title em {
    color:var(--orange);
    font-style:normal;
}
/* =================================================
   Banner
================================================= */
.contact_banner {
    height:60rem;
    padding-top: 11rem;
    position:relative;
}
.contact_banner .contact_container {
    height:100%;
    position:relative;
}
.contact_banner_content {
    position:absolute;
    z-index:2;
    left:0;
    top:12rem;
}
.contact_banner_title {
    margin-top:2.5rem;
    font-size:6.4rem;
    line-height:1.05;
    font-weight:800;
    color:var(--deep-blue);
}
.contact_banner_title em {
    color:var(--orange);
    font-style:normal;
}
.contact_banner_desc {
    margin-top:3rem;
    width:38rem;
    font-size:1.8rem;
    line-height:1.7;
    color:var(--gray);
}
.contact_banner_line {
    margin-top:3rem;
    width:3rem;
    height:.3rem;
    background:var(--blue);
}
.contact_banner_image {
    position: absolute;
    left: 0rem;
    top: 11rem;
    width: 100%;
}
.contact_banner_image:before {
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        #fff 0%,
        rgba(255,255,255,.8) 12%,
        transparent 45%
    );
    z-index:1;
}
.contact_banner_image img {
    width:100%;
    height:100%;
    object-fit:cover;
}
/* =================================================
   Location
================================================= */
.contact_location {
    padding:4rem 0;
}
.contact_location_box {
    display:flex;
    background:#fff;
    border-radius:1.2rem;
    padding:3rem;
    box-shadow:
    0 1.5rem 4rem rgba(20,91,232,.08);
}
.contact_location_info {
    width:45rem;
    padding:1rem 3rem;
}
.contact_info_list {
    margin-top:4rem;
}
.contact_info_item {
    display:flex;
    gap:2rem;
    margin-bottom:3rem;
}
.contact_info_icon {
    width: 5rem;
    height: 5rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #ffffff 0%, #fcfdff 48%, #f5f9ff 72%, #edf4ff 100%);
    box-shadow: inset 0 .15rem .3rem rgba(255, 255, 255, .95), inset 0 -.25rem .6rem rgba(124, 168, 255, .10), 0 .2rem .5rem rgba(36, 98, 255, .04), 0 .8rem 2rem rgba(36, 98, 255, .08);
    transition: all .35s ease;
    overflow: visible;
    aspect-ratio: 1;
    border: .1rem solid rgb(131 182 255 / 18%);
    outline: .1rem solid rgb(134 183 254 / 18%);
    padding: 1rem;
}
.contact_info_icon img{
    
}
.contact_info_text h3 {
    font-size:1.5rem;
    color:var(--deep-blue);
}
.contact_info_text p {
    margin-top:.8rem;
    font-size:1.4rem;
    color:var(--gray);
    line-height:1.8;
}
/* map */
.contact_map {
    flex:1;
}
.contact_map_inner{
    width:100%;
    height:45rem;
    overflow:hidden;
    border-radius:1rem;
}
.contact_map_inner iframe{
    width:100%;
    height:100%;
    border:0;
}
.contact_map_point span{
    position:absolute;
    width:8rem;
    height:8rem;
    left:50%;
    top:50%;
    transform:
    translate(-50%,-50%);
    border-radius:50%;
    background:
    rgba(20,91,232,.2);
    animation:
    mapPulse 2s infinite;
}
@keyframes mapPulse{
    0%{
        transform:
        translate(-50%,-50%)
        scale(1);
        opacity:.8;
    }
    100%{
        transform:
        translate(-50%,-50%)
        scale(2.5);
        opacity:0;
    }
}
/* =================================================
 Factory
================================================= */
.contact_factory {
    padding:5rem 0;
}
.contact_factory_box {
    background:#fff;
    padding:3rem;
    border-radius:1.2rem;
    display:flex;
    gap:4rem;
    box-shadow:
    0 1.5rem 4rem rgba(20,91,232,.06);
}
.contact_factory_info {
    width:45rem;
}
.contact_factory_features {
    margin-top:4rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
}
.contact_feature_item {
    display:flex;
    gap:1.5rem;
}
.contact_feature_icon {
    width:5rem;
    height:5rem;
}
.contact_feature_item h3 {
    font-size:1.5rem;
    color:var(--deep-blue);
}
.contact_feature_item p {
    font-size:1.3rem;
    color:var(--gray);
    margin-top:.8rem;
}
.contact_factory_images {
    flex:1;
    display:flex;
    gap:1rem;
}
.contact_factory_big {
    width:50%;
}
.contact_factory_big img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:1rem;
}
.contact_factory_small {
    width:50%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}
.contact_factory_small img {
    width:100%;
    height:100%;
    min-height:12rem;
    object-fit:cover;
    border-radius:1rem;
}
/* =================================================
   Inquiry
================================================= */
.contact_inquiry {
    padding:6rem 0;
    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 100%
    );
}
.contact_inquiry_box {
    display:flex;
    gap:6rem;
    align-items:center;
    position:relative;
}
.contact_inquiry_left {
    width:55rem;
}
.contact_inquiry_left>p {
    margin-top:2rem;
    width:38rem;
    font-size:1.6rem;
    line-height:1.8;
    color:var(--gray);
}
.contact_service_list {
    display:flex;
    margin-top:4rem;
    gap:3rem;
}
.contact_service_item {
    width:13rem;
}
.contact_service_item i {
    display:block;
    width:4.8rem;
    height:4.8rem;
    border-radius:50%;
    background:#f1f6ff;
    margin-bottom:1.5rem;
    position:relative;
}
.contact_service_item i:after {
    content:"";
    position:absolute;
    width:1.8rem;
    height:1.8rem;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:var(--blue);
    border-radius:50%;
}
.contact_service_item h3 {
    font-size:1.4rem;
    color:var(--deep-blue);
}
.contact_service_item p {
    margin-top:.8rem;
    font-size:1.2rem;
    line-height:1.5;
    color:var(--gray);
}
/* form */
.contact_form_box {
    flex:1;
    background:#fff;
    padding:4rem;
    border-radius:1.2rem;
    box-shadow:
    0 2rem 5rem rgba(20,91,232,.1);
}
.contact_form_row {
    display:flex;
    gap:2rem;
    margin-bottom:2rem;
}
.contact_form_box input,
.contact_form_box select,
.contact_form_box textarea {
    width:100%;
    border:1px solid var(--line);
    border-radius:.8rem;
    padding:0 2rem;
    font-size:1.4rem;
    color:var(--text);
    outline:none;
    transition:.3s;
    background:#fff;
}
.contact_form_box input,
.contact_form_box select {
    height:5.5rem;
}
.contact_form_box textarea {
    height:15rem;
    padding-top:2rem;
    resize:none;
}
.contact_form_box input:focus,
.contact_form_box select:focus,
.contact_form_box textarea:focus {
    border-color:var(--blue);
    box-shadow:
    0 0 0 .3rem rgba(20,91,232,.1);
}
.contact_form_box button {
    width:100%;
    height:5.8rem;
    margin-top:2rem;
    border:none;
    border-radius:.8rem;
    background:var(--blue);
    color:#fff;
    font-size:1.5rem;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
}
.contact_form_box button:hover {
    background:var(--orange);
}
/* =================================================
   Global Service
================================================= */
.contact_global {
    padding:7rem 0;
}
.contact_global_box {
    min-height:35rem;
    border-radius:1.5rem;
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
        120deg,
        #f4f8ff,
        #ffffff
    );
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.contact_global_box:before {
    content:"";
    position:absolute;
    inset:0;
    background-image:
    url("../images/world-line.png");
    background-position:center;
    background-size:cover;
    opacity:.35;
}
.contact_global_box h2 {
    position:relative;
    z-index:1;
    text-align:center;
    font-size:4rem;
    line-height:1.2;
    color:var(--deep-blue);
}
.contact_global_box h2 em {
    font-style:normal;
    color:var(--orange);
}
.contact_global_data {
    display:flex;
    gap:8rem;
    margin-top:4rem;
    position:relative;
    z-index:1;
}
.contact_global_data div {
    text-align:center;
}
.contact_global_data strong {
    display:block;
    font-size:4rem;
    color:var(--blue);
    line-height:1;
}
.contact_global_data span {
    display:block;
    margin-top:1rem;
    font-size:1.5rem;
    color:var(--gray);
}
.contact_global_btn {
    margin-top:4rem;
    height:5.5rem;
    padding:0 4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:.8rem;
    background:var(--blue);
    color:#fff;
    font-size:1.5rem;
    font-weight:700;
    position:relative;
    z-index:1;
    transition:.35s;
}
.contact_global_btn:hover {
    background:var(--orange);
}
/* =================================================
   Animation Ready
================================================= */
.contact_banner_content,
.contact_location_box,
.contact_factory_box,
.contact_inquiry_box,
.contact_global_box {
    opacity:0;
    transform:translateY(5rem);
    transition:
    opacity .8s ease,
    transform .8s ease;
}
.contact_page.active .contact_banner_content,
.contact_page.active .contact_location_box,
.contact_page.active .contact_factory_box,
.contact_page.active .contact_inquiry_box,
.contact_page.active .contact_global_box {
    opacity:1;
    transform:none;
}
/* =================================================
   Responsive
================================================= */
@media(max-width:1200px){
    .contact_container{
        width:90%;
    }
    .contact_banner_image{
        opacity:.3;
        width:100%;
        right:0;
    }
    .contact_location_box,
    .contact_factory_box,
    .contact_inquiry_box{
        flex-direction:column;
    }
    .contact_location_info,
    .contact_factory_info,
    .contact_inquiry_left{
        width:100%;
    }
    .contact_map{
        width:100%;
    }
    .contact_factory_images{
        width:100%;
    }
    .contact_form_row{
        flex-direction:column;
    }
    .contact_global_data{
        gap:3rem;
    }
}