.display_none1024 {display:block;}

.html-v2-heading {position:relative; height:780px; text-align:center; color:#fff;}
.html-v2-heading:before {content:""; position:absolute; top:0; left:0; width:100%; height:calc(100% - 56px); background:#21d695; clip-path:polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 75%);}
.html-v2-heading .inner {position:relative; display:flex; align-items:center; height:100%; background:url("../img/process/main_top_process.jpg") 50% 50% fixed no-repeat; background-size:cover; clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 77%, 0 100%);}
.html-v2-heading h2 {color: #fff;font-size:100px; font-weight:800; line-height:1.33em; text-shadow: 6px 6px 6px rgb(68 68 68 / 70%); letter-spacing:-.02em;}
.html-v2-heading p {font-size:26px; line-height:1.6em; text-shadow: 6px 6px 6px rgb(68 68 68 / 70%); letter-spacing:-.04em;}
.html-v2-heading .txt1 {font-size: 40px;font-weight: 700}

.html-head {text-align:center; margin-bottom:80px;}
.html-head h3 {color:#242424; font-size:36px;font-weight: 700;line-height:1.33em; letter-spacing:-.03em;}
.html-head h3 strong {color:#ff695b;}
.html-head p {color:#666; font-size:25px; line-height:1.33em; letter-spacing:-.03em;}
.html-head p strong {color:#000;}
.html-head p span {font-weight: 700;}

.html-step {margin-bottom:0px; text-align:center;}
.html-step .wrap {display:flex; margin:0 10px;}
.html-step .wraps {display:flex; margin:0 10px;flex-direction: column;place-items: center;}
.html-step .left {width:33.33333333%;}
.html-step .left .title {padding-right:13px;}
.html-step .right {width:66.66666667%}
.html-step .right .title {padding-left:13px;}
.html-step .leftN {width:100%;}
.html-step .leftN .title {padding-right:13px;}
.html-step .rightN {width:100%}
.html-step .rightN .title {padding-left:13px;}
.html-step .title {margin-bottom:38px; padding:0 23px;}
.html-step .title p {color:#454545; font-size:22px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:20px;}
.html-step .title .arrow {position:relative; width:250px; height:1px; background:#ddd; margin:0 auto; transition:1.5s .2s;}
.html-step .title .arrow:before {content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:12px; height:24px; background:url("../img/common/arrow.svg") 50% 50% no-repeat;}
.html-step .title .arrow:after {content:""; position:absolute; top:50%; right:0; transform:translateY(-50%) rotate(180deg); width:12px; height:24px; background:url("../img/common/arrow.svg") 50% 50% no-repeat;}
.html-step .row {display:flex;}
.html-step .row strong {font-weight: 900;}
.html-step .row .Ntitle {color: #333;font-size: 22px;padding-top: 15px;}
.html-step .row .Nsub_title {line-height: 30px;font-size: 18px;padding-top: 20px;}
.html-step .col {flex:1; cursor:pointer;}
.html-step .item {margin:0 -10px;}
.html-step .box {position:relative; padding-bottom:100%; color:#fff; font-size:26px; font-weight:700; line-height:1.33em; letter-spacing:-.03em;}
.html-step .box .inner {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:100%; background:#3046a0; box-shadow:3px 3px 20px rgba(0,0,0,.2);}
.html-step .box .ico {margin-bottom:13px;}
.html-step .box .ico svg {display:block;}
.html-step .cnt dt {height:64px; padding:0 15px 10px; margin-bottom:13px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; border-bottom:1px solid #ddd; color:#242424; font-size:17px; font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.html-step .cnt dt .st {color:#3046a0; font-size:0.944em;}
.html-step .cnt dd {padding:0 20px; color:#454545; font-size:16px; line-height:1.471em;text-align: center; letter-spacing:-.03em;}
.html-step .st2 .box .inner {background:#ff695b;}
.html-step .st2 .cnt dt .st {color:#ff695b;}
.html-step.aos-animate .title .arrow {width:100%;}
.html-md {display:flex; align-items:center;padding-bottom: 100px;}
.html-md .cnt {position:relative; width:47%; height:700px; display:flex; align-items:center; justify-content:flex-end; color:#fff; background:#2f3347; clip-path: polygon(0 0, 92% 8%, 100% 93%, 0% 100%); z-index:10;}
.html-md .cnt .inner {width:100%; max-width:695px; padding:0 50px;}
.html-md .cnt .txt1 {font-size:30px; font-weight:500; line-height:1.333em; letter-spacing:-.03em; margin-bottom:28px;}
.html-md .cnt .txt2 {font-size:25px; font-weight:600; line-height:1.333em; letter-spacing:-.03em;}
.html-md .cnt .c {color:#13bad6;}
.html-md .img {position:relative; width:63%; margin-left:-10%; top:34px; height:700px; background:url("../img/process/md_img.jpg") 20% 100% no-repeat; clip-path: polygon(0 13%, 100% 0, 100% 100%, 6% 87%);}
.html-detail {padding-top:80px;}
.html-detail .group {position:relative; padding:100px 0;}
.html-detail .group .contain {display:flex; align-items:center; justify-content:space-between; position:relative;}
.html-detail .group.bg {padding:150px 0;}
.html-detail .group.bg:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#f4f6fa; clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 89%);}
.html-detail .group.bg .contain {flex-direction:row-reverse;}
.html-detail .group.bg .right .circle-2 span:before {top:50%; left:0;}
.html-detail .group.bg.bg-st-2:before {clip-path: polygon(0 11%, 100% 0, 100% 89%, 0 100%);}
.html-detail .left {width:38.7%}
.html-detail .left .wrap {display:flex;}
.html-detail .left .ico {width:140px;}
.html-detail .left .cnt {flex:1 1 auto; min-width:0; width:1%;}
.html-detail .left .tit-area {padding:25px 0 22px; margin-bottom:35px; border-bottom:1px solid #aaa;}
.html-detail .left .tit-area p {color:#ff695b; font-size:18px; font-weight:700; line-height:1.33em; margin-bottom:2px;}
.html-detail .left .tit-area p.st2 {color:#3046a0;}
.html-detail .left .tit-area h3 {color:#242424; font-size:30px; line-height:1.33em; letter-spacing:-.03em;}
.html-detail .left .txt-area {color:#454545; font-size:17px; line-height:1.647em; letter-spacing:-.03em;margin-left: -109px;width: 120%;}
.html-detail .left .btn {display:inline-flex; align-items:center; margin-top:47px; padding:0 25px; font-size:16px; font-weight:500; line-height:1.33em; color:#242424; height:50px; border:1px solid #ddd; border-radius:50px;}
.html-detail .left .btn i {margin-left:30px; line-height:0; transition:.2s;}
.html-detail .left .btn:hover {background:#3046a0; border-color:#3046a0; color:#fff;}
.html-detail .left .btn:hover i {transform:translateX(5px);}
.html-detail .left .btn:hover svg path {fill:#ffffff;}
.html-detail .right {width:55.8%; position:relative;margin-top: 350px;left: -30px;}
.html-detail .right .circle-wrap {position:relative; width:82.2%;}
.html-detail .right .circle-1 {padding-bottom:calc(100% - 2px); border:1px dashed #f9e7e5; border-radius:100%;}
.html-detail .right .circle-2 {position:absolute; top:34px; left:34px; right:34px; bottom:34px; border-radius:100%;}
.html-detail .right .circle-2 span {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ffd2cd; border-radius:100%; animation:10s circle_rotate linear infinite;}
.html-detail .right .circle-2 span:before {content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:#ff695b; width:13px; height:13px; border-radius:100%;}
.html-detail .right .circle-3 {position:absolute; top:75px; left:75px; right:75px; bottom:75px; background:#ff695b; border-radius:100%;}
.html-detail .right .circle-wrap.st2 .circle-1 {border-color:#acb9ec;}
.html-detail .right .circle-wrap.st2 .circle-2 span {border-color:#6f81ca;}
.html-detail .right .circle-wrap.st2 .circle-2 span:before {background:#3046a0;}
.html-detail .right .circle-wrap.st2 .circle-3 {background:#3046a0;}
.html-detail .right .box-wrap {position:absolute; top:-350px; right:0; transform:translateY(-47%); width:76.2%;}
.html-detail .right .box-wrap .box {width:82.4%; padding:10px; background:#fff; border-radius:12px; box-shadow:0px 18px 26px 0px rgba(0,0,0,.12); opacity:0; transition-property:opacity,transform; transition-duration:1s; transition-timing-function:cubic-bezier(.175,.885,.32,1.275);}
.html-detail .right .box-wrap .box dt {display:flex; align-items:center; height:80px; padding:0 20px; border-radius:12px; background:#fff7f7; color:#242424; font-size:18px; font-weight:500; line-height:1.33em; letter-spacing:-.03em;}
.html-detail .right .box-wrap .box dt .icon {margin-right:15px;}
.html-detail .right .box-wrap .box dt .icon .ico {display:block; width:48px; height:48px; background:#ff695b url("images/icon_customer.svg") 50% 50% no-repeat; border-radius:100%;}
.html-detail .right .box-wrap .box dt .tit {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.html-detail .right .box-wrap .box dt .part {color:#3046a0; font-size:16px; font-weight:500;}
.html-detail .right .box-wrap .box dd {padding:18px 20px 12px; color:#686868;text-align: left; letter-spacing:-.03em; line-height:1.4em;}
.html-detail .right .box-wrap .box dd strong {color:#242424; font-size:18px; font-weight:500; line-height:1.4em; letter-spacing:-.03em; display:inline-block; margin-bottom:4px;}
.html-detail .right .box-wrap .box.cs {margin-bottom:15px; transform:translate3d(100px,0,0);}
.html-detail .right .box-wrap .box.ws {margin-left:16.8%; transform:translate3d(-100px,0,0);}
.html-detail .right .box-wrap .box.ws dt {background:#f4f6fa;}
.html-detail .right .box-wrap .box.ws dt .icon .ico {background-color:#3046a0; background-image:url("images/icon_website.svg");}
.html-detail .right .box-wrap.aos-animate .box.cs {opacity:1; transform:translate3d(0,0,0); transition-delay:.2s;}
.html-detail .right .box-wrap.aos-animate .box.ws {opacity:1; transform:translate3d(0,0,0); transition-delay:.3s;}
.img_01 {width: 84%;margin-top:-274px;}


.html_grid_ {display: grid;grid-template-columns: 1fr 19rem 1fr;grid-auto-rows: 25.6rem;grid-gap: 50px 50px;gap:40px;max-width: 100%;width: 100%;align-self: center;}
.html_container_ {display: flex;justify-content: space-between;padding: var(--spacing-32);border-radius: 24px;border: .1rem solid #ccc;box-shadow: 0px 18px 26px 0px rgba(0, 0, 0, .12);position: relative;padding:20px; max-height:238px;}
.html_container_ .float2 {float: left;width: 50%;transform: translate(0, 10%);}
.html_container_ .float2 .txt1 {color: #333;font-size: 26px;font-weight: 700;padding: 10px 10px 20px;}
.html_container_ .float2 .txt2 {font-size: 18px;font-weight: 300;padding-bottom: 10px;}
.html_container_ .float2 .txt3 {color: #f36700;font-size: 18px;font-weight: 300;}
.html_container_ .float2 .img {width: 90%;}
.fk_o {text-align: right;}
.Development_Process01 {position: absolute;
    display: contents;
    width: 10%;
    text-align: center;}
@media (max-width: 767px) {
}


.content_wrap .three {/*width: 1600px;*/text-align: center;font-size: 50px;margin: auto;padding: 0 0px 0 5px;letter-spacing: -.03em;}
.content_wrap .three .top {text-align: center;margin: auto;font-size: 50px;padding-top: 20px;}
.content_wrap .three .weight {font-size: 50px;font-weight: 900;}
.content_wrap .three .top_wrap {display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;margin: auto;}
.content_wrap .three .top_wrap .individual {float: left;width: 100%;text-align: center;padding-top: 50px;}
.content_wrap .three .top_wrap .individual .txt_top {height: 134px;line-height: 36px;color: #333;font-size: 22px;font-weight: 700;padding: 30px 10px 30px 10px;}
.content_wrap .three .top_wrap .individual .txt_sub {line-height: 30px;font-size: 16px;padding-top: 15px;padding: 0 10px 0 10px;}
.content_wrap .four {text-align: center;font-size: 50px;padding-top: 40px;letter-spacing: -.03em;}
.content_wrap .four .top {color:#242424; font-size:36px; line-height:1.33em; letter-spacing:-.03em;}
.content_wrap .four .weight {font-weight: 900;}
.content_wrap .four .top_wrap {width: 1600px;margin: auto;}
.content_wrap .four .top_wrap .process_bg {height: 280px; text-align: left; margin-left: 202px;margin-right: 203px;margin-top: 40px;background: url('../img/process/process_bg.png');}
.content_wrap .four .top_wrap .process_bg .process01 {float: left;color: #fff;margin-left: 268px;margin-top: 15px;font-size: 20px;font-weight: 700;}
.content_wrap .four .top_wrap .process_bg .process02 {float: left;color: #fff;margin-left: 282px;margin-top: 15px;font-size: 20px;font-weight: 700;}
.content_wrap .four .top_wrap .process_bg .process03 {float: left; width: 240px; height: 80px; line-height: 26px; text-align: center; color: #0097e0; margin-left: 0px;margin-top: 76px; font-size: 20px; font-weight: 700; margin-left: 8px; margin-right: 73px;letter-spacing: -.03em;}
.content_wrap .four .top_wrap .process_bg .process04 {color: #333;font-size: 16px;font-weight: 400;}
.content_wrap .four .top_wrap .process_bg .process05 {float: left;width: 240px;line-height: 26px;text-align: center;color: #333;margin-left: 0px;margin-top: 90px;font-size: 20px;font-weight: 700;margin-right: 73px;letter-spacing: -.03em;}
.content_wrap .four .top_wrap .process_bg .process06 {float: left;width: 240px;line-height: 26px;text-align: center;color: #0097e0;margin-left: 0px;margin-top: 76px;font-size: 20px;font-weight: 700;margin-right: 73px;letter-spacing: -.03em;}
.content_wrap .four .top_wrap .process_bg .process07 {float: left;width: 240px;line-height: 26px;text-align: center;color: #042f7d;margin-left: 0px;margin-top: 90px;font-size: 20px;font-weight: 700;letter-spacing: -.03em;}
.content_wrap .four .top_wrap .process_bg .process08 {float: left;margin-left: 426px;margin-top: 56px;font-size: 20px;color: #ff0e0e;letter-spacing: -.03em;}
.content_wrap .four .top_wrap .process_bg .process09 {float: left;margin-left: 596px;margin-top: 56px;font-size: 20px;color: #ff0e0e;letter-spacing: -.03em;}
.content_wrap .five {width: 1600px;text-align: center;font-size: 50px;padding-top: 80px;margin:0 auto;letter-spacing: -.03em;}
.content_wrap .five .top {text-align: center;margin: auto;font-size: 50px;padding-top: 20px;}
.content_wrap .five .weight {font-size: 50px;font-weight: 900;color: #3046a0;}
.content_wrap .five .top_wrap {line-height: 40px;margin: auto;padding-top: 30px;font-size: 32px;}

.five {padding-top: 110px;}

.html_pro {max-width: 100%;/*padding-left: 150px;padding-right: 150px;*/padding-bottom: 100px;margin: 0 auto;}
.html_pro .content_content {display: grid;grid-template-columns: repeat(2, 1fr);gap: 76px;margin: 0 auto;}
.html_pro .content_content .display_num1 {display: flex;justify-content: right;float: left;width: 100%;height: 274px;text-align: center;padding-top: 50px;}
.html_pro .content_content .display_num2 {display: flex;justify-content: left;float: left;width: 100%;height: 274px;text-align: center;padding-top: 50px;}
.html_pro .content_content .display_num1 .width_bg1 {width: 561px;height:274px;background: url('../img/process/process_1.png') no-repeat;background-size: 100% 100%;background-position: right;}
.html_pro .content_content .display_num2 .width_bg2 {width: 561px;height:274px;background: url('../img/process/process_2.png') no-repeat;background-size: 100% 100%;}
.html_pro .content_content .display_absolute {display:inline-block;position: absolute;margin: 0 auto;width: 100%;text-align: center;}
.html_pro .content_content .display_absolute .center {display:inline-block;margin-top: 50px;}
.html_pro .content_content .display_absolute .background {width: 160px;height: 104px;background: url('../img/process/process_out.png') no-repeat;background-size: 100% 100%;}
.html_pro .content_content .display_absolute .yes {color: #fff;font-size: 20px;padding-top: 10px;}
.html_pro .content_content .display_number {color: #fff;font-size: 20px;padding-top: 10px;}
.html_pro .content_content .display_grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 66px;margin: auto;padding-top: 80px;}
.html_pro .content_content .display_grid .txt1 {color: #0097e0;font-size:20px;font-weight: 700;}
.html_pro .content_content .display_grid .txt2 {color: #333;font-size: 16px;font-weight: 400;}
.html_pro .content_content .display_line_height {line-height: 45px;}
.html_pro .content_content .display_grid .txt3 {color: #333;font-size:20px;font-weight: 700;}
.html_pro .content_content .display_grid_under {display: grid;grid-template-columns: repeat(1, 1fr);gap: 66px;margin: auto;padding-top: 70px;justify-items: right;}
.html_pro .content_content .display_grid_under .txt {width: 204px;line-height: 50px;color: #ff0e0e;font-size: 20px;padding-right: 42px;}

@media (max-width: 1401px) {
    .mobile-none-1401 {display: none;}
    .mobile-block-1401 {display: block;}
    /*Top*/
    .html_grid_ {gap: 10px;}
    .html-md .cnt {width: 65%;}

    .homepage_br {display:none;}
    .html-detail .right {width: 74%;}
    .html-detail .left .txt-area {width: 136%;}
}
@media (max-width: 1280px) {
    .mobile-none-1280 {display: none;}
    .mobile-block-1280 {display: block;}
    /*Top*/
    .html_grid_ {gap: 0px;}
    .html-v2-heading h2 {font-size: 80px;}
    .html-v2-heading p {font-size: 20px;}
    .img02 {width: 9% !important;}

    .img03 {width: 90%;}
    .img04 {width: 60%;}
    .html-head h3 {font-size: 28px;padding: 0 10px 0;}

    .html-md .cnt .txt1 {font-size: 22px;}
    .html-md .cnt .txt2 {font-size: 22px;}

    .content_wrap .three .top_wrap .individual .txt_top {height: unset;line-height:34px;font-size: 18px;}

    .html_container_ {display: unset;max-height: 330px;}
    .html_container_ .float2 {float: unset;width: 100%;text-align: center;}
    .html_container_ .float2 .img {width: 70%;}
    .img_01 {margin-top: -216px;padding-top: 10px;}

    .html_pro .content_content .display_num1 .width_bg1 {width: 500px;}
    .html_pro .content_content .display_num2 .width_bg2 {width: 500px;}

    .html_pro .content_content .display_num1 {width: 90%;}
    .html_pro .content_content .display_num2 {width: 90%;}
    .html_pro .content_content .display_grid_under .txt {width: 158px;}

    .html-detail .left .wrap {width: 490px;}
    .html-detail .right {left: -60px;}
    .html-detail .left .txt-area {width: 105%;margin-left: -123px;}

    .html-detail .right .box-wrap {top: -410px;}
}
@media (max-width: 1024px) {
    .mobile-none-1024 {display: none;}
    .mobile-block-1024 {display: block;}
    /*Top*/
    .html-v2-heading p {font-size: 22px;}

    .html-head {margin-bottom: 30px;}
    .html_grid_ {display: grid;grid-template-columns: repeat(3, 1fr);gap:40px;width: 100%;align-self: center;}
    .html_grid_ {padding-top: 0px;grid-template-rows: 340px 340px;}
    .html_container_ {display:unset;max-height:unset;}
    .html_container_ .float2 {float:unset;width:unset;height:unset;max-height: unset;}
    .html_container_ .float2 .img {padding-top: 15px;}

    .padding-top-100 {padding-top: 70px;}
    .img_01 {margin-top: -174px;}

    .html-step {margin-bottom:100px;}
    .html-step .title p {font-size:16px;}
    .html-step .box {font-size:20px;}
    .html-step .box .ico svg {width:50px; height:50px;}
    .html-step .cnt dt {font-size:16px; padding-bottom:6px;}
    .html-step .cnt dd {font-size:14px;}

    .html_pro .content_content .display_num1 .width_bg1 {
        width: 460px;
    }
    .html_pro .content_content .display_num2 .width_bg2 {
        width: 460px;
    }
    .html_pro .content_content .display_num2 {padding-top: 50px;}
    .html-detail .left .txt-area {width: 102%;}
}
@media screen and (max-width: 960px) {
    .mobile-none {display: none;}
    .mobile-none-960 {display: none;}
    /*Top*/
    .contain {margin-top: -60px;}
    .html_container_ {margin-bottom:30px;height: unset;max-height: unset;}
    .Development_Process01 {display: none;}
    .home-pg {width: 66% !important;}
    .html_container_ .float2 .txt2 {font-size:18px;}
    .html_container_ .float2 .txt3 {font-size:18px;}

    .html-head {margin-bottom: 30px;padding-top:0px;}
    .html_grid_ {display: grid;grid-template-columns: repeat(2, 1fr);gap:20px;width: 100%;align-self: center;padding-top: 0px;grid-template-rows: 380px 380px; }
    .html_container_ {display:unset;}
    .html_container_ .float2 {float:unset;width:unset;height:unset;max-height: unset;}
    .html_container_ .float2 .img {padding-top: 15px;}

    .html-step {padding-top: 60px;}
    .html-step .box {font-size:16px;}
    /*베스트페이지(www.bestpage.kr)은 매 단계별 고객님의 확인 및 승인 후 작업을 진행합니다.*/
    .html-md .cnt .txt1 {font-size: 18px;}
    .html-md .cnt .txt2 {font-size: 18px;}
    /*홈페이지 제작 시 15가지 혜택 제공*/
    .img_homepage15 {width: 80%;}
    .content_wrap .three .top_wrap .individual .txt_top {height: 130px;font-size: 16px;}
    .homepage_15 {display: none;}
    .content_wrap .three .top_wrap {grid-template-columns: repeat(3, 1fr)}

    .html_pro .content_content {display: block;width: min-content;}
    .html_pro .content_content .display_num1 {display: block;float: unset;}
    .html_pro .content_content .display_num2 {display: block;float: unset;padding-top: 150px;}
    .html_pro .content_content .display_num1 .width_bg1 {display: inline-block;width: 561px;}
    .html_pro .content_content .display_num2 .width_bg2 {display: inline-block;width: 561px;}
    .html_pro .content_content .display_absolute {display: none;}
    .html_pro .content_content .display_grid_under .txt {width: 208px;}

    .html-detail .left {width: 100%;}
    .html-detail .left .tit-area {}

    .html-detail .right {width: 72%;margin-top:420px;left: -30%;}
    .html-detail .group .contain {display:block;}

    .html-detail .right {width: 76%;margin-top: 410px;}
    .html-detail .right .box-wrap {width: 110%;left: 230px;}
    .html-detail .right .box-wrap .box {width:100%;}
    .html-detail .right .box-wrap .box.ws {margin-left : 22%}
    .html-detail .left .txt-area {width: 203%;}

    .five {padding-top: 220px;}
    .html-detail .right .box-wrap {top: -370px;}
}
@media screen and (max-width:768px){
    .mobile-none-768 {display: none;}
    .mobile-block-768 {display: block;}
    /*Top*/
    .html-v2-heading h2 {font-size: 50px;}
    .html-v2-heading .txt1 {font-size: 26px;}
    .img02 {width: 8% !important;}
    .html-step {margin-bottom:70px;}
    .html-step .wrap {display:block; margin:7px 0;}
    .html-step .left {width:100%; display:flex;}
    .html-step .right {width:100%; display:flex;}
    .html-step .title {position:relative; width:26px; margin:0 20px 0 0; padding:0;}
    .html-step .title p {position:absolute; top:50%; left:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); writing-mode:vertical-lr; margin:0; font-size:14px;}
    .html-step .title .arrow {position:absolute; top:10px; right:0; width:1px; height:calc(100% - 10px); transition:none;}
    .html-step .title .arrow:before {top:0; left:1px; width:10px; height:21px; background-size:100% 100%; -webkit-transform:translate(0,50%) rotate(90deg); transform:translate(0,50%) rotate(90deg); -webkit-transform-origin:right top; transform-origin:right top;}
    .html-step .title .arrow:after {top:auto; right:auto; bottom:0; left:1px; width:10px; height:21px; background-size:100% 100%; -webkit-transform:translate(0,-50%) rotate(-90deg); transform:translate(0,-50%) rotate(-90deg); -webkit-transform-origin:right bottom; transform-origin:right bottom;}
    .html-step .row {display:block; flex:1 1 auto; min-width:0;/* width:1%;*/}
    .html-step .item {margin:-7px 0; display:flex; align-items:center;}
    .html-step .box {width:125px; height:125px; padding-bottom:0; margin-right:13px; font-size:15px;}
    .html-step .box .inner {box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.2);}
    .html-step .box .ico {margin-bottom:9px;}
    .html-step .box .ico svg {width:36px; height:36px;}
    .html-step .cnt {flex:1 1 auto; min-width:0; width:1%; text-align:left;}
    .html-step .cnt dt {font-size:16px; display:block; padding:0 0 7px; margin-bottom:7px; height:auto;}
    .html-step .cnt dd {font-size:14px;text-align: left; padding:0;}
    .html-step.aos-animate .title .arrow {width:1px;}

    .html-head h3 {padding:0 20px 0 20px;font-size: 24px;}
    .html-step .row {padding-top: 0px;}
    .html-step .row .Nsub_title {padding-bottom: 30px;}
    .img04 {width: 90%;}


    .html-detail .right {width: 72%;left: -210px;}
}
@media screen and (max-width: 640px) {
    .mobile-none-640 {display: none;}
    .mobile-block-640 {display: block;}
    /*Top*/
    .html-v2-heading p {font-size: 20px;}
    .html-v2-heading h2 {font-size: 50px;}

    .html-md .cnt {width: 85%;}
    .html_grid_ {grid-template-rows: 360px 360px;}
}
@media (max-width: 575px) {
    .mobile-none-575 {display: none;}
    .mobile-block-575 {display: block;}
    /*Top*/
    .contain {margin-top: -270px;}
    .html-v2-heading p {font-size: 16px;}
    .html-head p {font-size: 22px;}
    .html-head h3 {font-size: 24px;padding: 20px;}
    .img04 {width: 90%;padding-top: 30px;}
    .html-md .cnt {height: 500px;}
    .html-md .img {height: 500px;background: url(../img/process/md_img.jpg) 24% 100% no-repeat;}

    .content_wrap .three .top_wrap {grid-template-columns: repeat(2, 1fr)}

    .html_container_ {padding: 10px;grid-template-rows: auto;}
    .html_grid_ {padding-top: 0px;grid-template-rows: 340px 340px;}
    .html_pro .content_content .display_num1 {width: 71%;}
    .html_pro .content_content .display_num1 .width_bg1 {width: 400px;}
    .html_pro .content_content .display_num2 {width: 71%;}
    .html_pro .content_content .display_num2 .width_bg2 {width: 400px;}
    .html_pro .content_content .display_grid .txt2 {font-size: 15px;}
    .html_pro .content_content .display_grid_under .txt {width: 138px;}
    .display_grid_under_q {margin-top: -20px;}

    .html-detail .right {left: -220px;}
    .html-detail .right .box-wrap {top: -410px;}
}
@media screen and (max-width:480px){
    .mobile-none-480 {display: none;}
    .mobile-block-480 {display: block;}
    /*Top*/
    .html-head p {font-size: 18px;}

    .html_grid_ {grid-template-rows: 310px 310px;}
    .html_container_ {padding: 1px;}
    .html_container_ .float2 .txt1 {font-size: 22px;}
    .html_container_ .float2 .txt2 {font-size: 16px;}
    .html_container_ .float2 .txt3 {font-size: 16px;}

    .html-md .cnt .inner {padding: 0 25px;}
    .html_pro .content_content .display_num1 .width_bg1 {width: 358px;}
    .html_pro .content_content .display_num2 .width_bg2 {width: 358px;}
    .html_pro .content_content .display_grid .txt1 {font-size: 15px;}
    .html_pro .content_content .display_grid .txt2 {font-size: 13px;}
    .html_pro .content_content .display_grid_under .txt {width: 124px;}
    .display_grid_under_q {margin-top: 0px;}
    .html-detail .right {left: -187px;width: 65%;margin-top: 470px;}
    .html-detail .left .txt-area {width: 106%;}

}
@media screen and (max-width:400px){
    .mobile-none-400 {display: none;}
    .mobile-block-400 {display: block;}
    /*Top*/
    .html-v2-heading .txt1 {font-size: 18px;}
    .html-v2-heading p {font-size: 14px;}
    .html-detail .left .txt-area {width: 92%;}

    .html-head h3 {padding: 0px;}
    .contain {margin-top: -390px;}
    .html-step .wrap {margin: 0px 0;}

    .html-detail .left .ico {width: 80px;}
    .html-detail .left .tit-area {padding: 0px 0 0px;margin-bottom: 20px;}
    .html-detail .left .txt-area {width: 70%;margin-left: 0px;}
    .html-detail .left .btn {margin-top: 22px;}
    .html-detail .right .box-wrap .box {margin-left: -20px;}
    .html-detail .right .box-wrap .box dd strong {font-size: 16px;}
    .html-detail .group .contain {margin-top: -262px;}

}
@media screen and (max-width:360px){
    .mobile-none-360 {display: none;}
    .mobile-block-360 {display: block;}
    /*Top*/
    .html-v2-heading .txt1 {font-size: 26px;}
    .html_container_ .float2 .txt3 {font-size: 14px;}
    .html-detail .left .txt-area {        width: 82%;}

    .html_grid_ {padding-top: 126px;}
    .html-step .wrap {margin-top: 136px;}
    .html-step .wraps {margin-top: 122px;}
}
@media screen and (max-width:320px){
    .html_container_ .float2 .txt2 {font-size: 15px;}
    .html_pro .content_content .display_num1 .width_bg1 {width: 320px;}
    .html_pro .content_content .display_grid .txt2 {font-size: 11px;}

    .html_pro .content_content .display_num2 .width_bg2 {width: 320px;}
    .html_pro .content_content .display_grid .txt3 {font-size: 16px;}
    .html_pro .content_content .display_grid_under .txt {width: 99px;}
    .html-detail .right .box-wrap {top: -466px;}
}
.html-detail .left .tit-area .txt1 {max-width:482px;font-size: 20px;line-height: 28px;font-weight: 300;}