@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



body {font-family:'Pretendard-Regular' !important; font-weight: 300;}

*{font-family: 'Pretendard-Regular',Noto Sans KR,Nanum Gothic, sans-serif;box-sizing:border-box;letter-spacing:-0.03em !important;}


.txt {word-break: break-word !important;}



html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,button,input
{
	word-break:break-word !important;
}



a{word-break:break-word !important;}

/************************************************************************
* HEADER *
************************************************************************/

    @media screen and (max-width:1400px) {
    header nav{margin-left:5%;}
    header .depth1>li>a{;padding:0 40px;}
    }
    @media screen and (max-width:1280px) {
    header .depth1>li>a{padding:0 30px;}
    }
        
     


        
/************************************************************************
* main_visual *
************************************************************************/

    .main-visual-item .main-visual-txt-con .main-visual-txt1 {line-height: 110%;}
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b br.hide1, .main-visual-item .main-visual-txt-con .main-visual-txt1 b br.hide2{display: none;}

    @media all and (max-width:1600px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:70px;}
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b br.hide1{display: block;}
    }
    @media all and (max-width:960px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:60px;}
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b br.hide2{display: block;}
    }
    @media all and (max-width:767px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:55px;}
    }
    @media all and (max-width:640px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:48px;}
    }
    @media all and (max-width:540px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:42px;}
    }
    @media all and (max-width:460px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:36px;}
    }
    @media all and (max-width:400px) {
    .main-visual-item .main-visual-txt-con .main-visual-txt1 b{font-size:30px;}
    }


        
/************************************************************************
* sub_visual *
************************************************************************/
.svisWrap h1{font-family: 'Ubuntu', sans-serif; letter-spacing: -0.04em !important;}




/************************************************************************
* sub tab menu *
************************************************************************/
.subPtabmenu li{width:calc(100%/3.5);margin:0 10px;transition:all 0.4s ease;}

.subPtabmenu ul.menu-num3 li{width:calc(85%/3 - 20px);margin:0 5px; margin-bottom: 10px;}
.subPtabmenu ul.menu-num5 li{width:calc(100%/5 - 20px);margin:0 5px;}


    @media screen and (max-width:1280px){
    .subPtabmenu ul.menu-num3 li{width:calc(90%/3 - 20px) !important;}
    }
    @media screen and (max-width:960px){
    .subPtabmenu ul.menu-num3 li{width:calc(100%/3 - 20px) !important;}
    }
    @media screen and (max-width:767px){
    .subPtabmenu ul.menu-num3 li{width:calc(100%/2 - 20px) !important;margin:0 3px; margin-bottom: 5px;}
    .subPtabmenu li a{font-size:17px !important;}
    }
    @media screen and (max-width:640px){
    .subPtabmenu li a{font-size:16px !important;}
    }
    @media screen and (max-width:500px){
    .subPtabmenu li a{font-size:15px !important;}
    }
    @media screen and (max-width:460px){
    .subPtabmenu li a{font-size:14px !important;}
    }
    @media screen and (max-width:400px){
    .subPtabmenu ul.menu-num3 li{width:calc(100%/2 - 10px) !important;}
    .subPtabmenu li a{font-size:13px !important;}
    }
    @media screen and (max-width:360px){
    .subPtabmenu ul.menu-num3 li{width:calc(87%/1 - 0px) !important;margin:0; margin-bottom: 5px;}
    }









/******#sec-m1 About WoongJin  ******/

    @media screen and (max-width:640px){
        #sec-m1 .aboutBox li {height: 210px;}
    }
    @media screen and (max-width:540px){
        #sec-m1 .aboutBox li {height: 200px;}
    }
    @media screen and (max-width:460px){
        #sec-m1 .aboutBox li {height: 180px;}
    }
    @media screen and (max-width:400px){
        #sec-m1 .aboutBox li:nth-child(4) {height: 220px;}
        #sec-m1 .aboutBox li:nth-child(4) {background: url(/img/sec1_i4.png) no-repeat center center;background-size: 150% !important;}
        #sec-m1 .aboutBox li:nth-child(4) a:hover .over {margin-top: -130px;}
    }
    @media screen and (max-width:360px){
        #sec-m1 .aboutBox li {height: 160px;}
        #sec-m1 .aboutBox li:nth-child(4) {height: 160px;}
        #sec-m1 .aboutBox li:nth-child(4) a:hover .over {margin-top: -100px;}
    }



/******************************* sec-3 Q&A, 부품리스트 *******************************/

#sec-m3 .s3Box .txtBox{padding-left: 65%;}

    @media screen and (max-width:1280px) {  
        #sec-m3 .s3Box .txtBox{padding-left: 55%;}   
    }
    @media screen and (max-width:1100px) {  
        #sec-m3 .s3Box .txtBox{padding-left: 50%;}   
    }
    @media screen and (max-width:640px) { 
        #sec-m3 .s3Box .txtBox{padding-left: 40%;}  
    }
    @media screen and (max-width:540px) { 
        #sec-m3 .s3Box .txtBox{padding-left: 35%;}  
    }
    @media screen and (max-width:460px) { 
        #sec-m3 .s3Box .txtBox{padding-left: 25%;}  
    }
    @media screen and (max-width:360px) { 
        #sec-m3 .s3Box .txtBox{padding-left: 10%;}  
    }





/************************************************************************
* FOOTER *
************************************************************************/

    @media screen and (max-width:960px){
        footer .asBox .siteMapWrap{display: none !important;}
    }
    @media screen and (max-width:767px){
        footer .lsBox .copy{width: 100%;}
        footer .lsBox .snsBox{width: 100%; position: absolute;bottom:5%;right:2%;}
    }











/********************************* 1. 회사소개 *********************************/

/*** === 1-1 회사개요 === ***/
.Company.com1 {padding-bottom: 200px;}
.Company.com1 h4 {width: 85%; font-size: 46px !important;  word-break: break-word !important; transition:all 0.4s ease;}
.Company.com1 h4 b{color: #0e4fc5 !important; word-break: break-word !important;}


    @media screen and (max-width:1500px){
        .Company.com1 h4 {font-size: 40px !important;}
    }
    @media screen and (max-width:1280px){
        .Company.com1 h4 {font-size: 36px !important;}
    }
    @media screen and (max-width:640px){
        .Company.com1 h4, .Company.com1 h4 b{font-size: 30px !important;}
    }
    @media screen and (max-width:460px){
        .Company.com1 h4, .Company.com1 h4 b{font-size: 28px !important;}
    }



/*** === 1-2 Overview === ***/
.Company.com2 .overview div .type20{color: #555; font-family:'Pretendard-ExtraLight' !important;}
.Company.com2 .overview div .type22, .Company.com2 .overview div .type24 {color: #000 !important;}
.Company.com2 .overview div .type22 br.hide{display: block;}



/*** === 1-2 Overview2 === ***/
.Company.com3 .countWrap>.item .countBox .unit{bottom:34%;right: 15%;}



/*** === 1-3 Vision === ***/
.Company.com4 .txtBox h3 {letter-spacing: -0.03em !important;}
.Company.com4 .txtBox h3 br.hide, .Company.com4 .txtBox h3 br.hide2 {display: none;}

.Company.com4 {padding: 200px 0 260px 0; background: #f9f9f9; position: relative; transition:all 0.4s ease;}

.Company.com4 .disF div .type18{width: 92%; margin: 0 auto;}


    @media screen and (max-width:1400px){
        .Company.com4 .disF div .type18{width: 82%; line-height: 110%;}
    }





/*** === 1-5 Brand Story === ***/

/* LogoType - 로고칼라 */
.Company.com5 .brand3 .colorBox .type19 { padding-left: 20px;}
.Company.com5 .brand3 .colorBox .type19.con {height: 150px; line-height: 120%;}
.Company.com5 .brand3 .colorBox .type19.con br.hide{display: block;}
.Company.com5 .brand3 .colorBox .type20.CMYK {font-weight: 200 !important;transition:all 0.4s ease;}



/*** === 1-5 오시는길 === ***/
.LocationWrap {padding: 0 !important;}

.Location{overflow: hidden;}

p.point{margin:0 0 0 10px;width:15px; height:15px;display:inline-block; background-color:#0e4fc5;border-radius:50%;}









/** 사업분야 > Global Network === ***/

    @media screen and (max-width:360px){
    .Overview.com3 .photoBox .txtBox{padding:25px 20px;}
    }



















/*** === 1-5. 오시는 길 === ***/
.Location .overBox .over span .type21.addr{font-family:'Pretendard-ExtraLight'; height: 100px;}





/********************************* 2. 제품소개 *********************************/
/*** === 2-2 제품 View === ***/
/* 제품사진 QR코드*/
.Product .viewBox .imgBox .QRBox {padding-bottom: 15px;}
.Product .viewBox .imgBox .QRBox font{line-height: 110%; font-family: "Montserrat" !important; margin-top: 7px;transition:all 0.4s ease;}

    @media screen and (max-width:767px){
        .Product .viewBox .imgBox .QRBox {padding-bottom: 10px;}
        .Product .viewBox .imgBox .QRBox font{font-size: 12px !important;margin-top: 7px;}
    }
    @media screen and (max-width:640px){
        .Product .viewBox .imgBox .QRBox font{font-size: 11px !important;}
    }
    @media screen and (max-width:360px){
        .Product .viewBox .imgBox .QRBox {padding-bottom: 7px;}
    }





    
/*** === 3-3 고객지원 > Contact Us === ***/

/** Contact Us === ***/
.c3con3 .tBox .item .txtBox{aspect-ratio:16 /12;}