@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Common *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.flex_wrap {display: flex;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Section *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section {padding: 120px 0; box-sizing: border-box; }
.section.pb-0 {padding-bottom: 0;}
.section.pt-0 {padding-top: 0;}
.section.last {padding-bottom: 0;}

.section [class^=row] + [class^=row] {margin-top: 0;}

/* 반응형에서 조절이 필요한 경우 사용 */
/*
@media all and (max-width: 1024px) {
    .section {padding: 0 0;}
    .section.last {padding-bottom: 0;}
    .section [class^=row] + [class^=row] {margin-top: 0;}
}
*/

/* line bg */
.line-bg {position: relative;}
.line-bg::before,
.line-bg::after {content: ''; position: absolute; left:50%; transform: translateX(-50%); top: 0;  height: 100%; border-left: 1px solid #eee; border-right: 1px solid #eee; z-index: -1;}
.line-bg::before {width: 100%; max-width: 1440px;}
.line-bg::after {width: 33.333%;}

@media all and (max-width:1440px){
    .line-bg::before{width: 93.75%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Title *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* main tit */
.main_tit.mb {margin-bottom: 25px;}
.main_tit h3 {font-weight: 700; font-size: var(--fz-44); line-height: 1.41em;}

.main_con_tit h5 {}

.sub_main_tit h3 {font-size: var(--fz-52); line-height: 1.2em; font-weight: 300; letter-spacing: -0.025em; color: #222222;}
.sub_main_tit h3 b.block{display: block;}


.sub_con_tit h5 {font-weight: 700; font-size: var(--fz-44); line-height: 1.41em;}
.sub_con_tit h5 span.fz-40{font-size: var(--fz-40);}
.sub_con_tit h5 span{color: #fa744f;}

.heading .desc h5 {font-size: var(--fz-24); margin: 0; color: #222222; line-height: 1.5em; font-weight: 500;}
.heading .desc h6 {font-size: var(--fz-20); margin: 0; color: #444444; letter-spacing: -0.025em; line-height: 1.7em; font-weight: 400;}
.heading .desc p {font-size: var(--fz-18); letter-spacing: -0.025em; color: #888; line-height: 1.5em; font-weight: 400;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * btn *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.btn_wrap {display: flex;}
.btn_wrap .btn {display: flex; align-items: center; justify-content: center;}

/* view more */
.btn_wrap .more {gap: 10px; font-weight: 600; font-size: var(--fz-18); line-height: 1.55em; letter-spacing: 0;}
.btn_wrap .more i {width: 64px; height: 64px; border-radius: 50%; background: #fa744f url(/img/plus_16x16.png) no-repeat center center; transition: 0.25s;}
.btn_wrap .more:hover i {box-shadow: 0px 8px 50px 0px rgba(67, 36, 20, 0.16);}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * txt_box *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* line */
.txt_box.line {position: relative; padding-left: 80px; box-sizing: border-box;}
.txt_box.line::before {content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #444; max-height: 240px;}
.txt_box.line h3 {font-weight: 700; font-size: var(--fz-30); line-height: 1.2em;}
.txt_box.line p {font-weight: 300; font-size: var(--fz-20); line-height: 1.7em; color: #444; margin-top: 30px;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * layout01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.layout01 .inner_blank{ width: calc(100% - ((100% - 1440px)/2)); margin: 0 0 0 auto;}
.layout01 .inner_blank.right{ margin: 0 auto 0 0 ; }

.layout01 .flex_wrap{align-items: center; flex-wrap: wrap;}
.layout01 .flex_wrap > div{width: 50%;}

.layout01 .img_wrap > p{font-size: var(--fz-16); text-align: center; padding-top: 15px; font-weight: 300; color: #444;}


.layout01 .img_box img{width: 100%; height: 100%; object-fit: cover;}


@media all and (max-width:1440px) {
    .layout01 .inner_blank{width: 93.75%;}
    
}
@media all and (max-width:1024px) {
    .layout01 .flex_wrap > div{width: 100%; }
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * name-tag *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.name-tag{position: absolute; top: -200px;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * polygon_list *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.polygon_list ul{display: flex; gap: 20px; justify-content: flex-end;}
.polygon_list ul li { background-color: #f7f5f3; border-radius: 20px 80px 20px 20px; transition: 0.25s; padding: 60px 40px; box-sizing: border-box;}
.polygon_list ul.item04 li{width: calc(25% - 15px);}
.polygon_list ul.item03 li{width: calc(33.333% - 60px);}
.polygon_list ul li i {display: block; width: 86px; height: 76px; position: relative;}
.polygon_list ul li i img {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; max-width: fit-content;}
.polygon_list ul li .txt_box {margin-top: 40px;}
.polygon_list ul li .txt_box h6 {font-weight: 700; font-size: var(--fz-24);}
.polygon_list ul li .txt_box p {font-weight: 300; font-size: var(--fz-18); line-height: 1.55em; color: #444; margin-top: 15px;}
/* hover */
.polygon_list ul li:hover {background-color: #fa744f; box-shadow: 0px 8px 50px 0px rgba(67, 36, 20, 0.16); transform: translateY(-20px); color: #fff;}
.polygon_list ul li:hover p {color: #fff;}

@media all and (max-width: 1200px) {
    .polygon_list ul li {padding: 60px 20px;}
}

@media all and (max-width: 1024px) {
    .polygon_list ul {flex-wrap: wrap; justify-content: center;}
    .polygon_list ul.item04 li,
    .polygon_list ul.item03 li{width: calc(50% - 10px);}
}

@media all and (max-width: 767px) {
    .polygon_list ul.item04 li,
    .polygon_list ul.item03 li{width: 100%;}
}



/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * table_layout *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.table_layout table{width: 100%; text-align: left; font-size: var(--fz-18);}
.table_layout.center table{text-align: center;}
.table_layout table th{background-color: #eeecea;color: #222222; font-weight: 500; letter-spacing: 0.025em;}

.table_layout table thead tr th {background-color: #fa744f; color: white; border-left: 1px solid #dbdbdb;}
.table_layout table thead tr th.theadfirst {border: none;}

.table_layout table th,
.table_layout table td{padding: 20px 25px; box-sizing: border-box;}
.table_layout table td{background-color: #f7f5f3;color: #444444; font-weight: 400; letter-spacing: -0.025em;}
.table_layout table td p{padding-top: 10px;}
.table_layout table td span {color: #fa744f;}

.table_layout.border_l table td + td{border-left: 1px solid #dbdbdb;}
.table_layout.pd-10 table th,
.table_layout.pd-10 table td{padding: 10px 25px;}
.table_layout.pd-15 table th,
.table_layout.pd-15 table td{padding: 15px 25px;}

.table_layout table tr + tr{border-top: 1px solid #dbdbdb;}


/* NOVO의 차별점 */
.table_layout.differentnovo table tbody tr td > div{
    background-color: #fff;
    width: 100%;
    height: 100%;
    color: #fa744f;
    font-size: 24px;
    padding: 15px 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -21px;
    
}
.table_layout.differentnovo table tbody tr td div .novo_title {display: block; margin-bottom: 6px; font-weight: 600;}
.table_layout.differentnovo table tbody tr .differentnovo_title{border-bottom: 1px solid #f7f5f3; }
.table_layout.differentnovo table tbody tr .differentnovo_title.novotitle{border-bottom: 1px solid #fa744f; background-color: #fa744f;position: relative;}


/* .table_layout.differentnovo table tbody tr .differentnovo_title.novotitle::before, */
.table_layout.differentnovo table tbody tr .differentnovo_title.novotitle::after{content: ""; width: 100%;height: 40px;background-color: #fa744f;position: absolute;bottom: 100%; left: 0;border-top-left-radius: 20px;border-top-right-radius: 20px;}
.table_layout.differentnovo table tbody tr .differentnovo_contents {color: #fff; background-color: #fa744f; }

.table_layout.differentnovo table tbody tr .differentnovo_contents {color: #fff; background-color: #fa744f;position: relative;}
.table_layout.differentnovo table tbody tr .differentnovo_contents.novocontents::after {content: ""; width: 100%;height: 40px;background-color: #fa744f;position: absolute;top: 100%; left: 0;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}



@media all and (max-width: 1024px) {
    .table_layout.x_scroll{overflow-x:scroll; }

}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * template_list *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.template_list {display: flex; flex-wrap: wrap; justify-content: center;}
.template_list.item03{gap: 35px;}
.template_list.item03 > li{width: calc(33.33% - 24px); }

.template_list.printhead {gap: 20px }
.template_list.printhead > li {width: calc(25% - 15px); }

.template_list .card{ background-color: #f7f5f3; border-radius: 20px 80px 20px 20px; transition: 0.25s; padding: 60px 40px 115px; box-sizing: border-box; height: 420px;}
.template_list .card.robot{ background-color: #f7f5f3; border-radius: 20px 80px 20px 20px; transition: 0.25s; padding: 60px 40px 115px; box-sizing: border-box; height: 100%;}

.template_list .card .num{font-size: var(--fz-16); font-weight: bold; color: #fa744f;}

.template_list .card .cardimg{
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    width: 100px;
    height: 100px;
    z-index: 93;
    margin-bottom: 40px;
    position: relative;
}
.template_list .card .cardimg .img {position: absolute; top: 22px; left: 22px;}
.template_list .card .cardimg .img.img02 {position: absolute; top: 30px; left: 22px;}
.template_list .card .cardimg .img.img03 {position: absolute; top: 13px; left: 35px;}

.novoprinthead .printheadtop {display: flex; width: 100%; height: 68px;position: relative;}
.novoprinthead .printheadtop .headleft {
    width: 15%; 
    background-color: #fa744f;
    border-radius: 50px;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: absolute;
    height: 68px;
}
.novoprinthead .printheadtop .headright  {
    width: 100%;
    background-color: #f7f5f3;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.novoprinthead .printheadtop .headright .headtext p {
    display: inline-flex;
    margin-right: 30px;
    font-size: 18px;
}


.template_list .card h5{font-size: var(--fz-24); margin: 15px 0; letter-spacing: -0.025em; font-weight: bold; color: #222222;}
.template_list p{font-size: var(--fz-18); line-height: 1.5em; letter-spacing: -0.025em; font-weight: 300; color: #444444;}

.template_list .icon_img{display: flex; justify-content: space-between;}
.template_list .icon_img img{max-width: 20%; width: 100%;}

.template_list .check {margin-left: 25px;}
.template_list .check li{display: flex; margin-top: 30px; min-height: 140px;}
.template_list .check li.flex_no{display: block;}
.template_list .check li:first-child{min-height: 170px;}
.template_list .check li .txt{width: calc(100% - 120px); padding-right: 20px; box-sizing: border-box;}
.template_list .check li:first-child .txt{width: 100%;}
.template_list .check li h5{font-size: var(--fz-20); font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; color: #222; position: relative;}
.template_list .check li .img{min-width: 120px; overflow: hidden; margin-top: 15px; height: 80px; border-radius: 10px; background-color: #d9d9d9;}
.template_list .check li .img img{width: 100%; height: 100%; object-fit: cover;}

.template_list .check li + li .txt h5::before{content: ''; position: absolute; top: 5px; left: -20px; display: inline-block; width: 10px; height:10px; margin-right: 15px; background: #222; margin-top: 4px;} 
.template_list .check li + li{padding-left: 20px; box-sizing: border-box;}


.template_list .check_icon {padding: 40px 30px 0;}
.template_list .check_icon li{width: calc(100% - 30px); padding-left: 30px; position: relative;}
.template_list .check_icon li + li{margin-top: 30px;}
.template_list .check_icon li::before{content: ''; position: absolute; top: 3px; left: 0; background: url(/img/check_icon01.png); display: inline-block; width: 15px; height: 15px;}
.template_list .check_icon li h5{font-size: var(--fz-20); font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; color: #222;}
.template_list .check_icon li p{font-size: var(--fz-18); font-weight: 300; margin-top: 20px; line-height: 1.5; letter-spacing: -0.025em; color: #444444;}



@media all and (max-width: 1200px) {
    .template_list.item03{gap: 10px;}
    .template_list.item03 > li{width: calc(33.33% - 7px); }

    .template_list .card{padding: 45px 30px 55px;}

    /* .template_list .card.second{padding-bottom: 50px;} */


    .novoprinthead .card{padding-bottom: 80px;}
    
    .novoprinthead .row01 .template_list {gap: 20px;}
    .novoprinthead .row01 .template_list > li {width: calc(33.333% - 7px);}
}
@media all and (max-width: 1024px) {
    .template_list.item03{margin: 0 auto; row-gap: 30px;}
    .template_list.item03 > li{width: calc(50% - 5px); }




    .novoprinthead .row01 .template_list {max-width: 630px; margin: 0 auto; row-gap: 30px;}
    .novoprinthead .row01 .template_list > li {width: calc(50% - 10px); }

    .novoprinthead .printheadtop .headright p {
        font-size: 15px;
    }

    .novoprinthead .printheadtop .headleft {
        font-size: 18px;
        
    }


}

@media all and (max-width:1024px){
    
    .novoprinthead .printheadtop .headright .headtext p {
        font-size: 13px;
        margin-right: 5px;
    }

}
@media all and (max-width: 680px) {
    .template_list.item03 > li{width: calc(100%); }

    .template_list .check li{min-height: auto;}
    .template_list .check li:first-child{min-height: auto;}


    .novoprinthead .row01 .template_list { margin: 0 auto; row-gap: 30px;}
    .novoprinthead .row01 .template_list > li {width: calc(100%); }

    .novoprinthead .printheadtop .headright .headtext {
        padding-left: 50px;
    }

    .novoprinthead .printheadtop .headleft {
        font-size: 17px;
        
    }
}