@charset 'utf-8';
.marker1 { position: relative;}
span.marker1 {display: inline-block;}
.marker1:after { content:''; display: block; position: absolute; right: -20px; top: -10px; width: 15px; height: 15px; background: url(/img/es/marker1.png) no-repeat center; }
main {}
main section { position: relative; padding: 100px 0;}
main section .title { padding: 0 0 50px;  text-align: center;}
main section .title h2 { padding: 0 0 15px; font-size: 42px; font-weight: 500; } 
main section .title h2 span::first-letter { color: #1a3b80;} 
main section .title p { font-size: 16px; word-break: keep-all; line-height: 1.5;}

@media (max-width:991px){
    main section { position: relative; padding: 90px 0;}
    main section .title { padding: 0 0 45px;}
    main section .title h2 { padding: 0 0 15px; font-size: 40px; } 
}
@media (max-width:768px){
    main section { position: relative; padding: 70px 0;}
    main section .title { padding: 0 0 40px;}
    main section .title h2 { padding: 0 0 15px; font-size: 38px; } 
}
@media (max-width:576px){
    main section { position: relative; padding: 60px 0;}    
    main section .title { padding: 0 0 35px;}
    main section .title h2 { padding: 0 0 15px; font-size: 34px; } 
    main section .title p { font-size: 15px; }
}
@media (max-width:440px){
    main section { position: relative; padding: 50px 0;}    
    main section .title { padding: 0 0 30px;}
    main section .title h2 { padding: 0 0 15px; font-size: 30px; } 
}


main .prod { background: url(/img/es/bg_prod.png) no-repeat center / cover;}
main .prod .article { margin: 0 -15px;}
main .prod .article li { flex:1; margin: 0 15px; height: 440px; }
main .prod .article li a { overflow:hidden; display: block; position: relative; padding: 40px 30px 0; width: 100%; height: 100%; font-weight: 300; color: #999; box-shadow: 0 0 6px rgba(0,0,0,.2) ; background: url(/img/es/bg_white.gif) center / cover; transition: 0.2s; }
main .prod .article li a .head h3 { font-size: 30px; color: #111;}
main .prod .article li a .head .en { padding: 20px 0 40px; font-size: 16px;}
main .prod .article li a .img { position: absolute; right:0; bottom: 0; transform: scale(.9);  transition: 0.3s; transform-origin:  right bottom; }
main .prod .article li a .img img { max-width: 100%;}
main .prod .article li a > p { position: relative; z-index: 2; font-size: 16px; line-height: 1.5;  word-break: keep-all;}
main .prod .article li a .more { position: absolute; left: 30px; bottom: 50px; font-size: 16px; color: #111; }
main .prod .article li a:hover { color: #a0b4de; background: url(/img/es/bg_m_prod.jpg) no-repeat center / cover;}
main .prod .article li a:hover .head h3 { color: #fff;}
main .prod .article li a:hover .img { transform: scale(.95)} 
main .prod .article li a:hover .more { color: #fff; font-weight: 400;}
main .prod .article li a:hover .more i { font-weight: 700;}

@media (max-width:1199px){
    main .prod .article { margin: 0 -5px;}
    main .prod .article li { margin: 0 5px;}
    main .prod .article li a { padding: 40px 25px 0;}
    main .prod .article li a .img { transform: scale(.8)} 
    main .prod .article li a .more { left: 25px;}
}
@media (max-width:991px){
    main .prod .article {flex-wrap:wrap; margin: 0 0 -20px;}    
    main .prod .article li {flex:inherit; margin: 0 0 20px;  width: 49%; height: 300px;}    
    main .prod .article li a .head h3 { font-size: 28px; }
    main .prod .article li a .head .en { padding: 10px 0 15px;}
    main .prod .article li a .img { transform: scale(.65);}
    main .prod .article li a:hover .img { transform: scale(.8)} 
}
@media (max-width:768px){    
    main .prod .article li a { padding: 35px 20px 0;}
    main .prod .article li a .head h3 { font-size: 24px; }
    main .prod .article li a .head .en { padding: 10px 0 20px; font-size: 15px;}
    main .prod .article li a .img { transform: scale(.5);}
    main .prod .article li a:hover .img { transform: scale(.6)} 
    main .prod .article li a .more { left: 20px; bottom: 30px;}
}
@media (max-width:576px){    
    main .prod .article { margin: 0 0 -15px;}
    main .prod .article li { margin: 0 0 15px; height: 320px;}
    main .prod .article li a { padding: 35px 20px 0;}
    main .prod .article li a .head h3 { font-size: 22px; }    
    main .prod .article li a .head .en { padding: 10px 0 15px; }
    main .prod .article li a > p { font-size: 15px;}
}
@media (max-width:440px){    
    main .prod .article { margin: 0 0 -10px;}
    main .prod .article li { margin: 0 0 10px; width: 100%; height: 250px;}
    main .prod .article li a { padding: 30px 15px 0;}
    main .prod .article li a .head h3 { font-size: 20px; }        
    
}



main .introduce { margin: 0 0 40px; background: url(/img/es/bg_m_introduce.jpg) no-repeat center fixed;}
main .introduce p { font-size: 20px; line-height: 1.6; color: #fff; text-align: center; word-break: keep-all; }
main .introduce p span { display: block;}
main .introduce a { display: block; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 24px 0; width: 350px; text-align: center; color: #fff; background:  #f3442d;  }
main .introduce a:hover { background:#003f7e}
main .introduce a:after { content:''; display: block; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: #f3442d; transition:.3s }
main .introduce a:hover:after { opacity:1; border-bottom-right-radius:60% 70%}

@media (max-width:991px){
    main .introduce a { padding: 20px 0;}
}

@media (max-width:768px){
    main .introduce p  { font-size: 18px;}
    main .introduce a { padding: 18px 0; width: 320px;}
}
@media (max-width:576px){
    main .introduce p  { font-size: 16px;}
    main .introduce a { padding: 15px 0; width: 300px;}
}
@media (max-width:440px){    
    main .introduce a {  width: 280px;}
}



main .location { background: url(/img/es/bg_m_location.jpg) no-repeat center /cover   ;}
main .location article {}
main .location article .info { padding: 50px 0 0 65px; width: 560px;  color: #111; background: #fff;}
main .location article .info h3 { font-size: 35px; font-weight: 400; ;}
main .location article .info .tel { padding: 20px 0 30px; font-size: 48px; font-weight: 700; line-height: 1; color: #111;}
main .location article .info .tel a:focus { color: #111;} 
main .location article .info .info1 { padding: 0 0 15px;}
main .location article .info .info1 li { padding: 0 0 10px 10px; font-size: 16px; font-weight: 300; line-height: 1.2; text-indent: -10px;}
main .location article .info .info2 { display: flex; flex-wrap:wrap; margin: 0 -5px -10px; width: 100%; max-width: 390px; }
main .location article .info .info2 li { margin: 0 5px 10px;  width: calc(50% - 10px); max-width: 190px;}
main .location article .info .info2 li.account { width: 100%; max-width: 390px;}
main .location article .info .info2 li a {  display: block; width: 100%; height: 55px; text-align: center; font-size: 16px;line-height: 300; line-height: 55px;}
main .location article .info .info2 li.contact a { color: #fff; background: #003f7e;}
main .location article .info .info2 li.kakao a { color: #3e2723; background: #ffd900;}
main .location article .info .info2 li.kakao a i { display: inline-block; margin: 0 0 -10px 10px;   width: 32px; height: 30px; background: url(/img/es/ico_kakao.png) no-repeat center; } 
main .location article .info .info2 li.account a { color: #fff; font-weight: 400; background: #3e2723;}
main .location article .map-box { width: calc(100% - 560px);}

@media (max-width:1199px){
    main .location article .info {width: 520px;}
    main .location article .map-box { width: calc(100% - 520px); }
}
@media (max-width:991px){
    main .location article .info { padding: 50px 25px 0; width:50%}    
    main .location article .info h3 { font-size: 30px; }    
    main .location article .info .tel { font-size: 40px;}
    main .location article .info .info2 li { }
    main .location article .map-box { width: 50%;}
}
@media (max-width:768px){
    main .location article { flex-direction: column-reverse;}
    main .location article .info { position: relative; padding: 30px; width:100%}        
    main .location article .info:after {opacity: .5;  content:''; display: block; position: absolute; right: 30px; top:108px; width: 192px; height: 45px; background: url(/img/es/logo2.png) no-repeat center / contain;}
    main .location article .info h3 { font-size: 22px; }    
    main .location article .info .tel { padding: 15px 0 20px; font-size: 32px;}
    main .location article .info .info2 li { }
    main .location article .map-box { overflow:hidden; position: relative; width: 100%; height: 300px;}
    main .location article .map-box .root_daum_roughmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
}
@media (max-width:670px){
    main .location article .info:after { opacity: .3; top: 220px; right: -50px; transform: rotate(90deg);}
}
@media (max-width:576px){
    main .location article .info { padding: 30px 20px;}
    main .location article .info:after { display: none;}
    main .location article .info .tel { font-size: 30px; }
    main .location article .info .info1 li { padding: 0 0 7px 10px; font-size: 15px;}
    main .location article .info .info2 li a { height: 50px; line-height: 50px; font-size: 15px;}
}
@media (max-width:440px){
    main .location article .info { padding: 25px 10px;}
    main .location article .info h3 {font-size: 20px;}
    main .location article .info .tel { padding: 13px 0 15px; font-size: 28px; }
    main .location article .info .info1 li { padding: 0 0 7px 10px; }
    
    main .location article .info .info2 li a { height: 50px; line-height: 50px;}
}