@charset "utf-8";

@media screen and (-ms-high-contrast:active), ( -ms-high-contrast:none ){

    /* IE10~11 */
    #sec5 .sec5_txt .sec5_txt_right > p{
        font-family: "Nanum Gothic, sans-serif" !important;
        color: #0611a2;
    }

}

.dahaccp{
    width: 1005;
    overflow: hidden;
}

.sub_page_top .sub_nav li.smartdahaccp{
    font-family: 'GmarketSansBold' ;
    color: #2aa4ff ;
}

.sub_page_top .sub_nav li.smartdahaccp{
    font-family: 'GmarketSansBold';
    color: #1d97ff;
}

.sub_page_top .sub_nav li.smartdahaccp > a > span.smart{
    font-size: 0.8em;
    padding-right: 0.18em ;
}

.sub_page_top .sub_nav li.smartdahaccp > a > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

/**** smart da haccp ****/

/**** #sec1 ****/
#sec1 .sec1_text_box{
    margin: 3.5em 10% 3.5em 20%;
}

#sec1 .sec1_text_box h3.smartdahaccp{
    font-size: 28px;
    font-family: 'GmarketSansBold';
    padding-bottom: 0.9em;
    color: #1d97ff;
}

#sec1 .sec1_text_box h3.smartdahaccp > span.smart{
    font-size: 0.9em;
    padding-right: 0.18em ;
}

#sec1 .sec1_text_box h3.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

#sec1 .sec1_text_box h3.smartdahaccp > span.txt_bl{
    font-family: 'GmarketSansBold';
    color: #000;
    font-size: 0.8em;
}

#sec1 .sec1_text_box p{
    font-family: 'GmarketSansLight';
    font-size: 20px;
}

#sec1 .sec1_text_box p span.p_bl{
    font-family: 'GmarketSansBold';
    color: #000;
}


/**** #sec2 ****/
.dahaccp #sec2{
    background-image: url(../images/product/smart_da_haccp/sub_dahaccp_sec1_bg1.png);
    padding: 25% 0;
    position: relative;
    overflow: hidden;
}

#sec2 .sec2_text_box{
    position: absolute;
    top:25%;
    left: 18%;
}

#sec2 p.smartdahaccp{
    width: 10em;
    text-align: center;
    font-size: 1.5em;
    font-family: 'GmarketSansBold';
    background-color:#fff;
    color: #1d97ff;
    padding: 0.66em 0.1em;
    border-radius: 50px;
    margin-bottom: 1.5em;
}

#sec2 p.smartdahaccp > span.smart{
    font-size: 0.75em;
    padding-right: 0.18em ;
}

#sec2 p.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

#sec2 h4{
    font-family: 'GmarketSansBold';
    font-size: 28px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 50px;
}

#sec2 p.effect{
    font-family: 'GmarketSansMedium';
    color: #fff;
    font-size: 18px;
    line-height: 1.30em;
    margin-bottom: 0.5em;
}

#sec2 ul.effect_list{
    font-family: 'GmarketSansLight';
    width: 30vw;
    color: #fff;
    font-size: 1.3em;
    line-height: 1.30em;
    margin-bottom: 1em;
    display: flex;
    flex-wrap:wrap;
    justify-content: left;
}

#sec2 ul.effect_list li{
    font-family: 'GmarketSansLight';
    display: flex;
    border: 1px solid #00ffc6;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    font-size: 18px;
    letter-spacing: -1px;
    border-radius: 8px;
}

#sec2 ul.effect_list span{
    font-family: 'GmarketSansBold';
    color: #fff;
}

#sec2 .dahaccp_phone{
    position: absolute;
    bottom:0;
    right: 31%;
}

#sec2 .dahaccp_phone img{
    width: 23vw;
}

#sec2 .phone_tmg{
    position: absolute;
    top:25%;
    right: 15%;
}

#sec2 .phone_tmg img{
    width: 21.5vw;
}

#sec2 .phone_tmg > div{
    margin-top: 0.5em;
}

#sec2 .phone_tmg > p{
    font-family: 'GmarketSansMedium';
    margin-bottom: 0.8em;
    padding-left: 0;
    color: #fff;
    font-size: 1.3em;
}

#sec2 p.hesitag{
    font-family: 'GmarketSansmedium';
    font-size: 20px;
    color: #ffdd00;
    padding-top: 50px;
}

/**** sec3 ****/
#sec3 {
    padding: 5em 0;
}

#sec3 h3.smartdahaccp{
    text-align: center;
    font-size: 2.5em;
    font-family: 'GmarketSansBold';
    background-color:#fff;
    color: #1d97ff;
    padding: 0.66em 0.1em;
    border-radius: 50px;
    margin-bottom: 1.5em;
}

#sec3 h3.smartdahaccp > span.smart{
    font-size: 0.75em;
    padding-right: 0.18em ;
}

#sec3 h3.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

#sec3 h3.smartdahaccp > span.txt_bl{
    font-family: 'GmarketSansBold';
    color: #000;
    font-size: 0.8em;
}

#sec3 .sec3_txt{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#sec3 .sec3_txt .before{
    width: 25em;
    margin-right: 10em;
}

#sec3 .sec3_txt .before .be_tit{
    padding: 1.1em 0;
    background-color: #b5d4ff;
    color: #fff;
    text-align: center;
}

#sec3 .sec3_txt .before .be_tit h1{
    font-size: 26px;
}

#sec3 .sec3_txt .after{
    width: 25em;
}

#sec3 .sec3_txt .after .af_tit{
    padding: 1.1em 0;
    background-color: #0611a2;
    color: #fff;
    text-align: center;
}

#sec3 .sec3_txt .after .af_tit h1{
    font-size: 26px;
}

#sec3 .sec3_txt .before .be_txt1, #sec3 .sec3_txt .before .be_txt2,
#sec3 .sec3_txt .after .af_txt1, #sec3 .sec3_txt .after .af_txt2{
    padding: 3em 2em;
    border: 1px solid #b1b1b1;
    margin: 2em 0;
}

#sec3 .sec3_txt .before .be_txt1 h3, #sec3 .sec3_txt .before .be_txt2 h3,
#sec3 .sec3_txt .after .af_txt1 h3, #sec3 .sec3_txt .after .af_txt2 h3{
    margin-bottom: 0.8em;
    font-size: 1.3em;
}

#sec3 .sec3_txt .before .be_txt1 p, #sec3 .sec3_txt .before .be_txt2 p,
#sec3 .sec3_txt .after .af_txt1 p, #sec3 .sec3_txt .after .af_txt2 p{
    line-height: 1.5;
    font-size: 1.1em;
}

/*** sec4 ***/
#sec4 {
    background-image: url(../images/product/smart_da_haccp/sec4_bg.png);
    background-size: cover;
    padding: 25% 0;
    position: relative;
}

#sec4 .sec4_txt{
    position: absolute;
    top:15%;
    left: 10%;
}

#sec4 .sec4_txt h3{
    color: #fff;
    font-size: 2.8em;
    text-align: center;
}

#sec4 .sec4_txt h3 span{
    font-family: 'GmarketSansLight';
    color: #fff;
    font-size: .5em;
}

#sec4 .sec4_imgs > div{
    position: absolute;
    top:50%;
    left: 50%;
    transform: (0,0,0) scale(0);
}

#sec4 .sec4_imgs > div.aos-animate{
    transform: scale(1);
}

#sec4 .sec4_imgs .sec4_img_monitor img{
    width: 36vw;
}

#sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate{
    transform: translate3d(-642px,-228px,0);
}

#sec4 .sec4_imgs > div.sec4_img_laptop.aos-animate{
    transform: translate3d(31px,-68px,0);
}

#sec4 .sec4_imgs .sec4_img_laptop img{
    width: 34vw;
}

#sec4 .sec4_imgs > div.sec4_img_pad.aos-animate{
    transform: translate3d(-247px,77px,0);
}

#sec4 .sec4_imgs .sec4_img_pad img{
    width: 21vw;
}

#sec4 .sec4_imgs > div.sec4_img_phone.aos-animate{
    transform: translate3d(243px,138px,0);
}

#sec4 .sec4_imgs .sec4_img_phone img{
    width: 7.5vw;
}

/*** sec5 ***/
#sec5 {
    padding: 8% 0;
    background-color: #f2f1f1;
    overflow: hidden;
}

#sec5 h3.smartdahaccp{
    text-align: left;
    font-size: 2.5em;
    font-family: 'GmarketSansBold';
    color: #1d97ff;
    padding: 0.66em 5em;
    border-radius: 50px;
    margin-bottom: 1.5em;
}

#sec5 h3.smartdahaccp > span.smart{
    font-size: 0.75em;
    padding-right: 0.18em ;
}

#sec5 h3.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

#sec5 h3.smartdahaccp > span.txt_bl{
    font-family: 'GmarketSansBold';
    color: #000;
    font-size: 0.8em;
}

#sec5 .sec5_txt{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#sec5 .sec5_txt .sec5_txt_left{
    padding: 3em 4em;
    border-radius: 20px;
    background-color:#fff;
    margin: 0 3em 0 2em;
    box-shadow: 10px 8px 20px 1px rgba(184, 184, 184, 0.4);
}

#sec5 .sec5_txt .sec5_txt_left h3{
    font-family: 'GmarketSansBold';
    font-size: 1.5em;
    padding: 1em 0;
}

#sec5 .sec5_txt .sec5_txt_left > p{
    font-family: 'GmarketSansLight';
    font-size: 1.3em;
    line-height: 1.7;
}

#sec5 .sec5_txt .sec5_txt_right{
    padding: 2em 0;
    margin: 0 8em 0 7em;
}

#sec5 .sec5_txt .sec5_txt_right > p{
    line-height: 1.7;
    font-size: 1.5em;
}


/*** 구성요소 ***/
#component{
    width: 100%;
    height: 100%;
    padding: 7rem 0 7rem 0;
}

#component h3.smartdahaccp{
    text-align: left;
    font-size: 2.5em;
    font-family: 'GmarketSansBold';
    color: #1d97ff;
    padding: 0.66em 5em;
    border-radius: 50px;
    margin-bottom: 1.5em;
}

#component h3.smartdahaccp > span.smart{
    font-size: 0.75em;
    padding-right: 0.18em ;
}

#component h3.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1 !important;
    padding-right: 0.15em ;
}

#component h3.smartdahaccp > span.txt_bl{
    font-family: 'GmarketSansBold';
    color: #000;
    font-size: 0.8em;
}

#component ul{
    width: 100%;
    height: 450px;
    margin-bottom: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#component ul li{
    padding: 0 1rem;
    border-left: 1px solid #e1e1e1;
}

#component ul li:first-child{
    border-left: none;
}

#component ul li .circle{
    position: relative;
    width: 10rem;
    height: 10rem;
    border: 3px dotted #a2b9ff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#component ul li .circle::after{
    content: "";
    position: absolute;
    top:-3px;
    left: -1px;
    width: 10rem;
    height: 10rem;
    border-radius: 100px;
    display: none;
    border-top: 3px dotted #2e78e7;
}

#component ul li:hover{
    transform: scale(1.1);
    transition: 1s;
}

#component ul li:hover .circle::after{
    display: block;
    animation: move_circle 1s linear forwards;
}

@keyframes move_circle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#component ul li .circle > p{
    font-size: 22px;
    line-height: 1.1;
    color: #0233c1;
    display: block !important;
    font-family: 'GmarketSansBold';
}

#component ul li .com_txt{
    width: 100%;
    margin-top: 20px;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#component ul li .com_txt .com_txt_box p{
    line-height: 2.5;
}

#component .common_txt{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2em 0;
    background-color: #e2e2e2;
}


#component .common_txt p{
    width: 18%;
    font-size: 16px;
    text-align: center;
}

#component .common_txt p span{
    background-color: #2aa4ff;
    padding: 1%;
    color: #fff;
    border-radius: 5px;
}


/*** sec6 ***/
#sec6 {
    padding: 8% 0;
}

#sec6 h3.smartdahaccp{
    text-align: left;
    font-size: 2.5em;
    font-family: 'GmarketSansBold';
    color: #1d97ff;
    padding: 0.66em 5em;
    border-radius: 50px;
    margin-bottom: 1.5em;
}

#sec6 h3.smartdahaccp > span.smart{
    font-size: 0.75em;
    padding-right: 0.18em ;
}

#sec6 h3.smartdahaccp > span.da{
    font-family: 'GmarketSansBold';
    color: #0233c1;
    padding-right: 0.15em ;
}

#sec6 h3.smartdahaccp > span.txt_bl{
    font-family: 'GmarketSansBold';
    color: #000;
    font-size: 0.8em;
}

#sec6 .sec6_img{
    text-align: center;
}

#sec6 .sec6_img img{
    width: 60vw;
}

#sec6 .sec6_img p{
    font-family: 'GmarketSansBold';
    margin-top: 2em;
    font-size: 1.8em;
}

/*** sec7 ***/
#sec7 {
    padding:3em 0;
    background-color: #f5f5f5;
}

#sec7 .sec7_top{
    background-image: url(../images/product/smart_da_haccp/sec7_bg.png);
    background-size: 99vw;
    background-repeat: no-repeat;
    padding: 2.5em 0;
}

#sec7 .sec7_top .sec7_txt1{
    text-align: center;
    padding-top: 4.5em;
}

#sec7 .sec7_top .sec7_txt2{
    text-align: center;
    padding: 1em 0;
}

#sec7 .sec7_top .sec7_txt1 p, #sec7 .sec7_top .sec7_txt2 p{
    font-family: 'GmarketSansLight';
    padding: 1em 0;
    font-size: 1.5em;
}

#sec7 .sec7_top .sec7_button{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: none;
    
}

#sec7 .sec7_top .sec7_button button{
    border-radius: 25px;
    font-size: 1em;
    width: 7vw;
    height: 5vh;
    border: 1px solid #bb860a !important;
    background-color: none !important;
    color: #bb860a;
}

#sec7 .sec7_top .sec7_button button:hover{
    color: #fff;
    border: none !important;
    background-color: #bb860a !important;
}

#sec7 .sec7_mid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2em 0;
}

#sec7 .sec7_mid .mid_left, #sec7 .sec7_mid .mid_right{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 2em;
}

#sec7 .sec7_mid .mid_right{
    border-left:1px solid #8e8e8e;
    margin-left: 2em;
}

#sec7 .sec7_mid .mid_left .left_1, #sec7 .sec7_mid .mid_right .right_1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 2em;
    font-size: 1.1em;
}

#sec7 .sec7_mid .mid_left .left_2 p, #sec7 .sec7_mid .mid_right .right_2 p{
    font-family: 'GmarketSansLight';
    font-size: 1.1em;
    padding: .35em 0;
}

#sec7 .sec7_bot table{
    width: 60vw;
    text-align: center;
    margin: 3em auto;

}

#sec7 .sec7_bot table thead{
    background-color: #000d31;
    color: #fff;
}

#sec7 .sec7_bot table thead tr.tit th{
    font-size: 1.8em;
    padding: 1em 0 ;
    border-bottom: 1px solid #fff;
}

#sec7 .sec7_bot table thead tr.menu th{
    border-right: 1px solid #fff;
}

#sec7 .sec7_bot table thead tr.menu th:nth-child(6){
    border-right: none;
}

#sec7 .sec7_bot table tr th, #sec7 .sec7_bot table tr td{
    padding: 25px 10px;
    font-size: 1em;
}

#sec7 .sec7_bot table tr td{
    border-right: 1px solid #8e8e8e;
    border-bottom: 1px solid #8e8e8e;
}

#sec7 .sec7_bot table tr td:nth-child(6){
    border-right: none;
}

/*** sec8 ***/
#sec8{
    padding: 0;
}

#sec8 .sec8_box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#sec8 .sec8_box > div {
    width: 50%;
    position: relative;
    overflow: hidden;
}

#sec8 .sec8_box > div.sec8_right {
    cursor: pointer;
}

#sec8 .sec8_box > div > p {
    font-family: 'GmarketSansBold';
    font-size: 2.5em;
    position: absolute;
    top:50%;
    color: #fff;
    z-index: 20;
}

#sec8 .sec8_box > div.sec8_left > p{
    right: 10%;
}

#sec8 .sec8_box > div.sec8_right > p{
    left: 10%;
}

#sec8 .sec8_box > div.sec8_right > p .arrow-right {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid white;
    margin-top: -14px;
    margin-left: 9px;
  }

  #sec8 .sec8_box > div.sec8_right:hover > p .arrow-right{
    animation: horizontal 0.7s ease-in-out infinite ;
    border-left: 20px solid #ffd40e;
  }
  
  @keyframes horizontal {
    0% {
      margin-left: 9px;
    }
    50% {
      margin-left: 11px;
    }
    100% {
      margin-left: 9px;
    }
  }

#sec8 .sec8_box > div.sec8_left:hover img, #sec8 .sec8_box > div.sec8_right:hover img{
    -webkit-transform:scale(1.1); 
    -moz-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    transform:scale(1.1);
    transition: transform .35s;
    -o-transition: transform .35s;
    -moz-transition: transform .35s;
    -webkit-transition: transform .35s;
}   

#sec8 .sec8_box > div.sec8_left:hover p > span, #sec8 .sec8_box > div.sec8_right:hover p > span.online{
    color:#ffd40e ;
}


@media(max-width:1520px) {
    #sec2 p.smartdahaccp{
        font-size: 1.5em;
    }

    #sec2 h4{
        font-size: 2.2em;
    }

    #sec2 p.effect{
        font-size: 1.2em;
    }

    #sec2 ul.effect_list li{
        font-size: 0.7em;
    }

    #sec2 p.hesitag{
        font-size: 1.4em;
        padding-top: 1em;
    }

    #sec3 .sec3_txt .before .be_txt1, #sec3 .sec3_txt .before .be_txt2, #sec3 .sec3_txt .after .af_txt1, #sec3 .sec3_txt .after .af_txt2{
        padding: 2em 2em;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate{
        transform: translate3d(-600px,-228px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(203px,138px,0);
    }

    #sec5 h3.smartdahaccp, #component h3.smartdahaccp{
        padding: 0.66em 2em;
    }


    #sec7 .sec7_bot table tr th, #sec7 .sec7_bot table tr td{
        font-size: 1em;
    }

}

@media(max-width:1458px) {

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-540px,-188px,0) !important;
    }

    #sec5 .sec5_txt .sec5_txt_left {
        margin: 0 3em 0 2em;
    }

    #sec7 .sec7_bot table{
        width: 77vw;
    }
}

@media(max-width:1373px) {
    #component ul{
        margin-bottom: 22em;
    }
}

@media(max-width:1366px) {

    #sec2 .sec2_text_box {
        left: 12%;
    }

    #sec2 .dahaccp_phone {
        right: 35%;
    }

    #sec2 .phone_tmg{
        right: 9%;
    } 

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-506px,-168px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_laptop.aos-animate {
        transform: translate3d(1px,-68px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(153px,119px,0);
    }

    #sec5 .sec5_txt .sec5_txt_left {
        margin: 0 3em 0 3em;
    }

    /*** 구성요소 ***/
    #component ul{
        height: 350px;
    }

    #component ul li .circle, #component ul li .circle::after{
        width: 7rem;
        height: 7rem;
    }

    #component ul li .circle > p{
        font-size: 14px;
    }

    #component ul li .circle > p{
        line-height: 1.3;
    }

    #component ul li .com_txt{
        font-size: 14px;
    }


    #sec7 .sec7_bot table{
        width: 77vw;
    }

    #sec7 .sec7_mid .mid_left{
        padding-bottom:1em ;
    }

    #sec7 .sec7_mid .mid_right{
        border-left:none ;
        border-top: 1px solid #8e8e8e;
        padding-top:1em ;
    }

    #sec7 .sec7_top .sec7_txt1 {
        padding-top: 1em;
    }
    
    #sec7 .sec7_top {
        background-size: 120%;
        background-position-x: -142px;
    }



}

@media(max-width:1240px) {
    #component ul{
        margin-bottom: 3em;
    }
}

@media(max-width:1224px) {

    #sec1 .sec1_text_box p{
        font-size: 1.5em;
    }

    #sec2 .sec2_text_box{
        left: 10%;
    }

    #sec2 .phone_tmg {
        right: 10%;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-436px,-168px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-247px,57px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(153px,99px,0);
    }

    /*** 구성요소 ***/
    
    #component ul li .circle, #component ul li .circle::after{
        width: 6.5rem;
        height: 6.5rem;
    }


}

@media(max-width:1182px) {

    #sec1 .sec1_text_box h3.smartdahaccp {
        font-size: 2em;
    }    

    #sec1 .sec1_text_box p{
        font-size: 1.2em;
    }

    #sec2 .sec2_text_box{
        top:17%;
        left: 10%;
    }

    #sec2 .phone_tmg {
        right: 10%;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-436px,-168px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-247px,57px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(153px,99px,0);
    }

    #sec7 .sec7_top .sec7_txt1{
        padding-top: 1em;
    }

    #sec7 .sec7_top .sec7_txt1 p, #sec7 .sec7_top .sec7_txt2 p {
        font-size: 1.2em;
    }

}

@media(max-width:1085px) {

    #sec2 p.smartdahaccp {
        font-size: 1.2em;
    }

    #sec2 h4 {
        font-size: 1.8em;
    }

    #sec2 .dahaccp_phone {
        right: 35%;
    }

    #sec3 .sec3_txt .before {
        margin-right: 4em;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-386px,-148px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-247px,37px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(63px,79px,0);
    }

    #sec5 h3.smartdahaccp, #component h3.smartdahaccp{
        text-align: center;
    }

    #sec5 .sec5_txt .sec5_txt_right > p{
        font-size: 1.2em;
    }

    #sec6 .sec6_img p {
        font-size: 1.2em;
    }

    #sec7 .sec7_bot table {
        width: 85vw;
    }

}

@media(max-width:1024px) {

    #sec2 ul.effect_list li {
        padding: 0.3em 0.5em;
    }

    #sec2 h4 {
        font-size: 1.7em;
    }

    #sec4 .sec4_txt {
        left: 7%;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-366px,-128px,0) !important;
    }

    /** 구성요소 **/

    #component h3.smartdahaccp{
        text-align: center;
        padding: 0.66em 0;
    }

    #component ul{
        height: 550px;
    }

    #component ul li{
        margin-bottom: 2rem;
    }

    #component .common_txt, #component .common_txt p span{
        display: block;
    }

    #component .common_txt{
        background-color: #fff;
    }

    #component .common_txt p{
        width: 100%;
        line-height: 2;
    }

    #component .common_txt p span{
        background-color: #a2b9ff;
    }

    #sec7 .sec7_top .sec7_txt1 {
        padding-top: 0;
    }

    #sec7 .sec7_top .sec7_txt1 img, #sec7 .sec7_top .sec7_txt2 img{
        width: 37vw;
    }

    #sec7 .sec7_top .sec7_button button {
        width: 11vw;
        height: 3vh;
    }

    #sec7 .sec7_top {
        background-size: 120%;
        background-position-x: -100px;
    }

    #sec7 .sec7_bot table {
        width: 93vw;
    }

    #sec8 .sec8_box > div > p {
        font-size: 2em;
    }
    
}

@media(max-width:974px){
    #sec6 h3.smartdahaccp{
        text-align: center;
        padding: 0.66em 0;
    }
}

@media(max-width:910px) {
    #sec1 .sec1_text_box{
        margin: 3.5em 10% 3.5em 12%;
    }

    #sec2 h4{
        font-size: 1.5em;
    }

    #sec2 p.smartdahaccp{
        font-size: 0.9em;
    }

    #sec2 ul.effect_list li {
        padding: 0.2em 0.3em;
        font-size: 0.5em;
    }

    #sec2 p.hesitag {
        font-size: 1.1em;
        padding-top: 0.5em;
    }

    #sec2 .phone_tmg > p{
        font-size: 0.9em;
    }

    #sec2 .phone_tmg {
        right: 5%;
    }

    #sec2 .phone_tmg img {
        width: 30vw;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-319px,-98px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-197px,37px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(33px,69px,0);
    }



    #sec6 h3.smartdahaccp > span.txt_bl{
        font-size: 0.6em;
    }

    #sec6 h3.smartdahaccp {
        font-size: 2em;
        margin-bottom: 0.5em;
    }

    #sec7 .sec7_top {
        background-size: 120%;
        background-position-x: -87px;
    }
}

@media(max-width:870px) {

    #sec1 .sec1_text_box {
        margin: 3.5em 10% 3.5em 10%;
    }

    #sec2 p.smartdahaccp {
        font-size: 1em;
        padding: 0.55em 0.1em;

    }

    #sec2 h4 {
        font-size: 1.3em;
    }

    #sec2 p.effect {
        font-size: 0.8em;
    }

    #sec2 ul.effect_list li {
        font-size: 0.6em;
        padding: 0.1em 0.5em;
    }

    #sec2 p.hesitag {
        font-size: 0.9em;
        padding-top: 0em;
    }

    #sec2 .dahaccp_phone {
        right: 33%;
    }

    #sec2 .phone_tmg > p{
        font-size: 1em;
    }

    #sec3 h3.smartdahaccp > span.smart {
        font-size: 0.65em;
    }

    #sec3 h3.smartdahaccp{
        font-size: 2em;
    }

    #sec3 .sec3_txt .before, #sec3 .sec3_txt .after{
        width: 20em;
    }

    #sec3 .sec3_txt .before {
        margin-right: 1em;
    }

    #sec3 .sec3_txt .before .be_txt1, #sec3 .sec3_txt .before .be_txt2, #sec3 .sec3_txt .after .af_txt1, #sec3 .sec3_txt .after .af_txt2{
        padding: 1em 1em;
    }

    #sec3 .sec3_txt .before .be_tit h1, #sec3 .sec3_txt .after .af_tit h1{
        font-size: 1.5rem;
    }

    #sec3 .sec3_txt .before .be_txt1 h3, #sec3 .sec3_txt .before .be_txt2 h3, #sec3 .sec3_txt .after .af_txt1 h3, #sec3 .sec3_txt .after .af_txt2 h3{
        font-size: 1.1em;
    }

    #sec3 .sec3_txt .before .be_txt1 p, #sec3 .sec3_txt .before .be_txt2 p, #sec3 .sec3_txt .after .af_txt1 p, #sec3 .sec3_txt .after .af_txt2 p{
        font-size: 0.9em;
    }

    #sec4 .sec4_txt h3{
        font-size: 2em;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-296px,-108px,0) ;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-187px,37px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(43px,69px,0);
    }

    #sec5 h3.smartdahaccp, #component h3.smartdahaccp{
        margin-bottom: 0.5em;
        font-size: 2em;
    }

    #sec5 .sec5_txt .sec5_txt_left{
        padding: 1em 2em;
        text-align: center;
    }

    #sec5 .sec5_txt .sec5_txt_right{
        padding: 0;
    }

    #sec5 .sec5_txt .sec5_txt_left h3{
        font-size: 1em;
    }

    #sec5 .sec5_txt .sec5_txt_left > p{
        font-size: 0.9em;
    }

    #sec5 .sec5_txt .sec5_txt_right > p{
        font-size: 1em;
    }

    #sec6 h3.smartdahaccp{
        font-size: 2em;
        margin-bottom:0;
    }

    #sec6 .sec6_img p{
        font-size: 1em;
    }

    #sec7 .sec7_top .sec7_txt1 p, #sec7 .sec7_top .sec7_txt2 p{
        font-size: 1em;
    }

    #sec7 .sec7_bot table thead tr.tit th{
        font-size: 1em;
    }

    #sec7 .sec7_bot table tr th, #sec7 .sec7_bot table tr td{
        font-size: 0.8em;
    }

    #sec8 .sec8_box > div.sec8_left > p{
        right: 6%;
    }

    #sec8 .sec8_box > div.sec8_right > p{
        left: 7%;
    }

    #sec8 .sec8_box > div > p{
        font-size: 1.8em;
    }

}


@media(max-width:764px) {

    #sec1 .sec1_text_box {
        margin: 3.5em 10% 3.5em 6%;
    }
    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-268px,-108px,0) ;
    }
    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(43px,59px,0);
    }

    #sec6 h3.smartdahaccp {
        font-size: 1.5em;
    }

    #sec7 .sec7_top {
        background-size: 130%;
        background-position-x: -115px;
    }
}

@media (max-width: 680px){

    #sec1 .sec1_text_box {
        margin: 3.5em 1% 3.5em 1%;
    }

    #sec2 h4 {
        font-size: 1em;
    }

    #sec2 p.smartdahaccp {
        font-size: 0.5em;
        width: 12em;
    }

    #sec2 ul.effect_list li {
        font-size: 0.3em;
    }

    #sec2 .dahaccp_phone {
        right: 37%;
    }

    #sec2 .phone_tmg > p {
        font-size: 0.8em;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-157px,28px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-238px,-88px,0) ;
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(43px,49px,0);
    }

    #sec4 .sec4_txt h3 {
        font-size: 1.5em;
    }

    
    #sec7 .sec7_top {
        background-size: 130%;
        background-position-x: -101px;
    }
}

@media(max-width:572px){
    /*** 구성요소 ***/
    #component ul {
        height: 800px;
    }

    #sec6 h3.smartdahaccp {
        font-size: 1.7em;
    }

}

@media(max-width:540px) {

    /*** section1 ***/
    #sec1 .sec1_text_box h3.smartdahaccp {
        font-size: 1.5em;
    }

    /*** section2 ***/
    #sec2 .sec2_text_box{
        left: 27%;
        top:11%
    }

    .dahaccp #sec2{
        height: 300px;
    }

    #sec2 h4{
        margin-top: 1.2em;
        text-align: center;
    }

    #sec1 .sec1_text_box p {
        font-size: 0.8em;
    }

    #sec1 .sec1_text_box {
        margin: 3.5em 5% 3.5em 11%;
    }

    #sec2 p.smartdahaccp{
        font-size: 0.8em;
        padding: 0.44em 0 ;
        margin: 0 auto;
    }

    #sec2 p.effect{
        text-align: center;
    }

    #sec2 ul.effect_list{
        width: 40vw;
        margin: 0 auto;
        justify-content:center;
    }

    #sec2 p.hesitag{
        margin-top: 0.8em;
        text-align: center;
    }

    #sec2 ul.effect_list li{
        text-align: center;
        font-size: 0.5em;
        font-family: 'GmarketSansMedium';
        padding: 0em 0.4em;
        border: 0.5px solid #00ffc6;
    }

    #sec2 .dahaccp_phone{
        right:52%
    }

    #sec2 .phone_tmg{
        top:60%;
        right: 14%;
    }

    #sec2 .phone_tmg > p {
        font-size: 0.8em;
    }

    #sec2 .dahaccp_phone img{
        width: 35vw;
    }

    #sec2 .phone_tmg img{
        width: 45vw;
    }

    /*** section3 ***/
    #sec3 h3.smartdahaccp{
        font-size: 1.7em;
    }

    #sec3 .sec3_txt .before .be_tit, #sec3 .sec3_txt .after .af_tit{
        padding: 1em 0;
    }

    #sec3 .sec3_txt .before .be_tit h1, #sec3 .sec3_txt .after .af_tit h1{
        font-size: 1.1em;
    }

    #sec3 .sec3_txt .before, #sec3 .sec3_txt .after{
        width: 14em;
    }

    #sec3 .sec3_txt .before .be_txt1 h3, #sec3 .sec3_txt .before .be_txt2 h3, #sec3 .sec3_txt .after .af_txt1 h3, #sec3 .sec3_txt .after .af_txt2 h3{
        font-size: .9em
    }

    #sec3 .sec3_txt .before .be_txt1 p, #sec3 .sec3_txt .before .be_txt2 p, #sec3 .sec3_txt .after .af_txt1 p, #sec3 .sec3_txt .after .af_txt2 p{
        font-size: 0.6em;
    }

    #sec3 .sec3_txt .before .be_txt1, #sec3 .sec3_txt .before .be_txt2, #sec3 .sec3_txt .after .af_txt1, #sec3 .sec3_txt .after .af_txt2{
        margin: 1em 0;
    }
    
    /*** section4 ***/
    #sec4 .sec4_txt h3{
        font-size:1em ;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate{
        transform: translate3d(-193px,-48px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_laptop.aos-animate {
        transform: translate3d(1px,-31px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-130px,19px,0);
    }

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(31px,41px,0);
    }

    /*** ssection5 ***/
    #sec5 h3.smartdahaccp, #component h3.smartdahaccp{
        font-size: 1.7em;
    }

    #sec5 .sec5_txt .sec5_txt_right {
        padding: 0;
        margin: 0 4em;
    }

    
    /*** section6 ***/
    #sec6 h3.smartdahaccp{
        font-size: 1.7em;
    }

    #sec6 .sec6_img p {
        font-size: 0.8em;
        margin: 0 2em;
    }

    #sec7 .sec7_top {
        padding: 1.2em 0;
        background-size: 138%;
        background-position-x: -108px;
    }
    

    #sec7 .sec7_top .sec7_txt1 p, #sec7 .sec7_top .sec7_txt2 p {
        font-size: 0.85em;
    }

    #sec7 .sec7_top .sec7_button button{
        width: 20vw;
    }

    #sec7 .sec7_mid .mid_left{
        width: 100%;
        display: block;
    }

    #sec7 .sec7_mid .mid_left .left_1, #sec7 .sec7_mid .mid_right .right_1{
        font-size: 1em;
    }

    #sec7 .sec7_mid .mid_right{
        margin-left: 0;
    }

    #sec7 .sec7_top .sec7_txt1 img, #sec7 .sec7_top .sec7_txt2 img{
        width: 47vw;
    }

    #sec7 .sec7_mid .mid_left .left_2 p, #sec7 .sec7_mid .mid_right .right_2 p {
        font-family: 'GmarketSansLight';
        font-size: 0.8em;
        padding: .5em 0;
        text-align: center;
    }
    

    /*** section8 ***/

    #sec8 .sec8_box{
        display: block;
    }

    #sec8 .sec8_box > div{
        width: 100%;
    }

    #sec8 .sec8_box > div.sec8_left > p, #sec8 .sec8_box > div.sec8_right > p{
        font-size: 1.5em;
    }

    #sec8 .sec8_box > div.sec8_left > p {
        right: 25%;
    } 

    #sec8 .sec8_box > div.sec8_right > p {
        left: 28%;
    }
}

@media(max-width:576px) {
    /*** section1 ***/
    #component ul {
        margin-bottom: 7em;
    }
}

@media(max-width:500px) {
    /*** section1 ***/
    #sec1 .sec1_text_box {
        margin: 3.5em 5% 3.5em 7%;
    }

    /*** section2 ***/
    .dahaccp #sec2 {
        height: 360px;
    }

    /*** section3 ***/
    #sec3 .sec3_txt .before .be_tit, #sec3 .sec3_txt .after .af_tit {
        padding: 0.5em 0;
    }


    /*** section7 ***/
    #sec7 .sec7_top {
        padding: 1.2em 0;
        background-size: 142%;
    }

    /*** section8 ***/
    #sec8 .sec8_box > div.sec8_left > p {
        right: 23%;
    } 

    #sec8 .sec8_box > div.sec8_right > p {
        left: 24%;
    }

}

@media(max-width:465px) {

    #sec3 .sec3_txt .before, #sec3 .sec3_txt .after {
        width: 13em;
    }

    #sec5 h3.smartdahaccp, #component h3.smartdahaccp {
        font-size: 1.5em;
    }
}

@media(max-width:450px) {
    /*** section1 ***/
    #sec1 .sec1_text_box {
        margin: 3.5em 4%;
        text-align: center;
    }

    #sec2 .sec2_text_box{
        left: 23%;
    }

    #sec3 h3.smartdahaccp {
        font-size: 1.2em;
    }

    #sec4 .sec4_imgs > div.sec4_img_monitor.aos-animate {
        transform: translate3d(-163px,-48px,0) !important;
    }

    #sec4 .sec4_imgs > div.sec4_img_pad.aos-animate {
        transform: translate3d(-110px,19px,0);
    }   

    #sec4 .sec4_imgs > div.sec4_img_phone.aos-animate {
        transform: translate3d(31px,32px,0);
    }

}

@media(max-width:430px) {

    /*** section3 ***/
    #sec3 .sec3_txt .before, #sec3 .sec3_txt .after {
        width: 9em;
    }

    /*** 구성요소 ***/
    #component ul {
        height: 1087px;
    }

    /*** section7 ***/
    #sec7 .sec7_top .sec7_txt1 p, #sec7 .sec7_top .sec7_txt2 p {
        font-size: 0.6em;
    }

    /*** section8 ***/
    #sec8 .sec8_box > div.sec8_left > p {
        right: 17%;
    }

    #sec8 .sec8_box > div.sec8_right > p {
        left: 21%;
    }
}

@media(max-width:414px) {
    /*** section1 ***/

    /*** section2 ***/
    #sec2 .sec2_text_box {
        left: 24%;
    }

    /*** section4 ***/
    #sec4 .sec4_txt {
        left: 3%;
        top: 10%;
    }

    /*** section5 ***/
    #sec5 h3.smartdahaccp, #component h3.smartdahaccp {
        font-size: 1.4em;
    }

    /*** section6 ***/
    #sec6 h3.smartdahaccp {
        font-size: 1.5em;
    }

    /*** section7 ***/
    #sec7 .sec7_top {
        padding: 1.2em 0;
        background-size: 142%;
        background-position-x: -83px;
    }

}

@media(max-width:410px) {
    /*** section2 ***/
    .dahaccp #sec2 {
        height: 410px;
    }

    /*** section3 **/
    #sec3 .sec3_txt .before, #sec3 .sec3_txt .after {
        width: 11em;
    }

    #sec3 .sec3_txt .before .be_txt1 h3, #sec3 .sec3_txt .before .be_txt2 h3, #sec3 .sec3_txt .after .af_txt1 h3, #sec3 .sec3_txt .after .af_txt2 h3{
        font-size: 0.7em;
    }

    #sec3 .sec3_txt .before .be_txt1 p, #sec3 .sec3_txt .before .be_txt2 p, #sec3 .sec3_txt .after .af_txt1 p, #sec3 .sec3_txt .after .af_txt2 p{
        font-size: 0.4em;
    }

}

@media(max-width:285px){
    /*** 구성요소 ***/
    #component ul {
        height: 1890px;
    }

    /*** section5 ***/
    #sec5 h3.smartdahaccp, #component h3.smartdahaccp, #sec6 h3.smartdahaccp {
        font-size: 1em;
    }
}