@import url("/eng/common.css");


/* visual */
#visual {width:100%; height:100%; position: relative;}
#visual:after{content: ""; background:url('/img/vbot.png') center bottom no-repeat; position:absolute;  bottom:0; display:block; height:255px; width:100%}
#visual .slick-slider {position: relative; display: block;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}

#visual .slick-prev, #visual .slick-next{ font-size: 0; line-height: 0; position: absolute; top: 53%; display: block; cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}

#visual .cover01{background-image:url('/img/v01.jpg');}
#visual .cover02{background-image:url('/img/v02.jpg');}
#visual .cover03{background-image:url('/img/v03.jpg'); background-position:80% center !important}
#visual .cover04{background-image:url('/img/v04.jpg');}
#visual .cover05{background-image:url('/img/v05.jpg');}

#visual .sub_imgbox{height:100%;}
#visual .section{margin-bottom:2px;width:100%;height:100%;min-height:900px;position:relative;overflow:hidden;background-position:center;background-size:cover; border:0;}
#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:100%;}

#visual .slick-dots{position: absolute; top:25%;  display: block; padding: 0; margin: 0; list-style: none ;left: 50%; margin-left: -600px;}
#visual .slick-dots li{position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    padding: 0;
    cursor: pointer;}
#visual .slick-dots li button{width:12px; height:12px; border:0; font-size:0; background-color:rgba(255,255,255,.4); cursor:pointer;     border-radius: 12px;}
#visual .slick-dots li.slick-active button{background-color:#fff}

#visual .txt_ef{opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-timing-function: linear;
transition-timing-function: linear;-webkit-transition-delay: 0s;transition-delay: 0s;transform: translate3d(0px, 30px, 0);-webkit-transform: translate3d(0px, 30px, 0);}
#visual .slick-slide.action .txt_ef{opacity: 1;transform: translate3d(0px, 0px, 0);-webkit-transform: translate3d(0px, 0px, 0);  }

#visual .text_area{max-width:1200px; margin:320px auto 0 auto; color:#fff;position:relative;z-index:1}
#visual .text_area .v_txt1{font-family: 'Cabin', 'Noto Sans KR', sans-serif; font-weight:700; font-size:80px;  line-height:100% }

#visual .text_area .v_txt2{padding-top:25px ;font-size:19px; line-height:28px;  letter-spacing:0; color:rgba(255,255,255,0.7);-webkit-text-size-adjust: 100%; }
#visual .text_area .vbtn{margin-top:75px; color:#fff; font-size:16px; font-weight:700; letter-spacing:0; border-radius: 100px; padding:16px 0;background:#cf0a2c; text-align:center;  display:block; width:180px;
transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
#visual .text_area .vbtn:hover{background:#f47d31}


/* Arrows */
#visual .sub_imgbox .slick-prev, #visual .sub_imgbox .slick-next{position: absolute; display: block; top:50%; width: 60px;height: 60px; padding: 0;  -webkit-transform: translate(0, -46%);    -ms-transform: translate(0, -46%);
	transform: translate(0, -46%);cursor: pointer;  color: transparent; border: none; outline: none; background: transparent; z-index:999; font-size:0}
#visual .sub_imgbox .slick-prev{left:40px; background:url('/img/v_arrow_l.png') no-repeat left center;}
#visual .sub_imgbox .slick-next{right:40px; background:url('/img/v_arrow_r.png') no-repeat right center;}
#visual .sub_imgbox .slick-slider{position: relative;display: block;box-sizing: border-box;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
		touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
#visual .sub_imgbox .slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
#visual .sub_imgbox .slick-initialized .slick-slide{display: block;}



h2.main_title{text-transform:uppercase; text-align:center; background:url('/img/mtit.png') center top no-repeat; font-size:42px; color:#333; line-height:100%; font-weight:300; padding-top:40px; }
h2.main_title span{font-weight:700; line-height:100%;}
p.main_txt{font-size:16px; color:#666; text-align:center;  letter-spacing:0; line-height:26px; margin-top:20px;}
.vbtn{margin-top:55px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing:0;
    border-radius: 100px;
    padding: 16px 0;
    background: #333;
    text-align: center;
    display: block;
    width: 180px;
    transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;}
.vbtn:hover{background:#cf0a2c; color:#fff}


/* business area*/
#business_wrap{position: relative;  overflow: hidden; max-width:1200px;  margin:0px auto; padding:100px 0}
#business_wrap p.main_txt{ margin-bottom:60px}
#business_warp ul{position: relative; overflow: hidden;}

#business_wrap li{position: relative; overflow: hidden; float:left; height:360px; display:block; width:18.6666666667%; margin-right:1.66666666667%;     transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;}
#business_wrap li a{position: relative; overflow: hidden; display:block; height:100%}
#business_wrap li:nth-child(5){margin-right:0}
#business_wrap li.one{background:url('/img/bus_img01.jpg') center no-repeat; background-size: cover;}
#business_wrap li.two{background:url('/img/bus_img02.jpg') center no-repeat; background-size: cover; margin-top:30px;}
#business_wrap li.three{background:url('/img/bus_img03.jpg') center no-repeat; background-size: cover;}
#business_wrap li.four{background:url('/img/bus_img04.jpg') center no-repeat; background-size: cover;margin-top:60px;}
#business_wrap li.five{background:url('/img/bus_img05.jpg') center no-repeat; background-size: cover;}
#business_wrap li:hover{box-shadow: 5px 5px 15px rgba(0,0,0,0.3);     transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;}

#business_wrap li .bcon{position: absolute; overflow: hidden; bottom: 30px; left:28px; overflow: hidden; z-index: 9;}
#business_wrap li .tit{color:#fff; font-size:22px; font-weight:700; line-height:100%; letter-spacing:0;}
#business_wrap li .img{padding-bottom:18px}
#business_wrap .eng{position: absolute; right:20px; top:30px; font-weight:700; line-height:100%;font-size:15px; color:rgba(255,255,255,0.3); text-transform:uppercase;
-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg); transform: rotate(0deg);  writing-mode: vertical-rl; -ms-writing-mode:tb-rl ;z-index: 9;} 

#business_wrap li .hover{ width: 100%;
    height: 100%;
	position: absolute;
    top: 0;
	display:block;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f16710+0,ed1219+100 */
background: rgb(241,103,16); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(241,103,16,0.8) 0%, rgba(237,18,25,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(241,103,16,0.8) 0%,rgba(237,18,25,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(241,103,16,0.8) 0%,rgba(237,18,25,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f16710', endColorstr='#ed1219',GradientType=0 ); /* IE6-9 */
transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;}

#business_wrap li > .hover{opacity: 0; transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
#business_wrap li .hover a{ width:100%; height:100%; display:block;}
#business_wrap li:hover .hover{opacity:10;display:block !important; width: 100%;
    height: 100%; }







#abcu_warp{position: relative;  overflow: hidden;  padding-bottom:100px; }
#abcu_warp:after{    background: url('/img/bg.gif') center repeat;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 21%;
    z-index: 1;}
/* about dongwoo*/
.about_warp{z-index: 2; position: relative;  overflow: hidden; max-width:1570px; margin:0 auto; background:url('/img/about_img01.jpg') no-repeat; background-size:cover;}
.about_warp:after{position: absolute; top: 0;left: 50%; display: block;content: "";width: 50%;height: 100%; background:rgba(207,10,44,0.9);}
.about_warp .in{ position: relative; width: 50%; float: right; z-index: 1; text-align:left;}
.about_warp h2.main_title{background: url('/img/mtit2.png') left top no-repeat; color:#fff; text-align:left; }
.about_warp p.main_txt{color:#fff; text-align:left}
.about_warp .vbtn{background:#fff; color:#333}
.about_warp .vbtn:hover{background:#333; color:#fff}
.about_warp .box{position: relative;  overflow: hidden; margin:100px 70px}


/* 기업문화 */
.culture_warp{z-index: 2;position: relative;  overflow: hidden; max-width:1200px; margin:100px auto;}
.culture_warp .titbox{position: relative;  overflow: hidden; width:26.6666666667%; float:left; }
.culture_warp .titbox h2.main_title{text-align:left;  background: url('/img/mtit.png') left top no-repeat;} 
.culture_warp .titbox p.main_txt{text-align:left;}
.culture_warp ul{position: relative;  overflow: hidden;  float:Left; width:73.3333333333%}
.culture_warp li{position: relative;  overflow: hidden;  float:left; width:48.2954545455%; margin-right:3.40909090909% }
.culture_warp li .img img{max-width:100%}
.culture_warp li:last-child{margin-right:0}
.culture_warp li .txtbox{position: relative;  overflow: hidden; padding:20px;}
.culture_warp li .txtbox .tit{position:relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:18px; padding:2px 0; margin-bottom:10px; color:#333; font-weight:700; line-height:100%; letter-spacing:0; }
.culture_warp li .txtbox .txt{font-size:15px; color:#666; letter-spacing:0;}
.multiple2{overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.4em;
    height: 2.8em;}
.culture_warp li .txtbox .date{color:rgba(102,102,102,0.8); margin-top:15px;}


/* why dongwoo? */
#why_warp{position: relative;  overflow: hidden; max-width:1200px; margin:100px auto;}
#why_warp .img{margin-top:30px;}
#why_warp .img img{max-width:100%}
#why_warp .titbox{position: relative;  overflow: hidden; }
#why_warp .titbox h2.main_title{text-align:left;     background: url('/img/mtit.png') left top no-repeat;}
#why_warp .titbox p.main_txt{text-align:left;}
#why_warp .titbox .vbtn{margin-top:0; position: absolute;right: 0; bottom:0}
#why_warp ul{position: relative;  overflow: hidden; text-align:center; margin-top:50px;}
#why_warp li{float:left;width:16.6666666667% }
#why_warp li .tit{font-size:17px; color:#666; line-height:100%; letter-spacing:0; margin-top:20px;}


/* 글로벌 네트워크 */
#global_warp{position: relative;  overflow: hidden; background:#fbfbfb; padding:100px 0;}
#global_warp .in{position: relative;  overflow: hidden; max-width:1200px; margin:0 auto}
#global_warp .img{margin-top:70px;}
#global_warp .img img{max-width:100%}
#global_warp .img img.mo{display:none;}


.br_none{display:none;}


/*******************************************************************************
	@media 1024px~1200px
*******************************************************************************/
@media all and (max-width:1570px){

#abcu_warp{padding-bottom:0}
#abcu_warp:after{display:none;}

}


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

#wrap{  position: relative; width: 100%; min-width: 100%;}

#visual .section{min-height:700px}
#visual .text_area{margin:240px 3% 0 3%}
#visual .text_area .v_txt1{font-size:60px}
#visual .text_area .v_txt2{font-size:18px;}
#visual .slick-dots{left:3%; margin-left:0}
#visual:after{background-size: contain; height:200px}




h2.main_title{font-size:36px; }
h2.main_title2{font-size:28px}
p.main_txt{font-size:15px;}





#business_wrap{max-width:94%}

.about_warp .box{margin:80px 50px }
.about_warp p.main_txt br{display:none; }


.culture_warp{max-width:94%}


#why_warp{max-width:94%}

#global_warp .in{max-width:94%}




.br_none2{display:none;}

.br_none{display:block;}
}


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

#visual .section{min-height:600px}
#visual .text_area .v_txt1{font-size:50px;}
#visual .text_area .v_txt2{font-size:15px; line-height:24px}
#visual .text_area .vbtn{margin-top:50px; font-size:15px;width:150px; padding:14px 0}
#visual .text_area .v_txt1{font-size:40px}



h2.main_title{font-size:30px; background-size:26px; padding-top:35px;}
h2.main_title2{font-size:24px}

p.main_txt{font-size:15px; margin-top:15px;     word-break: keep-all;}


/*busindess area*/
#business_wrap{margin:0 auto 0 auto; padding:80px 0 50px 0}
#business_wrap p.main_txt{margin-bottom:40px}
#business_wrap li{width:31%; margin-right:3.5%; margin-bottom:3.5%; height:260px}
#business_wrap li:nth-child(3){margin-right:0}
#business_wrap li.two{margin-top:0}
#business_wrap li.four{margin-top:0; margin-left: 18%;}
#business_wrap li .tit{font-size:18px;}
#business_wrap .eng{font-size:14px;}


.vbtn{font-size:15px; width:150px; padding:14px 0}

/* about dongwoo */
.about_warp .in{width:100%; float:none;}
.about_warp:after{display:none;}
.about_warp .in{ margin:3%; width:94%; background: rgba(207,10,44,0.9);}
.about_warp .box{margin:0; padding:50px;}
.about_warp p.main_txt{text-align:center;}
.about_warp h2.main_title{text-align:center;background: url('/img/mtit2.png') center top no-repeat;  background-size:26px; }
.about_warp .vbtn{margin:30px auto 0 auto}


/* 기업문화 */
.culture_warp{margin:80px auto }
.culture_warp .titbox{float:none; width:100%}
.culture_warp .titbox h2.main_title{text-align:center; background: url('/img/mtit.png') center top no-repeat; background-size:26px; }
.culture_warp .titbox h2.main_title br{display:none; }
.culture_warp .titbox p.main_txt{text-align:center;}
.culture_warp .titbox p.main_txt br{display:none;}
.culture_warp .vbtn{margin:30px auto 0 auto}
.culture_warp ul{width:100%; margin-top:30px;}
.culture_warp li{width:48.25%; margin-right:3.5%}
.culture_warp li .txtbox .tit{font-size:16px; letter-spacing:0;}
.culture_warp li .txtbox{padding:20px 0 0 0}
.culture_warp li .txtbox .txt{font-size:14px;}
.culture_warp li .txtbox .date{font-size:14px;}

/* why dongwoo? */
#why_warp{margin:80px auto}
#why_warp .titbox h2.main_title{text-align:center;  background: url('/img/mtit.png') center top no-repeat; background-size:26px;}
#why_warp .titbox p.main_txt{text-align:center;}
#why_warp .titbox .vbtn{    position: relative; margin:30px auto 0 auto}
#why_warp ul{margin-top:40px;}
#why_warp li .icon img{width:60px}
#why_warp li .tit{font-size:15px; line-height:22px;   letter-spacing:0;}



/* 글로벌 네트워크 */
#global_warp{padding:80px 0}

.br_none{display:none;}
}

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



.br_none{display:block;}
}
/*******************************************************************************
	@media ~640px
*******************************************************************************/
@media all and (max-width:640px){
#visual:after{height:180px}
#visual .section{min-height:500px}
#visual .text_area .v_txt1{font-size:30px;}
#visual .text_area{margin-top:200px}
#visual .text_area .v_txt2{font-size:14px; line-height:20px; letter-spacing:0;}
#visual .text_area .vbtn{font-size:14px; letter-spacing:0; width:140px; padding:10px 0; margin-top:40px;}



p.main_txt{font-size:14px; line-height:20px}
h2.main_title{font-size:24px}

.vbtn{font-size:14px; width:140px; letter-spacing:0; padding: 10px 0;}


/* business area */
#business_wrap{margin:0 auto 0 auto; padding:50px 0 30px 0 }
#business_wrap p.main_txt{margin-bottom:30px;}
#business_wrap li{height:180px}
#business_wrap .eng{display:none;}
#business_wrap li .img img{width:30px}
#business_wrap li:nth-child(5) .img img{width:25px}
#business_wrap li .tit{font-size:16px; letter-spacing:0;}
#business_wrap li .bcon{bottom:20px; left:20px;}
#business_wrap li .img{padding-bottom:12px;}

/* about dongwoo */
.about_warp .box{padding:30px}

/* 기업문화 */
.culture_warp{margin:50px auto}
.culture_warp li .txtbox .tit{font-size:15px; letter-spacing:0;}
.culture_warp li .txtbox .txt{font-size:13px;  letter-spacing:0;}
.culture_warp li .txtbox .date{font-size:13px; margin-top:8px}
.culture_warp .vbtn{margin:20px auto 0 auto}
.culture_warp li .txtbox{padding:15px 0 0 0}

/* why dongwoo? */
#why_warp{margin:50px auto;}
#why_warp li{width:31.3333333333%; margin-right:3%; margin-bottom:8%}
#why_warp li:first-child{ margin-bottom:0}
#why_warp li:nth-child(3n){margin-right:0}
#why_warp li .icon img{width:50px;}
#why_warp li .tit{font-size:13px; line-height:18px; word-break: keep-all;}
#why_warp ul{margin-top:30px;}


/* 글로벌네트워크 */
#global_warp{padding:50px 0}
#global_warp .img{margin-top:40px}
#global_warp .img img.pc{display:none;}
#global_warp .img img.mo{display:block;}
}

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


#visual .section{min-height:400px}
#visual .slick-dots li{ margin:0 3px;}
#visual .slick-dots li button{ border-radius:10px;}
#visual .text_area{margin-top:160px;}
#visual .text_area .v_txt1{font-size:22px;}
#visual .text_area .v_txt2{font-size:13px; padding-top:20px;}
#visual .text_area .v_txt2 br {display:none;}
#visual .text_area .vbtn{font-size:13px; margin-top:30px;}

h2.main_title{font-size:20px}

p.main_txt{font-size:13px; line-height:18px;}


.vbtn{font-size:13px;}

/* busindess area */
#business_wrap p.main_txt br {display:none;}
#business_wrap li .bcon{left:15px; bottom:15px;}
#business_wrap li .tit{font-size:15px;}


/* 기업문화 */
.culture_warp li .txtbox .tit{font-size:14px; margin-bottom:6px}

#why_warp .titbox p.main_txt br {display:none;}
#why_warp li{width:31.3333333333%; margin-right:3%; margin-bottom:15%}



}

@media all and (max-width:380px){
.br_none2{display:block;}
#why_warp li{width:31.3333333333%; margin-right:3%; margin-bottom:25%}


}