@charset "UTF-8";

/* **************************************** *
* response max 1800px
* **************************************** */
@media all and (max-width:1800px)
{

    /* common */

    /* layout */

    /* component */

    /* contents */

    /* main */

    .core-visual{flex:6}
    .core-service{flex:4}

    /* bbs */

    /* form */

    /* etc */

}


/* **************************************** *
* response max 1600px
* **************************************** */
@media all and (max-width:1600px)
{

    /* common */

    /* layout */

    /* component */

    /* contents */

    /* main */
    /* main */
    .core-visual{flex:5.5}
    .core-service{flex:4.5}

    /* bbs */

    /* form */

    /* etc */
}


/* **************************************** *
* response max 1400px
* **************************************** */
@media all and (max-width:1400px)
{
    html{font-size:9px}

    /* common */

    /* layout */
    #ply-header .header-inner{width:100%; padding:0 2rem}

    #gnb .gnb-inner{width:100%}

    .svisual .svisual-container{width:100%; padding:0 2rem}
    .breadclumb{padding:0 2rem}

    #ply-container .page-content{width:100%; padding:6rem 2rem 6rem}

    #ply-footer .footer-inner{width:100%; padding:3.5rem 2rem 4.5rem}

    .sitemap-layer .sitemap-wrap{width:100%; padding:8rem 2rem}
    .sitemap-layer .sitemap-close{right:2rem}

    /* component */
    h2.stit02.line:before,
    h3.stit03.line:before{display:none}

    .info-box.large{padding:2.4rem}

    .traffic-live{margin:-6rem -2rem 0; padding:12rem 3rem 4rem; border-radius:0}

    .card-square-base{margin-left:-2rem}
    .card-square-base .card-item{margin-left:2rem; padding:2rem}

    .card-square-step .step-container.col3 .step-align{width:50%}
    .card-square-step .step-container .step-align .step-item:after{display:none}
    .card-square-step .step-container{margin-left:-2rem}
    .card-square-step .step-item{margin-left:2rem}

    /* contents */

    /* main */
    .msec-traffic{padding:8rem 2rem 3.4rem}
    .msec-traffic .traffic-container{width:100%}

    .msec-customer{width:100%; padding:0 2rem}

    .msec-travel{width:100%; padding:0 2rem}

    /* bbs */

    /* form */
    .board-basic-view .view-head .head-meta .meta-list{gap:1.4rem}
    /* etc */

}


/* **************************************** *
* response max 1280px / tablet
* **************************************** */
@media all and (max-width:1280px)
{

    /* common */

    /* layout */
    #ply-header{height:8rem}
    #ply-header .header-inner{height:8rem}
    #ply-header #logo a{width:14rem; height:3.7rem; background-size:13rem 3.7rem}

    #gnb{display:none}

    .allgnb-handle{right:1.6rem; top:50%; margin-top:-2.5rem; margin-right:0}
    .allgnb-handle .sitemap-open{display:none}
    .allgnb-handle .allgnb-open{display:flex}

    #ply-mcontainer{padding-top:8rem}
    #ply-container{padding-top:8rem}

    #ply-footer .footer-link{position:relative; right:auto; top:auto; margin-top:2rem}
    #ply-footer .footer-link .link-item{flex:1}

    .svisual{height:34rem}
    .svisual .svisual-container{height:34rem}
    .svisual .page-tit .current-tit{font-size:4.6rem}

    .sitemap-layer .sitemap-depth{flex-wrap:wrap}
    .sitemap-layer .sitemap-depth .depth-group{flex:none; width:calc(33.333333% - 2rem)}

    /* component */
    h2.stit02{line-height:1.3em; font-size:4rem}
    h3.stit03{line-height:1.3em; font-size:2.4rem}
    h4.stit04{line-height:1.3em; font-size:2rem}
    h5.stit05{line-height:1.3em; font-size:1.7rem}

    .info-box{padding:2rem}
    .info-box.icon > [class^="ri-"]{top:1.8rem}

    .intro-kind{width:100%}

    .tab-line > ul{flex-direction:column}
    .tab-line > ul > li{width:50%}
    .tab-line > ul > li:hover a:before,
    .tab-line > ul > li.active a:before{width:100%; margin-left:-50%}
    .tab-line > ul > li a:before{height:0.2rem}

    /* contents */
    .ply-location{flex-direction:column}
    .ply-location .location-l{order:2}
    .ply-location .location-r{order:1}
    .location-transport .transport-case:before{min-width:5rem; max-width:5rem}
    .location-transport .transport-case .case-info > .case-tit{margin-bottom:2.8rem; padding-top:1rem}
    .location-transport .transport-case .case-info .case-group .case-tit{margin-left:-5rem}
    .location-transport .transport-case .case-info .case-detail{margin-left:-5rem}
    .ply-location .location-r .map-view{height:42rem}

    /* main */
    .msec-core{flex-direction:column}
    .visual-slogan-container{align-items:center; left:0; right:0; margin-left:0}

    .core-service{padding:3.5rem 0;}
    .service-quick .quick-item:nth-child(1),
    .service-quick .quick-item:nth-child(2),
    .service-quick .quick-item:nth-child(3){border-top:none}

    .service-cs{justify-content:center; gap:1.8rem}
    .service-cs .cs-tel{font-size:3rem}
    .service-cs .cs-tit{padding:0 4rem}
    .service-cs .cs-info{padding:0 3rem; padding-left:6rem}

    .customer-notice{gap:3rem}
    .customer-notice .notice-latest-head{align-items:center; padding:2.5rem 2rem 2.5rem}
    .customer-notice .notice-latest-head .notice-tit,
    .customer-notice .notice-latest-head .notice-cont{text-align:center}

    .customer-guide{gap:3rem}

    .msec-travel .travel-container{gap:4rem}
    .msec-travel .travel-item{width:calc(33.33333% - 2rem)}

    /* bbs */
    .board-file .file-box{width:100%}
    .board-link .link-box{width:100%}

    /* form */
    .wform-cmm .wform-list{gap:3rem}
    .wform-cmm .wform-list > li.multiple .col-box{flex-direction:column; gap:1rem}
    .wform-cmm .wform-list > li.multiple .col-box{flex-direction:column; gap:1rem}
    .wform-cmm .wform-tit{min-height:5rem}

    .wform-cmm .wform-list > li.multiple{gap:3rem}
    .wform-cmm .wform-list > li.multiple{flex-direction:column}

    .wform-cmm .wform-cont.form-fit .txtinput-group,
    .wform-cmm .wform-cont.form-fit .txtinput-cmm,
    .wform-cmm .wform-cont.form-fit .date-range,
    .wform-cmm .wform-cont.form-fit .select-cmm{flex:1}

    .wform-cmm .wform-cont.form-fit .fileupload-container{width:100% !important}

    .wform-cmm .wform-cont.form-fit .txtinput-cmm.wid80{width:auto !important}
    .wform-cmm .wform-cont.form-fit .date-range .txtinput-cmm{width:auto !important}

    .wform-cmm .wform-cont.form-fit .col-row{display:flex; flex-direction:column; flex:1}
    .wform-cmm .wform-cont.form-fit .col-row .row{display:flex; align-items:center}

    .wform-cmm .align-top{align-items:normal !important}

    /* etc */

}


/* **************************************** *
* response max 1000px
* **************************************** */
@media all and (max-width:1000px)
{
    html{font-size:8px}

    /* common */

    /* layout */

    /* component */
    .con-table.response1000 .table-overlay{display:flex}

    .card-square-base.col3 .card-align{width:50%}

    .stit-area{flex-wrap:wrap; gap:2rem}
    .stit-area .stit-r{flex:1; margin-left:0}
    .stit-area .search-middle{flex:1}
    .stit-area .search-middle .select-cmm{flex:1; width:100% !important}

    /* contents */
    .traffic-live{padding:14rem 3rem 4rem}
    .traffic-live .traffic-guide{flex-direction:column; gap:2rem; margin-top:10rem}
    .traffic-live .traffic-guide .guide-legend .legend-item{flex:1}
    .traffic-live .traffic-guide .guide-info{width:fit-content; margin-left:auto}

    .traffic-live .traffic-flow .flow-road.road-section01{flex:6.5}
    .traffic-live .traffic-flow .flow-road.road-section02{flex:3.5}

    .traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-l{top:-12rem}
    .traffic-live .traffic-flow .flow-road .road-container .road-bound.bound-r{bottom:-8rem}

    /* main */

    /* bbs */

    /* form */

    /* etc */

}


/* **************************************** *
* response max 800px / mobile
* **************************************** */
@media all and (max-width:800px)
{

    /* common */

    /* layout */
    .hd_pops{top:9rem !important; left:1rem !important; right:1rem !important}
    .hd_pops_con{width:100% !important; height:auto !important; font-size:0}
    .hd_pops_con img{width:100% !important; height:auto !important}

    #ply-footer .footer-inner{flex-direction:column}
    #ply-footer .footer-l{min-width:auto; max-width:none}
    #ply-footer .footer-r{margin-top:2rem}

    #ply-footer .local-cs{flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:1.5rem}
    #ply-footer .local-cs .cs-tit{width:100%}
    #ply-footer .local-cs .cs-tel{margin-top:0}
    #ply-footer .local-cs .cs-info{margin-top:0; position:relative; top:-0.5rem}

    #ply-footer .local-fnb a span{font-size:1.6rem}

    #ply-container .page-content{padding:4rem 2rem 4rem}

    .sitemap-layer .sitemap-depth .depth-group{flex:none; width:calc(50% - 2rem)}

    /* component */
    .lay-hr{flex-direction:column; gap:4rem}

    .stit-area .stit-l{width:100%}

    .intro-kind .intro-dsption{padding:4rem 2rem}
    .intro-kind .intro-dsption .dsption-info .info li{display:inline}

    .search-box .search-form{flex:1}
    .search-box .search-form .form-row{flex-wrap:wrap}
    .search-box .search-form .form-row .select-cmm{flex:1 auto}
    .search-box .search-form .form-row .select-cmm.wid140{width:100% !important}
    .search-box .search-form .form-row .txtinput-cmm{flex:1 auto}
    .search-box .search-form .form-row .txtinput-cmm.wid400{width:100% !important}

    .card-square-step .step-container.col3 .step-align{width:100%}
    .card-square-step .step-container{margin-left:-1rem; margin-top:-1rem}
    .card-square-step .step-item{margin-left:1rem; margin-top:1rem}

    .faq-acrdion .acrdion-box .acrdion-tit{padding-right:2rem}
    .faq-acrdion .acrdion-box .acrdion-tit:before{margin-right:2rem}
    .faq-acrdion .acrdion-box .acrdion-tit:after{display:none}
    .faq-acrdion .acrdion-box .acrdion-cont{padding-left:3rem}
    .faq-acrdion .acrdion-box .acrdion-cont:before{display:none}

    .tab-line > ul > li a > span{font-size:1.8rem}

    /* contents */
    .paytolls-search{padding:3.5rem}
    .paytolls-search .search-top{flex-direction:column; gap:1rem}
    .paytolls-search .search-top .top-tit .tit{font-size:2.2rem}
    .paytolls-search .search-container{width:100%}
    .paytolls-search .search-form .form-input input{font-size:2.4rem}
    .paytolls-search .search-form .form-input input::-webkit-input-placeholder{font-size:2.4rem; letter-spacing:-0.02rem}

    .paytolls-checkout{flex-direction:column}
    .paytolls-checkout .checkout-item{flex-wrap:wrap; justify-content:flex-end; width:100%; min-height:4.4rem; padding:0; border-left:none}
    .paytolls-checkout .checkout-item .item-num{min-width:14rem}
    .paytolls-checkout .checkout-item .item-fnl{width:14rem}
    .paytolls-checkout .checkout-item .item-tit{margin-right:0}
    .paytolls-checkout .checkout-item .item-confirm{width:100%; margin-left:0; margin-top:1.5rem}
    .paytolls-checkout .checkout-item .item-confirm .btn{width:100%; height:5.8rem; border-radius:20rem}

    .traffic-live{margin:-4rem -2rem 0}

    /* main */
    .visual-slogan-container{padding-top:20rem}
    .core-visual .visual-swiper{height:42rem}
    .core-visual .visual-swiper .visual-box{height:42rem}
    .visual-slogan-container .visual-slogan-s strong{font-size:2.8rem; font-weight:normal}
    .visual-slogan-container .visual-slogan-m strong{font-size:5.8rem}

    .service-cs{flex-direction:column; gap:1.8rem; margin:0; padding:2rem; border:1px solid transparent}
    .service-cs .cs-l{width:100%}
    .service-cs .cs-tit{flex:1; justify-content:center; padding:0 2rem}
    .service-cs .cs-info{flex:1; justify-content:center; padding:0 2rem; padding-left:5rem}
    .service-cs .cs-tel{font-size:3.4rem}

    .msec-traffic{padding:12rem 2rem 4rem}
    .msec-traffic .traffic-flow .flow-road.road-section01{flex:6.5}
    .msec-traffic .traffic-flow .flow-road.road-section02{flex:3.5}
    .msec-traffic .traffic-flow .flow-road .road-container .road-bound.bound-l{top:-8rem}
    .msec-traffic .traffic-flow .flow-road .road-container .road-bound.bound-r{bottom:-8rem}

    .msec-traffic .traffic-guide{flex-direction:column; gap:2rem; margin-top:10rem}
    .msec-traffic .traffic-guide .guide-legend .legend-item{flex:1; min-width:auto; padding:0 1rem}
    .msec-traffic .traffic-guide .guide-info{margin-left:auto; width:fit-content}

    .msec-customer{margin:7rem auto}
    .customer-notice{flex-direction:column; gap:1rem}
    .customer-notice .notice-l{min-width:auto; max-width:none}
    .customer-notice .notice-latest-head{min-height:22rem; max-height:22rem}

    .customer-notice .notice-latest-list{gap:1rem; border-top:none; border-bottom:none}
    .customer-notice .notice-latest-list .notice-item{background-color:#f2f2f2; padding:2.5rem 2rem; border-radius:2.2rem; border-bottom:none}
    .customer-notice .notice-latest-list .item-group{flex-direction:column; align-items:flex-start; gap:0.6rem}
    .customer-notice .notice-latest-list .item-group:last-child{display:none}

    .customer-guide{flex-direction:column; gap:1rem; margin-top:4rem}
    .customer-guide .guide-l{order:2; min-width:auto; max-width:none}
    .customer-guide .guide-quick{height:auto; min-height:11rem}
    .customer-guide .guide-quick .quick-item{flex:1; flex-direction:column; gap:1rem}
    .customer-guide .guide-r{order:1}
    
    .guide-swiper-container .guide-swiper .guide-box:before{font-size:3.2rem}
    .guide-swiper-container .guide-swiper .guide-box span{font-size:1.7rem}
    .guide-faq .faq-more{display:none}
    .guide-faq .faq-swiper-controll{min-width:5.4rem; max-width:5.4rem; margin-left:0}

    .msec-travel{margin:0 auto 7rem}
    .msec-travel .travel-container{flex-wrap:wrap}
    .msec-travel .travel-item{width:calc(50% - 2rem)}
    .msec-travel .travel-item.travel-tur{width:100%}
    .msec-travel .travel-item:nth-child(2){top:0}
    .msec-travel .travel-item:nth-child(2):hover{top:1.5rem}

    /* bbs */
    .board-basic-list.response .list-head{display:none}
    .board-basic-list.response .list-body{border-top:2px solid var(--ply-color-light-gray-90)}
    .board-basic-list.response .list-body li{flex-direction:column; padding:1.5rem 0; border-bottom:1px solid var(--ply-color-light-gray-10)}
    .board-basic-list.response .list-body li > div{justify-content:flex-start; width:100% !important; min-height:auto; padding:0.2rem 0}
    .board-basic-list.response .basic-tit{display:flex}
    .board-basic-list.response .basic-cont{display:inline-flex; align-items:center; flex-wrap:wrap; gap:0.6rem; padding-left:1rem}
    .board-basic-list.response .basic-cont .cont-link,
    .board-basic-list.response .basic-cont .cont-txt{text-align:left; -webkit-line-clamp:3}
    .board-basic-list.response .basic-cont .cont-link + .badge-cmm,
    .board-basic-list.response .basic-cont .cont-txt + .badge-cmm{display:none}
    .board-basic-list.response .basic-cont .icon-comment{margin-left:0}
    

    .board-basic-list.response.board-notice .basic-tit{min-width:10rem}
    .board-basic-list.response.board-notice div.col1{padding:0}
    .board-basic-list.response.board-notice div.col1 .basic-tit{min-width:auto; border:0; padding:1rem 0}
    .board-basic-list.response.board-notice div.col2 .basic-tit{display:none}
    .board-basic-list.response.board-notice div.col2 .basic-cont{margin:0.5rem 0 1rem; padding-left:0}

    .board-basic-list.response.board-feedback .basic-tit{min-width:10rem}
    .board-basic-list.response.board-feedback div.col1{padding:0}
    .board-basic-list.response.board-feedback div.col1 .basic-tit{min-width:auto; border:0; padding:1rem 0}
    .board-basic-list.response.board-feedback div.col2 .basic-tit{display:none}
    .board-basic-list.response.board-feedback div.col2 .basic-cont{margin:0.5rem 0 1rem; padding-left:0}

    .board-basic-list.response.board-resources .basic-tit{min-width:10rem}
    .board-basic-list.response.board-resources div.col1{padding:0}
    .board-basic-list.response.board-resources div.col1 .basic-tit{min-width:auto; border:0; padding:1rem 0}
    .board-basic-list.response.board-resources div.col2 .basic-tit{display:none}
    .board-basic-list.response.board-resources div.col2 .basic-cont{margin:0.5rem 0 1rem; padding-left:0}

    .board-basic-list.response.board-paymentrequest .basic-tit{min-width:10rem}
    .board-basic-list.response.board-paymentrequest div.col1{padding:0}
    .board-basic-list.response.board-paymentrequest div.col1 .basic-tit{min-width:auto; border:0; padding:1rem 0}
    .board-basic-list.response.board-paymentrequest div.col2 .basic-tit{display:none}
    .board-basic-list.response.board-paymentrequest div.col2 .basic-cont{margin:0.5rem 0 1rem; padding-left:0}


    .board-basic-list.response .basic-cont .cont-link{font-size:1.9rem; line-height:1.3em; padding:0}

    .board-basic-list.response.board-paymenthistory .basic-tit{min-width:12rem; max-width:12rem}

    .board-basic-list.board-realtraffic div.col1{width:34%}
    .board-basic-list.board-realtraffic div.col2{width:23%}
    .board-basic-list.board-realtraffic div.col3{width:23%}
    .board-basic-list.board-realtraffic div.col4{width:20%}
    .board-basic-list.board-realtraffic .list-body li > div{padding:1.2rem 0.5rem}
    .board-basic-list.board-realtraffic .badge-cmm.large{min-width:auto !important; padding:0 0.5rem; width:100%}

    .board-basic-view .view-head .head-tit{flex-direction:column; align-items:flex-start; gap:0.8rem}
    .board-basic-view .view-head .head-tit .badge-cmm + .tit{margin-left:0}
    .board-basic-view .view-head .head-tit .tit{line-height:3.8rem; font-size:2.8rem}
    .board-basic-view .view-content{min-height:auto; padding:3rem 0}

    .board-basic-view .view-head .head-meta .meta-list li{flex:0 0 calc(50% - 0.7rem) !important}
    .board-basic-view .view-head .head-meta .meta-list li:after{display:none}

    .board-file .file-box{flex-wrap:wrap; gap:0.6rem}
    .board-file .file-box .file-l{width:100%}
    .board-file .file-box .file-r{width:100%; margin-left:0}

    #faq_wrap li h3{padding:1.2rem 2rem 1.2rem 2rem}

    .fileupload-cmm .fileupload-container.wid400{width:100% !important}

    .fileupload-cmm .fileupload-file .file-box{flex-wrap:wrap; gap:0.6rem}
    .fileupload-cmm .fileupload-file .file-box .file-l{width:100%}
    .fileupload-cmm .fileupload-file .file-box .file-r{width:100%; margin-left:0}

    .pg_wrap .pg .pg_page.pg_start,
    .pg_wrap .pg .pg_page.pg_end{display:none}
    

    /* form */

    /* etc */

}


/* **************************************** *
* response max 600px
* **************************************** */
@media all and (max-width:600px)
{
    html{font-size:8px}

    /* common */

    /* layout */
    .svisual .page-tit .current-tit{font-size:4rem}

    #ply-footer .local-info .info-item{flex-direction:column; align-items:flex-start; gap:1rem}
    #ply-footer .local-fnb{flex-direction:column; gap:1rem}

    .breadclumb ul > li{display:none}
    .breadclumb ul > li:last-child{display:inline-flex}

    .login-wrap{width:100%}

    /* component */
    .card-square-base.col1 .card-align,
    .card-square-base.col2 .card-align,
    .card-square-base.col3 .card-align,
    .card-square-base.col4 .card-align,
    .card-square-base.col5 .card-align{width:100%}

    .card-square-base .card-align.last-fit{width:100% !important}

    .card-square-base.col1.final2 .card-align,
    .card-square-base.col2.final2 .card-align,
    .card-square-base.col3.final2 .card-align,
    .card-square-base.col4.final2 .card-align,
    .card-square-base.col5.final2 .card-align{width:50%}

    .card-square-base.take .card-item{min-height:16rem}

    .tab-line > ul > li{width:100%}
    .tab-line > ul > li:before{background-color:transparent}

    .popup-window > .head .pop-info{font-size:1.4rem}

    .stit-area .search-middle.excel-down .date-range{flex:1}
    .stit-area .search-middle.excel-down .date-range .txtinput-cmm{width:100%}
    .stit-area .search-middle.excel-down > form{flex-wrap:wrap; gap:0.6rem}
    .stit-area .search-middle.excel-down > form .btn:last-child{width:100%}


    /* contents */
    .traffic-live .traffic-flow .flow-turn .turn-direction{flex-direction:column; bottom:-6.4rem}
    .traffic-live .traffic-flow .flow-turn .turn-direction.direction-r i{order:2}
    .traffic-live .traffic-flow .flow-turn .turn-direction.direction-r span{order:1}
    .traffic-live .traffic-guide .guide-legend{flex-wrap:wrap}
    .traffic-live .traffic-guide .guide-legend .legend-item{flex:none; width:50%}

    .organization-map .map-inner{width:100%}
    .organization-map .level2-group:before{left:0; right:0}
    

    /* main */
    .visual-slogan-container .visual-slogan-s strong{font-size:2.6rem}
    .visual-slogan-container .visual-slogan-m{gap:1rem}
    .visual-slogan-container .visual-slogan-m strong{font-size:5.2rem}
    .visual-slogan-container .visual-slogan-m strong:last-child{font-size:3.6rem}

    .msec-traffic .traffic-guide .guide-legend{flex-wrap:wrap}
    .msec-traffic .traffic-guide .guide-legend .legend-item{flex:none; width:50%}
    .msec-traffic .traffic-guide .guide-info{min-height:4.2rem; padding:0.8rem 1.8rem}

    .customer-guide .guide-faq .faq-tit{display:none}

    .msec-travel .travel-container{gap:6rem}
    .msec-travel .travel-item{height:20rem}
    .msec-travel .travel-item.travel-rtf,
    .msec-travel .travel-item.travel-lct{width:100%}
    .msec-travel .travel-item .travel-tit:before{width:22rem; height:9rem}
    .msec-travel .travel-item .travel-tit .tit{font-size:1.9rem}

    /* bbs */

    /* form */

    /* etc */

}


/* **************************************** *
* response max 400px
* **************************************** */
@media all and (max-width:400px)
{

    /* common */

    /* layout */
    .svisual .page-tit .current-tit{font-size:3.6rem}

    /* component */

    /* contents */
    .paytolls-checkout .checkout-item{justify-content:flex-start}
    .paytolls-checkout .checkout-item .item-num{flex:1; min-width:auto; margin-left:auto}
    .paytolls-checkout .checkout-item .item-fnl{flex:1; width:auto; margin-left:auto}

    .traffic-live .traffic-guide .guide-info:before{display:none}
    .traffic-live .traffic-guide .guide-info{justify-content:center; margin-left:0; width:100%; text-align:center}
    .traffic-live .road-cctv.cctv04{margin-left:-6rem}

    /* main */
    .visual-slogan-container .visual-slogan-m strong{font-size:5rem}
    .visual-slogan-container .visual-slogan-m strong:last-child{font-size:3.3rem}

    .service-quick .quick-item .item-box .item-tit{flex-direction:column}

    .msec-traffic .traffic-guide .guide-info:before{display:none}
    .msec-traffic .traffic-guide .guide-info{justify-content:center; margin-left:0; width:100%; text-align:center}

    .service-cs{padding:2rem 0.6rem}
    .service-cs .cs-tit{flex:1 auto}
    .service-cs .cs-info{flex:1 auto} 

    /* bbs */

    /* form */

    /* etc */

}