@import url('sub.css'); 
.stit_area { text-align:center; /* margin-bottom:50px; */ padding: 100px 0 50px; }
.stit_area h4 {font-size:2.778rem; font-weight:700;; color:var(--black); line-height:130%;}
.fs40 {font-size:2rem; line-height:135%; font-weight:700; color:var(--black);}
.fs28 {font-size:1.556rem;; line-height:107%; font-weight:700; color:var(--black);}
.fs20 {font-size:1.111rem; font-weight: 400; line-height: 160%; color:var(--black);}
.fs18 {font-size:1rem; font-weight:400; line-height:177%; }


/** 인사말 **/
#greeting {}
#greeting .cont_area {display:flex;}
#greeting .cont_area .text_cont {padding-right:170px; width:calc(60% - 170px);}
#greeting .cont_area .text_cont h5 {margin-bottom:16px;}
#greeting .cont_area .text_cont p.regular { margin-bottom:30px;}
#greeting .cont_area .text_cont ul:first-of-type {}
#greeting .cont_area .text_cont ul:first-of-type li {margin-bottom:20px; color:rgba(34,34,34,.7);}

#greeting .cont_area .text_cont ul:last-of-type {display:flex; align-items: center; justify-content: flex-end;}
#greeting .cont_area .text_cont ul:last-of-type li:first-of-type {font-weight:500; line-height:150%; padding-right:12px;}
#greeting .cont_area .text_cont ul:last-of-type li:last-of-type {}
#greeting .cont_area .text_cont ul:last-of-type img {max-width:100%; height:auto; margin-bottom: 15px;}


#greeting .cont_area .img_cont {width:40%;}
#greeting .cont_area .img_cont img {max-width:100%; width:100%; height:auto;}
#greeting .cont_area .img_cont .mo {display:none;}
/** 인사말 **/


/** 연혁 **/
#history {background-image:url('/company/img/history_bg.jpg'); background-repeat:no-repeat;  background-position:center; background-size:cover; overflow:hidden;}
#history .stit_area h4 {color:var(--white);}

#history .history_list{padding:85px 0 0; position: relative; max-width:1350px; width:100%;}
#history .history_list:before{content:''; display:block; width:200%; height:1px; background:var(--white); opacity: 0.2; position:absolute;  top:170px;     left: -50%;}
#history .history_list .slick-list {overflow:visible;}
#history .history_list .his_in{ display: flex; padding-right:20px; padding-bottom:20px;}
 #history .history_list .his_in.slick-slide {opacity:0.8;}
#history .history_list .his_in.slick-active {opacity:1;}

#history .history_list .his_in:last-of-type {padding-right:0;}
#history .history_list .his_in > div{box-sizing:border-box; width:100%;}
#history .history_list .his_in .his_txt{text-align:left;}
#history .history_list .his_in .his_txt h4{position: relative; font-size:2.222rem;  color:var(--main); font-weight:700; line-height:85%; padding-bottom:90px;}
#history .history_list .his_in .his_txt h4 .dot{display:inline-block; width:13px; height:13px; border:3px solid var(--main); background:none; border-radius:50%; box-sizing:border-box; position: absolute; left: 0; top:79px;}
#history .history_list .his_in .his_txt ul{margin: 12px 0 0;}
#history .history_list .his_in .his_txt ul li{padding:0 0 10px 0; box-sizing:border-box; font-size:18px; line-height:155%; position: relative; color:rgba(255,255,255,.8); }
#history .history_list .his_in .his_txt ul li:last-child{padding-bottom: 0 !important;}
#history .history_list .his_in .his_txt ul li strong{font-weight: 700; color:var(--white); line-height: 170%; display:block;}
#history .history_list .his_in .his_img{}
#history .history_list .his_in .his_img img{max-width: 100%; height:auto !important;}

#history .user .history_list .his_in .his_txt strong{position:Relative; margin:0 0 5px;} 

#history .history_list .slick-arrow {position:absolute; top:0; margin-top:-105px; font-size:0; background:none; border:none; color:rgba(255,255,255,.4); width:40px; height:40px; cursor:pointer; transition:all .3s linear}
#history .history_list .slick-arrow:before {display:block; font-family:var(--icon); font-size:30px; }
#history .history_list .slick-prev {left:0;}
#history .history_list .slick-prev:before {content:'\e5e0';}

#history .history_list .slick-next {right:0;}
#history .history_list .slick-next:before {content:'\e5e1'}

#history .history_list .slick-arrow:hover {color:var(--white);}



/** 연혁 **/


/** 고객사 **/
#customer {background:var(--grayBg)}
.customer_list {display: grid;  grid-template-columns: repeat(4, 1fr);  gap:30px;}
.customer_list dl {padding:0 20px; background: var(--white); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);}
.customer_list dl .checkbox{display:inline-block; position: absolute; left:5px; top:5px; z-index:2;}
.customer_list dl a{display: block; transition:all .3s linear;}
.customer_list dl dt {position:relative; overflow: hidden; aspect-ratio: 2 / 1.1;}
.customer_list dl dt img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.customer_list dl dd {padding:20px 0 20px; box-sizing:border-box; text-align:center; border-top:1px solid var(--border);}
.customer_list dl dd  h4 {color: var(--black); font-size: 1rem; font-weight: 500; line-height:130%;}
.customer_list dl dd .cate {color:var(--main); font-size:1rem; font-weight:500; line-height:170%}
/** 고객사 **/



/** 찾아오시는 길 **/
#location {position:relative;}
#location .root_daum_roughmap {width:100% !important;}
#location .root_daum_roughmap .border1 {border:none !important; background-color: unset;}
#location .root_daum_roughmap .border2 {border:none !important; background-color: unset;}
#location .root_daum_roughmap .border3 {border:none !important; background-color: unset;}
#location .root_daum_roughmap .border4 {border:none !important; background-color: unset;}

#location .loca_map {width:100%; height: 520px;}
#location .loca_map iframe{height:520px;}
#location .loca_map .root_daum_roughmap {height:520px;}
#location .loca_map .root_daum_roughmap .wrap_map {height:520px;}

#location .location_cont {display:flex; justify-content:space-between; margin-top:50px;}
#location .location_cont .location_info {display:flex; flex-direction:column;}
#location .location_cont .location_info li {margin-right:30px;width:100%; display:flex;}
#location .location_cont .location_info li p {position:relative; padding-left:25px; margin-right:20px; color:rgba(34,34,34,.6);}
#location .location_cont .location_info li p::before {position:absolute; display:block;font-family:var(--icon); font-variation-settings :'FILL' 0; font-size:1.111rem; color:var(--basic); left:0; top:1px; }

#location .location_cont .location_info li p.tel::before { content:'\e0b0'; }
#location .location_cont .location_info li p.fax::before{ content:'\e8ad'; }
#location .location_cont .location_info li p.email::before{ content:'\e158'; }


#location .location_cont .loca_btn{display:flex; box-sizing:border-box; }
#location .location_cont .loca_btn li{margin-left: 5px; overflow: hidden;}
#location .location_cont .loca_btn li:first-child{margin-left: 0;}
#location .location_cont .loca_btn li a{display:block; text-align:left; font-size:0.889rem; color:var(--white); font-weight:400; width:200px; height:70px; line-height:68px; padding:0 30px; box-sizing:border-box; position: relative; border:1px solid; overflow: hidden; transition:all .3s linear;}
#location .location_cont .loca_btn li a em{position:relative; z-index:2; color:inherit; line-height:inherit; letter-spacing:inherit; font-style:normal; transition:all .3s linear; display:inline-block;}
#location .location_cont .loca_btn li a svg{width:13px; height:24px; position: absolute; right:30px; top:50%; margin-top:-13px; z-index: 5;}
#location .location_cont .loca_btn li.naver_btn a svg {width:16px; height:16px; right: 30px; margin-top: -8px;}
#location .location_cont .loca_btn li.google_btn a svg {width:22px; height:22px; right: 30px; margin-top: -10px;}
#location .location_cont .loca_btn li a path{transition: all .3s linear;}

#location .location_cont .loca_btn li a::before{content: '';display: block;width: 0;height: 100%; position: absolute; right: 0; top: 0; transition: all .3s linear; background: var(--white);}
#location .location_cont .loca_btn li a:hover::before{width: 100%;}

#location .location_cont .loca_btn li.naver_btn a{background:#10D265; border-color:#10D265; overflow: hidden;}
#location .location_cont .loca_btn li.naver_btn a:hover{color:#10D265; overflow: hidden;}
#location .location_cont .loca_btn li.naver_btn a:hover svg path {fill:#10D265; }
#location .location_cont .loca_btn li.kakao_btn a{background:#FAE100; color:#371C1D; border-color:#FAE100; overflow: hidden;}
#location .location_cont .loca_btn li.google_btn a{background:var(--black); border-color:var(--black); overflow: hidden;}
#location .location_cont .loca_btn li.google_btn a:hover{color:var(--black); overflow: hidden;}
#location .location_cont .loca_btn li.print_btn a{font-size:0; width: 70px; background:var(--main); border-color:var(--main); overflow: hidden; padding: 0 20px;}

#location .location_cont .loca_btn li.print_btn a em:before {content:'\e8ad'; color:var(--white); font-size:30px; font-family:var(--icon); font-weight:400;transition:all .3s linear; }
#location .location_cont .loca_btn li.print_btn a:hover em:before{ color:var(--main); z-index:3; position:relative}

#location .location_cont .loca_btn li.print_btn a::after{transform: scale(0); overflow: hidden;}
#location .location_cont .loca_btn li.print_btn a:hover path{fill:var(--main);}
#location .location_cont .loca_btn li.print_btn a:hover path.bb{fill:var(--white);}




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

#greeting .cont_area .text_cont ul:first-of-type li br {display:none;}

}


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



}

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




/** 인사말 **/
#greeting .cont_area .text_cont {padding-right:80px; width:calc(60% - 80px);}
#greeting .cont_area .text_cont h5 br {display:none}
#greeting .cont_area .text_cont p br {display:none}
#greeting .cont_area .text_cont ul:first-of-type li br {display:none}
/** 인사말 **/




/** 연혁 **/
#history .history_list{padding:75px 0 0;}
#history .history_list:before{top:160px;}
#history .history_list .his_in .his_txt h4{font-size:2.21rem;  }
/* #history .history_list .his_in .his_txt h4 .dot{width:13px; height:13px; top:80px;} */
#history .history_list .his_in .his_txt ul{margin: 12px 0 0;}
#history .history_list .his_in .his_txt ul li{padding:0 0 8px 0; box-sizing:border-box; font-size:17px; line-height:155%; }
#history .history_list .his_in .his_txt ul li:last-child{padding-bottom: 0 !important;}
#history .history_list .his_in .his_txt ul li strong{line-height: 160%; }
/** 연혁 **/




/** 찾아오시는 길 **/
#location .loca_map { height: 480px;}
#location .loca_map iframe{height:480px;}
#location .loca_map .root_daum_roughmap {height:480px;}
#location .loca_map .root_daum_roughmap .wrap_map {height:480px;}

#location .location_cont { margin-top:40px; position:relative}
#location .location_cont .location_info li {margin-right:30px;}
#location .location_cont .location_info li p {padding-left:22px; margin-right:20px; }
#location .location_cont .location_info li p::before { font-size:1.111rem;}

#location .location_cont .loca_btn {position:absolute; top:-123px; right:60px; z-index:5; }
#location .location_cont .loca_btn li{margin-left: 5px; overflow: hidden;}
#location .location_cont .loca_btn li a{font-size:0.889rem; width:190px; height:60px; line-height:58px; padding:0 30px; }
#location .location_cont .loca_btn li a svg{width:13px; height:24px; right:30px; margin-top:-13px; }
#location .location_cont .loca_btn li.naver_btn a svg {width:16px; height:16px; right: 30px; margin-top: -8px;}
#location .location_cont .loca_btn li.google_btn a svg {width:20px; height:20px; right: 30px; margin-top: -10px;}


#location .location_cont .loca_btn li.print_btn a{width: 60px; padding: 0 15px;}

#location .location_cont .loca_btn li.print_btn a svg{width:20px; height:20px; margin-left: -10px; margin-top: -11px;}



.fs40 {font-size:2.2rem; }
.fs28 {font-size:1.556rem; }
.fs20 {font-size:1.111rem;
.fs18 {font-size:1rem;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

.stit_area { /* margin-bottom:40px; */ padding:80px 0 40px;}
.stit_area h4 {font-size:2.4rem;}



/** 인사말 **/
#greeting {}
#greeting .cont_area {display:flex; flex-wrap:wrap; flex-direction: column-reverse;}
#greeting .cont_area .text_cont {padding-right:0; width:100%; }
#greeting .cont_area .text_cont h5 {margin-bottom:15px;}
#greeting .cont_area .text_cont p.regular { margin-bottom:20px;}
#greeting .cont_area .text_cont ul:first-of-type li {margin-bottom:15px; }

#greeting .cont_area .text_cont ul:last-of-type img {width:60px; margin-bottom: 15px;}


#greeting .cont_area .img_cont {width:100%; margin:0 auto; margin-bottom:30px;}
#greeting .cont_area .img_cont img {max-width:100%; width:100%; height:auto;}
#greeting .cont_area .img_cont .mo {display:block;}
#greeting .cont_area .img_cont .pc {display:none;}
/** 인사말 **/



/** 연혁 **/
#history .history_list{padding:35px 0 0; }
#history .history_list:before {top: 100px;}
#history .history_list .his_in {}
#history .history_list .his_in .his_txt {}
#history .history_list .his_in .his_txt h4{font-size:2rem;   }
#history .history_list .his_in .his_txt h4 .dot{width:13px; height:13px; top: 59px;}
#history .history_list .his_in .his_txt ul{}
#history .history_list .his_in .his_txt ul li{padding:0 0 8px 0; box-sizing:border-box; font-size:15px; line-height:155%; }
#history .history_list .his_in .his_txt ul li:last-child{padding-bottom: 0 !important;}
#history .history_list .his_in .his_txt ul li strong{line-height: 160%; }



#history .history_list .slick-arrow {margin-top:-80px; width:30px; height:30px; }
#history .history_list .slick-arrow:before { font-size:25px; }
/** 연혁 **/


/*********** List *************/
.customer_list {display: grid;  grid-template-columns: repeat(3, 1fr);  gap:20px 15px;}
.customer_list dl {padding:0 20px; background: var(--white); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);}
.customer_list dl .checkbox{display:inline-block; position: absolute; left:5px; top:5px; z-index:2;}
.customer_list dl a{display: block; transition:all .3s linear;}
.customer_list dl dt {position:relative; overflow: hidden; aspect-ratio: 2 / 1.1;}
.customer_list dl dt img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.customer_list dl:hover dt img{transform:scale(1.1);}
.customer_list dl dd {padding:14px 0 14px; box-sizing:border-box; text-align:center; border-top:1px solid var(--border);}
.customer_list dl dd  h4 {color: var(--black); font-size: 1.111rem; font-weight: 500; line-height:150%;}
.customer_list dl dd .cate {color:var(--main); font-size:1rem; font-weight:500; line-height:170%}



/** 찾아오시는 길 **/
#location .loca_map { height: 400px;}
#location .loca_map iframe{height:400px;}
#location .loca_map .root_daum_roughmap {height:400px;}
#location .loca_map .root_daum_roughmap .wrap_map {height:400px;}

#location .location_cont { margin-top:30px; }
#location .location_cont .location_info li {margin-right:20px;}
#location .location_cont .location_info li p {padding-left:20px; margin-right:14px; }
#location .location_cont .location_info li p::before { font-size:1.11rem;}

#location .location_cont .loca_btn {top: -104px; right:60px;  }
#location .location_cont .loca_btn li a{font-size:0.88rem; width:160px; height:50px; line-height:48px; padding:0 20px; }
#location .location_cont .loca_btn li a svg{width:10px; height:18px; right:20px; margin-top:-10px; }
#location .location_cont .loca_btn li.naver_btn a svg {width:12px; height:12px; right: 20px; margin-top: -6px;}
#location .location_cont .loca_btn li.google_btn a svg {width:18px; height:18px; right: 20px; margin-top: -8px;}

#location .location_cont .loca_btn li.print_btn a{width: 50px; padding: 0 12px;}

#location .location_cont .loca_btn li.print_btn a svg{width:18px; height:18px; margin-left: -8px; margin-top: -10px;}
#location .location_cont .loca_btn li.print_btn a em:before {font-size:24px; }


.fs40 {font-size:2rem; }
.fs28 {font-size:1.5rem; }
.fs20 {font-size:1.105rem;}
.fs18 {font-size:1rem;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.stit_area { /* margin-bottom:30px; */ padding:60px 0 30px;}
.stit_area h4 {font-size:2rem;}

/** 인사말 **/
#greeting .cont_area .text_cont {}
#greeting .cont_area .text_cont h5 {margin-bottom:12px;}
#greeting .cont_area .text_cont p.regular { margin-bottom:16px;}
#greeting .cont_area .text_cont ul:first-of-type li {margin-bottom:11px; }
#greeting .cont_area .text_cont ul:last-of-type {flex-direction: column; justify-content: flex-end;align-items: flex-end}
#greeting .cont_area .text_cont ul:last-of-type li:first-of-type{padding:0 0 5px;}

#greeting .cont_area .text_cont ul:last-of-type img {width:50px; margin-bottom: 15px;}


#greeting .cont_area .img_cont { margin:0 auto; margin-bottom:20px;}
#greeting .cont_area .img_cont img {max-width:100%; width:100%; height:auto;}
/** 인사말 **/


/** 연혁 **/

/** 연혁 **/
#history .history_list{padding:35px 0 0; }
#history .history_list:before {top: 80px;}
#history .history_list .his_in {padding-right:10px; padding-left:0;}
#history .history_list .his_in .his_txt {}
#history .history_list .his_in .his_txt h4{font-size:2rem; padding-bottom: 40px; }
#history .history_list .his_in .his_txt h4 .dot{width:13px; height:13px; top: 39px;}
#history .history_list .his_in .his_txt ul{}
#history .history_list .his_in .his_txt ul li{padding:0 0 10px 0; box-sizing:border-box; font-size:15px; line-height:155%; }
#history .history_list .his_in .his_txt ul li:last-child{padding-bottom: 0 !important;}
#history .history_list .his_in .his_txt ul li strong{line-height: 160%; }



#history .history_list .slick-arrow {margin-top:-62px; width:20px; height:20px; }
#history .history_list .slick-arrow:before { font-size:22px; }
/** 연혁 **/


/*********** List *************/
.customer_list {display: grid;  grid-template-columns: repeat(2, 1fr);  gap:10px ;}
.customer_list dl {padding:0 15px; background: var(--white); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);}
.customer_list dl .checkbox{display:inline-block; position: absolute; left:5px; top:5px; z-index:2;}
.customer_list dl a{display: block; transition:all .3s linear;}
.customer_list dl dd {padding:10px 0 10px; box-sizing:border-box; text-align:center; border-top:1px solid var(--border);}
.customer_list dl dd  h4 {color: var(--black); font-size: 1rem; font-weight: 500; line-height:150%;}
.customer_list dl dd .cate {color:var(--main); font-size:0.889rem; font-weight:500; line-height:160%}




/** 찾아오시는 길 **/
#location .loca_map { height: 350px;}
#location .loca_map iframe{height:350px;}
#location .loca_map .root_daum_roughmap {height:350px;}
#location .loca_map .root_daum_roughmap .wrap_map {height:350px;}

#location .location_cont { margin-top:20px; }
#location .location_cont .location_info li {flex-wrap:wrap;}
#location .location_cont .location_info li {margin-right:20px;}
#location .location_cont .location_info li p {padding-left:16px; margin-right:14px; }
#location .location_cont .location_info li p::before { font-size:1.1rem;}
#location .location_cont .loca_btn {top: -84px;  }
#location .location_cont .loca_btn li a{font-size:0.8rem; width:40px; height:40px; line-height:38px; padding:0 20px; }
#location .location_cont .loca_btn li a em {font-size:0}
#location .location_cont .loca_btn li a svg{width:10px; height:18px; right:14px; margin-top:-11px; }
#location .location_cont .loca_btn li.naver_btn a svg {width:12px; height:12px; right: 14px; margin-top: -7px;}
#location .location_cont .loca_btn li.google_btn a svg {right:11px; width:18px; height:18px;  margin:-9px auto 0; }

#location .location_cont .loca_btn li.print_btn {display:none;}




.fs40 {font-size:1.7rem; }
.fs28 {font-size:1.2rem; }
.fs20 {font-size:1.1rem;
.fs18 {font-size:0.889rem;}


}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}