.s_wrap>div {
    padding: 100px 200px;
}

.mb20 {
    margin-bottom: 20px;
}

.c_title {
    text-align: center;
}

.c_title>span {
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    color: #989898;
    margin-bottom: 5px;
    display: inline-block;
}

.sub_contents_s .c_title>span {
    font-weight: 600;
}

.c_title>h2 {
    font-size: 34px;
    color: #39b54a;
    margin-bottom: 20px;
}

.c_title>p {
    line-height: 1.5;
}

.s1_c1 {
    width: 100%;
    padding: 200px;
    box-sizing: border-box;
    background: #222;
}

.s1_c1_b1>div {
    font-size: 120px;
    line-height: 1;
    font-family: 'Nelphim';
    color: #222;
    -webkit-text-stroke: 1px #39b54a;
}

.s1_c1_b2 {
    margin-top: 200px;
    display: flex;
    justify-content: flex-end;
}

.s1_c1_b2>div {
    width: 30%;
}

.s1_c1_b2 h2 {
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
    color: #39b54a;
}

.s1_c1_b2 p {
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
}

.s_wrap .s1_c2 {
    padding: 0;
    padding-top: 200px;
    background: #fff;
}

#inc01 {
    overflow: hidden;
    width: 100%;
    padding: 100px 0;
    background: #fff;
}

#inc01 .cont_wrap {
    width: 100%;
}

#inc01 .cont_wrap ul {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#inc01 .cont_wrap ul:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -40%;
    transform: translateY(-50%);
    width: calc(100% / 3);
    height: 2px;
    background-color: #222;
}

#inc01 .cont_wrap ul:before {
    content: "";
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    width: calc(100% / 3);
    height: 2px;
    background-color: #222;
}

#inc01 .cont_wrap.on ul:after {
    animation: bar_left_ani 0.9s ease-in forwards;
}

#inc01 .cont_wrap.on ul:before {
    animation: bar_right_ani 0.9s ease-in forwards;
    animation-delay: 1.2s;
}

#inc01 .cont_wrap ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background-color: #fff;
}

#inc01 .cont_wrap ul li:first-child {
    z-index: 1;
    right: -50px;
}

#inc01 .cont_wrap ul li:nth-child(2) {
    z-index: 2;
}

#inc01 .cont_wrap ul li:last-child {
    z-index: 3;
    left: -50px;
}

#inc01 .cont_wrap ul li h3 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: #222;
    font-family: "Montserrat", sans-serif;
}

#inc01 .cont_wrap ul li p {
    width: 60%;
    margin-top: 40px;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: #989898;
}

#inc01 .cont_wrap ul li svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 455px;
    height: 450px;
}

#inc01 .cont_wrap ul li svg path {
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 610px;
    stroke-dashoffset: 610px;
    stroke: #222;
}

#inc01 .cont_wrap.on ul li svg path {
    animation: stroke_ani 0.9s ease-in forwards;
}

#inc01 .cont_wrap ul li:nth-child(1) svg path {
    animation-delay: 0.5s;
}

#inc01 .cont_wrap ul li:nth-child(2) svg path {
    animation-delay: 0.75s;
}

#inc01 .cont_wrap ul li:nth-child(3) svg path {
    animation-delay: 1s;
}

@keyframes stroke_ani {
    0% {
        stroke-dashoffset: 610px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes bar_left_ani {
    0% {
        left: -40%
    }

    100% {
        left: -10%
    }
}

@keyframes bar_right_ani {
    0% {
        right: 25%;
        opacity: 0;
    }

    100% {
        right: -10%;
        opacity: 1
    }
}

.ov_list {
    padding: 100px 200px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.ov_list>h2 {
    width: 40%;
    padding-top: 3%;
    box-sizing: border-box;
    font-size: 30px;
}

.ov_list>ul {
    width: 60%;
    margin-top: 50px;
    float: right;
}

.ov_list>ul>li {
    display: flex;
    align-items: center;
    height: 200px;
    padding: 0 5%;
    box-sizing: border-box;
    transition: all .3s;
    position: relative;
    cursor: pointer;
}

.ov_list>ul>li.active-item {
    color: #fff;
    transition: color 0.3s ease-in-out;
}

.ov_list>ul>li>h2 {
    width: 30%;
}

.ov_list>ul>li>p {
    width: 70%;
    line-height: 1.5;
    font-size: 20px;
}

.ov_list>ul>li:hover {
    color: #fff;
}

.ov_list .active {
    position: absolute;
    top: 0;
    /* 초기 위치 */
    z-index: 0;
    width: 79%;
    height: 200px;
    border-radius: 20px;
    background: #39b54a;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
}

.ov_list .active p {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
}

.s1_c3 {
    padding: 200px;
    box-sizing: border-box;
}

.s1_c3_b1 {
    margin-top: 100px;
}

.ceo_title {
    width: 70%;
    font-size: 60px;
    word-break: keep-all;
    line-height: 1.5;
}

.ceo_txt {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 70px;
    line-height: 1.8;
}

.ceo_txt>p {
    width: 51%;
    font-size: 18px;
}

.ceo_txt>p:nth-child(1) {
    margin-bottom: 20px;
}

.s1_c4 {
    padding: 100px 200px;
    box-sizing: border-box;
}

.s1_c4_b1 {
    display: flex;
    gap: 200px;
}

.history_t {
    width: 50%;
    margin-top: 100px;
}

.history_t>h2 {
    margin-bottom: 20px;
}

.history_t>p {
    line-height: 1.5;
    font-size: 18px;
}

.history_list {
    width: 50%;
    padding-top: 100px;
}

.history_list>li {
    padding-bottom: 40px;
}

.history_list>li.on div {
    display: block;
}

.history_list .year {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 50px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding-bottom: 20px;
    border-bottom: 1px solid #222;
    margin-bottom: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .3s;
}

.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

.history_list .year i {
    transition: transform 0.3s;
    font-size: 16px;
}

.history_list div {
    display: none;
}

.history_list .history_title {
    font-weight: 600;
    margin-bottom: 10px;
}

.history_list .history_title {
    line-height: 1.5;
}

.history_list .history_txt {
    margin-bottom: 5px;
}

.history_list .history_txt:last-child {
    margin-bottom: 0;
}

.s_wrap .s1_c5 {
    padding: 0;
}

.s1_c5 .c_title {
    padding-top: 100px;
    box-sizing: border-box;
}

.s1_c5_b1 {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 100px;
}

.s1_c5_b1 p {
    position: absolute;
    font-size: 100px;
    mix-blend-mode: difference;
    color: #fff;
    font-weight: 600;
    z-index: 2;
}

.s1_c5_b1 video {
    filter: brightness(.5);
    z-index: 1;
    /* width: 50%; */
}

.s1_c5_b2>div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 100%;
    /* color: #fff; */
}

.s1_c5_b2>div>p {
    width: 40%;
    font-size: 26px;
    text-align: center;
    margin: 0 auto;
    line-height: 1.5;
}

.s1_c6 {
    padding: 100px 200px;
    box-sizing: border-box;
}

.s1_c6_b1 {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 50px;
    padding-top: 100px;
}

.c6_txt {
    width: 100%;
    text-align: center;
    font-size: 70px;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
}

.s1_c6_b2 {
    display: flex;
    align-items: center;
    gap: 100px;
}

.c6_b2_img {
    width: 50%;
    height: 80vh;
    overflow: hidden;
    border-radius: 30px;
}

.c6_b2_txt {
    width: 50%;
}

.c6_b2_txt .txt_l {
    margin-bottom: 50px;
}

.c6_b2_txt .txt_l h2 {
    font-size: 70px;
    font-family: "Montserrat", sans-serif;
}

.c6_b2_txt .txt_r {
    display: flex;
    justify-content: flex-end;
}

.c6_b2_txt .txt_r div {
    width: 75%;
}

.c6_b2_txt .txt_r div p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.s1_c7 {
    padding: 100px 200px;
}

.s1_c7>ul {
    margin-top: 100px;
}

.s1_c7>ul>li {
    border-top: 1px solid #222;
    padding: 30px;
    box-sizing: border-box;
    transition: all .3s;
}

.s1_c7>ul>li:last-child {
    border-bottom: 1px solid #222;
}

.s1_c7>ul>li:hover {
    background: #eee;
}

.s1_c8 {
    padding: 100px 200px;
    box-sizing: border-box;
}

.s1_c8 .root_daum_roughmap {
    margin-top: 50px;
    width: 100%;
}

.s1_c8 .root_daum_roughmap .wrap_map {
    width: 100%;
    height: 500px;
}

.s1_c8 .cont {
    display: none;
}

.s1_c8 .c8_add {
    margin-top: 20px;
}

.s1_c8 .c8_add>li {
    margin-bottom: 10px;
}

.s1_c8 .c8_add>li>p>span {
    font-weight: 600;
    width: 100px;
    display: inline-block;
}

.s_wrap .s1_c9 {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-image: url('/images/c9_img.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0;
}

.s1_c9>div.c9_txt {
    width: 100%;
    text-align: center;
    display: block;
    font-family: 'AppleSDGothicNeoR00';
    margin-bottom: 50px;
    /* mix-blend-mode: difference; */
    /* color: #fff; */
}

.s1_c9>div.c9_txt>h2 {
    font-size: 70px;
    color: #fff;
}

.s1_c9>div.c9_txt>p {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
}

/* sub2 */
.s_wrap .s2_bg {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222;
    position: relative;
    padding: 0;
}

.s2_bg_txt {
    font-size: 60px;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    color: #989898;
}

.s2_bg img {
    width: 8%;
    position: absolute;
}

.s2_bg img.s2_icon1 {
    top: 30%;
    left: 10%;
}

.s2_bg img.s2_icon2 {
    top: 10%;
    left: 40%;
}

.s2_bg img.s2_icon3 {
    top: 15%;
    right: 10%;
}

.s2_bg img.s2_icon4 {
    bottom: 13%;
    left: 20%;
}

.s2_bg img.s2_icon5 {
    bottom: 20%;
    right: 20%;
}

.s2_c1_b1 {
    margin-top: 100px;
    display: flex;
    gap: 50px;
}

.s2_c1_b1>li {
    width: calc(100% / 3);
    padding: 30px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.s2_c1_b1>li>h2 {
    font-size: 20px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 20px;
}

.s2_c1_b1>li>div {
    width: 100px;
    height: 100px;
    display: flex;
    margin-bottom: 20px;
    position: relative;
}

.s2_c1_b1>li>div>span {
    display: block;
}

.wd_li1 .wd_img1 span {
    width: calc(100% / 3);
    height: 100%;
    transform: rotate(-25deg);
    background: #4270c3;
    border-radius: 50%;
    position: absolute;
    left: 0;
    animation: none;
}

.s2_c1_b1>li>div.wd_img1>span:nth-child(1) {
    left: 0;
}

.s2_c1_b1>li>div.wd_img1>span:nth-child(2) {
    left: 33.33%;
}

.s2_c1_b1>li>div.wd_img1>span:nth-child(3) {
    left: 66.66%;
}

.wd_li1:hover .wd_img1 span:nth-child(2) {
    animation: moveToLeftAndBack2 1.5s ease-in-out forwards;
}

@keyframes moveToLeftAndBack2 {
    0% {
        left: 33.33%;
    }

    50% {
        left: 0%;
    }

    100% {
        left: 33.33%;
    }
}

@keyframes moveToLeftAndBack3 {
    0% {
        left: 66.66%;
    }

    50% {
        left: 0%;
    }

    100% {
        left: 66.66%;
    }
}

.wd_li1:hover .wd_img1 span:nth-child(3) {
    animation: moveToLeftAndBack3 1.5s ease-in-out forwards;
}

.s2_c1_b1>li>div.wd_img2 {
    overflow: hidden;
}

.s2_c1_b1>li>div.wd_img2>span {
    width: 100%;
    height: 100%;
    background: #39b54a;
    border-radius: 50%;
    position: absolute;
    border-radius: 50%;
}

.s2_c1_b1>li>div.wd_img2>span:nth-child(1) {
    left: -50%;
}

.s2_c1_b1>li>div.wd_img2>span:nth-child(2) {
    right: -50%;
}

@keyframes s2_ani2 {
    0% {
        border-radius: 50%;
    }

    50% {
        border-radius: 0;
    }

    100% {
        border-radius: 50%;
    }
}

.s2_c1_b1>li>div.wd_img3>span {
    position: absolute;
    width: calc(100% / 3);
    height: 100%;
    background: #f7c24e;
    border-radius: 0 30px 0 30px;
    animation-fill-mode: forwards;
    z-index: 1;
}

.s2_c1_b1>li>div.wd_img3>span:nth-child(2) {
    left: 33.33%;
    z-index: 0;
}

.s2_c1_b1>li>div.wd_img3>span:nth-child(3) {
    left: 66.66%;
    z-index: 0;
}

@keyframes moveToCenterFromLeft {
    0% {
        left: 0%;
    }

    50% {
        left: 33.33%;
    }

    100% {
        left: 0%;
    }
}

@keyframes moveToCenterFromRight {
    0% {
        left: 66.66%;
    }

    50% {
        left: 33.33%;
    }

    100% {
        left: 66.66%;
    }
}

.s2_c1_b1>li.wd_li2:hover>.wd_img2>span {
    animation: s2_ani2 forwards 1s ease;
}

.s2_c1_b1>li.wd_li3:hover>.wd_img3>span:nth-child(3) {
    animation: moveToCenterFromRight 1.5s ease-in-out forwards;
}

.s2_c1_b1>li.wd_li3:hover>.wd_img3>span:nth-child(1) {
    animation: moveToCenterFromLeft 1.5s ease-in-out forwards;
}

.s2_c1_b2 {
    display: flex;
    margin-top: 30px;
    position: relative;
    margin-top: 200px;
}

.s2_c1_t {
    width: 40%;
    height: fit-content;
    position: sticky;
    top: 0;
    margin-bottom: 50px;
}

.s2_c1_t>h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.s2_c1_t>p {
    font-size: 16px;
    line-height: 1.5;
}

.s2_c1_b2 .hompage_course {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.s2_c1_b2 .hompage_course>li {
    width: 100%;
    /* height: 257px; */
    padding: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    background: #f9f9f9;
    transition: .3s;
    opacity: .3;
}

.s2_c1_b2 .hompage_course>li.on {
    opacity: 1;
}

.s2_c1_b2 .hompage_course>li>span {
    font-size: 40px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    margin-bottom: 20px;
    display: inline-block;
}

.s2_c1_b2 .hompage_course>li>h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.s2_c1_b2 .hompage_course>li .txt_box {
    line-height: 1.5;
    display: none;
}

.s2_c1_b2 .hompage_course>li .txt_box p {
    margin-bottom: 5px;
}

.s2_c1_b2 .hompage_course>li .txt_box p:last-child {
    margin-bottom: 0;
}

.s2_c1_b3 {
    margin-top: 200px;
}

.s2_c1_b3 .sub_t {
    width: 100%;
    text-align: left;
    margin-bottom: 100px;
}

.s2_c1_b3 .hompage_need {
    width: 100%;
}

.s2_c1_b3 .hompage_need li {
    display: flex;
    margin-bottom: 70px;
}

.s2_c1_b3 .hompage_need li .txt_title {
    width: 40%;
}

.s2_c1_b3 .hompage_need li .txt_title span {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0 10px;
}

.s2_c1_b3 .hompage_need li .txt_title h2 {
    width: fit-content;
    position: relative;
    padding: 0 10px;
}

.s2_c1_b3 .hompage_need li .txt_title h2::after {
    content: "";
    width: 100%;
    height: 10px;
    background: #39b54a;
    opacity: .5;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.s2_c2 .c_title {
    margin-bottom: 150px;
}

.s2_c2 .sub_t {
    width: 100%;
}

.s2_c1_b3 .hompage_need li .txt_box {
    width: 60%;
    border-top: 1px solid #222;
    padding-top: 30px;
    box-sizing: border-box;
    line-height: 1.5;
}

.s2_c2 .web_promotion_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
}

.s2_c2 .web_promotion_list .lottie-item {
    width: calc(100% / 3);
    text-align: center;
    line-height: 1.5;
    padding: 50px;
    box-sizing: border-box;
}

.s2_c2 .web_promotion_list .lottie-item dotlottie-wc {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.s2_c3 .c_title {
    margin-bottom: 150px;
}

.s2_c3 .promotion_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.s2_c3 .promotion_list li {
    width: calc((100% - 30px) / 4);
    padding: 30px;
    border-radius: 20px;
    background: #f1f1f1;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
}

.s2_c3 .promotion_list li:last-child {
    padding: 0;
}

.s2_c3 .promotion_list li .img_box {
    margin-bottom: 20px;
}

.s2_c3 .promotion_list li .img_box img {
    height: 100px;
    margin: 0 auto;
}

.s2_c3 .promotion_list li .impt {
    width: 100%;
    height: 100%;
    background: #39b54a;
}

.s2_c4 .s2_c4_b1 .sub_t h2 {
    text-transform: uppercase;
}

/* .s2_c4 .maintenance_list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 20px;
}
.s2_c4 .maintenance_list li {
  padding: 40px;
  border-radius: 20px;
  background: #f9f9f9;
  box-sizing: border-box;
}
.s2_c4 .maintenance_list li .txt_title {
  margin-bottom: 30px;
}
.s2_c4 .maintenance_list li .txt_title h2 {
  text-align: right;
  margin-bottom: 10px;
  font-size: 14px;
}
.s2_c4 .maintenance_list li .txt_title span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #39b54a;
}
.s2_c4 .maintenance_list li .txt_title p {
  font-size: 20px;
  color: #555;
}
.s2_c4 .maintenance_list li .txt_box p {
  line-height: 1.5;
  color: #666;
} 
.s2_c4 .maintenance_list li .txt_box p:nth-child(1) {
  margin-bottom: 10px;
  font-weight: 600;
  color: #222;
}
 */
.s2_c4 .maintenance_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.s2_c4 .maintenance_list li {
    padding: 50px;
    border-radius: 20px;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid rgb(204, 204, 204);
}

.s2_c4 .maintenance_list li .txt_title {
    margin-bottom: 30px;
    position: relative;

}

.s2_c4 .maintenance_list li .txt_title h2 {
    position: absolute;
    top: -20px;
    right: -40px;
    font-size: 130px;
    font-weight: 700;
    font-family: 'Pretendard';
    color: #39b54a;
    opacity: 0.2;
    line-height: .7;
}

.s2_c4 .maintenance_list li .txt_title .icon {
    font-size: 30px;
    margin-bottom: 20px;
}

.s2_c4 .maintenance_list li .txt_title span {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #6d6d6d;
    word-break: break-all;
}

.s2_c4 .maintenance_list li .txt_title p {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    word-break: break-all;
}

.s2_c4 .maintenance_list li .txt_box p {
    line-height: 1.5;
    color: #666;
    word-break: break-all;
    text-align: justify;
}

.s2_c4 .maintenance_list li .txt_box p:nth-child(1) {
    margin-bottom: 10px;
    font-weight: 600;
    color: #222;
}

.s2_c4 .maintenance_list li:hover {
    background: rgba(0, 0, 0, 0.8);
}

.s2_c4 .maintenance_list li:hover .txt_title h2 {
    font-size: 130px;
    color: #ffffff;
    opacity: 0.2;
    line-height: .7;
}

.s2_c4 .maintenance_list li:hover .txt_title span {
    color: #ffffff;
}

.s2_c4 .maintenance_list li:hover .txt_title p {
    color: #ffffff;
}

.s2_c4 .maintenance_list li:hover .txt_box p {
    color: #ffffff;
}

.s2_c5 .hosting_list {
    width: 100%;
}

.s2_c5 .hosting_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.s2_c5 .hosting_list ul li {
    /* width:16%;
    	border-radius:24px;
    	border:3px solid #39b54a;
    	padding:20px;
    	text-align:center; */
    width: calc((100% - 40px) / 5);
    font-size: 20px;
    padding: 20px 0;
    border-radius: 10px;
    background: #444;
    color: #fff;
    font-weight: 600;
    letter-spacing: -1px;
    text-align: center;
}

/* .s2_c5 .hosting_list li .texts{
	font-size:20px;
	font-weight:600;
} */

.s2_c5 .hosting_list2 {
    width: 100%;
    margin-top: 80px;
    position: relative;
}

.s2_c5 .hosting_list2 canvas {
    position: absolute;
    max-width: 900px;
    width: 100%;
    padding-bottom: calc(520 / 900 * 100%);
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -1;
}

.s2_c5 .hosting_list2 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.s2_c5 .hosting_list2 ul li {
    width: calc(120% / 3);
    display: flex;
}

.s2_c5 .hosting_list2 ul li figure {
    width: 140px;
    height: 140px;
}

.s2_c5 .hosting_list2 ul li figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s2_c5 .hosting_list2 ul li .text {
    width: calc(100% - 140px);
    padding: 40px 40px 40px 0;
}

.s2_c5 .hosting_list2 ul li .text strong {
    display: inline-block;
    font-size: 20px;
    margin-bottom: 10px;
    color: #39B54A;
}

.s2_c5 .hosting_list2 ul li .text p {
    line-height: 1.6;
    color: #333;
}

.s2_c5 .hosting_list2 li .mts1 {
    border-radius: 24px;
    background: #0698fe;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    text-align: center;
}

.s2_c5 .hosting_list2 li .textsn {
    margin-top: 10px;
    line-height: 1.7;
    border-radius: 12px;
    border: 1px solid #0698fe;
    font-size: 15px;
    padding: 20px 20px 20px;
    height: 280px;
}

.s2_c5 .hosting_list2 h2.txts {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.s2_c5 .hosting_list3 {
    width: 100%;
    margin-top: 80px;
}

.s2_c5 .hosting_list3 h2.tys {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 20px;
}


.ttb table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th {
    text-align: center;
}

th,
td {
    padding: 16px;
    border: 1px solid #ddd;
}

.colors {
    background: #ececec;
}

.cents {
    text-align: center;
}


.s2_c6 .shopping_m {
    width: 100%;
}

.s2_c6 .shopping_m ul {
    display: flex;
    justify-content: space-between;
}

.s2_c6 .shopping_m li {}

/* sub3 */
.s_wrap_pf {
    padding-bottom: 100px;
}

.s_wrap .s3_c1 {
    max-height: 100vh; 
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.s3_c1 .img_box {
    width: 100%;
    height: 100%;
}

.s3_c1 .img_box .img_bg {
    width: 100%;
    height: 100%;
    /*backdrop-filter: blur(4px); */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.s3_c1 .img_box video {
    width: 100%;
}

.s3_c1 .txt_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding: 200px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.s3_c1 .txt_box p {
    width: 100%;
    line-height: 1.5;
    font-size: 50px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #ff4d6d;
}

.s3_c1 .txt_box h2 {
    margin-top: 30px;
    font-size: 100px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
}

#bgVideo{
width:100%;
height:100%;
object-fit:cover;
}

.s_wrap .s3_c2 {
    padding: 2.5%;
    box-sizing: border-box;
}

.s3_c2 .portfolio_cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.s3_c2 .portfolio_cont .portfolio_list {
    transition: all .5s;
    position: relative;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
}

.s3_c2 .portfolio_cont .portfolio_list:hover img {
    transform: scale(1.05);
    filter: brightness(.7);
}

.s3_c2 .portfolio_cont .portfolio_list .img_box {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.s3_c2 .portfolio_cont .portfolio_list .img_box img {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.s3_c2 .portfolio_cont .portfolio_list .txt_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    mix-blend-mode: difference;
    color: #fff;
}

.s3_c2 .portfolio_cont_first .second_item.mt50 {
    transform: translateY(50px);
}

.s3_c2 .portfolio_cont_more {
    display: none;
    margin-top: 30px;
}

.s3_c2 .portfolio_cont_more .second_item {
    transform: translateY(50px);
}

.more_pf_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 150px 0;
}

.more_pf_btn div {
    position: relative;
    font-size: 17px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1em 4em;
    display: inline-block;
    cursor: pointer;
    border-radius: 6em;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
    font-weight: 700;
    color: black;
    background-color: #fff;
    border: 1px solid #eee;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
}

.more_pf_btn div:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.more_pf_btn div:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.more_pf_btn div::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.4s;
}

.more_pf_btn div::after {
    background-color: #fff;
}

.more_pf_btn div:hover::after {
    transform: scaleX(1.6) scaleY(1.8);
    opacity: 0;
}

/* contact */
.contact {
    width: 100%;
    height: 100vh;
    position: relative;
}

.contact .contact_pagenation {
    width: 100%;
    height: 6px;
    position: absolute;
    top: 74px;
    left: 0;
}

.contact .contact_pagenation .swiper-pagination {
    height: 6px;
    background: #eee;
}

.contact .contact_pagenation .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #39b54a;
}

.contact .nav_box {
    width: 100%;
    position: absolute;
    bottom: 5%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.contact .swiper-button-next,
.contact .swiper-button-prev {
    display: block;
    width: 200px;
    height: auto;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    color: #222;
    font-size: 18px;
    font-weight: 600;
    position: static !important;
    border: 1px solid #222;
    border-radius: 10px;
    transition: all .5s;
    background: #fff;
}

.contact .swiper-button-next:hover,
.contact .swiper-button-prev:hover {
    background: #222;
    color: #fff;
}

.contact .swiper-button-next::after,
.contact .swiper-button-prev::after {
    display: none;
}

.contact .swiper-wrapper {
    width: 100%;
    height: 100vh;
}

.contact .swiper-slide {
    width: 100%;
    height: 100%;
    align-content: center;
    justify-content: center;
}

.contact .swiper-slide .step_inner {
    width: fit-content;
    margin: 0 auto;
}

.contact .contact_step {
    margin-bottom: 50px;
}

.contact .contact_step .step_num {
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    color: #39b54a;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.contact .contact_step .txt1 {
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 10px;
    font-weight: 900;
}

.contact .contact_step .txt2 {
    font-size: 20px;
    color: #666;
}

.contact .project_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.contact .project_list li label {
    height: 100%;
    display: block;
    padding: 30px;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    transition: all .5s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.contact .project_list li label::after {
    content: "";
    width: 100%;
    height: 0;
    background: #222;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s;
    z-index: -1;
    border-radius: 0 0 50px 50px;
}

.contact .project_list li label div {
    width: 100%;
}

.contact .project_list li label input {
    display: none;
}

.contact input::placeholder {
    font-family: 'NEXON Lv1 Gothic OTF' !important;
    color: #989898;
}

.contact .project_list li label .check_icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 50px;
    transition: all .5s;
    font-size: 20px;
}

.contact .project_list li label .project_select {
    display: flex;
    justify-content: flex-end;
}

.contact .project_list li label .project_select h2 {
    font-size: 18px;
    transition: all .5s;
}

.contact .project_list li label.on::after {
    height: 100%;
    border-radius: 0;
}

.contact .project_list li label.on .check_icon {
    border: 1px solid #fff;
    background: #39b54a;
    color: #fff;
}

.contact .project_list li label.on .project_select h2 {
    color: #fff;
}

.contact .project_price {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}

.contact .project_price li {
    height: 100%;
    min-height: 116px;
}

.contact .project_price li label .project_select {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
}

.contact .project_price li label .project_select h2 {
    text-align: center;
}

.contact .project_schedule {
    grid-template-columns: repeat(4, 1fr);
}

.contact .project_name {
    width: 100%;
    border-bottom: 2px solid #222;
}

.contact .project_name input {
    width: 100%;
    border: none;
    padding: 10px;
    font-size: 18px;
    border-radius: 0;
}

.contact .project_name input:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.contact .project_name input::placeholder {
    color: #ccc;
}

.contact .project_client {
    width: 100%;
}

.contact .project_client li {
    width: 100%;
    margin-bottom: 10px;
}

.contact .project_client li.flx {
    display: flex;
    gap: 10px;
}

.contact .project_client li p {
    margin-bottom: 5px;
    font-size: 14px;
}

.contact .project_client li p span {
    color: #ff4d6d;
}

.contact .project_client li input,
.contact .project_client li textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
}

.contact .project_client li.flx div {
    width: 50%;
}

.contact .project_client li .reference_site {
    display: flex;
    gap: 10px;
}

.contact .project_client li .reference_site input {
    width: 50%;
}

.contact .complete_btn {
    display: block;
    width: 200px;
    padding: 20px 0;
    text-align: center;
    background: #222;
    border-radius: 6px;
    transition: all .5s;
    border: none;
    color: #fff;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
    font-size: 16px;
    font-family: 'NEXON Lv1 Gothic OTF';
}

.contact .complete_btn:hover {
    background: #39b54a;
}

.contact .complete_btn:focus {
    outline: none !important;
    border: none !important;
}

.contact .step6 .contact_step {
    text-align: center;
}

.contact .project_submit li {
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed #ccc;
    box-sizing: border-box;
}

.contact .project_submit li>p {
    color: #666;
}

.contact .project_submit li div p {
    text-align: right;
    font-weight: 600;
}

.contact .project_submit li div p.mt5 {
    margin-bottom: 5px;
}



.sub_contents_s {
    width: 90%;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
}

.sub_contents_s h2.tis {
    font-size: 45px;
    color: #333;
    font-weight: 600;
    text-align: center;
    padding-top: 70px;
}

.sub_contents_s .board_m {
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
}
/*포트폴리오*/
.s_wrap_pf .pg strong, .s_wrap_pf .pg a{    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    text-decoration: none;
    line-height: 1;
    transition: all 0.2s 
ease;}
.s_wrap_pf .pg strong{    border-color: #39b54a;
    background: #39b54a; color:white !important}
.pg_wrap .pg_page:hover, .s_wrap_pf .pg a:hover {
  border-color: #39b54a;
  color: #39b54a;
  background: #fff
}	
.pg_wrap .pg_page:hover i{color: #39b54a;}

.s_wrap_pf .paginate .next, .s_wrap_pf .paginate .prev, .s_wrap_pf .paginate .next:hover, .s_wrap_pf .paginate .prev:hover{ background:none !important; 
    overflow: hidden; font-size:0}
.s_wrap_pf .paginate .next::before{ content:"\f101";     font-family: "Font Awesome 6 Free";
    font-weight: 900; font-size:15px}
.s_wrap_pf .paginate .prev::before{content:"\f100";     font-family: "Font Awesome 6 Free";
    font-weight: 900; font-size:15px}	
/* 공지사항 */
.pg_wrap .pg_current {
    border-color: #39b54a;
    background: #39b54a;}

/* 고객상담 */
.bo_list ul li span.s-user .sv_guest{float:none}
.bo_list ul li span.s-name{box-sizing:border-box; padding-left:0 !important}
.wrap_sub4_2 .wrap_flex{width:100%}
.wrap_sub4_2 .wrap_flex select{width:100%; 
    height: 57px;
  
    line-height: 37px;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid #ddd; box-sizing:border-box; color:#666; appearance: none;        /* 기본 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none; }
  .wrap_sub4_2 .wrap_flex .span_select{ position:relative; width:30%; display:inline-block; margin:0 17px 0 0}
.wrap_sub4_2 .wrap_flex .span_select::after{content: "\f107";            /* 원하는 화살표 */
  position: absolute;
  right: 20px;             /* ← 화살표 위치 조정 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;    /* 클릭 방해 X */
  font-size: 12px;
  color: #444; font: normal normal normal 14px / 1 FontAwesome;}
.wrap_sub4_2 .wrap_flex label{width:calc(70% - 20px); margin-bottom:0 !important; display:inline-block}

/*온라인견적*/
.wrt_board table td .frm_file .btn_file{    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 1.5em;
    cursor: pointer;
    color: white;
    background: #222;
    padding: 10px;
    border-radius: 100%;}
.wrt_board table td .frm_file .btn_file:hover{ background:#39b54a}
@media(max-width:1900px){
/*홈페이지제작*/	
	.s_wrap>div {
    padding: 100px 150px;
}
	}
@media(max-width:1800px){
/*홈페이지제작*/	
	.s_wrap>div {
    padding: 100px 120px;
}
/*웹호스팅*/
.s2_c5 .hosting_list2 {background:rgba(256,256,256,.5)}
.s2_c5 .hosting_list2 ul li{width:50%}
	}
@media(max-width:1500px){
/*홈페이지제작*/	
	
.service_cont2 h3	{
 display:none
}
/*쇼핑몰구축*/
.sub2_ms_m2 .contens .dos_wrap li .most_b .texts{font-size:17px}
.sub2_ms_m .contens .sm_txts{width:100%}
.sub2_ms_m2 .contens .dos_wrap li .most_b{height:100%}
.sub2_ms_m2 .contens .dos_wrap li .most_b p.sm_txt{height:calc(100% - 71px)}
.sub2_ms_m3 .contens .shopping_ms .most_mop ul{flex-wrap:wrap}
.sub2_ms_m3 .contens .shopping_ms .most_mop li{width:100%; padding:0 50px 0 350px; height:200px; text-align:left; margin:0 0 30px 0}
.sub2_ms_m3 .contens .shopping_ms .most_mop li .imgfs {
    height: 200px; width:auto;
    position: absolute; left:0
}
.sub2_ms_m3 .contens .shopping_ms .most_mop li .imgfs img{ height:100%}
.sub2_ms_m3 .contens .shopping_ms .most_mop li .texts_b{text-align:left; padding:20px 10px 20px 0}
.sub2_ms_m3 .contens .shopping_ms .most_mop li .sm_tts{padding:0px 20px 30px 0}

	}	
@media(max-width:1280px){
/*홈페이지제작*/	
	.s_wrap>div {
    padding: 100px 50px;
}
.s2_c1_b1{gap:30px}
.s2_c1 .service_list li{width:100% !important}
.s2_c1_b2 .service_list li a:hover .deco{transform:scale(60); transition:all .5s linear; opacity:1}
.s2_c1_b2 .service_list li .title_box .num{ font-size:100px}
/*쇼핑몰구축*/
.sub2_ms_m2 .contens .dos_wrap li .most_b .texts{font-size:15px}
.sub271 {
    margin-left: 0; gap:30px
}
.sub271 li{border-radius:10px; margin:2% 0 2% 0; width:calc(14.2% - 30px)}
.sub271 .arrows.left {
    right: -30px;
}
/*인트라넷&그룹웨어*/
.sub2_3_info li{padding:30px 30px !important}
.sub2_3_info li br{display:none}
.sub2_3_info li h4{ font-size:100px !important}
.sub2_3_info li h6{margin-bottom:10px !important}
.s2_c1_t{width:100%}

/*유지관리*/
.s2_c4 .maintenance_list li{padding:30px}
.s2_c4 .maintenance_list li:hover .txt_title h2, .s2_c4 .maintenance_list li .txt_title h2{right:-10px; font-size:100px; top:0}

/*웹호스팅*/
.s2_c5 .hosting_list2 ul li .text p{word-break:break-all; text-align:justify}
.hosting_list3 td{ border:1px solid #ddd}

/*포트폴리오*/
.da-thumbs li a, .da-thumbs li a div{width:100% !important}
.secWarp2 li img{width:100% !important; height:auto !important}
#section2 .swrp2{position:absolute !important; right:0; bottom:0}
	}
@media(max-width:1024px){
/*홈페이지제작*/	
.s2_c1_b3 .hompage_need li{flex-wrap:wrap}
.s2_c1_b3 .hompage_need li .txt_title, .s2_c1_b3 .hompage_need li .txt_box {
    width: 100%;
}
/*쇼핑몰구축*/
.sub2_ms_m2 .contens .dos_wrap li .most_b .texts, .sub2_ms_m2 .contens .dos_wrap li .most_b p.sm_txt{font-size:14px}

/*인트라넷&그룹웨어*/	
.s2_c1_t{width:100%}
    .sub2_3_info li h4 {
        font-size: 80px !important;
    }
.sub2_3_info li h6 {
    font-size: 22px;}	
.sub2_3_info{position:relative}	
.sub2_3_info ul{align-items:stretch !important}
.sub2_3_info li{height:auto !important}
.sub2_3_info .in_title{display: flex;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
    justify-content: center;}
	
/*온라인홍보*/
.s2_c2 .web_promotion_list .lottie-item{padding:20px}

/*유지관리*/
.s2_c4 .maintenance_list{grid-template-columns:repeat(2, 1fr)}	
.s2_c4 .maintenance_list li:hover .txt_title h2, .s2_c4 .maintenance_list li .txt_title h2{font-size:80px}

/*포트폴리오*/
#section2 .swrp2{margin:0 0; right:-40px; bottom:-20px}
.txtArea2 .txt3 br, .da-thumbs li .link{display:none}
.da-thumbs li .btnGroup{ font-size:11px; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;}
  
/*온라인견적*/  
.wrt_board th{ white-space:nowrap}
	}
@media(max-width:912px){
/*쇼핑몰구축*/
.sub2_ms_m2 .contens .dos_wrap ul{flex-wrap:wrap}
.sub2_ms_m2 .contens .dos_wrap li{width:100%}
.sub2_ms_m2 .contens .dos_wrap li .most_b p.sm_txt {
        height: auto; min-height:inherit; margin-bottom:50px; padding-bottom:20px
    }

/*인트라넷&그룹웨어*/	
.sub2_3_info ul{ flex-direction: column;}
.sub2_3_info li{margin-bottom:20px}
.sub2_3_info li, .sub2_3_info .in_title{width:100% !important}
.sub2_3_info .in_title{padding-bottom:20px}
.s2_c3 .promotion_list li .img_box img{height:80px}
	
/*온라인홍보*/
.s2_c2 .web_promotion_list .lottie-item{padding:10px; width:100%}


/*웹호스팅*/
    .s2_c5 .hosting_list2 ul li {
        width:100%;
    }

/*포트폴리오*/	
.s3_c1 .txt_box{padding:2.5%; padding-top:80px}
#section2 .swrp2{    transform: scale(0.7); width:60% !important; margin:0 0 !important}
#section2 .txtArea2{margin-right:0 !important}
}
@media(max-width:768px){
/*홈페이지제작*/	
.s2_c1_b1{flex-wrap:wrap}
.s2_c1_b1>li, .s2_c1_t{width:100%}
.s2_c1_b2, .s2_c1_b3{margin-top:100px}
.s2_c1_b2 .service_list li .title_box .num{ right:-10px; font-size:100px}
.seccess_mx .msbis_xm{word-break:keep-all; font-size:40px}


/*쇼핑몰구축*/
.sub271 ul{flex-wrap:wrap}
.sub271 ul li{width:100%; height:auto; padding:20px 0; margin:13px 0 13px 0}
.sub271 ul li br{display:none}
.sub271 ul li div{margin-top:0 !important}
    .sub271 .arrows.left {
        right: auto;
        left: 50%;
        transform: rotate(90deg) translate(-50%, 0px) scale(0.6);
        margin-top: 0;
        top: 63px;
        margin-left: -10px;
    }
.sub2_ms_m3 .contens .shopping_ms .most_mop li{position:relative; padding:20px 20px 20px 20px; height:auto}	
.sub2_ms_m3 .contens .shopping_ms .most_mop li .imgfs{ position:relative;        width: 100%;
        height: auto;}


/*인트라넷&그룹웨어*/	
.s2_c3 .promotion_list li .img_box img{height:50px}

/*유지관리*/
.s2_c4 .maintenance_list{grid-template-columns:repeat(1, 1fr)}	

/*웹호스팅*/	
.s2_c5 .hosting_list ul li{ font-size:14px}
.hosting_list3 th, .hosting_list3 td{padding:10px}

/*포트폴리오*/
.s3_c1 .txt_box h2{margin-top:0; font-size:80px}	
.s3_c1 .txt_box p{line-height:1}
.da-thumbs li{width:50% !important}
#section2 .swrp2{display:none}

/*공지사항*/
#bo_sch{max-width:350px !important}
#bo_sch form{width:100%; display:flex}

/*고객문의*/
 .wrap_sub4_2 .wrap_flex .span_select{ margin:0 7px 0 0}
 .wrap_sub4_2 .wrap_flex label {
    width: calc(70% - 10px);}
	.wrap_sub4_2 .n_textbox{width:100%; box-sizing:border-box}
.wrap_sub4_2 .wrap_flex select{font-size:14px}	

/*온라인견적*/ 
.wrt_board th, .n_tit{font-size:1em !important}
.wrt_board td input.textbox, .wrt_board td select.textbox{font-size:14px !important}
.wrt_board td, .wrt_board th{padding:16px 5px !important}

	}

@media (max-width: 640px) {
	.s1_c8 .c8_add>li>p>span {
		display:flex;
		font-size:16px;
	}

	.s1_c8 .c8_add>li>p{
		font-size:15px;
	}

}

@media (max-width: 540px) {
/*홈페이지제작*/	
    .s_wrap>div {
        padding: 100px 20px;
    }
	.s2_c1_b1{margin-top:50px}
.service_list li .title_box .num,     .s2_c1_b2 .service_list li .title_box .num{font-size:70px}
.seccess_mx .msbis_xm{font-size:30px}
.s2_c1_b2 .txt_box p{word-break:keep-all; text-align:left}

/*쇼핑몰구축*/
.sub2_ms_m2 .contens .dos_wrap li .most_b p.sm_txt {
        margin-bottom:20px
    }
/*인트라넷&그룹웨어*/
.s2_c3 .promotion_list li{ width:calc((100% - 30px) / 3); padding:10px}

/*온라인홍보*/
.s2_c2 .web_promotion_list{margin-top:30px}

/*유지관리*/
.s2_c1_t{margin-bottom:20px}


/*웹호스팅*/
.s2_c3 .c_title, .s2_c2 .c_title{margin-bottom:50px}
.s2_c5 .hosting_list ul{flex-wrap:wrap}
.s2_c5 .hosting_list ul li{width:100%; margin-bottom:10px}
.s2_c5 .hosting_list2, .s2_c5 .hosting_list3{margin-top:30px}
.hosting_list3 table{table-layout:fixed}
    .hosting_list3 th, .hosting_list3 td {
        padding: 5px; font-size:14px; word-break:break-all
    }
.s2_c5 .hosting_list2 ul li figure{width:100%}	
.s2_c5 .hosting_list2 ul li{flex-wrap:wrap}	
.s2_c5 .hosting_list2 ul li .text {
    width: 100%;
    padding: 0 0 20px 0;
}	
.hosting_list3 th{word-break:keep-all}

/*포트폴리오*/
.s3_c1 .txt_box p{font-size:20px}
.s3_c1 .txt_box h2{font-size:50px}
.s_wrap_pf .pg strong, .s_wrap_pf .pg a{width:22px; height:22px; min-width:inherit}

/*공지사항*/
.sub_contents_s .board_m{padding:0}

/*고객상담*/
.wrap_sub4_2 .wrap_flex select{font-size:11px}
.wrt_board th{padding-bottom:0 !important}

/*온라인견적*/
.wrt_board table, .wrt_board tbody{display:block}
.wrt_board tr{display:flex; width:100%; align-items:center; flex-wrap:wrap}
.wrt_board tr th, .wrt_board tr td{width:100%}
.wrt_board tr th br{display:none}
    .wrt_board td input.textbox, .wrt_board td select.textbox {
        font-size: 12px !important;
            text-indent: 10px !important;
    }
.wrt_board .n_textbox{width:100%; font-size:11px !important; box-sizing:border-box}	
}