@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body{font-family: 'NanumSquare', sans-serif;}



#wrap{
    width: 100%;
    height: auto;
    color: #283B5D;
}

/*----------------------------------홈--메인이미지*/
#wrap .main-img{
    background: url(../img/main-img.png) no-repeat;
    width: 100%;
    height: 800px;
}

/*sub_1 상단메인이미지*/

#wrap .main-img-sub{
    background: url(../img/main-img.png) no-repeat;
    width: 100%;
    height: 380px;
}


/*메인이미지 - 텍스트이미지*/
.main-img-text{
    position: absolute;
    top:320px;
    margin-left: 650px;
    z-index: 100;
    transition: all 2s;
    opacity: 0;
    transform: translateY(50px);
    transition-delay: 0.4s;
}
.main-img-text.show{
    opacity: 1;
    transform: translate(0);
}









/*----------------------------------홈--헤더*/
#wrap .main-img header{
    width: 1200px;
    height: 120px;
    margin: 0 auto;
}

/*로고*/
#wrap .main-img header h1{
    float: left;
    width: 240px;
    margin-top: 40px;
}
#wrap .main-img header nav{
    margin-top: 50px;
    float: right;
}
#wrap .main-img header nav .gnb > li{
    float: left;
}


/*------------------------------------nav*/

/*gnb*/
#wrap .main-img header nav .gnb >li > a{
    color: #fff;
    font-size: 20px;
    width: 180px;
    height: 30px;
    margin-bottom: 10px;
    margin-right: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 'NanumSquare', sans-serif;
}
#wrap .main-img header nav .gnb li:last-child a{
    margin-right: 0;
}


#wrap .main-img header nav .gnb >li:hover > a{
    border-bottom: 4px solid #fff;
}


/*sub*/
#wrap .main-img header nav .gnb .sub{display: none;}
#wrap .main-img header nav .gnb .sub a{
    color: #888;
    width: 180px;
    height: 40px;
    line-height: 2.5;
    text-align: center;
    font-size: 17px;
    font-family: 'NanumSquare', sans-serif;
    transition: all 0.4s;
}
#wrap .main-img header nav .gnb li:nth-child(2) .sub li a{
    width: 180px;
}
#wrap .main-img header nav .gnb li:nth-child(2) .sub li{
    position: relative;
}


#wrap .main-img header nav .gnb .sub a:hover{
    color: #fff;
    font-weight: bold;
}

    

    
/*----------------------------------홈--메인제품5개 원이미지*/    
.prodect{
    width: 1200px;
    height: 1200px;
    margin: 200px auto 0;
    position: relative;
    z-index: 10;
}    

.prodect_move{
    transform: translateY(70px);
    transition: all 3s;
    opacity: 0;
}


.prodect_move.show{
    transform: translate(0);
    opacity: 1;
}



.prodect .prodect_img {
    display: flex;
    justify-content: space-between;
}
.prodect .prodect_img li{
    justify-content: space-around;
    background: rgba(50, 82, 126, .5);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    box-shadow: 3px 4px 3px #999;
}
.prodect .prodect_img li a img{
    margin: 10px auto 0;
}



/*-------제품hover*/
.prodect .prodect_text{
    display: flex;
    justify-content: space-between;
}
.prodect .prodect_text li{
    justify-content: space-around;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: rgba(7, 20, 43, 0.7);
    position: relative;
    top: -200px;
    opacity: 0;
    transition: all 0.6s;
}
.prodect .prodect_text li:hover{
    opacity: 1;
    transition: all 0.6s;
    cursor: pointer;
}


.prodect .prodect_text li a{
    text-align: center;
    color: #fff;
    font-family: 'NanumSquare', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    margin-top: 65px;
    font-weight: bold;
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

.prodect .prodect_text li .aa{
padding-top:20px;
}



/*설명*/
.prodect .prodect_text li p{
    font-family: 'NanumSquare', sans-serif;
    text-align: center;
    font-size: 22px;
    margin-top: 180px;
    font-weight: bold;
}   
.prodect .prodect_text li:nth-child(1) p{
    width: 400px;
    margin-left: 400px;
}
.prodect .prodect_text li:nth-child(2) p{
    width: 400px;
    margin-left: 150px;
}
.prodect .prodect_text li:nth-child(3) p{
    width: 400px;
    margin-left: -100px;
}
.prodect .prodect_text li:nth-child(4) p{
    width: 500px;
    margin-left: -400px;
}
.prodect .prodect_text li:nth-child(5) p{
    width: 400px;
    margin-left: -600px;
}


/*바*/
.prodect .bar{
    width: 100px;
    height: 6px;
    background: #32527E;
    border-radius: 10px;
    margin: -70px auto;
    
}


/*------------------공지/견적/길 배너부분*/
.prodect .notice{
    display: flex;
}
.prodect .notice .notice_list1, .notice_list2, .notice_list3{
    width:400px;
    height: 300px;
    margin: 350px auto 0;
}

.prodect .notice ul li a img,
.prodect .notice ul li a span{
    margin: 0 auto;
    display: block;
    text-align: center;
    color: #fff;
    padding-top: 100px;
    opacity: .5;
    transition: all 0.4s;
}
.prodect .notice ul li a img{
    width: 80px;
    height: 180px;
}
.prodect .notice ul li a span{
    display: block;
    padding-top: 10px;
    font-family: 'NanumSquare', sans-serif;
    font-size: 25px;
    font-weight: bold;
}

.prodect .notice ul li a:hover img,
.prodect .notice ul li a:hover span{
    opacity: 1;
    transition: all 0.4s;
}




/*공지배경*/
.prodect .notice .notice_list1 ul li,
.prodect .notice .notice_list2 ul li,
.prodect .notice .notice_list3 ul li{
    overflow: hidden;
}
.prodect .notice .notice_list1 ul li a{
    background: url(../img/bn1.png) no-repeat center;
    width: 400px;
    height: 300px;
    transition: all 0.4s;
}


/*견적배경*/
.prodect .notice .notice_list2 ul li a{
    background: url(../img/bn2.png) no-repeat center;
    width: 400px;
    height: 300px;
    transition: all 0.4s;
}

/*오시는길배경*/
.prodect .notice .notice_list3 ul li a{
    background: url(../img/bn3.png) no-repeat center;
    width: 400px;
    height: 300px;
    transition: all 0.4s;
}

.prodect .notice .notice_list1 ul li a:hover,
.prodect .notice .notice_list2 ul li a:hover,
.prodect .notice .notice_list3 ul li a:hover{
    transform: scale(1.1);
}






/*-----------지구배경*/
.bg_img{
    position: absolute;
    top: 1300px;
    z-index: 1;
    width: 100%;
}


/*------------------------------------푸터*/

footer{
    width: 100%;
    height: 120px;
    background: #283B5D;
}

footer .footer_con{
    width: 1200px;
    margin: 0 auto;
}
footer .footer_con img{
    float: left;
    margin-top: 40px;
}

footer .footer_con .footer_text{
    padding-top: 30px;
}
footer .footer_con .footer_text p{
    color: #fff;
    opacity: .5;
    font-family: 'NanumSquare', sans-serif;
    float: right;
    padding-top: 10px;
    font-size: 14px;
}
footer .footer_con .footer_text p > a{
	width:80px;
	height:20px;
}






/*============================================sub1==회사소개=================*/

/*공통부분*/
.sub_menu{
    padding-bottom: 150px;
    width: 1200px;
    height: auto;
    margin: 0 auto;
	font-family: 'NanumSquare', sans-serif;
}
/* sub main text */
.main-img-text-sub{width:1200px;margin:0 auto;}
.main-img-text-sub p{
	display:block;
	width:150px;
	height:60px;
	text-align:center;
	margin:100px auto;

    font-family: 'NanumSquare', sans-serif;
    font-size: 35px;
    color: #333;
    font-weight: bold;
	border-bottom: 5px solid #283B5D;
}


.sub_menu > ul{margin: 100px auto 150px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.sub_menu > ul .active{
    width: 240px;
    height: 60px;
    text-align: center;
    background: #283B5D;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    line-height: 2;
	border: 1px solid #283b5d;
	font-family: 'NanumSquare', sans-serif;
}
.sub_menu > ul a{
    width: 240px;
    height: 60px;
    text-align: center;
    color: #283B5D;
    font-size: 20px;
    padding: 10px;
    line-height: 2;
    border: 1px solid #999;
    font-weight: 500;
	font-family: 'NanumSquare', sans-serif;
}

.sub_menu > ul li:hover a{
    border: 1px solid #283b5d;
	font-family: 'NanumSquare', sans-serif;
}

.tab_cont{
margin: 100px 0 150px;

}





/*-----인사말*/


.tab1_cont{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    text-align: center;
    font-family: 'NanumSquare', sans-serif;
}

.tab1_cont p{
    font-size: 20px;
    line-height: 1.5;
    font-weight: 900;
    color: #444;
	font-family: 'NanumSquare', sans-serif;
}

.tab1_cont .p1{
	font-weight:blod;
	line-height: 3;
	color:#283B5D;
	font-family: 'NanumSquare', sans-serif;
}
.tab1_cont .p2{
	font-size: 30px;
	color:#283B5D;
	font-family: 'NanumSquare', sans-serif;
}




.tab1_cont p span{
    font-size: 30px;
    font-weight: bold;
    color: #333;
	font-family: 'NanumSquare', sans-serif;
}
.tab1_cont > span{
    display: block;
    width: 50px;
    margin: 50px auto;
    border-bottom: 4px solid #283b5d;
	font-family: 'NanumSquare', sans-serif;
}
.tab1_cont p:nth-last-child(1){
    margin-top: 50px;
	font-family: 'NanumSquare', sans-serif;
}

.sub1-1_img{
    width: 100%;
    height: auto;
    overflow: hidden;

}





/*------연혁*/


.sub1_menu > ul{
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
}

.sub1_menu .history{
	width:900px;
	margin: 100px auto 150px;
}







/*------오시는 길*/

/*
#sub1-3_menu{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    font-family: 'NanumSquare', sans-serif;
}

#sub1-3_menu > ul{
    display: flex;
    justify-content: space-between;
    width: 810px;
}
*/



/*오시는길 지도 부분*/
.tab3_cont{
    width: 1200px;
    height: 500px;
    margin: 0 auto;
}


/*오시는길 주소텍스트 부분*/
.tab3_cont_list{
    margin: 60px auto 150px;
    width: 1200px;
	font-family: 'NanumSquare', sans-serif;
}


.tab3_cont_list ul li{
    font-size: 20px;
    margin-left: 20px;
    color: #000;
    line-height: 2.5;
	font-family: 'NanumSquare', sans-serif;
    text-align: left;
}

.tab3_cont_list ul li span{
    font-weight: bold;
    padding-right: 20px;
    color: #283B5D;
	font-family: 'NanumSquare', sans-serif;
}






/*============================================sub2==제품소개=================*/

.sub2_menu{
    padding-bottom: 150px;
}
.sub2_menu > ul{
    display: flex;
    justify-content: space-between;
}

.tab2_cont{width:1200px;margin: 0 auto 150px;
    padding-left: 30px;
}














/*============================================sub3==주요실적=================*/
/*-----포토갤러리*/



.sub3_menu > ul{
    width: 530px;
    font-family: 'NanumSquare', sans-serif;
}



 #sub3-1_menu > ul li:nth-child(1) a{
    width: 250px;
    height: 60px;
    text-align: center;
    background: #283B5D;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    line-height: 2;
    font-family: 'NanumSquare', sans-serif;
}



#sub3-1_menu > ul li:nth-child(2) a{
    width: 250px;
    height: 60px;
    text-align: center;
    color: #283B5D;
    font-size: 20px;
    padding: 10px;
    line-height: 2;
    border: 1px solid #999;
    font-family: 'NanumSquare', sans-serif;
}



#sub3-1_menu > ul li:nth-child(2):hover a{
    border: 1px solid #283b5d;
}





/*-----납품실적*/

#sub3-2_menu{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    font-family: 'NanumSquare', sans-serif;
}

#sub3-2_menu > ul{
    display: flex;
    justify-content: space-between;
    width: 530px;
    margin: 0 auto;
}
#sub3-2_menu > ul li{
    margin-bottom: 100px;
}


#sub3-2_menu > ul li:nth-child(2) a{
    width: 250px;
    height: 60px;
    text-align: center;
    background: #283B5D;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    line-height: 2;
}



#sub3-2_menu > ul li:nth-child(1) a{
    width: 250px;
    height: 60px;
    text-align: center;
    color: #283B5D;
    font-size: 20px;
    padding: 10px;
    line-height: 2;
    border: 1px solid #999;
}



#sub3-2_menu > ul li:nth-child(1):hover a{
    border: 1px solid #283b5d;
}

#sub3-2_menu .tab3_cont{
width:900px;
margin:0 auto 150px;
}





/*============================================sub4==고객지원=================*/



.sub4_menu{
    padding-bottom: 150px;
    width: 850px;
    height: auto;
    margin: 0 auto;
	font-family: 'NanumSquare', sans-serif;
}

.sub4_menu > ul{
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
}


.tab4_cont{
    width: 850px;
    margin: 0 auto 200px;
}
.sub4_menu_text{width:850px;margin:0 auto;}
.sub4_menu_text p{
	display:block;
	width:150px;
	height:60px;
	text-align:center;
	margin:100px auto;
    font-family: 'NanumSquare', sans-serif;
    font-size: 35px;
    color: #333;
    font-weight: bold;
	border-bottom: 5px solid #283B5D;
}