.basic-body { padding: 0;}
main {font-family: "Noto Sans KR";}

.main-company { padding: 70px 0; }
.main-company .container { max-width: 1320px; padding: 0 10px;}
.main-company .flex { gap:80px;  align-items: center; }   
.main-company .left { position: relative; width: 46.15%; min-height: 520px;}

.main-company .left .img { overflow: hidden; position: absolute; border-radius: 50%; border: solid 7px #fff; }
.main-company .left .img.cir1 { left: 0; top: 10%;  z-index: 2;}
.main-company .left .img.cir2 { bottom: 0; right: 0; z-index: 3;}
.main-company .left .img.cir3 { top: 0; right: 10px;}

.main-company .right { flex:1; color: #111;}
.main-company .right .p1 { padding-bottom: 25px; font-size: 50px; font-weight: 700; line-height: 1; color: #111;  }
.main-company .right .p1 b { color: var(--red); }        
.main-company .right .p2 { font-size: 24px;font-weight: 500;}
.main-company .right .p3 {padding: 40px 0; font-size: 18px; line-height: 1.5; }
.main-company .right .go { font-size: 18px;}
.main-company .right .go:hover { color: var(--red) ;}
        
@media (max-width:1199px){
    .main-company .flex{ gap:60px}    
    .main-company .left .img.cir1 img{ width: 400px; }
    .main-company .left .img.cir2 img{ width: 240px; }
    .main-company .left .img.cir3 img{ width: 170px; }
}
@media (max-width:991px){
    .main-company .flex{ gap:40px}
    .main-company .left { min-height: 500px;}    
    .main-company .left .img.cir1 img{ width: 300px; }
    .main-company .left .img.cir2 img{ width: 200px; }
    .main-company .left .img.cir3 img{ width: 150px; }
}
@media (max-width:768px){
    .main-company .flex{ flex-direction:column; gap:40px}
    .main-company .left { width: 100%; min-height: 420px; }    
    .main-company .left .img.cir1{ top:0; }
    .main-company .left .img.cir1 img{ width: 400px; }                  
    .main-company .left .img.cir2 img{ width: 260px; }
    .main-company .left .img.cir3 img{ width: 190px; }            
    .main-company .right .p3 { padding: 30px 0;}          
}        
@media(max-width:576px){
    .main-company {padding: 50px 0;}      
    .main-company .left { min-height: auto;}                             
    .main-company .left .img.cir1 { position: static; border-radius: 0; border: 0;}
    .main-company .left .img.cir1 img { width: 100%; height: 250px; object-fit: cover;}                
    .main-company .left .img.cir2 { right: 10px;bottom: 10px;}
    .main-company .left .img.cir3 { right: 100px; top: inherit; bottom: 10px; }
    .main-company .left .img.cir2, 
    .main-company .left .img.cir3 { border: 1px solid #e1e1e1;}
    .main-company .left .img.cir2 img, 
    .main-company .left .img.cir3 img { width: 80px; height: 80px; object-fit: cover;}
    .main-company .right .p1 { font-size: 44px;}
    .main-company .right .p2 {font-size: 20px;}
    .main-company .right .p3 { padding: 20px 0;font-size: 15px;}
    .main-company .right .go {font-size: 15px;}        
}



.main-product ul { display: flex; }
.main-product ul li { position: relative;  flex:1; }

.main-product ul li a { overflow:hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap:50px; position: relative; z-index: 2; height: 100vh; color: #fff; transition: 0.3s;}

.main-product ul li a:before {content:''; display: block; position: absolute; inset: 0; background: no-repeat center / cover; transition: 0.3s;}
.main-product ul li:nth-of-type(1) a:before { background-image: url(/img/tk/m_prod1.png);}
.main-product ul li:nth-of-type(2) a:before { background-image: url(/img/tk/m_prod2.png);}
.main-product ul li:nth-of-type(3) a:before { background-image: url(/img/tk/m_prod3.png);}
.main-product ul li:nth-of-type(4) a:before { background-image: url(/img/tk/m_prod4.png);}

.main-product ul li a:after { content:''; display: block; position: absolute; inset:0; background: rgba(0,0,0,.5); transition: 0.5s; }
.main-product ul li a h3 { position: relative; z-index: 3; font-size: 60px; font-weight: 700; line-height: 1;}
.main-product ul li a p { position: relative; z-index: 3; font-size: 20px; font-weight: 500; line-height: 1; transition: 0.3s;}
.main-product ul li a p i {overflow: hidden; opacity: 0; position: absolute; right:-10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; line-height: 30px; font-size: 21px; background: var(--red); border-radius: 50%; text-indent: -2px;  }
.main-product ul li a:hover:before { transform: scale(1.1);}
.main-product ul li a:hover:after { opacity: .2; }
.main-product ul li a:hover p { padding-right: 55px; }
.main-product ul li a:hover i { opacity: 1; animation:moveLeftRight 1s .5s ease-in-out infinite both }

@media(max-width:991px){
    .main-product ul li a { min-height: 600px;}
}

@media(max-width:768px){
    .main-product ul { flex-wrap:wrap;}
    .main-product ul li { flex:auto; width: 50%;}
    .main-product ul li a { gap:30px; height: 400px;min-height: auto;;}
    .main-product ul li a:after {opacity: .6;}
    .main-product ul li a h3 { font-size: 50px;}
    .main-product ul li a p { opacity: .5; font-size: 16px; }
}
@media(max-width:576px){        
    .main-product ul li a { gap:0; height: 300px;min-height: auto;;}
    .main-product ul li a h3 { font-size: 40px;}
    .main-product ul li a p { display: none;}
}
@media(max-width:380px){        
  
    .main-product ul li { width: 100%;}
    .main-product ul li a { gap:0; height: 250px;min-height: auto;;}    
}

.main-prod { margin-top: 50px; }
.main-prod .hd { padding: 0 0 60px; text-align: center;}
.main-prod .hd h2 {font-size: 50px; font-weight: 700; color: #111; font-family: 'noto sans kr'; line-height: normal; }
.main-prod .hd span { display: block; padding: 20px 0 0; font-size: 24px; color: #444; line-height: normal; }

.main-prod1 { margin-top: 100px;}
.main-prod2 .ebg-shop019-m .goods-img-in { border: 1px solid #e1e1e1;}


@keyframes moveLeftRight {
    0% {right:-10px}
    50% {right:5px}
    100% {right:-10px}    
}

.main-customer { margin-top: 100px;}
.customer__maps,
.customer__info  {}

.customer__maps { overflow:hidden; flex:1; position: relative; height: 500px;}
.customer__maps .root_daum_roughmap {  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.customer__info {   display: flex; flex-direction: column; justify-content: center; gap:20px; width: 45%; text-align: center; background: #f9f9f9; }
.customer__info h2 { font-size: 32px; font-weight: 700;  }
.customer__info a { font-size: 50px; font-weight: 700; color: var(--red); }
.customer__info p { font-size: 16px; color: #999; text-align: center;  }

@media(max-width:991px){
    .customer__maps {height: 450px; }
    .customer__info  { width: 50%;}
}
@media(max-width:768px){
    .main-customer { margin-top: 80px;}
    .main-customer .flex { flex-direction: column;}
    .customer__maps { flex:inherit; height: 300px; }
    .customer__info  { padding: 50px 0; width: 100%; }
}

@media(max-width:576px){
    .main-customer { margin-top: 60px;}
    .main-customer .flex { flex-direction: column;}
    .customer__maps { flex:inherit; height: 300px; }
    .customer__info  { gap:10px; padding: 60px 0; width: 100%; }
    .customer__info h2 { font-size: 28px;}
    .customer__info a { font-size: 40px;}
    .customer__info p { font-size: 14px;}
}