/* main_visual */
.main_visual {
    width: 100%;
    height: 1020px;
    position: relative;
    overflow: hidden;
}
.main_visual .contents {
    width: 100%;
    height: 100%;
}
.main_visual .swiper-container {
    height: 100%;
}


.main_visual .mv_contents {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background-image: url(/assets/01_Main/main_visual_bg_01.png);
    background-size: 100% 100%;
}
.main_visual .mv_contents.step_two {
    background-image: url(/assets/01_Main/main_visual_bg_02.png);
}
.main_visual .mv_contents.step_three{
    background-image: url(/assets/01_Main/main_visual_bg_03.png);
}
.main_visual .mv_contents.step_four{
    background-image: url(/assets/01_Main/main_visual_bg_04.png);
}
.main_visual .mv_contents.step_five{
    background-image: url(/assets/01_Main/main_visual_bg_05.png);
}
.main_visual .mv_contents .content_layout {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
.main_visual .mv_contents.slick-slide {
    display: flex;
}
.main_visual .left_area {
    color: #fff;
    white-space: nowrap;
}
.main_visual .left_area .title {
    font-size: 4.17vw;
    font-weight: bold;
    margin-bottom: 3.02vw;
}
.main_visual .left_area .sub_title {
    font-size: 1.88vw;
    line-height: 1.5;
}
.main_visual .right_area img {
    width: 100%;
}
.main_visual .visual_button_wrap {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 100px;
    z-index: 5;
}
.main_visual .visual_button_wrap .fullpage_layout {
    position: relative;
}
.main_visual .visual_button_wrap .fullpage_layout::after {
    content: '';
    position: absolute;
    bottom: 60px;
    right: 0;
    width: calc(100% - 7.81vw);
    height: 1px;
    background-color: #fff;
}

.main_visual .bottom_arrow {
    width: 6.25vw;
    height: 6.25vw;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .5s cubic-bezier(.19,1,.22,1),background-color .5s cubic-bezier(.19,1,.22,1);
    transform-origin: center;
    color: #757575;
}
.main_visual .bottom_arrow:hover {
    transform: scale(1.1);
    opacity: .8;
    background-color: hsla(0,0%,100%,0);
    border: 4px solid #fff;
    color: #fff;
}
.main_visual .bottom_arrow:hover svg  {
    animation: normal;
}
.main_visual .bottom_arrow svg {
    animation: BounceUpDown 1.5s ease-in-out 0s infinite;
}
@keyframes BounceUpDown {
    0% {
        transform: translateY(-0.52vw)
    }

    50% {
        transform: translateY(0.52vw)
    }

    to {
        transform: translateY(-0.52vw)
    }
}

/* our_services */
.our_services {
    padding-bottom: 0;
}
.our_services .os_list {
    /* display: flex;
    justify-content: space-between; */
    padding: 0 2.08vw;
}
.our_services .os_list .os_item {
    text-align: center;
    line-height: 1.5;
    opacity: 0;
}
.our_services .os_list .os_item img {
    display: inline-block;
    height: 4.17vw;
    margin-bottom: 2.40vw;
}
.our_services .os_list .os_item .os_title {
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-size: 1.25vw;
    font-weight: bold;
    margin-bottom: 1.88vw;
    height: 3.75vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.our_services .os_list .os_item .os_desc {
    font-size: 0.83vw;
    color: #757575;
}


/* what_we_made */
.what_we_made {
    position: relative;
    padding: 0;
    margin-top: 17.71vw;
    margin-bottom: 0;
    /* background-color: #666; */
    /* background-image: url(/assets/01_Main/wwm_bg_01.jpg);
    background-size: 100% 100%;
    animation: all 1s ease; */
    overflow: hidden;
}
.what_we_made .content_wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    padding-top: 17.71vw;
    box-sizing: border-box;
}
.what_we_made .content_layout {
    width: 100%;
}
.what_we_made h2 {
    margin-bottom: 3.13vw;
    color: #fff;
}

.what_we_made h2 a {
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
    font-weight: 400;
}

.what_we_made .wwm_bg_list img {
    width: 100%;
}

.what_we_made .wwm_list .slick-track {
    height: 100%;
}
.what_we_made .wwm_list .wwm_item {
    position: relative;
    line-height: 1.5;
    width: 100%;
    height: 100%;
    max-width: 100%;
    z-index: 2;
    margin-right: 3.65vw;
}
.what_we_made .wwm_list .wwm_item:last-child {
    margin-right: 0;
}
.what_we_made .wwm_list .wwm_item a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid transparent;
    padding: 1.56vw;
    color: #fff;
    animation: all 1s ease;
}
.what_we_made .wwm_list .wwm_item a:hover, .what_we_made .wwm_list .wwm_item.slick-current a {
    border: 2px solid #fff;
}

.what_we_made .wwm_list .wwm_item .wwm_arrow {
    display: none;
    position: absolute;
    top: 1.56vw;
    right: 1.56vw;
    width: 1.56vw;
}
.what_we_made .wwm_list .wwm_item:hover .wwm_arrow, .what_we_made .wwm_list .wwm_item.slick-current .wwm_arrow{
    display: block;
}
.what_we_made .wwm_list .wwm_item .wwm_title {
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-size: 1.25vw;
    font-weight: bold;
    margin-bottom: 1.77vw;
    margin-top: 2.60vw;
}
.what_we_made .wwm_list .wwm_item .wwm_desc {
    font-size: 0.83vw;
    line-height: 1.8;
    height: 5.21vw;
}


/* contact_bottom */
.contact_us {
    padding-top: 0;
}
.contact_us .cu_buttons {
    display: flex;
    justify-content: space-between;
}
.contact_us .cu_buttons a {
    position: relative;
    max-width: 30.73vw;
    width: 100%;
}
.contact_us .cu_buttons a .cu_title {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: 'FF Good Pro', 'Spoqa Han Sans Neo', '맑은 고딕', Dotum;
    font-weight: bold;
    font-size: 3.33vw;
    margin-bottom: 2.08vw;
}
.contact_us .cu_buttons a .cu_title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.15em;
    width: 0;
    height: calc(0.05vw + 0.1em);
    position: absolute;
    background-color: #000;
    transition: width .2s ease,left .2s ease,transform .2s ease;
}
.contact_us .cu_buttons a:hover .cu_title::after {
    left: 0;
    width: 100%;
}
.contact_us .cu_buttons a:hover img.off {
    display: none;
}
.contact_us .cu_buttons a:hover img.on {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.60vw;
}
.contact_us .cu_buttons a .cu_desc {
    display: block;
    font-size: 1.25vw;
    line-height: 1.5;
}
.contact_us .cu_buttons a img {
    position: relative;
    top: -0.31vw;
    right: -0.52vw;
    display: inline-block;
    width: 1.88vw;
}
.contact_us .cu_buttons a img.on {
    display: none;
}

@media screen and (min-width:768px) {
    .what_we_made .wwm_list .slick-track {
        transform: none !important;
    }
}

@media screen and (max-width: 768px) {
    .main_visual {
        height: 100vh;
        /* height: 211.11vw; */
        /* padding-top: 39.86vw; */
        
    }
    .main_visual .contents::after {
        left: 25vw;
        width: calc(100% - 25vw);
    }
    .main_visual .mv_contents .content_layout {
        flex-direction: column;
        justify-content: center;
        align-items:start;
        /* padding: 0 5.56vw;
        padding-bottom: 9.03vw; */
    }
    .main_visual .content_layout::after {
        display: none;
    }
    .main_visual .mv_contents {
        padding-top: 0;
        background-size: auto;
        background-position: center;
    }
    .main_visual .mv_contents.slick-slide {
        flex-direction: column;
    }
    
    .main_visual .left_area .title {
        font-size: 11.11vw;
        margin-bottom: 7.22vw;
        white-space: break-spaces;
    }
    .main_visual .left_area .sub_title {
        font-size: 4.44vw;
        /* margin-bottom: 13.89vw; */
    }
    .main_visual .right_area {
        margin-top: 6.67vw;
        min-height: 91.67vw;
    }
    
    .main_visual .bottom_arrow {
        position: relative;
        width: 16.67vw;
        height: 16.67vw;
    }

    .main_visual .visual_button_wrap {
        bottom: 11.11vw;
    }
    .main_visual .visual_button_wrap .fullpage_layout::after {
        bottom: 8.11vw;
        width: calc(100% - 30vw);
        right: 5.56vw;
    }

    .our_services .content_layout {
        padding: 0;
    }
    .our_services .os_list {
        padding: 0 5.56vw;
        overflow-y: auto;
    }
    .our_services .os_list .os_item {
        opacity: 1;
    }
    .our_services .os_list .os_item img {
        height: 18.06vw;
        margin-bottom: 10.00vw;
    }
    .our_services .os_list .os_item .os_title {
        font-size: 5.56vw;
        height: 13.33vw;
        margin-bottom: 6.67vw;
    }
    .our_services .os_list .os_item .os_desc {
        font-size: 3.61vw;
    }

    .what_we_made {
        position: relative;
        padding-top: 0;
        padding-bottom: 0;
        background-size: cover;
        background-position: center;
        height: 166.67vw;
        margin-top: 33.33vw;
    }
    .what_we_made .content_wrap {
        padding-top: 38.89vw;
    }
    .what_we_made h2 {
        margin-bottom: 13.33vw;
    }
    .what_we_made h2 a {
        font-size: 2.78vw;
    }
    .what_we_made .content_layout {
        padding: 0;
    }
    .what_we_made .wwm_bg_list {
        width: 100%;
        height: 100%;
    }
    .what_we_made .slick-slider .slick-list {
        width: 100%;
        height: 100%;
    }
    .what_we_made .wwm_bg_list img {
        width: 100%;
        height: 166.67vw;
        object-fit: cover;
    }
    .what_we_made .wwm_list {
        display: block;
        /* overflow-y: auto; */
        padding-left: 5.56vw;
    }
    
    .what_we_made .wwm_list .wwm_item {
        max-width: 100%;
    }
    .what_we_made .wwm_list .wwm_item:hover {
        border: none;
    }
    .what_we_made .wwm_list .wwm_item a {
        padding: 11.11vw 9.03vw;
        border: 2px solid transparent;
    }
    .what_we_made .wwm_list .wwm_item a:hover, .what_we_made .wwm_list .wwm_item.focus a {
        border: 2px solid transparent;
    }
    .what_we_made .wwm_list .wwm_item:hover .wwm_arrow, .what_we_made .wwm_list .wwm_item.focus .wwm_arrow{
        display: none;
    }
    .what_we_made .wwm_list .wwm_item.slick-active .wwm_arrow{
        display: block;
    }
    .what_we_made .wwm_list .wwm_item .wwm_arrow {
        width: 5.83vw;
        top: 6.67vw;
        right: 9.03vw;
    }
    .what_we_made .wwm_list .wwm_item .wwm_title {
        font-size: 5.56vw;
        margin-top: 6.67vw;
        margin-bottom: 6.67vw;
        width: 53.33vw;
    }
    .what_we_made .wwm_list .wwm_item .wwm_desc {
        font-size: 3.61vw;
        height: auto;
    }

    .what_we_made .wwm_list .wwm_item.slick-active a{
        border: 2px solid #fff;
    }

    .what_we_made .wwm_list .slick-list {
        padding: 0 20% 0 0;
    }



    .contact_us .cu_buttons {
        flex-direction: column;
    }
    .contact_us .cu_buttons a {
        max-width: 100%;
        margin-bottom: 33.33vw;
    }
    .contact_us .cu_buttons a:last-child {
        margin-bottom: 0;
    }
    .contact_us .cu_buttons a img {
        width: 5vw;
    }
    .contact_us .cu_buttons a:hover img.on {
        width: 6.94vw;
    }
    .contact_us .cu_buttons a .cu_title {
        font-size: 8.89vw;
        margin-bottom: 6.67vw;
    }
    .contact_us .cu_buttons a .cu_desc {
        font-size: 3.89vw;
    }
}