body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 10px 20px;
}

.logo img{
	width:100px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 20px;
	font-size: 14px; }

nav ul li a {
    color: #212121;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}







.section-1{
	background: url('../images/main_img_01.jpg') no-repeat center; 
	padding: 150px 0;
	color: #fff; 
	text-align:center; 
}
.section-1 h4{
	font-size:18px; 
	color: #0E65D6; 
}
.section-1 p{
	font-size: 2.6em;
	margin-top:30px;
	color: #fff; 
}
.section-1 img{
	width: 160px; 
}

.section-2{
	background: #F1F1F1 url('../images/logo_w.svg') no-repeat center 105%; 
	background-size: 100%; 
	padding: 150px; 
	text-align:center; 
}

.subtle {padding: 80px 0; }
.subtle h4{
	text-align: center; 
	color: #0E65D6; 
	font-size: 18px; 
	margin-bottom:30px;
}

.subtle p{
	text-align: center; 
	line-height:120%;
	font-size: 56px; 
}

.section-2 .product{display:flex; justify-content: space-between; gap: 50px; }
.section-2 .product a{ width:100%; display:flex; align-items: center; padding: 140px 0;  border-radius:150px; font-size:2.3em; font-weight:bold; cursor:pointer; }
.section-2 .product a p{ width: 100%; display:inline-block; color: #fff; font-size:28px; font-weight:bold; cursor:pointer; }
.section-2 .product a:nth-child(1){background: url('../images/main_product_01.jpg') no-repeat center; background-size:cover; }
.section-2 .product a:nth-child(2){background: url('../images/main_product_02.jpg') no-repeat center; background-size:cover;}
.section-2 .product a:nth-child(3){background: url('../images/main_product_03.jpg') no-repeat center; background-size:cover;}
.section-2 .product a:nth-child(4){background: url('../images/main_product_04.jpg') no-repeat center; background-size:cover;}
.section-2 .product a:nth-child(1):hover, .section-2 .product a:nth-child(2):hover, .section-2 .product a:nth-child(3):hover, .section-2 .product a:nth-child(4):hover{background: #0E65D6;}

.container {
  width: 80%;
  max-width:1200px;
  margin:0 auto;
  text-align: center;
}




/*회사소개*/

.banner{
	background: url('../images/main_img_01.jpg') no-repeat center; 
	padding: 80px 0;
	color: #fff; 
	text-align:center; 
}

.banner img {width: 180px; }
.banner p {font-size: 48px; color: #fff; margin-top: 40px; }

.company_banner{width:100%; max-width:1200px; margin:0 auto; background: url('../images/company_banner_bg.jpg') no-repeat center; background-size: cover; padding: 80px 0; text-align: center; }
.company_banner h4{font-size: 36px; font-weight:700; }
.company_banner h4 span{color: #0E65D6; }
.company_banner p{color: #666; margin-top: 30px; line-height:150%; font-size:18px; width:90%; max-width:500px; margin:0 auto; margin-top:20px; word-break:keep-all; }


.greeting{width: 80%; max-width: 1200px;  margin:0 auto; display: flex; padding: 80px 0;  }
.greeting .left{width: 300px; padding-right: 80px;  }
.greeting .left img {width: 200px; }
.greeting .right{width: 70%; }
.greeting .right p{margin-bottom: 30px; word-break: keep-all; line-height: 160%;  }
.greeting .right .sign{display: flex; flex-direction: row;
    justify-content: flex-end;
    align-items: center; gap: 10px; }
.greeting .right .sign img{width: 80px; }


.vision{width: 80%; max-width: 1200px;margin:0 auto; display: flex; margin-bottom: 80px; gap: 40px; flex-wrap: wrap;}
.vision > div{width: 46%; }
.vision p{color: #0E65D6; font-weight: 700; border-bottom: 1px solid #0E65D6; padding-bottom: 10px;  }
.vision ul{padding: 20px 0; border-bottom: 1px solid #ccc;}
.vision ul li{margin-bottom:10px; font-weight:500; }



/*제품소개*/


.tabs {
  display: flex;
  cursor: pointer;
  margin-bottom: 20px;
}
.tab {
  flex: 1;
  font-size:1.2em;
  padding: 14px 0;
  background-color: #fff;
  border: 1px solid #666;
  transition: background-color 0.3s;
  display:flex;
  justify-content: center;
  align-items: center;
}
.tab:not(:last-child){
	border-right:0;
}
.tab:hover {
  background-color: #ddd;
}
.tab.active {
  background-color: #0E65D6;
  color: #fff;
  font-weight: bold;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #fff;
}
.tab-content.active {
  display: block;
}

.section-3 {padding: 150px 0; text-align: center;  }
.section-3 img{width:70%; max-width:930px;}
.section-3 .txt p{ width:90%; max-width:600px; margin:0 auto; color: #797979; line-height: 150%; margin-top: 70px; }
.section-3 .about{margin-top: 40px; }

.container .pro_box{ display:flex; gap: 20px; flex-wrap:wrap; flex-direction:row; }
.container #product1 .pro_box{ justify-content:center; }
.container #product2 .pro_box{ justify-content:center; }
.container #product3 .pro_box{ justify-content:row; }
.container #product4 .pro_box{ justify-content:row; }

.container .pro_box div{ width:31.5%; border:1px solid #ccc; background:#efefef; }
.container .pro_box div img{ width:100%; cursor:pointer; }
.container .pro_box p{ width:100%; padding:10px; }

.slide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}

/*팝업 박스*/
.popup_box{position: relative;top:50%;left:50%; overflow: auto; width:80%; max-width:900px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);}
/*컨텐츠 영역*/
.popup_box .popup_cont {line-height:1.4rem;font-size:14px; }
.popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;}
/*버튼영역*/
.popup_box .popup_btn {display:table;table-layout: fixed;width:100%;height:70px;background:#ECECEC;word-break: break-word;}
.popup_box .popup_btn a {position: relative; display: table-cell; height:70px;  font-size:17px;text-align:center;vertical-align:middle;text-decoration:none; background:#ECECEC;}
.popup_box .popup_btn a:before{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.popup_box .popup_btn a:after{content:'';display:block;position:absolute;top:26px;right:29px;width:1px;height:21px;background:#fff;-moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.popup_box .popup_btn a.close_day {background:#5d5d5d;}
.popup_box .popup_btn a.close_day:before, .popup_box .popup_btn a.close_day:after{display:none;}




.swiper {
  width: 100%;
  /* height: 300px; */
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background: #ddd;
}



/*오시는 길*/

#map_box{
	width:100%;
	position:relative;
	margin-bottom: 230px;
}

.map{display: flex; align-items: center; width: 70%; margin:0 auto; margin-top:-150px; padding: 80px 0; background: url('/images/map_box_bg.jpg') no-repeat center; z-index: 999; }
.map .left{width: 30%; text-align: center;  }
.map .left img{width:120px; }
.map .line{width:1px; height: 120px; background:#fff; }
.map .right{display: flex; gap: 20px; flex-direction: column; width: 70%; padding: 0 60px;   }
.map .right h4{color: #fff; width: 80px;  }
.map .right p{color: #fff;  }
.map .right div{display: flex;}


/*footer*/

.section-4 {display:flex; flex-wrap: wrap; }
.section-4 > div {width: 50%; }

.location{display: flex; flex-direction: column; justify-content: center; background: url('../images/main_location.jpg') no-repeat center;    background-size: cover; padding: 130px 0; cursor:pointer; }
.location h4, .location p{color:#fff; text-align:center; font-weight: 700; }
.location p{font-size: 3em; margin-top: 20px;  }

.tel{background: #f1f1f1; padding: 60px 0; display: flex;  align-items: center; justify-content: center; }

.tel .left{ text-align: center; padding: 0 3vw; }
.tel .left img{width: 137px; }
.tel .left p{margin-top: 25px; font-size: 1.5em; }
.tel .line {height:160px; width: 1px; background:#aaa; }

.tel .right{ padding: 0 3vw; }
.tel .right p{margin-bottom:20px; font-weight:700; font-size: 1.4em; }
.tel .right p span{color: #0E65D6; font-weight:700; padding-right:40px;  }
.tel .right .time{margin-top:40px; }
.tel .right .time p{ font-size:16px; font-weight:500; line-height:180%; letter-spacing:-1; }




footer{ background: #4D4D4D; text-align: center; padding: 40px 0;   }
footer p {color: #fff; word-break:keep-all; font-weight:200; line-height:200%; font-size:14px; }
	
@media (max-width: 1200px) {
	.section-1{ padding: 100px 0; }
	.section-1 p{ font-size: 3.5vw; }
	
	.section-2{ padding: 100px; }
	.section-2 .product{display:flex; justify-content: space-between; gap: 20px; }
	.section-2 .product p{  }
	
	.subtle p{ text-align: center; font-size: 4.5vw; }

	.map{display: block; width: 100%; }
	.map .left{width: 0%; display:none; }
	.map .line{width: 0%; display:none; }
	.map .right{display: flex; gap: 20px; flex-direction: column; width: 100%; padding: 0 60px;   }
	.map .right div{display: flex;}
	
	.container .pro_box{ justify-content:space-between; }
	.container .pro_box div{ width:48%;}
}

@media (max-width: 1060px) {

	
	.section-2 .product a p{ width:100%; font-size: 24px;  }

	.section-4 > div{ width: 100%; }
	.tel {flex-wrap: wrap;}
	.tel .line {display:none; }
	.greeting .left{display:none; }
	.greeting .right{width:100%; }
	.vision > div{width: 100%;}
	
	footer p { font-size:12px; }
}

@media (max-width: 900px) {
	.container .pro_box div{ width:100%;}
	
	
}

@media (max-width: 800px) {

	.section-2{
		width:100%;
		padding: 6vh 0;
		background: #F1F1F1 url('../images/logo_w.svg') no-repeat center 100%; 
		background-size: 100%; 
	}
	.section-2 .product{ flex-wrap: wrap; padding: 0 40px; }
	.section-2 .product a{ padding: 40px 0; }
	
}

	
@media (max-width: 515px) {
	.section-1{ padding: 6vh 0; }
	.section-1 p{ font-size: 5vw; }

	

	.section-3 {padding: 6vh 0; text-align: center;  }
	
	.subtle {padding: 40px 0; }
	.subtle h4{ font-size: 4vw; }
	.subtle p{ text-align: center; font-size: 5vw }
	
	/*서브*/
	.banner p { font-size: 5vw; }

	.company_banner{ padding: 6vh 0; }
	.company_banner h4{ font-size: 5vw; font-weight:700; }
	.company_banner p{ font-size: 3.5vw;  }

	.greeting{width: 90%; margin:0 auto; padding: 6vh 0;  }
	.greeting .right .sign{display: block; position:relative; }
	.greeting .right .sign p:first-child{ margin-bottom:0; }
	.greeting .right .sign img{ width: 80px; position:absolute; right:0; bottom:0; }

	.tabs { display:block; }
	.tab {  font-size:4vw; border: 1px solid #666; margin-bottom:1vh; }
	.tab:not(:last-child){
		border: 1px solid #666;
	}

	.map{display: block; width: 100%; }
	.map .left{width: 0%; display:none; }
	.map .line{width: 0%; display:none; }
	.map .right{display: flex; gap: 20px; flex-direction: column; width: 90%; padding:0; margin:0 auto; }
	.map .right div{display: flex;}
	
	.location{ padding: 6vh 0; }
	.location p{font-size: 28px; margin-top: 10px;  }
	
	.tel .left p{ margin: 2vh; font-size: 4vw; }
	.tel .right p{margin-bottom: 1vh; font-weight:700; font-size: 4vw; text-align:center; }
	.tel .right .time p{ font-size: 3vw; line-height:150%; }
	.tel .right .time{margin-top:2vh; }
}

@media (max-width: 420px) {
	.map .right h4{ display:none; }
}