@import url(rwd_common.css);

@media screen and (max-width:1500px){
    #custom_menu .custom_box{width: 90%;margin-left: -45%;}
    #custom_menu .custom_box .custom_tab ul > li.top10 >.inner>.custom_cate> ul >li > ul > li{width: 20% !important;}
}

@media screen and (max-width:1460px){
    .board{height: 188px;}
    .business{height: calc(100% - 208px);}
    .slide_wrap, .business_slide .img_area, .business_slide .text_area{height: 117px;}
    .business_slide .text_area .text01{margin-bottom: 5px;}
    .business_slide .img_area img {width: auto;height: 100%;}

    /* .popup_open{display: none;} */
    .foot_popopen{display: block;}

	.board>li{width:94px}
	.board>li:nth-child(3){width:110px;}
	.board .more{font-size:0}



}

@media screen and (max-width:1400px){
    .board_wrap{width: calc(100% - 880px);}
    .career_wrap, .banner_wrap{width: 265px;}
    .career .text:after{top: 0;}
    .rec{width: 290px;}
.banner_slide a{width:100%;height:100%;}
}

@media screen and (max-width:1366px){
    .depth1>.more_depth>a.now:hover:before{display: none;}

    main{padding: 130px 0 30px 0;background:#f6f6f6}
    .visual{width: 770px;}
    .visual p{width: calc(100% - 40px);}
    .customer{width: calc(100% - 770px);}
    .business_slide .img_area{width: 145px;}
    .business_slide .text_area{width: calc(100% - 145px);}

    .pop_wrap .pop_slide .slick-list{max-width: 1040px;}
    .pop_wrap .pop_slide li{min-width: 290px;height: 410px;}
    .pop_wrap .pop_textBox a{min-height: 410px;}
    .pop_wrap .pop_textBox div{max-height: 276px;}
    .pop_wrap .pop_textBox .text{-webkit-line-clamp: 8;max-height: 180px;}
    
	.board>li{width:82px}
	.board>li:nth-child(3){width:98px}
}

@media screen and (max-width:1300px){
    main{padding: 100px 0 30px 0;}
    .top{display: block;}
    .visual{width: calc(100% + 40px);margin: 0 -20px;padding: 117px 20px 0 20px;}
    .customer{margin-top: 20px;height: 400px;width: calc(100% - 520px);margin-left: 0;}
    .customer .tab_content{height: calc(100% - 38px);align-items: center;padding-top: 25px;}

    .btm{flex-wrap: wrap;position: relative;}
    .rec{position: absolute;right:0;top:-430px;width: 500px;}
    .board_wrap{margin-left: 0;width: calc(100% - 640px);}
    .career_wrap, .banner_wrap {width: 300px;}
    .career .text:after{top: -15px;}
    .business_slide .img_area{width: 176px;}
    .business_slide .text_area{width: calc(100% - 176px);}    

	.rec a.bn_kchn{display:block;height:36px;}
	.rec a.bn_kchn img{width:auto;height:100%;}
	.rec_wrap > a:not(:first-child .bn_kchn){height:52px}

}

@media screen and (max-width:1100px){ 
    .customer{width: calc(100% - 420px);}
    .rec{width: 400px;}
    .board_wrap{width: calc(100% - 570px);}
    .career_wrap, .banner_wrap {width: 265px;}
    .career .text:after{top: 0;}
}

/*태블릿*/
@media screen and (max-width:1024px){
   .tabM>li>a{padding: 10px 10px;height: 38px;}

   .visual{height: 310px;}
   .customer{width: 100%;height: 316px;}
   .customer .tab_content{align-items: baseline;padding-top: 32px;}
   .customer .tab_content div:nth-child(n+5) {margin-top: 10px;}

   .board>li {width: 98px;}
   .rec, .board_wrap, .career_wrap, .banner_wrap{width: calc(50% - 10px);}
   .rec{position: relative;top: 0;}
   .board_wrap{margin-left: 20px;}
   .career_wrap, .banner_wrap{margin-top: 20px;}
   .career_wrap{margin-left: 0;}
   .career .text{height: 61px;padding-top: 9px;}
   .career .text br{display: block;}
   .business_slide .img_area{width: 156px;}
   .business_slide .img_area img{height: 100%;width: auto;}
   .business_slide .text_area{width: calc(100% - 176px);}
   .banner img{width: auto;height: 100%;}
   .energy{padding: 24px 0 20px 20px;background-position:103% 85%;background-size:auto 74%}

   .pop_wrap .pop_slide .slick-list{max-width: 645px;}
   .pop_wrap .pop_control{margin: 7vh auto 0;}
   .pop_wrap .pop_textBox .title{font-size: 18px;max-height: 70px;}
   .pop_wrap .pop_textBox .text{font-size: 14px;-webkit-line-clamp: 9;max-height: 185px;}

	.rec a.bn_kchn{margin: 10px 0 8px;}
}


@media screen and (max-width:860px){
    .tabM .tab_content{padding-top: 15px;}
    
    .rec{width: 300px;}
    .board_wrap{width: calc(100% - 320px);}
    .file_box{padding-right: 90px;}

	.rec a.bn_kchn{height:auto}
	.rec a.bn_kchn img{width:100%;height:auto}
	.energy{background-position:112% 85%;}
}

@media screen and (max-width:767px){
    main{padding:70px 0 30px 0}
    .visual{display: flex;align-items: center;padding: 0 10px;justify-content: center;margin: 0 -10px;width: calc(100% + 20px);}
    .visual p strong{font-size: 35px;}
    .customer{width: calc(100% - 320px);height: 400px;}
    .customer .tab_content div{width: 33.3333%;}
    .rec{position: absolute;top: -430px;}
    .board_wrap{width: 100%;margin-left: 0;height: auto;}
    .board {height: 173px;}
    .career .text br{display: none;}
    .energy{padding: 22px 0 20px 20px;}
    .energy .title br{display: block;}
    .business {height: calc(100% - 194px);}
    .business_slide .img_area {width: 205px;}
    .business_slide .text_area{width: calc(100% - 205px);}
    .slide_wrap, .business_slide .img_area, .business_slide .text_area {height: 122px;}

    .pop_wrap .pop_slide{width: 100%;padding: 0 10px;}
    .pop_wrap .pop_slide .slick-list{max-width: 82%;}
    .pop_wrap .pop_slide .slick-arrow{height: 35px;background-size: 400%;background: url(/images/common/bg2.png) -70px -72px no-repeat;}
    .pop_wrap .pop_control{justify-content: center;width: 90%;padding: 15px;}
    .pop_wrap .pop_control .pop_total{display: none;}
    
    .pop_wrap .pop_slide li{min-width: 270px;width: 340px!important;height: 400px;}
    .pop_wrap .pop_slide li{min-width: 270px;width: 315px!important;height: 400px;}
    .pop_wrap .pop_textBox a{min-height: 400px;}
    .pop_wrap .pop_textBox .text{-webkit-line-clamp: 10;}
}

@media screen and (max-width:680px){
    .customer{width: 100%;height: 408px;}
    .rec{position: relative;top: 0;width: 100%;margin-bottom: 20px;height:auto;padding:14px 20px}
	.rec a.bn_kchn img{width:408px;}
	.rec_wrap > a:not(:first-child .bn_kchn){padding-left:108px}
	.energy{background-size:45% auto;background-position:108% 85%}
}

@media screen and (max-width:630px){
    .career .text{padding-right: 45px;}
    .career .text:after{width: 54px;height: 45px;top: 50%;margin-top: -21px;}
    .banner img{width: 100%;height: auto;}
    .slide_wrap .ctr_btn{right: 90px;}
}

@media screen and (max-width:480px){
    .visual p strong{font-size: 28px;margin-bottom: 10px;}
    .visual p span{font-size: 15px;}
    .career_wrap, .banner_wrap{width: 100%;}
    .banner_wrap{margin-left: 0;}
    .energy{background-size:40% auto;}

    .business_slide .text_area{width: calc(100% - 169px);}
    .business_slide .img_area {width: 169px;}
    .slide_wrap, .business_slide .img_area, .business_slide .text_area {height: 117px;}
    .banner img {width: auto;height: 100%;}
    .board .more{font-size:0;line-height: 0;width: 21px;height: 21px;padding: 0;}
    .career{height: auto;}
    .career>p{margin-left: 0;}
    .career .career_btn{margin-top: 10px;} 

	.rec a.bn_kchn{width:100%;}
	.board>li,
	.board>li:nth-child(3){width:auto;}
	.tabM>li>h3 a{font-size:13px;padding:9px 6px}
}

/*모바일*/
@media screen and (max-width:428px){
    .visual p strong{font-size: 24px;}

    .rec{height: auto;padding: 15px;}
    .business{padding: 15px;}
    .slide_wrap{height: auto;}
    .board article h4{width: calc(100% - 58px);}
    .business_slide a{display: block;}
    .business_slide .img_area, .business_slide .text_area{width: 100%;}
    .business_slide .img_area{height: 43vw;position: relative;}
    .business_slide .img_area img{width: 100%;height: auto;position: absolute;top:-16%}
    .business_slide .text_area{padding-top: 15px;height: auto;}
    .business_slide .text_area .text01{font-size: 17px;margin-bottom: 0;}
    .business_slide .text_area .text02{display: none;}
    .career{padding: 15px;}
    .board article span{font-size: 12px;}

    .foot_popopen{margin-right: 15px;}
    .pop_wrap .pop_control{margin: 30px auto 0;}
    .pop_wrap .pop_slide li{width: 270px!important;height: 340px;}
    .pop_wrap .pop_textBox div{max-height: 210px;}
    .pop_wrap .pop_textBox a{min-height: 327px;}
    .pop_wrap .pop_textBox .title{font-size: 15px;max-height: 58px;margin-bottom: 10px;}
    .pop_wrap .pop_textBox .text{font-size: 12px;-webkit-line-clamp: 8;max-height: 127px;}
    
}

@media screen and (max-width:360px){
    .customer{height: 434px;}
    .board>li {width: 85px;}
    .energy{padding: 22px 0 20px 15px;}
}