@charset "utf-8";

/* LG스마트체 웹폰트 */
/*
@font-face {
  font-family: 'LGSmHaL';
  src: url('../resource/fonts/LGSmHaL.eot');
  src: local('LGSmHaL'),
       url('../resource/fonts/LGSmHaL.woff') format('woff'),
       url('../resource/fonts/LGSmHaL.ttf') format('truetype'); }

@font-face {
  font-family: 'LGSmHaR';
  src: url('../resource/fonts/LGSmHaR.eot');
  src: local('LGSmHaR'),
       url('../resource/fonts/LGSmHaR.woff') format('woff'),
       url('../resource/fonts/LGSmHaR.ttf') format('truetype'); }

@font-face {
  font-family: 'LGSmHaSB';
  src: url('../resource/fonts/LGSmHaSB.eot');
  src: local('LGSmHaSB'),
       url('../resource/fonts/LGSmHaSB.woff') format('woff'),
       url('../resource/fonts/LGSmHaSB.ttf') format('truetype'); }

@font-face {
  font-family: 'LGSmHaB';
  src: url('../resource/fonts/LGSmHaB.eot');
  src: local('LGSmHaB'),
       url('../resource/fonts/LGSmHaB.woff') format('woff'),
       url('../resource/fonts/LGSmHaB.ttf') format('truetype'); }
*/
/* NotoSans */
/* 
@font-face {
  font-family: 'NotoSans';
  font-weight: 600;
  font-display: swap;
  src: local('NotoSans-Bold'),
  url(../../fonts/NotoSans-Bold.woff2) format('woff2'),
  url(../../fonts/NotoSans-Bold.woff) format('woff'),
  url(../../fonts/NotoSans-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'NotoSans';
  font-weight: 500;
  font-display: swap;
  src: local('NotoSans-Medium'),
  url(../../fonts/NotoSans-Medium.woff2) format('woff2'),
  url(../../fonts/NotoSans-Medium.woff) format('woff'),
  url(../../fonts/NotoSans-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'NotoSans';
  font-weight: 400;
  font-display: swap;
  src: local('NotoSans-Regular'),
  url(../../fonts/NotoSans-Medium.woff2) format('woff2'),
  url(../../fonts/NotoSans-Medium.woff) format('woff'),
  url(../../fonts/NotoSans-Medium.otf) format('opentype');
}
*/
/*---------------------------------------------------------------------------------------*/

.modal-border-wrapper * {
  font-family: 'NotoSans';
  font-weight: 400 ;
  font-size: 14px ;
  color: #1f1f1f ;
  line-height: 1.5 ; 
  margin: 0 ; 
  padding: 0 ; }

.modal-border-wrapper a { color: #2d9bb2; text-decoration: underline; }
.modal-border-wrapper p { color: #5c5c5c; margin: 0; }
.modal-border-wrapper strong { font-weight: 600; }
.modal-border-wrapper h2 { color: #d90044; font-size: 22px; font-weight: 600; margin:30px 0 0px 0; }


.modal-overlay {
/*
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  */
}

.modal-border-wrapper {
  border: 8px solid #d90044; 
  max-width: 1220px;
  width: 94%;
  background: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.modal-border-wrapper .modal-content {
  position: relative;
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(
    -45deg,
    #d90044,
    #d90044 10px,
    #fff 10px,
    #fff 20px
  ) 12;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-border-wrapper .modal-inner { padding: 30px 40px; }

.modal-border-wrapper .modal-header h1 { font-size: 30px; font-weight: 600; text-align: center; color: #1f1f1f; margin: 10px 0 0 0; }
.modal-border-wrapper .brand-name { font-size: 16px; font-weight: 600; text-align: center; margin: 0px 0 20px; color: #1f1f1f; }
.modal-border-wrapper .sub-header { font-size: 18px; font-weight: 600; text-align: center; margin: 0 0 10px 0; }
.modal-border-wrapper .sub-header span { font-size: 16px; font-weight: 400; color: #424242; position: absolute; right: 40px; }

.modal-border-wrapper .product-grid-title { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #bdbdbd; border-bottom: none; margin: 0; }
.modal-border-wrapper .product-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid #bdbdbd; margin: 0; }

.modal-border-wrapper .product-item-title { height: 60px; border-right: 1px solid #bdbdbd; text-align: center; font-size: 16px; font-weight: 600; color: #1f1f1f; line-height: 1.2; background: #eaeaea; display: flex; flex-direction: column; justify-content:center;  }
.modal-border-wrapper .product-item-title p { color: #1f1f1f; font-weight: 500; line-height: 1.2; }

.modal-border-wrapper .product-item { border-right: 1px solid #bdbdbd; background: #f5f5f5; }
.modal-border-wrapper .product-item:last-child { border-right: none; }
.modal-border-wrapper .product-item img { width: 100%; height: auto; margin: 4px 0 0 0;  }

.modal-border-wrapper .recall-info { font-size: 14px; line-height:1.6; margin: 10px 0 4px 0; }
.modal-border-wrapper .recall-info .serial { display: flex;}
.modal-border-wrapper .recall-info .serial span { width: 260px; }
.modal-border-wrapper .recall-info .serial .de { width: 308px; }
.modal-border-wrapper .recall-info .serial .it { width: 280px; }
.modal-border-wrapper .recall-info .serial .es { width: 360px; }
.modal-border-wrapper .recall-info .detail { display: inline-block; color: #5c5c5c; }

.modal-border-wrapper .content-section p { color: #5c5c5c; margin: 0 0  12px 0; }
.modal-border-wrapper .content-section strong { font-weight: 600; }

.modal-border-wrapper .remedies { }
.modal-border-wrapper .remedies .serial { display: flex;}
.modal-border-wrapper .remedies .serial span { width: 496px; }
.modal-border-wrapper .remedies .serial .de { width: 430px; }
.modal-border-wrapper .remedies .serial .it { width: 780px; }
.modal-border-wrapper .remedies .serial .es { width: 700px; }
.modal-border-wrapper .remedies .detail { display: inline-block; color: #5c5c5c; }

.modal-border-wrapper .modal-footer { background: #f8f8f8; padding: 20px 40px; margin-top: 10px;  }
.modal-border-wrapper .modal-footer h3 { font-size: 22px; color: #2e2e2e; font-weight: 500; line-height: 1.2; margin-top: 0; padding: 0; }
.modal-border-wrapper .contact-links { list-style: none; padding: 6px 0 15px 0; }
.modal-border-wrapper .contact-links li { list-style: none; padding: 0; font-size: 13px; color: #5c5c5c; }
.modal-border-wrapper .contact-links strong { font-weight: 500; }
.modal-border-wrapper .contact-links span { color: #5c5c5c; margin: 0 30px 0 0; }

.modal-border-wrapper .spread-news { color: #d90044; font-weight: 600; margin: 0 0 30px 0; font-size: 16px; }

.modal-border-wrapper .popup-priority-close,.modal-border-wrapper .popup-close {
  position: absolute !important;
  top: 20px !important; 
  right: 10px !important;
  font-size: 40px !important; 
  border: none !important; 
  background: none !important;
  cursor: pointer !important; 
  color: #979998 !important; 
  z-index: 100 !important;
}

.modal-border-wrapper .popup-priority-close:hover, .modal-border-wrapper .popup-close:hover{ opacity: 0.6 !important; }