@media screen and (min-width: 2560px) {

    *{font-size:24px;}
    html,body{font-size:24px;}
    .inner{width:2120px !important;max-width:2080px !important;}
    #header{height:250px !important;}
    .headerList{width: 800px !important;}
    .headerLtDetail a {width: 210px !important;height:45px !important;}
    footer{position:relative !important;bottom:inherit !important;}

    .home #contents {width: 2080px !important;}
    #mainVisual {height:300px !important;}
    #mainVisual .mainSlider {height:300px !important;}
    #mainVisual .mainSliderItem {height: 250px !important;background-size: auto 250px !important;}
    .topCont01List h2 {font-size:24px !important;}
    .topCont02Item dl dt {width: 480px !important;}
    #side {width:460px !important;}
    #side .siderColor ul li.sideBtn img {width: 100% !important;}
    div.pageTop {width:220px !important;}
    div.page_top a {height:48px !important;}

    #serviceList .svBtn {height: 120px !important;}
    div#main h1 a.sbt {font-size: 20px!important;padding: 4px !important;}
    #pageDtl table.l td {font-size:20px!important; max-width: 1400px!important;}
    #pageDtl table.l td span.date {font-size:20px!important;}
    #pageDtl table.l td a {font-size:20px!important;}

    .detailAbout img {width:550px!important;}
    .detailLogin {margin-top:0!important;}
    .detailLogin .chemistryBtn {width: 200px!important;height:50px!important;}
    .gbLeft a{font-size:1.5rem!important;}
    .gbRight p a{width:295px!important;height:80px!important;}
    .gbInput p {font-size:20px!important;}
    .gbInput p a {font-size:20px!important;}
    .gbButton span{width:300px!important;}
    .gbButton input{height:86px!important;}
    .gbLinks a{width:360px!important;height:86px!important;}
    .gbDl dl dt{width:320px!important;}
    .gbBottom h2{height: 80px!important;padding-left:63px!important;background-size:47px auto!important;}
    .detailtabletd1,.detailtabletd2,.detailtabletd3 {font-size:24px!important;}
    .footerMon1 {width:2120px !important;}
    .searchcarttabletd1 div {margin-top:10px!important;position:relative!important;}

    div.info_step_text {width: 1000px!important;}
    div.info_step_box img {width:40%!important;height:auto !important;}
    div.info_step02,div.info_step04 {height:auto !important;}

    h4.faq_h4_01, h4.faq_h4_02, h4.faq_h4_03, h4.faq_h4_04 {font-size:24px!important;height: 50px!important;}
    #main dt.faq_q_dt {height: 50px!important;}
    div.faq_q_num{font-size:24px!important;height: 50px!important;}
    div.faq_q_txt{font-size:24px!important;height: 50px!important;width: 1740px !important;}
    #main dl dd.faq_a_txt{width: 1740px !important;}

    .caseTitle {width:100%!important;height:250px!important;}

    #wrapper #breadcrumb + div {width: 1120px!important;}
}


@media screen and (max-width: 1040px) {
    header #header .headerLtDetail h3 {
        padding-right: 0 !important;
        font-size: 1.5rem;
    }
    header #header .inner {
        width: 100%;
    }

    .home #contents {
        width: 100%;
    }
    #contents {
        width: 100%;
    }
    #contents .inner {
        width: 100%;
    }
    #inner {
        padding: 0 10px;
    }

    .home #main {
        width: 100%;
    }
    #side {
        width: 100%;
    }
    #side .siderColor ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    #contents .aside {
        width: 100% !important;
    }
    #contents .aside .employMenu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    footer {
        position: relative;
        bottom: inherit;
    }
    footer #footer .inner {
        width: 100%;
    }
    footer #footer .footerItem {
        width: 50%;
    }

    footer .footerMon1 {
        width: 100% !important;
    }
    footer .footerMon1 .inner {
        width: 100% !important;
    }

    div.info_step_text {
        width: calc(100% - 362px) !important;
    }

    #breadcrumb {
        width: 100%;
        float: none !important;
    }
    div#main h1 {
        width: 90%;
    }

    #contents article {
        margin-right: 0;
    }
    #contents article .overview {
        padding: 0 10px;
    }

    #wrapper #breadcrumb + div {
        width: 100% !important;
    }
    #wrapper #breadcrumb + div .overview {
        padding: 0 10px;
    }
    #wrapper #breadcrumb + div .overview .cf:not(:first-of-type) {
        width: 100% !important;
    }
    #wrapper #breadcrumb + div .aside {
        width: 100% !important;
        padding-bottom: 100px;
    }
    #wrapper #breadcrumb + div .aside .employMenu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    #contents article .memberDtl {
        padding: 0 10px;
    }

    html #pageDtl div.sc {
        display: flex;
        flex-direction: column;
    }
    html #pageDtl div.sc div {
        margin: 10px 0;
    }
    html #pageDtl div.sc div:nth-of-type(2),
    html #pageDtl div.sc div:nth-of-type(4),
    html #pageDtl div.sc div:nth-of-type(6),
    html #pageDtl div.sc div:nth-of-type(8){
        order: 2;
    }

    #imsg {
        margin-left: 0 !important;
    }
    p.cfm {
        margin-left: 0!important;
        width: 100% !important;
        padding-left: 15px !important;
        box-sizing: border-box;
    }
    p.cfm > msg{
        width: 100% !important;
    }

    img {
        vertical-align: middle;
    }
    table.l {
        width: 100%;
    }
    table.l th:last-of-type,
    table.l td:last-of-type {
        width: 80%;
    }
    div.pagination:empty {
        display: none;
    }

    .searchcarttabletd1 div {
        position: relative !important;
        margin: 10px 0 0 !important;
    }

    #wrapper #breadcrumb + div {
        width: 100% !important;
        display: block;
        padding-top: 0;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 768px) {

    #gNavi .gNaviBox {
        padding-top: 5%;
    }

    html div.headerMess {
        display: block;
    }
    html div.headerMess .headerLeft {
        display: none;
    }

    header #header .detailBtn {
        margin: 10px 0 0 5px;
        width: fit-content;
        display: block;
    }

    header #header .detailLogin {
        float: right;
        margin-top: -37px !important;
    }

    div.headerItem>div:nth-child(2) {
        display: none;
    }
    .headerItem {
        flex-direction: column;
        align-items: self-start;
    }
    #headerIn>div.inner>div.headerItem>div.headerList:last-of-type {
        display: block;
        margin-top: 8pt;
        width: 100%;
    }

    #mainVisual .mainSliderItem {
        background-size: 100% auto !important;
    }

    .home #gNavi, #chemistry #gNavi {
        overflow-y: scroll;
    }
    .navPosition {
        position: relative;
        top: inherit !important;
    }
    .navBox .navBoxDe {
        flex-wrap: wrap;
    }
    .navBox ul {
        width: 50%;
        flex: 0 0 50%;
    }
    .navBox ul li a {
        font-size: 1.4rem;
    }
    .navBox ul li p {
        font-size: 1.2rem;
    }
    img {
        vertical-align: middle;
    }
    .cmnTbl th, .cmnTbl td, table th, table td:first-of-type {
        width: 10px !important;
    }
    input[type=button], input[type=reset], input[type=submit] {
        padding: 5px;
    }
    .searchcarttabletd1 div {
        position: relative !important;
        margin: 10px 0 0 !important;
    }
    .searchp {
        width: auto;
    }
    .searchp2 {
        width: auto;
    }
    .searchbox01 {
        width: 90%;
    }
    .searchbox02 {
        width: 90%;
    }
    .searchcarttable {
        width: 95%;
    }
    .searchbottombox {
        width: auto;
    }
    td.searchcarttabletd1[nowrap] > div {
        width: 90% !important;
    }
    .searchbox02 + div {
        width: 95% !important;
    }
    .detailh2-3 {
        width: 100%;
    }

    table.l {
        width: 100%;
    }
    table.l th:last-of-type,
    table.l td:last-of-type {
        width: 80%;
    }
    div.pagination:empty {
        display: none;
    }

    #contents #main.gbBottom>div {
        height: auto!important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    div.faq_q_txt {
        width: calc(100% - 91px);
    }
    #main dl dd.faq_a_txt {
        width: calc(100% - 20px);
        padding: 0 10px;
    }

    #wrapper #breadcrumb + div {
        width: 100% !important;
        display: block;
        padding-top: 0;
        box-sizing: border-box;
    }

    .gbButton input {
        padding: 5px 10px !important;
    }
}

@media screen and (max-width: 480px) {
    html #contents .inner {
        padding: 0 15px;
    }

    header #header .detailBtn {
        margin: 10px 0 0 5px;
        width: fit-content;
        display: block;
        float: left;
    }

    #mainVisual,
    #mainVisual .mainSlider,
    #mainVisual .mainSliderItem {
        height: 150px;
    }
    .slick-dots li {
        width: 8px;
        height: 8px;
    }
    #mainVisual .mainSliderItem {
        height: 120px !important;
    }

    .inner, img {
        width: auto;
        vertical-align: middle;
    }
    .cmnTbl th, .cmnTbl td, table th, table td {
        width: 40px;
    }
    input[type="search"] {
        width: 90%;
    }

    .srvs-search #frmss .sstxt {
        border: 1px solid #ccc;
        background: none;
        background-color: #fff;
    }
    .srvs-search #frmss .sssub {
        margin-top: 10px;
        display: block;
        position: relative !important;
    }

    #serviceList .svBtn {
        box-sizing: border-box;
        width: 100% !important;
        margin-right: 0;
    }
    #serviceList .svBtn > ul {
        width: 100% !important;
    }

    #appform .boxRegArea {
        box-sizing: border-box;
    }

    #contents #main.gbBottom>div {
        height: auto!important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .gbBottom table.searchcarttable>tbody>tr>td {
        padding: 10px;
    }

    html .searchcarttableth1,
    html .searchcarttableth2 {
        width: 100% !important;
    }
    .gbBottom table.searchcarttable>tbody>tr.searchcarttabletr2>td:first-of-type {
        width: 100% !important;
    }
    .gbWrap .searchcarttable:nth-of-type(1) tr,
    .gbWrap .searchcarttable:nth-of-type(1) td,
    .gbWrap .searchcarttable:nth-of-type(1) th,
    .gbWrap .searchcarttable:nth-of-type(1) .searchcarttableth1 {
        width: auto!important;
    }

    #contents #main.gbBottom>div > a:last-of-type .m {
        height: 80px;
    }

    div.info_step_box {
        float: none !important;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap;
    }

    div.info_step_text {
        width: 100% !important;
        margin-left: 20px !important;
    }

    #main dt.faq_q_dt {
        height: 70px;
    }
    div.faq_q_num {
        width: 70px;
        height: 69px;
        font-size: 14px;
        line-height: 69px;
        text-align: center;
        text-indent: inherit;
    }
    div.faq_q_txt {
        display: flex;
        align-items: center;
        width: calc(100% - 81px);
        height: 69px;
        font-size: 14px;
        padding-left: 10px;
        text-indent: 0;
    }

    #main dl dd.faq_a_txt {
        width: calc(100% - 20px);
        padding: 0 10px;
    }

    #casestudyList li {
        width: 50% !important;
        height: auto;
    }
    .caseExp {
        height: auto;
    }
    .caseTitle {
        width: auto  !important;
        height: auto  !important;
        -webkit-line-clamp: inherit !important;
    }
    #cases .comImg {
        float: none !important;
        margin: 0 auto 20px !important;
        text-align: center;
    }

    #contents article:has(#employList) {
        margin-right: 0;
    }
    #employList li {
        min-height: 215px;
    }
    div:has(.employDtlTtl) {width: 100% !important;}
    div:has(.employDtlTtl) article {width: 100% !important;}
    div:has(.employDtlTtl) .employDtlTtl {
        width: 100%;
        display: inline-block;
        padding: 30px 20px;
        box-sizing: border-box;
    }
    div:has(.employDtlTtl) .employDtlTtl span { position: relative;
        top: inherit;
        right: inherit;
        display: block;
    }
    div:has(.employDtlTtl) .overview .cf {width: 100% !important;}
    div:has(.employDtlTtl) .aside {float: left !important;}

    html div.sc {
        display: flex;
        flex-direction: column;
    }
    html div.sc div {
        margin: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }
    html div.sc div:nth-of-type(2),
    html div.sc div:nth-of-type(4),
    html div.sc div:nth-of-type(6),
    html div.sc div:nth-of-type(8){
        order: 2;
    }

    .cmnTbl th, .cmnTbl td {
        white-space: break-spaces;
        word-break: break-word;
    }

    #pageDtl div.btnSet .bt {
        display: block;
        font-size: 13px;
    }

    .boxRegArea {
        width: 90%;
    }

    html .searchbox02 + div {
        width: 90% !important;
    }

    header #header .detailLogin {
        float: right;
        margin-top: 10px !important;
    }

    table.l {
        width: 100%;
    }
    table.l th:last-of-type,
    table.l td:last-of-type {
        width: 80%;
    }
    div.pagination:empty {
        display: none;
    }

    .gbBottom table tr:nth-child(n+4) {
        display: table-row;
    }

    #contents #main .gbWrap > p {
        width: 100% !important;
    }
    #contents #main .gbWrap > p a {
        display: block;
        width: 90%;
        margin: 10px 0!important;
    }

    table.list01 tr:nth-child(n+4) {
        display: table-row;
    }

    #wrapper #breadcrumb + div {
        width: 100% !important;
        display: block;
        padding-top: 0;
        box-sizing: border-box;
    }
    .employDtl {
        min-height: 215px;
    }

    #pageDtl #div1 iframe,
    #pageDtl #div3 iframe{
        width: 100% !important;
    }

    .sndBtn {
        display: flex;
        gap: 10px;
    }

    footer #footer .footerItem {
        width: 100%;
    }
    .footerItem h2 {
        padding-left: 15px;
        padding-right: 15px;
    }
    .footerList ul li {
        padding: 0 15px;
    }

    div.pageTop {
        float: none;
        margin-right: 15px;
        margin-left: auto;
    }
}