@charset "UTF-8";

@font-face {
    font-family: 'SBAggroM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {scroll-behavior: smooth; overflow-x: hidden;}
body {font-family: 'SUIT Variable', sans-serif; overflow-x: hidden; width: 100vw;}
#wrap {width: 100%; margin: 0 auto; overflow-x: hidden;}
p { color: #fff; font-size: 18px; font-weight: 400; text-align: center;  text-shadow: 0 0 3px black; margin-top: 15px;}
/* section h2 .tit {font-family: 'SBAggroM'; color: #fff; text-align: center; font-size: 60px; font-weight: 600;} */
/* section h2 .tit span { background: linear-gradient(to bottom, #DE567F 30%, #FFEFEF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} */




/* 오늘 하루 보지 않기 팝업 */
button {border: 0; background: none; cursor:pointer;}

.main_popup {position: fixed; z-index: 998; display: none; top: 100px; left: 50px; border: 1px solid #fff;

    &.on {display: block; background-color: #fff;}
  
    .img_wrap {width: 100%; height: 100%; display:flex; justify-content:center; align-items:center;}
    .img_wrap img {width: 500px; height: 620px;}
    .btn_wrap {display: flex; justify-content: end; align-items: center; width: 100%; height: 50px; background: #1b1b1b;}
    .btn_wrap button {
      display: block;
      background-color: #424242;
      text-align: center;
      color: #fff;
      font-size: 13px;
      padding: 7px 15px;
      margin-right: 10px;
    }
  }

  .pop2 {left: 100px; top: 150px;}

  @media (max-width: 1440px) {
    .main_popup {width: 400px;
        .img_wrap img {width: 100%; height: 100%;}
    }
   }
  @media (max-width: 991px) { 
    .main_popup {width: 350px;}
  } 
  @media (max-width: 768px) { } 
  @media (max-width: 575px) { 
    .main_popup {top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto;}
  } 
   


   






/* 헤더 */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    z-index: 999;
    /* background-image: url(../img/bg_header.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'SBAggroM';
}

.on {
    background-image: url(../img/bg_header.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
header nav {padding: 0 200px;}
header nav ul {
    display: flex;
    justify-content: space-between;
}
.gnb {height: 100px;}
.gnb li {width: 160px;}
.gnb li a {display: block; line-height: 100px; width: 100%; color: #fff; font-size: 22px; text-align: center;}
.gnb li a img {scale: 0.8;}


.mgnb_wrap {display: none;}



@media (max-width: 1199px) { 
    .on {background-image: url(../img/bg_header1200.png);}
    header nav {padding: 0 100px;}
}
@media (max-width: 991px) { 
    .on {background-image: url(../img/bg_header1000.png);}
    header nav {padding: 0 50px;}
    .gnb li {width: 120px;}
    .gnb li a {font-size: 18px;}
    .gnb li a img {scale: 0.7;}
} 
@media (max-width: 836px) { 
    .gnb li a {font-size: 17px;}
}
@media (max-width: 802px) { 
    .gnb li a {font-size: 16px;}
}
@media (max-width: 768px) { 
    header nav {padding: 0;}
    header nav > .gnb {display: none;}
    .mgnb_wrap {display: block; text-align: center;}
    h1 {height: 70px; margin-top: -10px;}
    h1 a {display: block; height: 100%;}
    h1 img {padding: 33px 0; width: 48%;}
    .mgnb_wrap .gnb {height: 40px; justify-content: center;}
    .mgnb_wrap .gnb li {}
    .mgnb_wrap .gnb li a {line-height: 40px; font-size: 16px;}
    

} 
@media (max-width: 575px) { 
    header {height: 70px;}
    .on {background-image: url(../img/bg_header700.png);}
    .gnb li {width: auto;}
     h1 {height: 55px; margin-top: -20px;}
     h1 img {width: 45%;}
    .mgnb_wrap .gnb li a {font-size: 15px; padding: 0 15px;}
} 
@media (max-width: 522px) { 
    .mgnb_wrap .gnb li a {padding: 0 10px;}
}
@media (max-width: 460px) { 
    .mgnb_wrap .gnb li a { font-size: 13px;}
    h1 img {width: 55%;}
}
@media (max-width: 425px) { 
    h1 img {padding: 37px 0; width: 55%;}
} 
@media (max-width: 416px) { 
    .mgnb_wrap .gnb li a {padding: 0 7px;}
}
@media (max-width: 375px) { 
    .mgnb_wrap .gnb li a { font-size: 13px; padding: 0 5px;}
} 













section {
    width: 100%;
    height: 950px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }


  
/* 메인화면 섹션1 */
#sec_1 {
    background-image: url(../img/main/bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#sec_1 h2 img {display: block; scale: 0.8; margin:95px auto 35px;}
#sec_1 .main_img {position: relative;}
#sec_1 .back_img { }
#sec_1 .text_img {position: absolute; top: 32%; left: 0;}

/* h2 {margin: -50px auto 0;} */

#sec_1 p {margin-top: 50px;}

#sec_1 p + img {
    margin-top: 20px;
    opacity: 0;
    scale: 0.6;
    animation : updown 2s 3s infinite;
}
@keyframes updown {
    0% {
      transform : translateY(0);
      opacity: 1;
}
    50% {
      transform : translateY(-10px);
      opacity: 1;
}
    100% {
      transform : translateY(0);
      opacity: 1;
}
}


@media (max-width: 1199px) { 
    #sec_1 {height: 850px;}
    #sec_1 h2 img {scale: 0.7; margin: 45px auto -15px;}
    #sec_1 .back_img {scale: 0.9;}
    #sec_1 .text_img {scale: 0.9; top: 32%;}
    #sec_1 p {margin-top: 20px;}
}
@media (max-width: 991px) {} 
@media (max-width: 768px) { 
    #sec_1 h2 img {scale: 0.6; margin: 50px auto -30px;}
    #sec_1 .back_img {scale: 0.8;}
    #sec_1 .text_img {scale: 0.8;}
    #sec_1 p {margin-top: 10px;}
} 
@media (max-width: 575px) {
    #sec_1 {height: 1000px;}
    #sec_1 h2 img {margin: 70px auto 0px;}
    #sec_1 p {margin-top: 30px;}
 } 
@media (max-width: 500px) {
    #sec_1 {height: 800px;}
 }
@media (max-width: 425px) {
    #sec_1 h2 img {scale: 0.5; margin: 25px auto -75px;}
    #sec_1 .back_img {scale: 0.65;}
    #sec_1 .text_img {scale: 0.65; top: 33%;}
    #sec_1 p {margin-top: -15px;}
 } 
 @media (max-width: 375px) {
    #sec_1 {height: 700px;}
    #sec_1 h2 img {scale: 0.45; margin: 30px auto -80px;}
    #sec_1 .back_img {scale: 0.55;}
    #sec_1 .text_img {scale: 0.55;}
    #sec_1 p {margin-top: -35px;}
  } 















/* 창업이유 섹션2 */
#sec_2 {
    height: 1400px;
    background-image: url(../img/sec_2/bg2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#sec_2 h2 {margin-top: 100px;}
#sec_2 h2 img {scale: 0.9;}
#sec_2 .gd_lst {margin: 80px 200px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px;}
#sec_2 .gd_lst li {padding: 0 20px;}



@media (min-width: 1921px) { 
    #sec_2 .gd_lst {margin: 80px 600px;}
}
@media (max-width: 1440px) {
    #sec_2 .gd_lst {margin: 80px 100px;}
} 
@media (max-width: 1199px) { 
    #sec_2 {height: 1200px;}
    #sec_2 h2 p {margin-top: 5px;}
    #sec_2 h2 img {scale: 0.7;}
    #sec_2 .gd_lst {margin: 35px 100px; gap: 0;}
    #sec_2 .gd_lst li {width: 33.3333%; padding: 30px;}
    #sec_2 .gd_lst li img {width: 100%;}
}
@media (max-width: 991px) {
    #sec_2 {height: 1000px;}
    #sec_2 h2 {margin-top: 90px;}
    #sec_2 .gd_lst li {padding: 20px;}
 } 
@media (max-width: 768px) { 
    #sec_2 {height: 900px;}
    #sec_2 h2 {margin-top: 90px;}
    #sec_2 h2 p {margin-top: -7px;}
    #sec_2 h2 img {scale: 0.6;}
    #sec_2 .gd_lst {margin: 35px 50px;}
} 
@media (max-width: 575px) { 
    #sec_2 {height: 1250px;}
    #sec_2 h2 {margin-top: 90px;}
    #sec_2 h2 p {margin-top: -7px; font-size: 16px;}
    #sec_2 h2 img {scale: 0.5;}
    #sec_2 .gd_lst {margin: 50px 20px;}
    #sec_2 .gd_lst li {width: 50%; padding: 20px;}
} 
@media (max-width: 500px) { 
    #sec_2 {height: 1120px;}
    #sec_2 h2 img {scale: 0.45;}
}
@media (max-width: 425px) { 
    #sec_2 {height: 980px;}
    #sec_2 h2 {margin-top: 100px;}
    #sec_2 h2 p {margin-top: -15px; font-size: 13px;}
    #sec_2 h2 img {scale: 0.4;}
    #sec_2 .gd_lst {margin: 50px 20px;}
    #sec_2 .gd_lst li {padding: 15px 10px;}
}
@media (max-width: 375px) {
    #sec_2 {height: 900px;}
    #sec_2 h2 {margin-top: 70px;}
    #sec_2 h2 p {margin-top: -20px; font-size: 12px;}
    #sec_2 h2 img {scale: 0.35;}
}















/* 기기소개 섹션3 */
#sec_3 {
    height: 2200px;
    background-image: url(../img/sec_3/bg3.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#sec_3 h2 {margin-top: 180px;}
#sec_3 h2 img {scale: 0.9;}
#sec_3 .mchn_lst {margin: 80px 300px; display: flex; flex-wrap: wrap; justify-content: center;}
#sec_3 .mchn_lst li {padding: 10px;}
#sec_3 .mchn_lst li img {scale: 0.9; transition: all .5s; border-radius: 20px;}
#sec_3 .mchn_lst li img:hover {scale: 1; box-shadow: 0 0 20px #fff;}


@media (min-width: 1921px) { 
    #sec_3 .mchn_lst {margin: 80px 600px;}
}
@media (max-width: 1440px) {
    #sec_3 .mchn_lst {margin: 80px 100px;}
}
@media (max-width: 1199px) {
    #sec_3 {height: 1800px;}
    #sec_3 h2 {margin-top: 100px;}
    #sec_3 h2 p {margin-top: 5px}
    #sec_3 h2 img {scale: 0.7;}
    #sec_3 .mchn_lst {margin: 50px 100px;}
    #sec_3 .mchn_lst li {width: 25%; padding: 0 10px;}
    #sec_3 .mchn_lst li img {width: 100%;}
    #sec_3 .mchn_lst li img:hover {scale: 0.95;}
 }
@media (max-width: 991px) { 
    #sec_3 {height: 1600px;}
    #sec_3 h2 {margin-top: 80px;}
    #sec_3 .mchn_lst li {width: 25%; padding: 0;}
} 
@media (max-width: 768px) { 
    #sec_3 {height: 2100px;}
    #sec_3 h2 {margin-top: 60px;}
    #sec_3 h2 img {scale: 0.6;}
    #sec_3 .mchn_lst {margin: 35px 50px;}
    #sec_3 .mchn_lst li {width: 33.3333%; padding: 0 5px;}
} 
@media (max-width: 575px) { 
    #sec_3 {height: 1800px;}
    #sec_3 h2 {margin-top: 60px;}
    #sec_3 h2 p {margin-top: -7px; font-size: 16px;}
    #sec_3 h2 img {scale: 0.5;}
    #sec_3 .mchn_lst {margin: 50px 20px;}
    #sec_3 .mchn_lst li {padding: 0;}
} 
@media (max-width: 500px) {
    #sec_3 {height: 1600px;}
    #sec_3 .mchn_lst li img {border-radius: 15px;}
    #sec_3 .mchn_lst li img:hover {box-shadow: 0 0 10px #fff;}
}
@media (max-width: 425px) {
    #sec_3 {height: 1350px;}
    #sec_3 h2 {margin-top: 50px;}
    #sec_3 h2 p {margin-top: -15px; font-size: 13px;}
    #sec_3 h2 img {scale: 0.4;}
}
@media (max-width: 375px) {
    #sec_3 {height: 1200px;}
    #sec_3 h2 {margin-top: 60px;}
    #sec_3 h2 p {margin-top: -20px; font-size: 12px;}
    #sec_3 h2 img {scale: 0.35;}
}














/* 상표,디자인 */
#register {
    height: 1100px; 
    background-image: url(../img/register/rgst_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
#register h2 img {scale: 0.9; margin-bottom: 15px;}
#register .rgst_lst {margin: 50px 500px; display: flex; flex-wrap: wrap; justify-content: center;}
#register .rgst_lst li {padding: 10px 20px;}
#register .rgst_lst li img {width: 220px; scale: 0.9; transition: all .5s;}
#register .rgst_lst li img:hover {scale: 0.95;}



@media (min-width: 1921px) { 
    #register .rgst_lst {margin: 50px 800px;}
}
@media (max-width: 1440px) {
    #register .rgst_lst {margin: 50px 300px;}
}
@media (max-width: 1199px) {
    #register h2 p {margin-top: 5px}
    #register h2 img {scale: 0.7;}
    #register .rgst_lst {margin: 50px 200px;}
}
@media (max-width: 991px) { 
    #register .rgst_lst {margin: 50px 100px;}
    #register .rgst_lst li img {width: 200px;}
} 
@media (max-width: 768px) { 
    #register {height: 900px;}
    #register h2 {margin-top: 50px;}
    #register h2 img {scale: 0.6; margin-bottom: 5px;}
    #register .rgst_lst {margin: 50px 0;}
    #register .rgst_lst li {padding: 10px;}
    #register .rgst_lst li img {width: 180px;}
} 
@media (max-width: 575px) { 
    #register {height: 750px;}
    #register h2 p {font-size: 16px;}
    #register h2 img {scale: 0.5;}
    #register .rgst_lst li {padding: 5px 10px;}
    #register .rgst_lst li img {width: 160px;}
    
} 
@media (max-width: 500px) {
    #register {height: 1000px;}
}
@media (max-width: 425px) {
    #register h2 p {font-size: 13px;}
    #sec_3 h2 img {scale: 0.4; margin-bottom: -5px;}
}
@media (max-width: 375px) {
    #register h2 img {scale: 0.35; margin-bottom: -10px;}
    #register h2 p {font-size: 12px;}
    #register .rgst_lst li {padding: 5px;}
}




















/* 매장현황 섹션4 */
#sec_4 {
    height: 3200px; 
    background-image: url(../img/sec_4/bg4.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#sec_4 h2 img {scale: 0.9;}
#sec_4 h2 {margin-top: 50px;}
#sec_4 .str_lst {
    margin: 80px 200px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#sec_4 .str_lst li {padding: 15px;}
#sec_4 .str_lst li img {transition: all .2s;}
#sec_4 .str_lst li:hover img {filter: saturate(130%);}
#sec_4 .open_lst {margin: 0 300px; display: flex; flex-wrap: wrap; justify-content: flex-start;}
#sec_4 .open_lst li {padding: 5px;}
#sec_4 .btm_txt {margin: 50px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;}
#sec_4 .btm_txt img:last-child {
    scale: 1;
    animation : scale 3s 1s infinite;
    transition: all 0.5s;
}
@keyframes scale {
    0% {
      transform : rotateY(0);
}
    40% {
      transform : rotateY(20deg);
}
    60% {
      transform : rotateY(0);
}
    70% {
        transform : rotateY(10deg);
}
    75% {
        transform : rotateY(0deg);
}
    80% {
        transform : rotateY(7deg);
}
    100% {
        transform : rotateY(0);
}
}
#sec_4 .btm_btn {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#sec_4 .btm_btn button {margin-top: 30px; background: #df567f; border: 0; width: 400px; height: 70px; border-radius: 40px;}
#sec_4 .btm_btn button a {display: block; width: 100%; line-height: 70px; color: #fff; font-size: 20px; font-weight: 500;}
#sec_4 .btm_btn button:hover {background: rgba(223, 86, 127, 0.7);}
/* #sec_4 .btm_btn button a:hover {color: #df567f; font-weight: 700;} */





@media (min-width: 1921px) { 
    #sec_4 .str_lst {margin: 80px 600px 30px;}
    #sec_4 .open_lst {margin: 0 620px;}
}
@media (max-width: 1440px) {
    #sec_4 .str_lst {margin: 80px auto 30px;}
    #sec_4 .open_lst {margin: 0 60px;}
}
@media (max-width: 1199px) {
    #sec_4 {height: 2550px; }
    #sec_4 h2 img {scale: 0.7;}
    #sec_4 h2 p {margin-top: 5px;}
    #sec_4 .str_lst {margin: 50px 100px 30px;}
    #sec_4 .str_lst li {width: 25%; padding: 10px;}
    #sec_4 .str_lst li img {width: 100%;}
    #sec_4 .open_lst {margin: 0 100px;}
    #sec_4 .open_lst li {width: 10%; padding: 5px;}
    #sec_4 .open_lst li img {width: 100%;}
    #sec_4 .btm_txt {scale: 0.7; margin: 0px auto;}
    #sec_4 .btm_btn button {margin-top: 20px; width: 300px; height: 60px;}
    #sec_4 .btm_btn button a {line-height: 60px;}
 }
@media (max-width: 991px) {
    #sec_4 {height: 2150px;}
    #sec_4 h2 {margin-top: 0px;}
    #sec_4 .btm_btn p {margin-top: -10px;}
 } 
@media (max-width: 768px) {
    #sec_4 {height: 2900px;}
    #sec_4 h2 {margin-top: 20px;}
    #sec_4 h2 p {margin-top: -7px;}
    #sec_4 h2 img {scale: 0.6;}
    #sec_4 .str_lst {margin: 35px 50px;}
    #sec_4 .str_lst li {width: 33.33333%;}
    #sec_4 .open_lst {margin: 0 50px;}
    #sec_4 .open_lst li {width: 12.5%; padding: 2px;}
    #sec_4 .btm_txt {scale: 0.6; margin: -10px auto;}
    #sec_4 .btm_btn button {margin-top: 20px; width: 200px; height: 50px;}
    #sec_4 .btm_btn p {font-size: 15px;}
    #sec_4 .btm_btn button a {line-height: 50px; font-size: 15px;}
    
    #sec_4 .str_lst .img_hide {display: none;}
 } 
@media (max-width: 575px) { 
    #sec_4 {height: 2230px;}
    #sec_4 h2 {margin-top: 0;}
    #sec_4 h2 p {font-size: 16px;}
    #sec_4 h2 img {scale: 0.5;}
    #sec_4 .str_lst {margin: 50px 20px 20px;}
    #sec_4 .str_lst li {padding: 5px 10px;}
    #sec_4 .open_lst {margin: 0 30px;}
    #sec_4 .open_lst li {width: 12.5%;}
    #sec_4 .btm_txt {width: 100vw; margin: -20px auto;}
} 
@media (max-width: 500px) { 
    #sec_4 {height: 2000px;}
    #sec_4 .open_lst li {width: 14.25%;}
}
@media (max-width: 425px) { 
    #sec_4 {height: 1750px;}
    #sec_4 h2 {margin-top: 40px;}
    #sec_4 h2 p {margin-top: -15px; font-size: 13px;}
    #sec_4 h2 img {scale: 0.4;}
    #sec_4 .str_lst li {padding: 5px;}
    #sec_4 .open_lst {margin: 0 25px;}
    #sec_4 .btm_txt {scale: 0.5;}
}
@media (max-width: 375px) {
    #sec_4 {height: 1600px;}
    #sec_4 h2 {margin-top: 0px;}
    #sec_4 h2 p {margin-top: -20px; font-size: 12px;}
    #sec_4 h2 img {scale: 0.35;}
    #sec_4 .str_lst {margin: 50px 20px 30px;}
    #sec_4 .btm_txt {margin: -40px auto;}
    #sec_4 .btm_txt img:last-child {scale: 0.9;}
    #sec_4 .btm_btn p {margin-top: 0;}
    #sec_4 .btm_btn button {margin-top: 15px;}
 }











/* 쇼핑몰 */
#mall {
    height: 700px; 
    background-image: url(../img/mall/mall_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 250px;
}
#mall .right {display: flex; flex-direction: column; align-items: flex-end;}
#mall .right img {margin-bottom: 50px; width: 200px;}
#mall .right p {text-decoration: none; text-align: right; padding-right: 5px; margin-bottom: 20px;}
#mall .right h2 {font-family: 'SBAggroM'; color: #fff; font-size: 45px; font-weight: 500; text-align: right; margin-bottom: 70px;}
#mall .right h2 span {display: block;}
#mall .right button {width: 400px; height: 70px;}
#mall .right button a {display: block; text-align: center; width: 100%; background: #df567f; color: #fff; border-radius: 40px; line-height: 70px; font-size: 20px;}
#mall .right button:hover a {background: rgba(223, 86, 127, 0.7); border-radius: 40px; font-weight: 500;}






@media (min-width: 1921px) { 
    #mall {padding: 0 600px;}
}
@media (max-width: 1440px) {
    #mall {padding: 0 70px;}
}
@media (max-width: 1199px) { 
    #mall {height: 600px; padding: 0 100px;}
    #mall .left img {width: 500px;}
    #mall .right img {margin-bottom: 20px;}
    #mall .right h2 {font-size: 42px; margin-bottom: 40px;}
    #mall .right button {width: 300px; height: 60px;}
    #mall .right button a {line-height: 60px;}
}
@media (max-width: 991px) {
    #mall {padding: 0 70px;}
    #mall .left img {width: 400px;}
    #mall .right img {margin-bottom: 20px; width: 150px;}
    #mall .right h2 {font-size: 40px; margin-bottom: 40px;}
 } 
@media (max-width: 768px) { 
    #mall {height: 450px; padding: 0 50px;}
    #mall .left img {width: 330px;}
    #mall .right img {margin-bottom: 10px; }
    #mall .right p {font-size: 15px;}
    #mall .right h2 {font-size: 30px; margin-bottom: 30px;}
    #mall .right button{width: 200px; height: 50px;}
    #mall .right button a {line-height: 50px; font-size: 15px;}
} 
@media (max-width: 575px) { 
    #mall {height: 700px; padding: 0; flex-direction: column-reverse; justify-content: center;}
    #mall .left img {width: 450px;}
    #mall .right {align-items: center;}
    #mall .right img {margin-bottom: 20px; }
    #mall .right p {font-size: 18px;}
    #mall .right h2 {text-align: center; font-size: 35px; margin-bottom: 30px;}
    #mall .right button{width: 200px; height: 50px; margin-bottom: 50px;}
    #mall .right button a {line-height: 50px; font-size: 15px;}
} 
@media (max-width: 500px) { 
}
@media (max-width: 425px) { 
    #mall .left img {width: 350px;}
    #mall .right p {font-size: 13px;}
    #mall .right h2 {font-size: 28px;}
}
@media (max-width: 375px) {
    #mall {height: 600px;}
    #mall .left img {width: 300px;}
    #mall .right img {margin-bottom: 10px; }
    #mall .right p {font-size: 12px;}
    #mall .right h2 {font-size: 25px;}
}





















/* 창업문의 섹션5 */
#sec_5 {
    height: 1100px; 
    background-image: url(../img/sec_5/bg5.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}
#sec_5 h2 {margin-top: 50px; text-align: center;}
#sec_5 img {scale: 0.9;}
#sec_5 h2 p {margin-top: 35px;}
#sec_5 h2 p span {display: block;}

#sec_5 .contact-area {margin: 0 auto; width: 1100px;}
#sec_5 article {
    margin-top: 50px;
    width: 100%;
    height: 500px;
    border: 5px solid #fff;
    background-image: url(../img/sec_5/logo_b.png);
    background-position: 170px 220px;
    background-repeat: no-repeat;

}
#sec_5 .row, .col-md-7, .comment-form {height: 100%; width: 100%;}
#sec_5 form {height: 100%; display: flex; justify-content: space-between; align-items: center;}
/* #sec_5 form > .form-row:first-of-type {padding: 10% 10% 10% 0;} */
#sec_5 form > .form-row .form-row {display: inline-block; width: 45%; text-align: right; vertical-align: top; margin-top: -100px;}
#sec_5 form > .form-row .form-row:nth-of-type(2n) {margin-left: 20px;}
#sec_5 form > .form-row .form-row:nth-of-type(3), #sec_5 form > .form-row .form-row:nth-of-type(4) {margin-top: -60px;}
#sec_5 label {margin-right: 10px;}
#sec_5 form > .form-row .form-row:nth-of-type(4) label {display: inline-block; vertical-align: top; margin-top: 8px;}
#sec_5 input[type='text'] {width: 350px; height: 35px; border-radius: 45px; padding-left: 20px;}
#sec_5 input[type='text']::placeholder {font-size: 12px; font-weight: 200; color: #888;}
#sec_5 textarea {width: 350px !important; height: 200px !important; border: none; resize: none; border-radius: 20px; padding: 15px;}
#sec_5 .m-0 {position: absolute; bottom: 60px; right: 95px; text-align: center;}
#sec_5 .m-0 .mdl_text {font-size: 12px; font-weight: 300; cursor: default;}
#sec_5 .m-0 .mdl_text span {cursor: pointer; font-weight: 600;}
#sec_5 #btnSubmit {width: 300px; height: 50px; background: #df567f; border: 0; border-radius: 40px; margin-top: 15px; color: #fff; font-size: 15px; font-weight: 500;}
#sec_5 #btnSubmit:hover {background: rgba(223, 86, 127, 0.7); color: #fff; font-weight: 700;}





@media (max-width: 1199px) { 
    #sec_5 {height: 1000px;}
    #sec_5 h2 {margin-top: 30px;}
    #sec_5 h2 p {margin-top: 20px;}
    #sec_5 h2 img {scale: 0.7;}
    #sec_5 .contact-area {width: 1000px;}
}
@media (max-width: 991px) { 
    #sec_5 {height: 850px;}
    #sec_5 h2 {margin-top: 40px;}
    #sec_5 .contact-area {width: 800px;}
    #sec_5 article {height: 400px; background-position: 94px 165px; background-size: 250px;}
    #sec_5 form > .form-row .form-row {margin-top: -100px;}
    #sec_5 form > .form-row .form-row:nth-of-type(3), #sec_5 form > .form-row .form-row:nth-of-type(4) {margin-top: -70px;}
    #sec_5 input[type='text'] {width: 250px; height: 30px; padding-left: 15px;}
    #sec_5 textarea {width: 250px !important; height: 140px !important; border-radius: 15px; padding: 15px;}
    #sec_5 .m-0 {bottom: 50px; right: 53px;}
    #sec_5 .m-0 .mdl_text {font-size: 10px;}
    #sec_5 #btnSubmit {width: 200px; height: 40px; font-size: 14px;}

} 
@media (max-width: 768px) {
    #sec_5 {height: 750px;}
    #sec_5 h2 p {margin-top: 5px;}
    #sec_5 h2 img {scale: 0.6;}
    #sec_5 .contact-area {width: 650px;}
    #sec_5 article {margin-top: 40px; height: 300px; border: 3px solid #fff; background-position: 88px 127px; background-size: 190px;}
    #sec_5 form > .form-row .form-row {margin-top: -80px;}
    #sec_5 form > .form-row .form-row:nth-of-type(3), #sec_5 form > .form-row .form-row:nth-of-type(4) {margin-top: -58px;}
    #sec_5 label {font-size: 13px;}
    #sec_5 input[type='text'] {width: 200px; height: 25px; padding-left: 10px;}
    #sec_5 input[type='text']::placeholder {font-size: 10px;}
    #sec_5 textarea {width: 200px !important; height: 100px !important; padding: 10px;}
    #sec_5 .m-0 {bottom: 35px; right: 32px;}
    #sec_5 .m-0 .mdl_text {font-size: 8px;}
    #sec_5 #btnSubmit {width: 150px; height: 30px; font-size: 12px;}
 } 
@media (max-width: 575px) { 
    #sec_5 {height: 900px;}
    #sec_5 h2 {margin-top: 40px;}
    #sec_5 h2 p {margin-top: 5px; font-size: 16px;}
    #sec_5 h2 img {scale: 0.5;}
    #sec_5 .contact-area {width: 500px;}
    #sec_5 article {margin-top: 40px; height: 550px; background: none;}
    #sec_5 form {height: 100%; flex-direction: column; align-items: flex-end;}
    #sec_5 form > .form-row {margin: 20px 50px 0 0;}
    #sec_5 form > .form-row .form-row:nth-of-type(2n) {margin-left: 0;}
    #sec_5 form > .form-row .form-row {display: block; width: 100%; margin-top: 20px;}
    #sec_5 form > .form-row .form-row:nth-of-type(3), #sec_5 form > .form-row .form-row:nth-of-type(4) {margin-top: 20px;}
    #sec_5 input[type='text'] {width: 350px; height: 35px;}
    #sec_5 textarea {width: 350px !important; height: 180px !important;}
    #sec_5 .m-0 {bottom: 40px; right: 70px;}
    #sec_5 .m-0 .mdl_text {font-size: 12px;}
    #sec_5 #btnSubmit {width: 300px; height: 50px; font-size: 14px; font-weight: 300;}
} 
@media (max-width: 500px) { 
    #sec_5 .contact-area {width: 460px;}
    #sec_5 input[type='text'] {width: 300px; height: 35px;}
    #sec_5 textarea {width: 300px !important; height: 180px !important;}
    #sec_5 .m-0 {bottom: 40px; right: 70px;}
    #sec_5 #btnSubmit {width: 250px; height: 45px;}
}
@media (max-width: 425px) { 
    #sec_5 {height: 800px;}
    #sec_5 h2 {margin-top: 30PX;}
    #sec_5 h2 p {margin-top: -5px; font-size: 13px;}
    #sec_5 h2 img {scale: 0.4;}
    #sec_5 .contact-area {width: 370px;}
    #sec_5 article {height: 500px; background-position: 12px 425px; background-size: 75px;}
    #sec_5 form > .form-row {margin: 30px 30px 0 0;}
    #sec_5 input[type='text'] {width: 250px; height: 35px;}
    #sec_5 textarea {width: 250px !important; height: 140px !important;}
    #sec_5 .m-0 {bottom: 50px; right: 24px;}
    #sec_5 .m-0 .mdl_text {font-size: 10px;}
    #sec_5 #btnSubmit {width: 200px; height: 40px;}
}
@media (max-width: 375px) { 
    #sec_5 {height: 750px;}
    #sec_5 h2 p {margin-top: -5px; font-size: 12px;}
    #sec_5 h2 img {scale: 0.35;}
    #sec_5 .contact-area {width: 320px;}
    #sec_5 article {height: 450px; background: none;}
    #sec_5 input[type='text'] {width: 200px; height: 30px;}
    #sec_5 textarea {width: 200px !important; height: 100px !important;}
}















/* 푸터 */
footer {background: #000; color: #fff; height: 300px;}
footer .wrap {padding: 50px 250px; display: flex; justify-content: space-between; align-items: center;}
footer img {display: block; width: 180px;}
footer .right {text-align: right;}
footer address {font-size: 15px;}
footer address strong {font-size: 22px;}
footer address i {display: block; margin: 30px 0 5px;}
footer address span {font-weight: 700; padding: 0 15px;}
footer p {text-shadow: none; font-size: 13px; text-align: right; margin-top: 30px;}




@media (max-width: 1199px) { 
    footer .wrap {padding: 50px 100px;}
}
@media (max-width: 991px) { 
    footer img {display: block; width: 140px;}
    footer address {font-size: 12px;}
    footer address strong {font-size: 20px;}
    footer address span {padding: 0 10px;}
    footer p {font-size: 11px;}
} 
@media (max-width: 768px) { 
    footer {height: 220px;}
    footer .wrap {padding: 30px 50px;}
    footer img {display: block; width: 120px;}
    footer address {font-size: 10px;}
    footer address strong {font-size: 17px;}
    footer address i {display: block; margin: 20px 0 5px;}
    footer address span {padding: 0 10px;}
    footer p {font-size: 9px; margin-top: 20px;}
} 
@media (max-width: 575px) { 
    footer {height: 400px;}
    footer .wrap {flex-direction: column;}
    footer img {margin: 0 0 20px; width: 110px;}
    footer .right {text-align: center;}
    footer address {font-size: 17px; padding: 0 30px;}
    footer address strong {font-size: 22px;}
    footer address i {display: block; margin: 30px 0 0;}
    footer p {text-align: center; font-size: 13px; margin-top: 30px;}
} 
@media (max-width: 500px) { 
    footer address {font-size: 15px; padding: 0 10px;}
}
@media (max-width: 425px) { 
    footer .wrap {padding: 40px 0;}
    footer address {font-size: 14px; padding: 0 40px;}
    footer address strong {font-size: 20px;}
    footer p {font-size: 11px;}
}
@media (max-width: 375px) { 
    footer .wrap {padding: 25px 0;}
    footer img {width: 100px;}
    footer address {font-size: 13px; padding: 0 20px;}
    footer {height: 350px;}
}
















/* 빠른창업문의 */
.con_box {position: fixed; bottom: 0; left: 0; width: 100vw; height: 60px; z-index: 998; background: #971A63;}
.con_box .container {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.con_box .container div {padding: 0 30px 0 0;}
.con_box .contact-area, .con_box .contact-area .container, .con_box .m-0 {padding: 0 !important;}
.con_box .container .left a {font-size: 20px; font-weight: 700; color: #fff; margin-right: 30px;}
.con_box form, .con_box .m-0 {display: flex; align-items: center;}
.con_box input[type='text'] {width: 180px; height: 35px; border-radius: 40px; padding-left: 20px;}
.con_box .m-0 .mdl_text {cursor: default; color: #fff; font-size: 12px; padding-right: 15px;}
.con_box .m-0 .mdl_text span {cursor: pointer; font-weight: 700;}
.con_box #btnSubmit {width: 100px; height: 35px; background: #df567f; border: 2px solid #fff; border-radius: 30px; color: #fff;}
.con_box #btnSubmit:hover {background: rgba(223, 86, 127, 0.7); font-weight: 500;}




@media (max-width: 1199px) {
    .con_box .contact-area {padding: 0 !important;}
    .con_box .container div {padding: 0 20px 0 0;}
    .con_box .m-0 {padding: 0 !important;}
    .con_box .contact-area .container {padding: 0 !important;}
    .con_box .container .left a {text-align: right; margin-right: 0;}
    .con_box input[type='text'] {width: 130px; height: 35px;}
}
@media (max-width: 991px) { 
    .con_box .container div {padding: 0 10px 0 0;}
    .con_box .container .left a {font-size: 16px;}
    .con_box .m-0 .mdl_text {font-size: 10px;}
    .con_box input[type='text'] {width: 120px; height: 30px;}
    .con_box #btnSubmit {height: 30px;}
} 
@media (max-width: 768px) {
    .con_box {height: 40px;}
    .con_box .container .left a {font-size: 15px;}
    .con_box .contact-area {display: none;}
 } 
@media (max-width: 575px) {
    .con_box {height: 50px;}
    .con_box .container .left a {font-size: 18px;}
 } 














/* 모달 창 스타일 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
    height: 700px;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    color: #000;
    text-align: center;

    h3 {margin-top: 50px; font-size: 22px; font-weight: 700;}
    article p {text-shadow: none; color: #000; font-size: 13px; margin-bottom: -5px;}
    .p1 {margin: 30px auto 70px;}
    p strong {font-size: 16px; font-weight: 700; display: block; margin-bottom: 40px; text-align: center;}
    .p2 p {text-align: left;}
    .p2 .br {font-size: 15px; margin: 30px auto 10px; text-decoration: underline;}
}


/* 모달 닫기 버튼 스타일 */
.close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    cursor: pointer;
    scale: 2;
}



@media (max-width: 1199px) {
    .modal-content {width: 50%; height: 555px;}
 }
@media (max-width: 991px) {
    .modal {cursor: pointer;}
    .modal-content {width: 50%; height: 460px;}
} 
@media (max-width: 768px) {
    .modal-content {width: 70%; height: 355px;} 
} 
@media (max-width: 575px) { 
    .modal-content {width: 80%; height: 800px; margin: 20% auto;}
} 
@media (max-width: 425px) {
    .modal-content {width: 100%; height: 500px; margin: 30% auto;}
}
@media (max-width: 375px) {
    .modal-content {article p {font-size: 12px;}}
}