@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

div#content.sub{padding-top:100px;}
section h2{ margin-bottom: 0.7333em; font-size: 45px; font-weight: 900; line-height: 1.311; }
section h2 + p{ font-size: 18px; }
section h2,
section h2 + p,
section h3{ color: #222 }
#footer .btn_top{ display: none; }

@media (max-width: 1279px){
    #content article section[class*=con]{ padding: 120px 0 }
	section[class*=con] h2{ font-size: 32px; }
    section[class*=con] h3{ font-size: 28px; }
}
@media (max-width: 1080px){
    div#content.sub{padding-top:80px;}
	#content article section[class*=con]{ padding: 100px 0 }
	section[class*=con] h2{ font-size: 28px; }
    section[class*=con] h3{ font-size: 24px; }
}
@media (max-width: 767px){
	#content article section[class*=con] h2{ font-size: 24px; }
    section[class*=con] h3{ font-size: 20px; }
    section[class*=con] h2 + p{ font-size: 16px; }
}
@media (max-width: 640px){
    div#content.sub{padding-top:65px;}
	#content article section[class*=con]{ padding: 85px 0 }
	section[class*=con] h2{ font-size: 18px; }
    section[class*=con] h3{ font-size: 16px; }
    section[class*=con] h2 + p{ font-size: 14px; }
}



/* 메인으로 돌아가기 */
.btn_back{ display: flex; align-items: center; position: relative; margin-top: 80px; width: 60px; height: 60px; transform-origin: left top; background: #d0ac54 no-repeat 50%; border-radius: 30px; transition: .3s }
.btn_back:before{ content:url(../images/common/icon_btn_back.svg); margin: 1px 0 0 21px; transition: .3s }
.btn_back:after{ content:'Back'; overflow: hidden; display: inline-block; margin-bottom: 2px; width: 0; font-weight: 500; color: #fff; box-sizing: border-box; transition: .3s  }
.btn_back:hover{ width: 140px }
.btn_back:hover:after{ margin: 0 18px 2px 16px; width: 30%; }
@media (max-width: 767px){
    .btn_back{ margin-top: 60px; transform: scale( .7 ); }
}
@media (hover: none){
    .btn_back{ width: 140px }
    .btn_back:after{ margin: 0 18px 2px 16px; width: 30%; }
}

/* 제품 공통 */
article[class*=area_product] h3{ font-size: 24px; }
article[class*=area_product] .con1{ padding: 157px 0 120px; background: #f9f9f9; }
article[class*=area_product] .con1 .inr{ display: flex; flex-wrap: wrap }
article[class*=area_product] .con1 .box_title{ position: relative; padding-bottom: 55px; width: 100%; border-bottom: 1px solid #e1e1e1 }
article[class*=area_product] .con1 .box_title .btn_back{ position: absolute; margin: 0; top: 14px; right: 0; transform-origin: right top }
article[class*=area_product] .con1 .box_txt{ display: flex; flex-wrap: wrap; margin-top: 58px; width: 50% }

article[class*=area_product] .type_a h2 + p{ margin-bottom: 50px }
article[class*=area_product] .type_a h3{ flex: 0 0 184px; }
article[class*=area_product] .type_a li{ position: relative; padding-left: 31px }
article[class*=area_product] .type_a li + li{ margin-top: 1em; }
article[class*=area_product] .type_a li:before,
article[class*=area_product] .type_a li:after{ content: ''; position: absolute; border-radius: 100%; }
article[class*=area_product] .type_a li:before{ top: 5px; left: 0; width: 15px; height: 15px; background: #fff; border: 1px solid #e9e9e9; box-sizing: border-box; }
article[class*=area_product] .type_a li:after{ top: 10px; left: 5px; width: 5px; height: 5px; background: #2986e5 }

article[class*=area_product] .type_b h3{ flex: 0 0 230px; }
article[class*=area_product] .type_b ul{ flex: 1 }
article[class*=area_product] .type_b li{ display: flex; justify-content: space-between; }
article[class*=area_product] .type_b li + li{ margin-top: 10px }
/* article[class*=area_product] .type_b li div{ display: flex; flex-direction: column; justify-content: center; position:relative; padding: 10px 24px; width: calc( 50% - 25px ); min-height: 80px; box-sizing: border-box; border-radius: 10px; font-size: 15px; line-height: 1.466; } */
article[class*=area_product] .type_b li div{ display: flex; flex-direction: column; justify-content: center; position:relative; padding: 10px 24px; width: 100%; min-height: 80px; box-sizing: border-box; border-radius: 10px; font-size: 15px; line-height: 1.466; }
/* article[class*=area_product] .type_b li div:nth-child(1):before{ content: ''; position: absolute; top: 50%; left: calc( 100% + 19px); transform: translateY( -50% ) rotate(45deg) skew(-5deg, -5deg); width: 9px; height: 9px; border: 2.5px solid #bdc0c8; box-sizing: border-box; border-left: 0; border-bottom: 0; } */
article[class*=area_product] .type_b li:nth-child(n+3) div:nth-child(1):before{ display: none; }
article[class*=area_product] .type_b li div:nth-child(1){ background: #e8eaf0; font-weight: 500; color: #6e7483 }
article[class*=area_product] .type_b li div:nth-child(2){ background: #384365; font-weight: 300; color: #fff ; display: none;}
article[class*=area_product] .type_b li div:nth-child(2) p{ font-size: 14; color: #b8c6f1 }

article[class*=area_product] .type_c{ display: flex; flex: 1; margin-top: 55px }
article[class*=area_product] .type_c .inr{ display: flex; }
article[class*=area_product] .type_c h3{ flex: 0 0 187px }
article[class*=area_product] .type_c li{ position: relative; padding-left: 27px; font-weight: 300; }
article[class*=area_product] .type_c li + li{ margin-top: 1em }
article[class*=area_product] .type_c li:before{ content: ''; position: absolute; top: 5px; left: 0; width: 14px; height: 13px; background: url(../images/content/icon_product.svg) no-repeat -80px -40px }
article[class*=area_product] .type_c li b{ font-weight: 500; }
article[class*=area_product] .type_c li b:after{ content: '-'; margin: 0 10px; font-weight: 300; }

article[class*=area_product] .type_d ul{ display: flex; flex-wrap: wrap; }
article[class*=area_product] .type_d li{ position: relative; margin-top: 1em; padding: 0 15px 0 33px; width: 33.333%; box-sizing: border-box;font-weight: 300; }
article[class*=area_product] .type_d li:before{ content: ''; position: absolute; top: .5px; left: 0; width: 20px; height: 20px; background: url(../images/content/icon_product.svg) no-repeat }
article[class*=area_product] .type_d li:nth-child(1):before{ background-position: 0 0; }
article[class*=area_product] .type_d li:nth-child(2):before{ background-position: 0 -20px; }
article[class*=area_product] .type_d li:nth-child(3):before{ background-position: 0 -40px; }
article[class*=area_product] .type_d li:nth-child(4):before{ background-position: -20px 0; }
article[class*=area_product] .type_d li:nth-child(5):before{ background-position: -20px -20px; }
article[class*=area_product] .type_d li:nth-child(6):before{ background-position: -20px -40px; }
article[class*=area_product] .type_d li:nth-child(7):before{ background-position: -40px 0; }
article[class*=area_product] .type_d li:nth-child(8):before{ background-position: -40px -20px; }
article[class*=area_product] .type_d li:nth-child(9):before{ background-position: -40px -40px; }
article[class*=area_product] .type_d li:nth-child(10):before{ background-position: -60px 0; }
article[class*=area_product] .type_d li:nth-child(11):before{ background-position: -60px -20px; }
article[class*=area_product] .type_d li:nth-child(12):before{ background-position: -60px -40px; }
article[class*=area_product] .type_d li:nth-child(13):before{ background-position: -80px 0; }
article[class*=area_product] .type_d li:nth-child(14):before{ background-position: -80px -20px; }
article[class*=area_product] .type_d li:nth-child(15):before{ background-position: -80px -40px; }

article[class*=area_product] .type_e ul{ margin-top: 54px }
article[class*=area_product] .type_e li{ position: relative; padding-left: 14px; font-weight: 300; line-height: 1.6875; }
article[class*=area_product] .type_e li + li{ margin-top: 1.875em }
article[class*=area_product] .type_e li:before{ content: ''; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background: #444}

article[class*=area_product] .con2{ padding: 115px 0 170px }
article[class*=area_product] .list_img{ display: flex; flex-wrap: wrap; justify-content: space-between; }
article[class*=area_product] .list_img.list3 li{ width: calc( ( 100% - 80px ) / 2) }
article[class*=area_product] .list_img.list4 li{ width: calc( ( 100% - 120px ) / 4) }
article[class*=area_product] .list_img figcaption{ margin-bottom: 17px; font-size: 18px; line-height: 27px; font-weight: 600; color: #222 }
article[class*=area_product] .list_img img{ width: 100% }

article[class*=area_product] .con3{ padding: 112px 0 113px }
article[class*=area_product] .con3 h3{ margin-bottom: 40px }

article[class*=area_product] .con4{ padding-bottom: 120px }
article[class*=area_product] .con4 h3{ margin-bottom: 47px }
article[class*=area_product] .con4 .box_img{ display: flex; justify-content: center; align-items: center; padding: 51px 50px 49px; border: 1px solid #e1e1e1; box-sizing: border-box; }
article[class*=area_product] .con4 .box_img img{ max-width: 100% }

article[class*=area_product] .con5{ padding: 120px 0 170px; background: #f9f9f9; }
article[class*=area_product] .con5 .inr{ display: grid; grid-template: "a b" auto "c d" auto / 1fr 1fr; grid-gap: 116px 20px }
article[class*=area_product] .con5 .inr > div:nth-child(1){ grid-area: a; }
article[class*=area_product] .con5 .inr > div:nth-child(2){ grid-area: b; }
article[class*=area_product] .con5 .inr > div:nth-child(3){ grid-area: c; }
article[class*=area_product] .con5 .inr > div:nth-child(4){ grid-area: d; }
article[class*=area_product] .con5 img{ max-width: 100% }
article[class*=area_product] .con5 table { text-align: left; }
article[class*=area_product] .con5 table caption{ margin-bottom: .75em; line-height: normal; text-indent: 0; font-size: 24px; font-weight: 600; color: #054080; text-align: left; }
article[class*=area_product] .con5 .inr div:nth-child(4) caption{ color: #02879f }
article[class*=area_product] .con5 table tbody{ border-top: 2px solid #054080 }
article[class*=area_product] .con5 table tbody tr > *{ vertical-align: top; padding: 14.25px 30px 17.25px; border: 1px solid #e1e1e1; line-height: 1.6875; box-sizing: border-box; }
article[class*=area_product] .con5 table th{ width: 50%; background: #f3f3f3; font-weight: 400; color: #222 }
article[class*=area_product] .con5 table td{ width: 50%; font-weight: 300; color: #666}
article[class*=area_product] .con5 table .example{ color: #64c5d8 }

article[class*=area_product] ul.logo{ display: flex; flex-wrap: wrap; align-items: center; flex: 1 100%; margin: 59px 0 56px; mix-blend-mode: multiply }
article[class*=area_product] ul.logo li{ margin-right: 40px }
article[class*=area_product] ul.logo li:last-child{ margin-right: 0 }
article[class*=area_product] ul.logo img{ max-width: 100% }

article[class*=area_product] .item_list{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 47px 20px; flex: 1; padding: 50px; box-sizing: border-box; font-weight: 300 }
article[class*=area_product] .item_list img{ width: 100%; object-fit: cover; }
article[class*=area_product] .item_list figcaption{ margin-top: 1.625em; line-height: 1.6875; }

@media (max-width: 1279px){
    article[class*=area_product] .con1 .box_title .btn_back{ top: 7px }
    article[class*=area_product] .con1 .box_txt{ width: 100% }
    article[class*=area_product] .con1 .box_txt br{ display: none; }

    article[class*=area_product] .type_b h3{ flex: 0 0 184px }

    article[class*=area_product] .type_c li b{ display: block; }
    article[class*=area_product] .type_c li b:after{ display: none; }

    article[class*=area_product] .type_d li{ width: 50% }

    article[class*=area_product] .list_img.list3 li{ width: calc( ( 100% - 60px ) / 2) }
    article[class*=area_product] .list_img.list4 li{ width: calc( ( 100% - 80px ) / 4) }

    #content article[class*=area_product] .con4{ padding-top: 0 }

    article[class*=area_product] .con5 .inr{  grid-template: "a b" auto "c c" auto "d d" auto / 1fr 1fr; grid-gap: 50px 20px }

    article[class*=area_product] .item_list{ grid-template-columns: repeat(3, 1fr); padding: 20px }
}
@media (max-width:900px){
    .area_product02 .list4 li:nth-child(3) figcaption{ font-size: 16px; }
}
@media (max-width: 767px){
    article[class*=area_product] .con1 .box_title{ padding-bottom: 50px }
    article[class*=area_product] .con1 .box_txt{ margin-top: 50px }
    article[class*=area_product] h3{ font-size: 20px; }

    article[class*=area_product] [class*=type_] li{ font-size: 14px; }
    /* article[class*=area_product] .type_a h3,
    article[class*=area_product] .type_b h3, */
    article[class*=area_product] [class*=type_] h3{ flex: 1 100%; margin-bottom: 20px; }

    article[class*=area_product] .type_a li:before{ top: 4px; width: 12px; height: 12px }
    article[class*=area_product] .type_a li:after{ top: 8px; left: 4px; width: 4px; height: 4px }

    article[class*=area_product] .type_c{ flex-wrap: wrap }

    article[class*=area_product] .type_d li{ width: 100% }

    article[class*=area_product] .list_img li + li{ margin-top: 40px }
    article[class*=area_product] .list_img.list3 li,
    article[class*=area_product] .list_img.list4 li{ width: 100% }

    article[class*=area_product] .con2 figcaption{ font-size: 18px; line-height: 1.5; }

    article[class*=area_product] .con4 .box_img{ padding: 20px }

    article[class*=area_product] .con5 .inr{ display: block; }
    article[class*=area_product] .con5 .inr div + div{ margin-top: 50px }

    article[class*=area_product] ul.logo li{ flex: 1 100%; margin: 0 0 20px }
    article[class*=area_product] ul.logo li + li{ margin-bottom: 0 }

    article[class*=area_product] .item_list{ grid-template-columns: repeat(2, 1fr); font-size: 14px; }
}
@media (max-width: 640px){
    article[class*=area_product] h3{ font-size: 16px; }
    article[class*=area_product] .con1 .box_title .btn_back{ position: relative; margin-top: 50px; top: auto; transform-origin: top left; }
    article[class*=area_product] .con2 figcaption{ margin-bottom: 15px; font-size: 16px }

    /* article[class*=area_product] .type_b li div{ padding: 15px; width: calc( 50% - 15px) } */
    article[class*=area_product] .type_b li div{ padding: 15px; width: 100%; }
    article[class*=area_product] .type_b li div:nth-child(1):before{ left: calc( 100% + 9px) }

    article[class*=area_product] .type_d li{ font-size: 14px; }
    article[class*=area_product] .type_d li:before{ transform: scale(.7) }

    article[class*=area_product] .con5 table tbody tr{ display: flex; flex-direction: column; }
    article[class*=area_product] .con5 table tbody tr > *{ padding: 14.25px 15px 17.25px; width: 100% }

    article[class*=area_product] .item_list{ grid-template-columns: repeat(1, 1fr); grid-gap: 35px }
}
/* @media (max-width: 300px){
    article[class*=area_product] .type_b li{ flex-direction: column; }
    article[class*=area_product] .type_b li + li{ margin-top: 40px }
    article[class*=area_product] .type_b li div{ width: 100% }
    article[class*=area_product] .type_b li div + div{ margin-top: 30px }
    article[class*=area_product] .type_b li:nth-child(n+3) div + div{ margin-top: 10px }
    article[class*=area_product] .type_b li div:nth-child(1):before{ top: calc( 100% + 7px); left: 50%; transform: translateX( -50% ) rotate(135deg) skew(-5deg, -5deg) }
} */


.area_product04 .con2 .inr{ display: grid; grid-template: auto / 1fr 1fr; grid-gap: 40px; }
.area_product04 .con2 h3{ margin-bottom: .625em; color: #054080 }
.area_product04 .con2 .type_a div{ padding: 35px 30px 42px; border: 1px solid #e1e1e1; border-top: 2px solid #054080; text-align: center; }
.area_product04 .con2 .inr ul{ text-align: left; }
.area_product04 .con2 .inr img{ max-width: 100% }
.area_product04 .con2 .inr img:nth-of-type(1){ margin: 38px 0 47px }

.area_product05 .item_list{ background: #000; color: #fff }
.area_product06 .item_list{ background: #fff;}

@media (max-width: 1080px){
    .area_product04 .con2 .inr{ grid-template: auto / 1fr; }
    .area_product04 .con2 .type_a div{ padding: 20px 15px 25px }
}

/* 서비스 공통 */
article[class*=area_service] .con{ overflow: hidden; }
article[class*=area_service] .con1{ padding: 153px 0 120px; background: #f9f9f9; }
article[class*=area_service] .con2{ padding: 110px 0 200px }
article[class*=area_service] .icon:before{ background-image: url(../images/content/icon_service.svg) }

/* 리스트 아이콘 */
.icon_img .inr{ display: flex; justify-content: space-between; }
.icon_img .box_txt{ flex: 0 0 600px }
.icon_img.con1 .inr{ flex-direction: row-reverse; }
.icon_img .box_img{ position: relative; flex: 0 1 600px }
.icon_img.con1 .box_img{ margin-left: 40px }
.icon_img.con2 .box_img{ margin-right: 40px }
.icon_img .box_img img{ position: absolute; top: 17px; object-fit: cover; }
.icon_img.con1 .box_img img{ left: 0; height: 526px; }
.icon_img.con2 .box_img img{ right: 0; height: 564px }
/* .icon_img.con2 .box_img img{ right: 0; height: 588px } */
.icon_list{ display: flex; text-align: center; margin-top: 57px}
.icon_list li{ margin-right: 50px; font-weight: 300; }
.icon_list li:last-child{ margin-right: 0 }
.icon_list .icon{ position: relative; margin: 0 auto 24px; width: 113px; height: 113px; background: #fff; border-radius: 35px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15); }
.icon_list .icon:before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; background: no-repeat }
@media (max-width: 1649px){
    .icon_list .icon{ width: 100px; height: 100px; border-radius: 30.973px; }
    .icon_list .icon:before{ transform: translate(-50%,-50%) scale(.885) }
}
@media (max-width: 1440px){
    .icon_img .box_img img{ width: calc(100% + 20px); }
}
@media (max-width: 1279px){
    .icon_img h2 + p br{ display: none;}
    .icon_img.con1 .box_img img{ top: 11px; height: 505px }
    .icon_img.con2 .box_img img{ top: 11px; height: 539px }
}
@media (max-width: 1080px){
    .icon_img .inr{ display: block; }
    .icon_img.con .box_img{ margin: 0 0 30px; }
    .icon_img .box_img img{ position: relative; top: 0; width: 100%; height: auto }
    .icon_list .icon{ width: 80px; height: 80px; border-radius: 24.778px; }
    .icon_list .icon:before{ transform: translate(-50%,-50%) scale(.707) }
}
@media (max-width: 640px){
    .icon_list{ flex-wrap: wrap; margin-top: 40px }
    .icon_list li{ display: flex; align-items: center; margin: 0; width: 100%; }
    .icon_list li + li{ margin-top: 20px }
    .icon_list .icon{ margin: 0; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18.584px; }
    .icon_list .icon:before{ transform: translate(-50%,-50%) scale(.442) }
    .icon_list p{ padding-left: 20px; text-align: left; }
    .icon_list p br{ display: none; }
}

/* 리스트 라인 */
.list_line{ overflow: hidden; counter-reset: listNum; display: grid; grid-gap: 20px; position: relative; margin-top:63px; text-align: center; }
.list_line.list6{ grid-template-columns: repeat(6, 1fr); }
.list_line.list4{ grid-template-columns: repeat(4, 1fr); }
.list_line li{ position: relative; font-weight: 300; color: #666 }
.list_line li::after{ content: ''; display: none; position: absolute; inset: 6px -100vw auto; height: 3px; background: #e1e1e1; }
.list_line li:nth-child(1):after{ display: block; }
.list_line .line{ position: relative; margin-bottom: 41px; left: 50%; transform: translateX( -50% ); width: 15px; height: 15px; background-color: #fff; border: 3px solid #e1e1e1; border-radius: 100%; box-sizing: border-box; z-index: 1; }
.list_line .line:before{ content: ''; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 3px; height: 32px; background: linear-gradient( 0deg, #e1e1e1, #e1e1e1 5px, transparent 5px, transparent 8px ) top / 3px 8px }
.list_line .line:after{ content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -44px; width: 7px; height: 7px; background: #384365; border-radius: 100%; }
.list_line .num{ padding: .75em 0 .1875em; font-size: 15px; font-weight: 500; color: #cfaa50 }
.list_line .num:before{ counter-increment: listNum; content: '0' counter(listNum); }
@media (max-width: 767px){
    .list_line.list6{ grid-template-columns: repeat(3, 1fr); margin-top: 40px }
    .list_line.list4{ grid-template-columns: repeat(2, 1fr); }
    .list_line li:nth-child(4):after{ display: block; }
}
@media (max-width: 500px){
    .list_line.list6{ grid-template-columns: repeat(2, 1fr) }
    .list_line.list6 li:nth-child(5):after{ display: block; }
    .list_line.list4{ grid-template-columns: repeat(3, 1fr); }
    .list_line.list4 li:nth-child(4){ grid-area: 2 / 1 / 3 / 4; }
}

.area_service01 h2 + p{ line-height: 1.8;}
.area_service01 .con1 li:nth-child(1) .icon:before{ background-position: 0 0; }
.area_service01 .con1 li:nth-child(2) .icon:before{ background-position: -50px 0; }
.area_service01 .con1 li:nth-child(3) .icon:before{ background-position: -100px 0; }
.area_service01 .con2 li:nth-child(1) .icon:before{ background-position: 0 0; }
.area_service01 .con2 li:nth-child(2) .icon:before{ background-position: -150px 0; }
.area_service01 .con2 li:nth-child(3) .icon:before{ background-position: -200px 0; }
.area_service01 .con2 li:nth-child(4) .icon:before{ background-position: -250px 0; }
.area_service01 .btn_back{ margin-top: 78px }

.area_service02 .con1 li:nth-child(1) .icon:before{ background-position: 0 -50px; }
.area_service02 .con1 li:nth-child(2) .icon:before{ background-position: -50px -50px; }
.area_service02 .con1 .box_img img{ left: 0; height: 382px; }

.area_service03 .con1 {padding:153px 0 !important;}
.area_service03 h2{ white-space: nowrap; }
.area_service03 .con1 li:nth-child(1) .icon:before{ background-position: -100px -50px; }
.area_service03 .con1 li:nth-child(2) .icon:before{ background-position: -150px -50px; }
.area_service03 .con1 li:nth-child(3) .icon:before{ background-position: -200px -50px; }
/*.area_service03 .con1 .btn_back{ display: none; }*/
.area_service03 .icon_img.con1 .box_img .wrap_img{ display: flex; justify-content: space-between; align-items: flex-start; position: absolute; left: 0; width: 757px }
.area_service03 .icon_img.con1 .box_img img{ position: relative; /*width: calc( 50% - 2.5px );*/ height: auto; object-fit: scale-down; }

@media (max-width: 1750px){
    .area_service03 h2{ white-space: normal; }
    .area_service03 .icon_img.con1 .inr{ display: block; }
    .area_service03 .con1 .btn_back{ display: flex; }
    .area_service03 .icon_img.con1 .box_img{ margin: 0 0 30px }
    .area_service03 .icon_img.con1 .box_img .wrap_img{ position: relative; width: 100% }
    .area_service03 .icon_img.con1 .box_img img{ object-fit: cover; }

	.area_service03 .icon_img.con1 .inr {display:flex;}
	.area_service03 .icon_img.con1 .inr > div {width:50%;}
	.area_service03 .icon_img.con1 .box_img {margin:0; box-sizing:border-box;}
	.area_service03 .icon_img.con1 .box_img img {width:calc((100% - 20px)/2);}
	.area_service03 .icon_img .box_txt {flex:0 0 auto;}

}


@media (max-width: 1250px){

	.area_service03 .icon_img.con1 .box_img {padding-left:80px;}
	.area_service03 .icon_img.con1 .box_img img {width:calc((100% - 10px)/2);}


}


@media (max-width: 767px){

	.area_service03 .icon_img.con1 .inr {display:block;}
	.area_service03 .icon_img.con1 .inr > div {width:100%;}
	.area_service03 .icon_img.con1 .box_img {padding-left:0; margin-bottom:50px;}
	

}




@media (max-width: 500px){
    .area_service03 .icon_img.con1 .box_img .wrap_img{ flex-wrap: wrap }
    .area_service03 .icon_img.con1 .box_img img{ width: 100% }
    .area_service03 .icon_img.con1 .box_img img + img{ margin-top: 20px }
}

.area_service04 .con1{ padding: 153px 0 122px; }
.area_service04 .con1 .btn_back{ margin-top: 74px }
.area_service04 .con2{ padding: 109px 0 200px }
.area_service04 h3{ margin-bottom: 1.133em; font-size: 30px; color: #222 }
.area_service04 .con2 .list_wrap > li + li{ margin-top: 110px}
.area_service04 .con2 .list{ display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px 50px }
.area_service04 .con2 .list li{ position: relative }
.area_service04 .con2 .list li:before{ content: url(../images/content/icon_step_arrow.png); position: absolute; top: 50%; left: 100%; transform: translate( 50%, -50% ) }
.area_service04 .con2 .list li:last-child:before{ display: none; }
.area_service04 .con2 .list img{ aspect-ratio: 24 / 16; width: 100% }
.area_service04 .con2 .btn_back{ margin-top: 80px }
@media (max-width: 1080px){
    .area_service04 .con2 .list_wrap > li + li{ margin-top: 80px}
    .area_service04 .con2 .list{grid-template-columns: repeat(3, 1fr) }
    .area_service04 .con2 .list li:nth-child(3):before{ display: none; }
}

@media (max-width: 767px){
    .area_service04 .con2 .list{grid-template-columns: repeat(2, 1fr) }
    .area_service04 .con2 .list li:nth-child(3):before{ display: block; }
    .area_service04 .con2 .list li:nth-child(even):before{ display: none; }
}
@media (max-width: 500px){
    .area_service04 .con2 .list{grid-template-columns: repeat(1, 1fr); grid-gap: 72px }
    .area_service04 .con2 .list li:before{ top: 100%; left: 50%; transform: translate( -50%, 100% ) rotate(90deg) }
    .area_service04 .con2 .list li:nth-child(even):before{ display: block; }
}