.main_visual{width: 100%;height: 950px;background: url(../images/overview/main_visual.png) no-repeat; background-position: center;background-size: cover;}
.main_visual .inner{color: #fff; text-align: center; }
.main_visual .inner .under_bar{margin: 30px auto;}
.main_visual .inner p{line-height: 150%;}
.main_visual .inner p.f-64{line-height: unset;}


.banner{width: 100%; height: 250px; background: url(../images/banner_bg.png) no-repeat; background-size: cover; background-position: center;}
.banner .flex_center{height: 100%; justify-content: space-evenly;}


/* overview */
#sub_wrap01 .sec01_wrap{padding-bottom: 350px;}
#sub_wrap01 .sec01 .under_bar{background-color: #f05535;}
#sub_wrap01 .sec01 p{line-height: 150%;}
#sub_wrap01 .sec01 .inner{position: relative;}
#sub_wrap01 .sec01 .inner img{position: absolute; bottom: -55%; right: 5%; z-index: -1;}

#sub_wrap01 .sec02 .under_bar{background-color: #f05535; margin: 30px auto;}
#sub_wrap01 .sec02 h2, #sub_wrap01 .sec02 p{text-align: center;}
#sub_wrap01 .sec02 .flex_center{justify-content: space-between; align-items: end; gap: 15px;}
#sub_wrap01 .sec02 .flex_column{gap: 10px;}

#sub_wrap01 .sec03_wrap{background-color: #F8F8F8;}
#sub_wrap01 .sec03 h2, #sub_wrap01 .sec03 > .inner p {text-align: center;}
#sub_wrap01 .sec03 .under_bar{background-color: #f05535; margin: 30px auto;}
#sub_wrap01 .sec03 .flex_center{margin: 40px auto 0; flex-wrap: wrap; gap: 30px; justify-content: center;}
#sub_wrap01 .sec03 .flex_center .inner{position: relative; transition: all 0.3s;}
#sub_wrap01 .sec03 .flex_center .inner img{width: 100%;}
#sub_wrap01 .sec03 .flex_center .inner.w-3{width: calc(33.3333% - 20px);}
#sub_wrap01 .sec03 .flex_center .inner.w-5{width: calc(50% - 15px);}
#sub_wrap01 .sec03 .flex_center .inner p{margin-bottom: 30px;}
#sub_wrap01 .sec03 .flex_center .inner:hover{transform: scale(1.1);}
#sub_wrap01 .sec04{text-align: center;}
#sub_wrap01 .sec04 .inner{margin-bottom: 50px;}


/* search */
#sub_wrap02 .main_visual{background: url(../images/search/main_visual.png) no-repeat; background-position: center;background-size: cover;}
#sub_wrap02 .gray{background-color: #F8F8F8; padding: 100px 0 150px;}
#sub_wrap02 .sec01 .grid_box{gap: 30px;}
#sub_wrap02 .sec01 .grid_box .grid_inner{padding: 0 0 0 65px; height: 300px; background-color: #fff; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 15px;}
#sub_wrap02 .sec01 .grid_box .flex_start{gap: 30px;}
#sub_wrap02 .sec01 .grid_box .flex_start .under_bar{width: 50px; background-color: #282828; margin: 10px 0;}
#sub_wrap02 .sec02 .inner{margin-bottom: 50px; text-align: center;}
#sub_wrap02 .sec02 .flex_center{justify-content: space-between; gap: 15px;}
#sub_wrap02 .sec01 .grid_box .grid_inner:last-child:nth-child(odd) {
    width: 570px;
    grid-column: 1 / -1;
    justify-self: center;
}


/* display */
#sub_wrap03 .main_visual{background: url(../images/display/main_visual.png) no-repeat; background-position: center;background-size: cover;}
#sub_wrap03 .banner{margin-top: 100px;}
#sub_wrap03 .sec01 .under_bar,#sub_wrap03 .sec03 .under_bar{background-color: #f05535; margin: 15px 0;}
#sub_wrap03 .sec01 .flex_center,
#sub_wrap03 .sec02 .flex_center,
#sub_wrap03 .sec03 .flex_center,
#sub_wrap03 .sec04 .flex_center{justify-content: space-between; align-items: center;}
#sub_wrap03 .sec01 .flex_center p,
#sub_wrap03 .sec03 .flex_center p{line-height: 150%;}
#sub_wrap03 .gray{background-color: #F8F8F8;}
#sub_wrap03 .sec02 .flex_center .f-24,
#sub_wrap03 .sec04 .flex_center .f-24{margin: 0 0 10px;}
#sub_wrap03 .sec04 .inner{margin-bottom: 50px;}
#sub_wrap03 .sec05{text-align: center;}
#sub_wrap03 .sec05 .inner{margin-bottom: 50px;}

/* viral */
#sub_wrap04 .banner{margin-top: 100px;}
#sub_wrap04 .main_visual{background: url(../images/viral/main_visual.png) no-repeat; background-position: center;background-size: cover;}
#sub_wrap04 .flex_column{align-items: inherit; gap: 50px;}
#sub_wrap04 .flex_column .flex_start,
#sub_wrap04 .flex_column .flex_end{gap: 50px;}
#sub_wrap04 .flex_column .flex_start p,
#sub_wrap04 .flex_column .flex_end p{line-height: 150%;}
#sub_wrap04 .flex_column .flex_end p{text-align: end;}
#sub_wrap04 .flex_column .flex_start p.f-24,
#sub_wrap04 .flex_column .flex_end p.f-24{margin-bottom: 30px;}

#sub_wrap04 .sec07{text-align: center;}
#sub_wrap04 .sec07 .inner{margin-bottom: 50px;}


/* sns */
#sub_wrap05 .banner{margin-top: 100px;}
#sub_wrap05 .main_visual{background: url(../images/sns/main_visual.png) no-repeat; background-position: center;background-size: cover;}
#sub_wrap05 .sec01_wrap{padding-bottom: 350px;}
#sub_wrap05 .sec01 .under_bar{background-color: #f05535;}
#sub_wrap05 .sec01 p{line-height: 150%;}
#sub_wrap05 .sec01 .inner{position: relative;}
#sub_wrap05 .sec01 .inner img{position: absolute; top: 0; right: 5%; z-index: -1;}

#sub_wrap05 .sec02_wrap{background-color: #2689EF; position: relative;}
#sub_wrap05 .sec02_wrap h2, #sub_wrap05 .sec02_wrap p{color: #fff; text-align: center;}
#sub_wrap05 .sec02_wrap p{margin: 10px 0 50px; }
#sub_wrap05 .sec02_wrap .sec02 img{display: block; margin: auto;}
#sub_wrap05 .sec02_wrap >img {position: absolute; right: 5%; bottom: 15%;}

#sub_wrap05 .sec03_wrap{background: linear-gradient(98.84deg, #DB42C5 1.65%, #DF833B 100%); position: relative;}
#sub_wrap05 .sec03_wrap h2, #sub_wrap05 .sec03_wrap p{color: #fff; text-align: center;}
#sub_wrap05 .sec03_wrap h2{letter-spacing: -3px;}
#sub_wrap05 .sec03_wrap p{margin: 10px 0 50px; }
#sub_wrap05 .sec03_wrap .sec03 img{display: block; margin: auto;}
#sub_wrap05 .sec03_wrap >img {position: absolute; right: 5%; bottom: 15%;}

#sub_wrap05 .sec04_wrap h2{margin-bottom: 10px;}
#sub_wrap05 .sec04_wrap .textbox{margin-bottom: 50px; text-align: center;}
#sub_wrap05 .sec04_wrap .flex_center{justify-content: space-between;}

#sub_wrap05 .sec05_wrap h2{margin-bottom: 10px;} 
#sub_wrap05 .sec05_wrap .textbox{text-align: center; margin-bottom: 50px;} 
#sub_wrap05 .sec05_wrap img{display: block; margin: auto;}



/* portfolio */
#sub_wrap06 .main_visual{background: url(../images/portfolio/main_visual.png) no-repeat; background-position: center;background-size: cover;}
#sub_wrap06 .banner{margin-top: 100px;}
#sub_wrap06 .flex_column{align-items: inherit; gap: 100px;}


/* contact form skin */
.main_visual.write{background: url(../images/portfolio/main_visual.png) no-repeat; background-position: center;background-size: cover;}
.bgbox{background: url(../images/contact/sub_visual.png) no-repeat; background-position: center;background-size: cover;}
.contact-form-box {
    max-width: 970px; margin: auto; padding: 30px 80px; 
    background: #FFFFFF;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}
.contact-form-box h1, .contact-form-box h2 { text-align: center; }
.contact-form-box .form_section h3 {margin-bottom: 15px; position: relative;}
.contact-form-box .form_group { display: flex; flex-wrap: wrap; margin-bottom: 15px; align-items: center; }
.contact-form-box .form_group .group_title { width: 120px; }
.contact-form-box .form_group .group_content { flex: 1; }
.contact-form-box .form_group input[type="text"],
.contact-form-box .form_group input[type="email"] { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.contact-form-box .form_group textarea { width: 100%; height: 200px !important; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.contact-form-box .checkbox-group label { margin-right: 20px; margin-bottom: 20px; width: 25%;}
.contact-form-box .checkbox-group input { margin-right: 5px; }
.contact-form-box .privacy-agree { margin: 15px 0 30px; }
.contact-form-box .privacy-agree label{font-size: 16px; color: #656565;}
.contact-form-box .btn_confirm { text-align: center; }
.contact-form-box .btn_submit { background: #F05535; color: #fff; width: 100%; max-width: 392px; height: 50px; border: 0; border-radius: 15px; cursor: pointer; }
.contact-form-box label{font-size: 24px; font-weight: 500;}
.contact-form-box .grid_box{gap: 20px 30px;}
.contact-form-box .form_group.w-100{width: 85%;}
.contact-form-box .flex_start h3{width: 96px;}
.contact-form-box .flex_start{justify-content: space-between; align-items: start; margin-top: 15px;}
.contact-form-box .form_section h3.circle::before{content: "";width: 10px;height: 10px;border-radius: 500px;background-color: #F05535;position: absolute;top: 50%; left: -30px;transform: translateY(-50%);}
.bgbox .inner h2{text-align: center; margin-bottom: 50px;}








@media (max-width: 768px) {
   .main_visual {height: 80vh;}
   .main_visual .inner .under_bar{margin: 15px auto;}

   .banner{padding: 30px 15px; position: relative; width: 94%; height: 190px; border-radius: 15px;}
   .banner .flex_center{align-items: start; justify-content: start;}
   .banner .img_box{width: 35%; position: absolute; right: 10px; bottom: 10px; max-width: 160px;}
   .banner img{width: 100%;}
   
   /* overview */
    #sub_wrap01 .sec01 .inner img{position: unset; width: 100%; margin-top: -12vw;}
    #sub_wrap01 .sec01_wrap{padding-bottom: clamp(30px, 15.55vw, 70px);}

    #sub_wrap01 .sec02 .flex_center{flex-wrap: wrap; justify-content: center;}
    #sub_wrap01 .sec02 .flex_center img{width: 100%;}
    #sub_wrap01 .sec02 .flex_column{width: 45%;}

    #sub_wrap01 .sec03 .flex_center{flex-wrap: wrap; gap: 15px; margin: 20px auto 0;}
    #sub_wrap01 .sec03 .flex_center .inner.w-3,
    #sub_wrap01 .sec03 .flex_center .inner.w-5{width: 100%;}
     #sub_wrap01 .sec03 .under_bar{margin: 15px auto;}
    #sub_wrap01 .sec03 .flex_center .inner:hover{transform: unset;}
    #sub_wrap01 .sec03 .flex_center .inner p{margin-bottom: 15px;}


    /* search */
    #sub_wrap02 .gray{padding: 20px 0 70px;}

    #sub_wrap02 .sec01 .grid_box .grid_inner{padding: 15px; height: 200px; gap: 15px; justify-content: space-evenly;}
    #sub_wrap02 .sec01 .grid_box{grid-template-columns: repeat(1, 1fr); gap: 15px;}
    #sub_wrap02 .sec01 .grid_box .grid_inner img{width: 30%; max-width: 150px; min-width: 100px;}

    #sub_wrap02 .sec02 .inner{margin-bottom: 20px;}
    #sub_wrap02 .sec02 .flex_center{gap: 0;}
    #sub_wrap02 .sec02 .flex_center img{width: 33.33%;}
    #sub_wrap02 .sec01 .grid_box .grid_inner:last-child:nth-child(odd) {width: 100%;}


    /* display */
    #sub_wrap03 .banner{margin-top: 20px;}
    #sub_wrap03 .sec01 .flex_center, #sub_wrap03 .sec02 .flex_center, #sub_wrap03 .sec03 .flex_center, #sub_wrap03 .sec04 .flex_center {flex-direction: column; align-items: start;}
    #sub_wrap03 img{width: 100%; display: block; margin: auto;}
    #sub_wrap03 .sec05 .inner{margin-bottom: 20px;}
    #sub_wrap03 .sec02 .flex_center{gap: 15px;}
    #sub_wrap03 .sec02 img{border: 1px solid #eeeeee; border-radius: 20px;margin-bottom: 10px;}


    /* viral */
    #sub_wrap04 .banner{margin-top: 20px;}
    #sub_wrap04 .flex_column .flex_start{flex-direction: column; align-items: start; padding: 0 15px;}
    #sub_wrap04 .flex_column .flex_end{flex-direction: column-reverse; align-items: start; padding: 0 15px;}
    #sub_wrap04 .flex_column img{width: 100%;}
    #sub_wrap04 .flex_column .flex_start, #sub_wrap04 .flex_column .flex_end{gap: 10px;}
    #sub_wrap04 .flex_column .flex_start p.f-24, #sub_wrap04 .flex_column .flex_end p.f-24{margin-bottom: 10px;}
    #sub_wrap04 .flex_column .flex_end p{text-align: start;}
    #sub_wrap04 .sec07 .inner{margin-bottom: 20px;}
    #sub_wrap04 .flex_column{gap: 25px;}


    /* sns */
    #sub_wrap05 .banner{margin-top: 20px;}
    #sub_wrap05 .sec01 .inner img {width: 70%; top: 18vw; right: 0;}
    #sub_wrap05 .sec01_wrap {padding-bottom: 250px }
    #sub_wrap05 .sec02_wrap .sec02 img{width: 100%; position: relative; z-index: 2;}
    #sub_wrap05 .sec02_wrap >img{width: 50%; z-index: 1; bottom: 180px;}
    #sub_wrap05 .sec03_wrap .sec03 img{width: 100%; position: relative; z-index: 2;}
    #sub_wrap05 .sec03_wrap >img{width: 35%; z-index: 1; bottom: 160px;}
    #sub_wrap05 .sec04_wrap .flex_center img{width: 33.33%;}
    #sub_wrap05 .sec05_wrap img{width: 100%;}
    #sub_wrap05 .sec02_wrap p{margin: 10px 0 100px;}
    #sub_wrap05 .sec03_wrap p{margin: 10px 0 100px;}
    #sub_wrap05 h2{font-size: clamp(22px, 7vw, 36px);}
    #sub_wrap05 .sec03_wrap h2{letter-spacing: 0;}
    #sub_wrap05 .sec05_wrap .textbox{margin-bottom: 20px;}


    /* portfolio */
    #sub_wrap06 .banner{margin-top: 20px;}
    #sub_wrap06 .flex_column{gap: 50px;}
    #sub_wrap06 .flex_column .sec01,#sub_wrap06 .flex_column .sec02{padding: 0 15px;}
    #sub_wrap06 .flex_column img{width: 100%;}

    
    /* contact */
    .bgbox{padding-left: 15px; padding-right: 15px;}
    .bgbox .inner h2{margin-bottom: 20px;}
    .contact-form-box label {font-size: 16px;}
    .contact-form-box .form_group .group_title{width: 91px;}
    .contact-form-box .form_group.m_column{flex-direction: column; align-items: start; gap: 10px; margin-bottom: 0;}
    .contact-form-box .form_group .group_content{width: 100%;}
    .contact-form-box .flex_start{flex-direction: column;}
    .contact-form-box .form_group.w-100{width: 100%;}
    .contact-form-box .grid_box{gap: 10px 20px;}
    .contact-form-box .checkbox-group label{margin-right: 0; width: 33%;}
    .contact-form-box{padding: 30px;}
    .contact-form-box .form_section h3.circle::before{left: -15px;}
}   

@media (max-width: 450px) {






    /* sns */
    #sub_wrap05 .sec01 .inner img{top: 40vw;}


    /* contact */
    .contact-form-box .checkbox-group label{width: 50%; margin-bottom: 15px;}
    .contact-form-box .grid_box{grid-template-columns: repeat(1, 1fr); gap: 15px;}
    .contact-form-box .privacy-agree label{font-size: 12px;}
}