@charset "UTF-8";

@font-face {
    font-family: 'tonstudio';
    src: url("/font/pretendard/Pretendard-Regular.woff2") format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'tonstudio';
    src: url("/font/pretendard/Pretendard-Medium.woff2") format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'tonstudio';
    src: url("/font/pretendard/Pretendard-Bold.woff2") format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: 'tonstudio';
    src: url("/font/crt/CreatoDisplay-Regular.otf") format('opentype');
    font-weight: 300;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
    font-family: 'tonstudio';
    src: url("/font/crt/CreatoDisplay-Medium.otf") format('opentype');
    font-weight: 500;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
    font-family: 'tonstudio';
    src: url("/font/crt/CreatoDisplay-Bold.otf") format('opentype');
    font-weight: 700;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

html,
body,
div,
section {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: 'tonstudio', sans-serif;
    font-weight: 300;
    letter-spacing: normal;
    color: #0d0d0d;
}

::selection {
    color: #fff;
    background-color: #0d0d0d;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
    -webkit-list-style: none;
    -moz-list-style: none;
    -ms-list-style: none;
    -o-list-style: none;
}

a {
    text-decoration: none;
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    height: auto;
    box-sizing: border-box;
    padding: 20px;
    position: fixed;
    top: 0;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    background: #fff;
    gap:15px;
}

.header .logo {
    position: relative;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 700;
    flex:7;
}

.header ul.menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    flex:8;

}

.header ul.menu li {
    position: relative;
    font-size: 13px;

    text-align: left;
    width: 100%;
    box-sizing: border-box;

}



.header a {
    color: #0d0d0d;
}



.footer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding: 20px;
    box-sizing: border-box;
    height: auto;
    font-weight: 300;
}

.footer .copyright {
    position: relative;
    display: flex;
    align-items: center;

}

.container {
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 100px;
    margin-bottom: 100px;
min-height: calc(100vh - 100px - 100px - 55px);
}

.flex_container {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 15px;
    margin-bottom: 100px;
}

.flex_container .page_left {
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    flex: 7;
}
.flex_container .page_left ul li{
    font-size: 14px;
    line-height: 1.5;
}
.flex_container .page_left ul li a{
    color:#0d0d0d;
}

.flex_container .page_content {
    position: relative;
    flex: 8;
    box-sizing: border-box;
}

.flex_container .text_area {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.5;
    font-weight: 300;
    word-break: keep-all;
    padding-right: 100px;
}

.flex_container .text_info_area {
    margin-bottom: 60px;
    position: relative;
}

.flex_container .text_info_area.first {
    margin-top: 0;
}

.flex_container .text_info_area .info_title {
    font-size: 14px;
    letter-spacing: 0;
    padding-bottom: 30px;
    line-height: 1;
}

.flex_container .text_info_area .info_list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.5;
}
.flex_container .text_info_area .info_list li{
    display: block;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
}
.flex_container .text_info_area .info_list li img{
    width: 18px;
    height: auto;
    margin-right: 15px;
}
.flex_container .text_info_area .info_list li a{
    color: #0d0d0d;
    text-decoration: underline;
}
.flex_container .text_info_area .info_list.contact_list{gap:15px;}

.flex_container .text_info_area .process_wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}

.flex_container .text_info_area .dwn_btn_wrap{
    position: relative;
    margin-top: 20px;
}
.flex_container .text_info_area .dwn_btn_wrap a{
    color:#0d0d0d;
    font-size: 14px;
    padding: 5px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.flex_container .text_info_area .dwn_btn_wrap a img{
    width: 11px;
    height: auto;
    position: relative;
}

.flex_container .page_left .text_info_area{margin-bottom: 0;}



.flex_container .btn_area{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap:8px;
    margin-top: 80px;
}
.flex_container .btn_area a{
    flex:1 1 0;
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #0d0d0d;
    padding: 8px;
    text-align: center;
    color: #0d0d0d;
    letter-spacing: -0.5px;
    box-sizing: border-box;
}


.link_wrap{margin-top: 20px;}

/*form*/
.form_wrap {
    word-break: keep-all !important;
    letter-spacing: -0.5px;
}
.form_wrap form{
    margin: 0;
}

.form_wrap .form_title {
    font-size: 14px;
    margin-bottom: 30px;
    letter-spacing: 0;
}

.form_wrap .form_title .title_sub {
    display: block;
    font-size: 13px;
    margin-top: 5px;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.5;
}

.form_wrap form ul {
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}

.form_wrap form ul li {
    list-style: none;
    font-size: 14px;
    font-weight: 300;
}

.form_wrap form ul li label {
    width: 100%;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: 'tonstudio';
}

.form_wrap form ul li label .label_info {
    display: block;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 3px;
    font-size: 13px;
}

.form_wrap form ul li:first-child label {
    margin-top: 0;
}

.form_wrap form ul li input,
.form_wrap form ul li select,
.form_wrap form ul li textarea {
    width: 100%;
    border: 0;
    outline: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    padding: 6px 1px;
    transition: border-bottom 0.2s;
    color: #0d0d0d;
    background: transparent;
    font-size: 14px;
    font-family: 'tonstudio';
    font-weight: 300;
}

.form_wrap form ul li input:focus,
.form_wrap form ul li select:focus,
.form_wrap form ul li textarea:focus {
    border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.form_wrap form ul li textarea {
    min-height: 70px;
}

.form_wrap form ul li select {
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    position: relative;
}

.form_wrap form ul li select::-ms-expand {
    display: none;
}

.form_wrap form ul li .select_wrap {
    position: relative;
}

.form_wrap form ul li .select_wrap::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1px solid #0d0d0d;
    border-right: 1px solid #0d0d0d;
    display: inline-block;
    transform: rotate(135deg);
    position: absolute;
    right: 9px;
    top: 9px;
}

.form_wrap form ul li input::placeholder,
textarea::placeholder {
    font-size: 14px;

    color: rgba(0, 0, 0, 0.4);
}

.form_wrap form button {
    border-radius: 0;
    border: 0;
    padding: 5px 0;
    text-align: left;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: -1px;
    color: #0d0d0d;
    font-weight: 500;
    margin-top: 10px;
}

.form_wrap form button:disabled,
.form_wrap form button[disabled] {
    color: rgba(0, 0, 0, 0.3);
}

.guide_txt {
    font-size: 15px;
    margin-bottom: 15px;
}

.guide_info {
    position: relative;
    font-size: 13px;
    margin-bottom: 30px;
    color: rgba(0, 0, 0, 0.7);
}

.guide_info div {
    margin: 4px 0;
    line-height: 1.4;
    position: relative;
    padding-left: 7px;
}

.guide_info div::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 7px;
    left: 0;
}

.form_wrap form ul li .privacy_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
}

.form_wrap form ul li .privacy_box input {
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.form_wrap form ul li .privacy_box label {
    width: auto;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    top: -2px;
}

.form_wrap form ul li .privacy_box label a {
    color: #0d0d0d;
    text-decoration: underline;
    margin-left: 8px;
    cursor: pointer;
}

#honeypot {
    display: none;
}

[data-ml-modal] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 999;
    width: 0;
    height: 0;
    opacity: 0;
}

[data-ml-modal]:target {
    width: auto;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

[data-ml-modal]:target .modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    background-color: #0d0d0d;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

[data-ml-modal] .modal-dialog {
    border-radius: 0;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
    position: relative;
    width: 90%;
    max-width: 660px;
    max-height: 70%;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}

.modal-dialog-lg {
    max-width: 820px !important;
}

[data-ml-modal] .modal-dialog>h3 {
    background-color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    padding: 20px;
}

[data-ml-modal] .modal-content {
    background: #fff;
    padding: 20px;
    font-size: 12px;
}

[data-ml-modal] .modal-close {
    position: absolute;
    top: 10px;
    right: 13px;
    color: #0d0d0d;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    font-size: 30px;
    line-height: 37px;
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-decoration: none;
}

[data-ml-modal] p:first-child,
[data-ml-modal] p:last-child {
    margin: 0;
}

[data-ml-modal] .modal-content strong {
    display: block;
    font-weight: 700;
    margin-top: 15px;
}

.form_tab_wrap{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 30px;
}
.form_tab_wrap a{
    font-size: 15px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.30);
    padding-bottom: 2px;
    box-sizing: border-box;
    letter-spacing: -0.5px;
}
.form_tab_wrap a.active{
    color: #0d0d0d;
    border-bottom: 1px solid #0d0d0d;
}










/*첨부파일*/
.form_wrap .file_group input[type="file"]{display: none;}

.form_wrap .file_input_wrap{display: flex;align-items: center;max-width: 100%;border-bottom: 1px solid rgba(0, 0, 0, 0.4);}
.form_wrap .file_input_wrap:has(.has_file){border-bottom: 1px solid rgba(0, 0, 0, 1);}

.form_wrap #file_name_label{width: 100%;margin: 0;color: rgba(0,0,0,1);font-size: 14px;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;padding: 6px 1px;}
.form_wrap #file_name_label.has_file{color: #000;width: auto;}

.form_wrap #file_remove_btn{display: none;position: relative;width: 16px;height: 16px;margin: 0 0 0 7px;padding: 0;flex: 0 0 16px;}
.form_wrap #file_remove_btn.show{display: block;}

.form_wrap #file_remove_btn:before,
.form_wrap #file_remove_btn:after{content:'';position: absolute;top: 50%;left: 50%;width: 11px;height: 1px;background: rgba(0,0,0, 0.5);}

.form_wrap #file_remove_btn:before{transform: translate(-50%,-50%) rotate(45deg);}
.form_wrap #file_remove_btn:after{transform: translate(-50%,-50%) rotate(-45deg);}

.form_wrap .file_notice{margin: 5px 0 0;font-size: 13px;color: rgba(0,0,0,0.4);}


/*문의 전송 로딩*/
.form_wrap #submit_btn{display: inline-flex;align-items: center;gap: 7px;}

.form_wrap .loading_spinner{display: inline-block;width: 13px;height: 13px;flex: 0 0 13px;box-sizing: border-box;border: 1px solid rgba(13,13,13,0.2);border-top-color: #0d0d0d;border-radius: 50%;animation: form_loading_spin 0.7s linear infinite;}

@keyframes form_loading_spin {
    to{transform: rotate(360deg);}
}
















/*gallery*/
.gallery_wrap{
    min-height: calc(100vh - 80px - 56px - 100px);
}

.gallery_wrap .swiper-slide{
    height:50vh;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery.swiper-wrapper{
    width: auto;
    height: auto;
}
.work_img img{
    width: auto;
    object-fit: contain; /* 또는 cover */
    transition: height 0.2s ease; /* 크기 변경이 매끄럽게 이루어지도록 */
    height: 100%;
    display: block;
}
.work_name_container{
    font-size: 14px;
    font-weight: 300;
}
.work_name_container .work_name_sub{
    display: block;
    font-weight: 300;
    padding-top: 3px;
}

.work_name_container a{color: #0d0d0d;}

/* 기본 위치 설정 (숨김 처리) */
.work_name {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

/* 활성 슬라이드에서 표시 */

.swiper-slide-active .work_name {
    opacity: 1;
    transform: translateY(0);
    visibility: hidden;
}
.gallery_info{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 15px;
    font-size: 13px;
}
.gallery_info .swiper-pagination-fraction{
    position: relative;
    top: 0;
    left: auto;
    bottom: auto;
    width: auto;
}


.pagination_wrap{position: relative;display: flex;align-items: center;justify-content: center;top: -7px;gap: 0;}
.pagination_wrap .swiper-button-prev, .pagination_wrap .swiper-button-next{position: relative;top: auto;left: auto;bottom: auto;
right: auto;width: auto;height: auto;margin-top: 0;height: 30px;padding: 0 15px;}
.pagination_wrap .swiper-button-prev{padding-left: 3px;}
.pagination_wrap .swiper-button-next{padding-right: 3px;}
.pagination_wrap .swiper-button-prev img, .pagination_wrap .swiper-button-next img{width: 6px;height: auto;}
.pagination_wrap .swiper-button-prev:after, .pagination_wrap .swiper-button-next:after{display: none;}

.gallery_info .swiper-pagination-fraction{min-width: 45px;}



/*******************************portfolio******************************/
.portfolio .container{
    padding-top: 0;
    margin-top: 0;
}
.portfolio .header{
    background:transparent;
}
.portfolio .header a{
    color:#fff;
}
.portfolio .header.active {
    background: #fff;
  }
  .portfolio .header.active a{
    color: #0d0d0d;
  }

  .portfolio .header .pc_logo{
    border-top: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
}
.portfolio .header.active .pc_logo{
    border-top: 2.5px solid #0d0d0d;
    border-bottom: 2.5px solid #0d0d0d;
}

  .work_main{
    position: relative;
    width: 100vw;
    margin-left: -20px;
    height: calc(100vh - 92px);
    max-height: 988px;
    overflow: hidden;
}
  .work_title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 124px;
    color: #fff;
    letter-spacing: -3px;
    line-height: 1;
    width: 100%;
    text-align: center;
    padding:0 20px;
    box-sizing: border-box;
  }
#bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 50%;
  }
.work_pc_main{
position: relative;
text-align: center;
width: 100%;
padding-top:160px;
}

.work_pc_main img{
    width: 100%;
    position: relative;
    margin: 0 auto;
    display: block;
    max-width: 1360px;
}
.work_pc_sub{
    position: relative;
    text-align: center;
    width: 100%;
    padding-top:130px;
    }
    
    .work_pc_sub img{
        width: 100%;
        position: relative;
        margin: 0 auto;
        display: block;
    }
    .work_pc_visual{
        position: relative;
        text-align: center;
        width: 100vw;
        margin-left: -20px;
        padding-top:180px;
        }
        
        .work_pc_visual img{
            width: 100%;
            position: relative;
            margin: 0 auto;
            display: block;
        }

.work_description{
    width: 100%;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding:240px 0;
    line-height: 1.5;
    font-size: 18px;
    letter-spacing: -1px;
    word-break: keep-all;
}

.work_description.back_desc .back{
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
}

.work_pc_visual.work_pc_detail{
    padding-top:0;
    }

    .work_mo_main{
        position: relative;
        text-align: center;
        width: 100%;
        padding:180px 0 140px 0;
        }
        
        .work_mo_main img{
            width: 100%;
            position: relative;
            margin: 0 auto;
            display: block;
            max-width: 792px;
        }

.work_info{
    position: relative;
    width: 25%;
    margin-left: auto;
}
.work_info .work_info_title{
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 40px;
}
.work_info ul{
    position: relative;
}
.work_info ul li{
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    padding-left: 2px;
    margin-top: 5px;
    box-sizing: border-box; 
}
.work_info ul li:first-child{
    font-size: 15px;
    font-weight: 700;
    margin-top: 30px;
}
.video_wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.visual_vid img{
z-index: 1;
}

.video_container {
    position: relative;
    height: 100%;
    min-height: 100%;
  }
  .video_container .video {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
  }



   /****************slider******************/

.slider_wrap{
    width:calc(100vw);
    position: relative;
    height: auto;
    margin-left:50%;
    transform: translateX(-50%);
    padding: 200px 0;
    box-sizing:border-box;
}
.slider{
    position: relative;
    width:100%;
    height: auto;
}
.slider .slide_item{
    margin: 0 auto;
    padding: 0 3vw;
    box-sizing: border-box;
}
.slider .slide_item img{
    position: relative;
    height: auto;
    margin: 0 auto;
    width: auto;
    max-width: calc(100vw - 50vw);
}

.slider_device{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    margin: auto;
    z-index: 999;
    pointer-events: none;
    margin: 200px 0;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #000;
    outline: 10px solid #000;
    border-radius: 15px;

}


.slider_m .slide_item img{
    max-width: calc(100vw - 82vw);
}
.slider_device_m img{
    height: 100%;
    width: auto;
    display: inline-block;
    border:12px solid #000;
    position: relative;
    top:-12px;
    border-radius:36px;
}
/****************slider******************/

.platform_link{
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin-top: 15px;
}
.platform_link a{
    color: rgba(0,0,0, 0.7);
    font-size: 14px;
    padding: 5px 0;
    position: relative;
}
.platform_link a:after{
    content:'';
    width:1px;
    height: 10px;
    border-right: 1px solid rgba(0,0,0, 0.5);
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
}
.platform_link a:last-child:after{
    display: none;
}

.template_price{
    margin-left: auto;
    font-size: 13px;
    flex-basis: 100%;
    margin-top: 8px;
    display: none;
}


/*template*/
.template_wrap{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.template_list{
    position: relative;
}
.list_name{
position: sticky;
top: 80px;
height: 100%;
overflow-y: auto;
flex: 7;
}
.list_name li{
    padding: 9px 0;
    border-bottom: 1px solid rgba(0,0,0, 0.1);
    color: rgba(0,0,0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 20px;
    width: calc(100% - 5%);
}
.list_name li > span{
    flex: 0 0 145px;
}
.list_name li.on{
    color: #000;
}
.list_name li:first-child{
    padding-top: 0;
}
.list_name li:last-child{
    border-bottom: 0;
}

.template_list{
    flex: 8;
    box-sizing: border-box;
}
.template_list a{color: #000;font-size: 14px;display: flex;flex-direction: column;margin-bottom: 30px;}
.template_name{font-size: 14px;padding: 10px 0;position: sticky;top: 40px;left: 0;z-index: 111;background: #fff;padding-top: 40px;margin-top: -40px;}




.template_list .work_container .work_img{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}
.template_list .work_container img{
width: auto;
object-fit: contain;
transition: height 0.2s ease;
height: 100%;
width: 100%;
display: block;}

.thankyou_message, .thankyou_message h2{
    letter-spacing: 0;
    margin-top: 10px;
    font-size: 17px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: normal;
    line-height: 1.5;
}


.text_info_area .client_wrap ul.info_list{gap:8px;line-height: normal;}

@media screen and (max-width: 1200px) {
    .work_main{
        margin-left: -20px;
    }
    .work_pc_main{
        padding-top: 120px;
    }
    .work_pc_main img{
        width: 92%;
    }
    .work_pc_sub{
        padding-top: 100px; 
    }
    .work_pc_visual{
        padding-top: 140px;
        margin-left: -20px;
    }
    .work_description{
        padding: 190px 0;
        max-width: 680px;
    }
    .work_mo_main{
        padding: 160px 0 120px 0;
    }
    .work_mo_main img {
        width: 92%;
        max-width: 686px;
    }
    .work_info .work_info_title{
        font-size: 30px;
    }
}


@media screen and (max-width: 992px) {
    .header{padding: 15px;}
    .container{
        padding: 0 15px;
        margin-top: 80px;
        margin-bottom: 80px;
min-height: calc(100vh - 80px - 60px - 43px);
min-height: calc(var(--vh, 1vh) * 100 - 80px - 80px - 43px);
    }
    .footer{padding: 15px;font-size: 11px;gap:15px;}
    .header .logo {
        flex: auto;
        font-size: 14px;
        flex: none;
        position: fixed;
        left: 0;
        bottom: 0;
        padding: 15px;
        z-index: 11;
        display: none;
    }

    .header ul.menu {
        gap: 18px;
        flex: auto;
        justify-content: space-between;
    }
    .header ul.menu li {
        font-size: 12px;
        width: auto;
    }
    .gallery_wrap{
        min-height: calc(100vh - 60px - 43px - 80px);
        min-height: calc(var(--vh, 1vh) * 100 - 80px - 60px - 43px);
    }
    .gallery_wrap .swiper-slide{
        width: 100%;
        height: auto;
    }
    .work_img img{
        width: 100%;
        height: auto;
    }
    .flex_container .page_left{
        flex: none;
    }
    .flex_container{
        flex-direction: column;
        gap:60px;
        margin-bottom: 80px;
    }
    .flex_container .page_content{
        width: 100%;
    }
    .work_description{
        padding: 200px 0;
    }
    .work_info{
        width: 33.3%;
    }
    .work_title{
        font-size: 100px;
    }

    .slider .slide_item img{
        max-width: calc(100vw - 40vw);
    }
    .slider_device img{
        border:12px solid #000;
        top:-12px;
    }

    .slider_m .slide_item img{
        max-width: calc(100vw - 65vw);
    }
    .slider_device_m img{
        height: 100%;
        width: auto;
        display: inline-block;
        border:10px solid #000;
        position: relative;
        top:-10px;
        border-radius:35px;
    }

    .more_btn{
        font-size: 13px;
        padding: 8px;
        text-align: center;
        margin-top: 10px;
        display: block;
        color: #000;
    }


    .platform_link a{
        font-size: 13px;
    }
    .template_price{
        margin-left: auto;
        font-size: 13px;
    }
    .gallery_info{
        font-size: 12px;
        padding-top: 10px;
    }
    .work_name_container{
        font-size: 12px;
    }
    .work_name_container .work_name_sub{
        padding-top: 1px;
    }
    .flex_container .text_area{
        padding-right: 0;
        font-size: 13px;
    }
    .flex_container .text_info_area .info_title{
        font-size: 13px;
    }
    .flex_container .text_info_area .info_list li{
        font-size: 13px;
    }
    .flex_container .page_left ul li{
        font-size: 13px;
    }
    .flex_container .text_info_area .dwn_btn_wrap a{
        font-size: 13px;
    }

.pagination_wrap{justify-content: center;top: 0;gap: 0;}
.gallery_info .swiper-pagination-fraction{min-width: auto;}
.pagination_wrap .swiper-button-prev, .pagination_wrap .swiper-button-next{display: none;}

.flex_container .text_info_area .dwn_btn_wrap{display: none;}
.form_wrap .form_title{font-size: 13px;}
.form_wrap form ul li{font-size: 13px;}
.form_wrap form ul li input, .form_wrap form ul li select, .form_wrap form ul li textarea{font-size: 13px;font-weight: 300;}
.form_wrap form ul li input::placeholder,
textarea::placeholder{font-size: 13px;font-weight: 300;}





.list_name{display: none;}
.template_name{font-size: 13px;padding-top: 30px;margin-top: -30px;top: 30px;}

.thankyou_message, .thankyou_message h2{
    font-size: 15px;
}



.form_wrap #file_name_label{font-size: 13px;}
.form_wrap .file_notice{font-size: 12px;}



}


@media screen and (max-width: 812px) {


.form_tab_wrap{
    gap: 20px;
}
.form_tab_wrap a{
    font-size: 14px;
}

.form_wrap form ul li label {
    margin-top: 25px;
    margin-bottom: 5px;
}
.work_title{
    font-size: 54px;
    letter-spacing: -1px;
}
.work_main{
    margin-left: -15px;
    height: calc(100vh - 92px);
    max-height: 440px;
    overflow: hidden;
}
.work_pc_main{
    padding-top: 60px;
}
.work_pc_sub{
    padding-top: 45px;
}
.work_pc_visual{
    padding-top: 60px;
    margin-left: -15px;
}
.work_description{
    padding: 90px 0;
    font-size: 15px;
    width: 94%;
}
.work_mo_main {
    padding: 60px 0 45px 0;
}
.work_mo_main img {
    width: 70%;
}
.work_info{
    width: 100%;
    margin-left: 0;
    margin-top: 45px;
}
.work_info .work_info_title{
    font-size: 22px;
    margin-bottom: 30px;
}
.work_info ul li{
    font-size: 13px;
    margin-top: 3px;
}
.work_info ul li:first-child {
font-size: 12px;
margin-top: 20px;
}


.platform_link{
    margin-top: 10px;
}

.platform_link a{
    font-size: 12px;
}
.template_price{
    margin-left: auto;
    font-size: 11px;
}

}