@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
/* font-family: 'Nanum Gothic', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
/* font-family: 'Noto Serif KR', serif; */

@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');

/* reset */
* {font-family: 'Noto Sans KR', sans-serif;}
a {color: #333;}
button {border: none; background-color: unset;}
ol, ul, li {list-style: none; padding: 0; margin: 0;}

/* body {min-width:375px;} */

.m_menu {display:none;}


#logo > a{
	font-size: 32px;
	font-weight: bold
}



/* ----- common ----- */
/* ----- common ----- */
/* ----- common ----- */
.sub-container {position:relative;width:100%;max-width:1000px;min-height: calc(100vh - 509px); margin: 0 auto;padding: 50px 0 100px;}
.sub-container-title {font-size:30px;margin: 0 0 20px;}

.contents-sub-txt {display: flex;align-items: flex-start;}
.contents-sub-txt img {margin: 8px 10px 0 0;}
.contents-sub-title {flex:1;font-size: 20px;color: #3d3d3d;word-break: break-all;}
.contents-sub-title-small {font-size: 15px;margin: 0 5px 0 0;}

.contents-copy-wrap {display: flex;flex-wrap:wrap;justify-content: space-between;}
.contents-copy-txt {flex:1;}
.contents-copy-title {font-size:50px;color: #183069;;word-break: keep-all;}
.contents-copy-sub {font-size: 35px;font-weight:100;color: #183069;word-break: keep-all;}
.contents-copy-text {font-size:14px;font-weight:300;color:#6e6e6e;margin: 20px 0;}
.contents-copy-text-title {font-size:20px;}

.contents-copy-img {display: flex;align-items: center;justify-content: center;margin:0 0 0 50px;}




/* ----- sub-visual ----- */
/* ----- sub-visual ----- */
/* ----- sub-visual ----- */
.sub-visual-wrap {position: relative; z-index: 998;}
.sub-visual-img {display:none;overflow: hidden;display: none;}


/* .sub-visual-sus-wrap .sub-visual-sus-ty1,
.sub-visual-sus-wrap .sub-visual-sus-ty2,
.sub-visual-sus-wrap .sub-visual-sus-ty3,
.sub-visual-sus-wrap .sub-visual-susty4 {display:none} */

.sub-visual-img-inner {position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;/*padding:80px 0 0;*/ padding: 96px 0 0}
.sub-visual-img-inner .sub-visual-txt {position:absolute;text-align: center;}
.sub-visual-img-inner .sub-visual-sub {color:#fff;font-size:15px;font-weight:300;}
.sub-visual-img-inner .sub-visual-title {color:#fff;font-size:40px;}

.sub-visual-btn {background: #3c3c3c;}
.sub-visual-btn .sub-visual-btn-wrap {display:flex;width:100%;max-width:1000px;height: 60px;margin: 0 auto;padding: 0 10px;}
.sub-visual-btn .sub-visual-btn-home {display:flex;align-items: center;justify-content: center;overflow:hidden;border-left: 1px solid #505050;border-right: 1px solid #505050;}
.sub-visual-btn .sub-visual-btn-home img {height: 100%;}

.sub-visual-list-box {position:relative;margin:0 0 0 -1px;}
.sub-visual-list {position:relative;height: 100%;display: none;}
.sub-visual-main-category .sub-visual-list {display: block;}
.sub-visual-list-button {
    position:relative;z-index:1;display:flex;align-items:center;width:200px;height:100%;
    font-size: 14px;color: #b4b4b4;padding: 0 30px 0 20px;line-height: 1.2em;
    background: url('./image/sub-visual-button.png') no-repeat right center #3c3c3c;
    border-left: 1px solid #505050;border-right: 1px solid #505050;
    cursor: pointer;
}
.sub-visual-list-button:hover {color: #fff;text-decoration: underline;}
.sub-visual-list ul {position:absolute; top: 0;left: 0;display:none;width: 100%;padding:60px 0 0;background:#646464;border-bottom:2px solid #505050;}
.sub-visual-list ul.on {display: block;}
.sub-visual-list ul li{border-top: 1px solid #6e6e6e;}
.sub-visual-list ul li a {display:flex;align-items: center;height:50px;font-size:14px;color:#b4b4b4;padding: 0 20px;line-height: 1.2em;}
.sub-visual-list ul li a:hover {color: #fff;background: #ef7c3d;text-decoration: underline;}


.sub-visual-sus-wrap .sub-visual-img {display:none}

.sub-visual-company-wrap .sub-visual-company {display:block;}
.sub-visual-manufacturing-wrap .sub-visual-manufacturing {display:block;}
.sub-visual-carbon-wrap .sub-visual-carbon {display:block;}
.sub-visual-sus-wrap-ty1 .sub-visual-sus-ty1 {display:block;}
.sub-visual-sus-wrap-ty2 .sub-visual-sus-ty2 {display:block;}
.sub-visual-sus-wrap-ty3 .sub-visual-sus-ty3 {display:block;}
.sub-visual-sus-wrap-ty4 .sub-visual-sus-ty4 {display:block;}

.sub-visual-nonferrous-wrap .sub-visual-nonferrous {display:block;}
.sub-visual-square-wrap .sub-visual-square {display:block;}
.sub-visual-customer-wrap .sub-visual-customer {display:block;}
.sub-visual-cert-wrap .sub-visual-cert{display: block;}
.sub-visual-recruit-wrap .sub-visual-recruit{display: block;}

.sub-visual-pr-wrap .sub-visual-pr {display:block;}

.sub-visual-sus-wrap-ty1 .sub-visual-sus,
.sub-visual-sus-wrap-ty2 .sub-visual-sus,
.sub-visual-sus-wrap-ty3 .sub-visual-sus,
.sub-visual-sus-wrap-ty4 .sub-visual-sus { 
    display:block
}












/* ----- bottom ----- */
/* ----- bottom ----- */
/* ----- bottom ----- */
.bottom-button-box {border-top: 1px solid #c8c8c8;border-bottom: 1px solid #c8c8c8;}
.bottom-button-box-wrap {display: flex;justify-content: space-between;width:100%;max-width:1200px;height: 50px;margin: 0 auto;border-left: 1px solid #c8c8c8;}
.bottom-button-box-wrap-inner {display: flex;flex-wrap:wrap;}
.bottom-button {display: flex;align-items: center;justify-content: center;width: 140px;border-right: 1px solid #c8c8c8;}

.bottom-contents {background: #e6e6e6;padding:25px 0;}
.bottom-contents-wrap {width:100%;max-width:1200px;margin:0 auto;padding:2px 0;}

.bottom-contents-txt {display:inline-flex;align-items:center;font-size: 12px;font-weight:300;color:#6e6e6e;}
.bottom-contents-txt:not(:last-child)::after {content:"";display:block;width:1px; height:10px; background: #c8c8c8;margin: 0 15px;}
.bottom-contents-txt span {font-size: 12px;font-weight:400;color:#3c3c3c;margin:0 5px 0 0;}












/* ----- @media (max-width:1399px) ------ */
/* ----- @media (max-width:1399px) ------ */
/* ----- @media (max-width:1399px) ------ */
@media (max-width:1399px) {
    /* ----- common ----- */
    /* ----- common ----- */
    .sub-container-title {font-size:25px;}

    .contents-copy-title {font-size:45px;}
    .contents-copy-sub {font-size: 30px;}



    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    .sub-visual-img-inner {padding:75px 0 0;}
    .sub-visual-img-inner .sub-visual-sub {font-size:14px;}
    .sub-visual-img-inner .sub-visual-title {font-size: 36px;}

    .sub-visual-btn .sub-visual-btn-home {overflow:hidden;}
    .sub-visual-btn .sub-visual-btn-wrap {height:50px;}

    .sub-visual-list-button, .sub-visual-list ul li a {font-size: 12px;padding: 0 30px 0 15px;} 
    .sub-visual-list ul {padding: 50px 0 0;}
    .sub-visual-list ul li a {height: 45px;}
    


    /* ----- bottom ----- */
    /* ----- bottom ----- */
    .bottom-button-box-wrap, .bottom-contents-wrap {max-width:1000px;}






}
/* ----- @media (max-width:1199px) ------ */
/* ----- @media (max-width:1199px) ------ */
/* ----- @media (max-width:1199px) ------ */
@media (max-width:1199px) {

    /* ----- common ----- */
    /* ----- common ----- */
    /* ----- common ----- */
    .sub-container {max-width:900px;}

    .contents-sub-txt img {margin: 6px 10px 0 0;}
    .contents-sub-title {font-size: 18px;}

    .contents-copy-img {margin: 0 0 0 30px;}
    .contents-copy-img img {width:350px;}




    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    .sub-visual-img-inner {padding:75px 0 0;}
    .sub-visual-btn .sub-visual-btn-wrap {max-width:900px;}



    /* ----- bottom ----- */
    /* ----- bottom ----- */
    .bottom-button-box-wrap {max-width:900px;}


}
/* ----- @media (max-width:991px) ------ */
/* ----- @media (max-width:991px) ------ */
/* ----- @media (max-width:991px) ------ */
@media (max-width:991px) {
    .m_menu {position:absolute;left:20px;display:block;}

    /* ----- common ----- */
    /* ----- common ----- */
    /* ----- common ----- */
    .sub-container {padding: 50px 40px;}
    .sub-container-title {text-align: center;font-size:20px;}
    
    .contents-copy-txt {display:flex;flex-wrap:wrap;align-items: center;justify-content:center;width:100%;}
    .contents-copy-title {margin:0 5px;font-size:40px;text-align: center;}
    .contents-copy-sub {margin:0 5px;font-size: 25px;text-align: center;}
    .contents-copy-text {width:100%;margin: 10px 0;text-align: center;}

    .contents-sub-title {font-size: 16px;}
    .contents-sub-txt img {margin: 2px 10px 0 0;}

    .contents-copy-img {position: absolute;right: 0;top: 0;}
    .contents-copy-img img {opacity: 0.3;}




    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    .sub-visual-img-inner .sub-visual-sub {font-size:13px;}
    .sub-visual-img-inner .sub-visual-title {font-size: 32px;}

    .sub-visual-btn .sub-visual-btn-wrap {max-width:100%;padding: 0;}
    .sub-visual-btn .sub-visual-btn-home {border-left: none;}




    .toggle-menu {display:inline-block;width:50px;height:50px;cursor: pointer;outline: none;padding: 0;pointer-events: initial;position: relative;vertical-align: middle;z-index: 1110;border:none;}
    .toggle-menu span {
        background-color: #000;display: block;height: 2px;left: calc(50% - 13px);position: absolute;top: calc(50% - 1px);
        transform-origin: 50% 50%;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;width: 26px;
    }
    .toggle-menu span:before, .toggle-menu span:after {
        background-color: #000;content: "";display: block;height: 2px;position: absolute;transform-origin: 50% 50%;
        transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;width: 26px;
    }
    .toggle-menu span:before {top: 7px;}
    .toggle-menu span:after {top: -7px;}

    .toggle-menu.active span {background-color: transparent;transition: background 0.2s ease-out;box-shadow:none;}
    .toggle-menu.active span:before, .toggle-menu.active span:after {background-color: #000;transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;}
    .toggle-menu.active span:before {top: 0;transform: rotate3d(0, 0, 1, -45deg);}
    .toggle-menu.active span:after {top: 0;transform: rotate3d(0, 0, 1, 45deg);}
      


    /* ----- bottom ----- */
    /* ----- bottom ----- */
    .bottom-button-box-wrap {justify-content: center;border:none;}
    .bottom-button {border:none;width:auto;}
    .bottom-button:not(:last-child)::after {content:"";display:block;width:1px;height:20px;background:#c8c8c8;margin:0 40px;}

    .bottom-contents {display:flex;flex-wrap:wrap;justify-content: center;}
    .bottom-contents-wrap {width:auto;max-width:100%;margin:0;padding:2px 10px;}
    .bottom-contents-wrap:last-child {width: 100%;display:flex;justify-content: center;margin:30px 0 0;}

    .bottom-contents-txt {display:flex;flex-wrap: wrap;}
    .bottom-contents-txt:not(:last-child)::after {content:none;}
    .bottom-contents-txt span {width:100%;margin:0 0 5px;}
    
 


}
/* ----- @media (max-width:767px) ------ */
/* ----- @media (max-width:767px) ------ */
/* ----- @media (max-width:767px) ------ */
@media (max-width:767px) {
    .m_menu {left:10px;}

    /* ----- common ----- */
    /* ----- common ----- */
    .contents-sub-title,.contents-sub-title-small {font-size: 14px;}
    .sub-container-title {font-size:16px;}



    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    .sub-visual-img-inner {padding: 60px 0 0;}

    .sub-visual-img-inner .sub-visual-sub {font-size:12px;}
    .sub-visual-img-inner .sub-visual-title {font-size: 25px;}


}
/* ----- @media (max-width:575px) ------ */
/* ----- @media (max-width:575px) ------ */
/* ----- @media (max-width:575px) ------ */
@media (max-width:575px) {
    /* ----- common ----- */
    /* ----- common ----- */
    .sub-container {padding: 50px 20px;}

    .contents-copy-title {font-size:25px;width:100%;}
    .contents-copy-sub {font-size: 15px;width:100%;}

    .contents-copy-img img {width:250px;}

    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    /* ----- sub-visual ----- */
    .sub-visual-list-button {width: 150px;}

    .sub-visual-btn .sub-visual-btn-home {width:50px;overflow: hidden;}
    .sub-visual-list-button, .sub-visual-list ul li a {padding: 0 10px;font-size: 11px;} 

    .sub-visual-btn .sub-visual-btn-wrap {display:none;}


    /* ----- bottom ----- */
    /* ----- bottom ----- */
    .bottom-contents {display:block;}
    .bottom-contents-wrap {width:100%;margin:0 0 10px;padding: 2px 15px;}
    .bottom-contents-wrap:last-child .bottom-contents-txt {font-size: 10px;}



 
}