/* ===================== CSS Variables ===================== */
:root{
  --brand:#459cfe;
  --basic: #737373;
  --bg:#ffffff;
  --line:#cecece;
  --border: #dcdfe5;
}
@font-face {
  font-family: 'GmarketSans';
  src: url('/images/bidq/etc/GmarketSansLight.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('/images/bidq/etc/GmarketSansMedium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSans';
  src: url('/images/bidq/etc/GmarketSansBold.otf') format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* ===================== Base / Reset ===================== */
* {margin:0; padding:0; box-sizing:border-box; font-family: 'GmarketSans', sans-serif;}
body {font-family: 'GmarketSans', sans-serif;}
img {max-width:100%; height:auto}
a {color:inherit;text-decoration:none}
h1,h2,h3,h4 {font-weight:bold;}
ul,li {list-style: none;}
.inner {width:min(1200px,94%); margin-inline:auto}
.title {text-align:center; margin-bottom: 48px;}
.title p {font-size: 24px; color: var(--basic); margin-bottom: 17px;}
.title h2 {font-size: 42px; letter-spacing: -1px;}

/* ===================== Visual ===================== */
.area_visual{
    width: 100%;
    height: 830px;
    background: #fff7e3 url(/images/bidq/event/sgmaster/bg_head.png)center no-repeat; 
    text-align:center;
    padding: 0 5% 30px 5%;
}
.visual_text {padding: 70px 0 40px 0; letter-spacing: -1px;}
.visual_text h1 {font-size: 56px;}
.visual_text p {font-size:24px; color:#616161; font-weight: 500; margin-top: 10px;}
.visual_text b {color: var(--brand);}
.area_visual .video{width:min(700px,96%);margin:0 auto;border-radius:16px;overflow:hidden;aspect-ratio:16/9;}
.area_visual iframe{width:100%;height:100%;border:0}
.area_visual .store-badges{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px}
.area_visual .store-badges span {background: var(--bg); padding: 13px 30px; border-radius: 50px; box-shadow: 0 8px 24px #f9ecd2;}
.area_visual .store-badges img {display: inline-block; vertical-align: middle;}


/* ===================== 공지/뉴스 ===================== */
.section1{padding:80px 0;background:#fff}
.section1 .title font {color: var(--brand);}
.section1 .board {width:100%; margin:0 auto; border-top:1px solid var(--line)}
.section1 .row {
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:30px;
  align-items:center;
  padding:35px 0;
  border-bottom:1px solid var(--line);
  font-size:18px;
}
.section1 .row .news{color:var(--brand); font-weight:bold;}
.section1 .row .con{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.section1 .row .date{color:var(--basic); font-variant-numeric:tabular-nums}

/* ===================== 안전보건 수준평가 ===================== */
.section2 {padding-top:80px; 
  background: linear-gradient(to bottom, #d5e8ff 0%, #d5e8ff 10%, #e9f3ff 30%, #e9f3ff 100%);}
.section2 h2 font{color:#3273d6;}
.section2 .caution{
  display: flex;
  width: 100%;
  min-height: 136px;
  justify-content: center;
  align-items: center;
  padding: 38px 0;
  background:
    url('/images/bidq/event/sgmaster/bx.png') top    / 80px 14px repeat-x,
    url('/images/bidq/event/sgmaster/bx.png') bottom / 80px 14px repeat-x,
    #fff;
}
.section2 .caution .ico {width: 70%; display: flex; align-items: center; padding: 0 20px; gap: 20px; color: var(--basic); line-height: 22px; }
.section2 .caution .ico b {color: #000;}
.section2 .content {margin-top: 50px; position: relative;}
.section2 .content::after {
  content: "";
  display: block;
  padding-top: 94%;
}
.section2 .content img {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto;}

/* ===================== 발주기관별 템플릿 ===================== */
.section3{padding:80px 0;background:#fff}
.section3 .title{margin-bottom:25px}
.section3 .title h2 font{color:#24aeca;}
.section3 .tag{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  margin-bottom: 69px;
}
.section3 .tag span{
  background:#d6eff4;
  color:#2f5e80;
  padding:20px 30px 16px 30px;
  border-radius:999px;
  font-size:18px
}
.section3 .video {text-align:center; margin:22px 0 70px 0}
.section3 .video img{width:min(700px,96%);margin:0 auto;aspect-ratio:16/9}
.section3 .logo-list ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.section3 .logo-list li{
  height: 103px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

/* ===================== 안전관리 시스템 ===================== */
.section4 {padding:80px 0; background:#eff7ff;}
.section4 .title {line-height: 52px;}
.section4 .title font{color:var(--brand); font-weight: 500;}
.section4 .content{display:grid;gap:34px}
.section4 .service{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.section4 .SV_list{text-align:center;}
.section4 .SV_list h3{font-size:24px; margin: 30px 0 15px 0;}
.section4 .SV_list p{color: var(--basic); line-height: 26px; font-size: 18px; margin-bottom: 30px;}
.section4 .service_card{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
}
.section4 .card_list{
  display:flex; 
  gap:16px; 
  align-items:center;
  background:var(--bg); 
  border:1px solid var(--line);
  border-radius:12px; 
  padding:25px 0 20px 30px;
}
.section4 .card_text h4 {font-size:18px; margin-bottom:5px;}
.section4 .card_text p {font-size:18px; color:var(--basic); line-height: 24px;}

/* ===================== 무료체험 ===================== */
.section5 {
  width: 100%;
  background:url('/images/bidq/event/sgmaster/bg_footer.png') center no-repeat; 
  background-size: cover; 
}
.section5 .inner {position: relative;}
.section5 .inner::after {
  content: "";
  display: block;
  padding-top: 60%;
}
.section5 img {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: auto;}

/* ===================== Footer ===================== */
footer{
  background:#0b1226;
  color:rgba(255, 255, 255, 0.3);
  text-align:center;
  padding:40px;
  font-size:13px;
  padding-bottom: 140px;
  z-index: 10;
  position: relative;
  letter-spacing: 0.5px;
}

/* ===================== Bottom Fixed Banner ===================== */
.banner_bottom{
  height: 100px;
  position:fixed;
  inset:auto 0 0 0;
  z-index:999;
  background:var(--brand);
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}
.banner_bottom .strong{font-size:36px;font-weight:bold; padding-top: 7px;}
.banner_bottom .btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#106acf;
  color:#fff;
  padding:15px 70px 12px 26px;
  border-radius:999px;
  font-weight:bold;
  font-size: 24px;
}
.banner_bottom .btn font, .banner_bottom .btn i {color: #fff072;}
.banner_bottom .btn i {font-size: 20px;}
.banner_bottom .btn img{position: absolute; right: -7px; top: 4px;}

/* .banner_bottom{
  position:fixed;
  inset:auto 0 0 0;
  z-index:999;
  background:var(--brand);
  color:#fff;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  align-items:center;
}
.btn_bottom {width: 50%; height: 100px; display:flex; align-items:center;}
.btn_bottom a {
  display: flex; 
  align-items:center; 
  width: 100%; 
  height: 100%;
  gap: 14px;
  padding: 0 25px;
}
.btn_bottom b {font-size:36px; padding-top: 7px;}
.btn_bottom span {
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#fff;
  border-radius:999px;
  font-weight:bold;
  font-size: 24px;
}
.btn_left {background: #248e64;}
.btn_left a {justify-content: end;}
.btn_left span { background:#055133; padding:15px 26px 12px 26px;}
.btn_right span { background:#106acf; padding:15px 70px 12px 26px;}
.btn_right img {position: absolute; right: -7px; top: 4px;}
.btn_right i {font-size: 20px;}
.btn_bottom font, .btn_bottom i {color: #fff072;} */

@media (max-width:1024px) and (min-width:769px) {
  .banner_bottom{height: 84px}
  .banner_bottom .strong{font-size:28px}
  .banner_bottom .btn{font-size:20px; padding:12px 64px 10px 22px}
  .banner_bottom .btn i{font-size:18px}
  .banner_bottom .btn img {width: 24%;}
}
@media (max-width:768px) and (min-width:561px) {
  .banner_bottom{height: 74px; gap:10px}
  .banner_bottom .strong{font-size:22px; padding-top: 2px}
  .banner_bottom .btn{font-size:18px; padding:10px 56px 8px 18px}
}
@media (max-width:560px) {
  .banner_bottom{height: 64px}
  .banner_bottom .strong{font-size:18px}
  .banner_bottom .btn{font-size:16px; padding:9px 48px 7px 16px}
}
@media (max-width:560px) and (min-width:540px) {
  .banner_bottom .btn img {width: 21.6%;}
}
@media (max-width:539px){
  .banner_bottom{height: 62px}
  .banner_bottom .strong{padding-top: 2px;}
  .banner_bottom .btn {padding: 8px 35px 6px 14px;}
  .banner_bottom .btn i {font-size: 14px;}
  .banner_bottom .btn img {width: 20%;}
}
@media (max-width:399px){
  .banner_bottom .btn {padding: 8px 35px 6px 14px;}
  .banner_bottom .btn i {font-size: 14px;}
  .banner_bottom .btn img {width: 20%;}
}
@media (max-width:370px){
  .banner_bottom {flex-wrap: wrap; height: auto; gap: 4px; padding: 10px;}
}

/* @media (max-width:1510px) and (min-width:769px) {
  .btn_bottom {width: 100%; height: 84px;}
  .btn_bottom a {justify-content: center;}
  .btn_bottom b {font-size:28px}
  .btn_bottom span {font-size:20px;}
  .btn_right i {font-size:18px}
  .btn_right img {width: 24%;}
  .btn_right span {padding:12px 64px 10px 22px;}
}
@media (max-width:768px) and (min-width:561px) {
  .btn_bottom {width: 100%; height: 74px; gap:10px}
  .btn_bottom a {justify-content: center;}
  .btn_bottom b {font-size:22px; padding-top: 2px}
  .btn_bottom span {font-size:18px;}
  .btn_right i {font-size:16px}
  .btn_right span {padding:10px 56px 8px 18px;}
  .btn_right img {width: 22%;}
}
@media (max-width:560px) {
  .btn_bottom {width: 100%; height: auto; padding: 10px;}
  .btn_bottom a {display: inline-block; width: 100%; height: 100%; text-align: center;}
  .btn_bottom b {font-size:18px; padding-top: 1px;}
  .btn_bottom span {font-size:16px; padding:9px 16px 7px 16px; margin-top: 5px;}
  .btn_right span {padding-right: 48px;}
  .btn_right i {font-size:14px}
}
@media (max-width:560px) and (min-width:540px) {
  .btn_right img {width: 21.6%;}
}
@media (max-width:539px){
  .btn_right span {padding: 8px 35px 6px 14px;}
  .btn_right i {font-size: 14px;}
  .btn_right img {width: 20%;}
}
@media (max-width:399px){
  .btn_right span {padding: 8px 35px 6px 14px;}
  .btn_right i {font-size: 14px;}
  .btn_right img {width: 20%;}
} */

/* ===================== Responsive ===================== */

@media (max-width:1024px) and (min-width:769px) {
  .inner{width:min(1000px,94%);}
  .title h2 {font-size: 38px;}
  .title p{font-size:20px}

  .area_visual{height:auto; padding:56px 0 40px; background-size: cover;}
  .visual_text{padding: 20px 0 24px}
  .visual_text h1{font-size:42px}
  .visual_text p{font-size:20px}

  /* 공지/뉴스: 열 좁힘 */
  .section1 .row{
    grid-template-columns: 110px 1fr auto;
    gap:16px; padding:22px 0; font-size:16px;
  }

  /* 템플릿 로고: 2~3열 자동 */
  .section3 .tag span {font-size: 15px;}
  .section3 .logo-list ul{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* 시스템 특징: 상단 카드 2열 */
  .section4 .service{
    display:grid;
    grid-template-columns: repeat(2, minmax(260px,1fr));
    gap: 20px;
  }
  .section4 .SV_list p{font-size:16px; line-height:24px}

  /* 하단 작은 카드: 2열 */
  .section4 .service_card{
    grid-template-columns: repeat(2, minmax(260px,1fr));
  }

  /* 섹션5: 백그라운드 레이아웃 유지 */
  .section5 .inner::after{padding-top: 56%;}
  .section5 img{width: 90%;}
}

@media (max-width:768px) and (min-width:561px) {
  .inner{width:94%}
  .title{margin-bottom:32px}
  .title p{font-size:18px}
  .title h2{font-size:30px}

  .visual_text h1{font-size:34px}
  .visual_text p{font-size:18px}
  .area_visual .store-badges{gap:10px}
  .area_visual .store-badges span{padding:10px 18px}

  /* 공지/뉴스: 1열로 쌓기 */
  .section1 .row {
    display: grid;
    grid-template-columns: 1fr; /* 한 줄만 */
    grid-template-rows: auto auto auto; /* 3줄 */
    gap: 6px;
    font-size: 17px;
    line-height: 1.6;
    padding: 16px 0;
  }

  .section1 .row .news {
    grid-row: 1;
    font-size: 16px;
    color: var(--brand);
    font-weight: bold;
  }

  .section1 .row .con {
    grid-row: 2;
    font-size: 17px;
    line-height: 1.6;
    white-space: normal;   /* 줄바꿈 허용 */
    overflow: visible;
    text-overflow: unset;  /* … 제거 */
  }

  .section1 .row .date {
    grid-row: 3;
    font-size: 15px;
    color: var(--basic);
  }
  /* 경고 박스(스트립) */
  .section2 .caution{padding: 26px 0}
  .section2 .caution .ico{width: 92%; gap:12px; font-size:14px; line-height:20px}
  .section2 .caution .ico img{width:28px}

  /* 템플릿 태그칩 */
  .section3 .tag{gap:10px; margin-bottom:40px}
  .section3 .tag span{padding:12px 16px 10px; font-size:14px}

  /* 로고 리스트: 작은 칸 */
  .section3 .logo-list ul{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:14px;
  }
  .section3 .logo-list li{height: 84px; padding:10px}

  /* 시스템 카드: 1열 */
  .section4 .service{
    grid-template-columns: 1fr;
  }
  .section4 .service_card{
    grid-template-columns: 1fr 1fr;
  }
  .section4 .SV_list h3{font-size:20px; margin:18px 0 10px}
  .section4 .card_text h4{font-size:16px}
  .section4 .card_text p{font-size:16px}

  /* 섹션5: 비율 박스 살짝 더 얕게 */
  .section5 .inner::after{padding-top: 52%;}
  .section5 img{width: 92%}
}

/* 560↓ : 모바일 폰 최적화 */
@media (max-width:560px) {
  .area_visual {height: auto;}
  .visual_text h1{font-size:36px}
  .visual_text p{font-size:18px}
  .store-badges {padding-bottom: 40px;}
  .store-badges span {width: 40%;}
  .title{margin-bottom:32px}
  .title p{font-size:18px}
  .title h2{font-size:30px}

  .section1,.section3,.section4 {padding: 10% 0;}
  .section2 {padding-top: 10%;}
  .section2 .caution .ico {width: 85%; display: block; padding: 0; text-align: center;}
  .section2 .caution .ico p {text-align: left;}

  .section3 .logo-list ul{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap:10px;
  }
  .section3 .logo-list li{height:72px}
  .section3 .tag {margin-bottom: 15px;}
  .section3 .tag span {font-size: 16px; width: 100%; text-align: center;}

  .section4 .title {
    line-height: 40px;
  }
  .section4 .SV_list h3 {
    font-size: 22px;
    margin: 20px 0 10px 0;
  }

  /* 섹션5 비율 더 낮추기 */
  .section5 .inner::after{padding-top: 58%;}
  .section5 img{width: 96%}

  footer {padding: 30px; padding-bottom: 90px; font-size: 12px;}
}

@media (max-width:560px) and (min-width:540px) {
  .section4 .SV_list p {font-size: 16px; line-height: 22px;}
  .section4 .service_card{
    grid-template-columns: 1fr 1fr;
  }
  .section4 .card_list img {width: 20%;}
  .section4 .card_text h4 {font-size: 16px;}
  .section4 .card_text p {font-size: 15px; line-height: 20px;}
}

@media (max-width:539px){
  .visual_text h1{font-size:24px}
  .section4 .SV_list p{font-size:15px}
}

/* 모바일 ≤768px : 3줄(뉴스 / 본문 / 날짜)로 '세로' 배치 */
@media (max-width: 767.98px){
  .section1 .row{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* 한 열 */
    grid-template-rows: auto auto auto !important; /* 3줄 */
    gap: 8px;
    padding: 16px 0;
    font-size: 17px;
    line-height: 1.6;
  }

  .section1 .row .news{
    grid-column: 1; grid-row: 1;
    font-size: 16px; color: var(--brand); font-weight: 700;
  }

  .section1 .row .con{
    grid-column: 1; grid-row: 2;
    white-space: normal !important;   /* 한 줄 강제 해제 */
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 17px; line-height: 1.6;
  }

  .section1 .row .date{
    grid-column: 1; grid-row: 3;
    font-size: 15px; color: var(--basic);
    text-align: left;                 /* 필요시 left로 */
  }
}

@media (max-width:399px){
  .visual_text {padding: 50px 10px 20px 10px;}
  .visual_text h1{font-size:26px}
  .visual_text p{font-size:16px}
  .title p{font-size:16px; margin-bottom: 10px;}
  .title h2{font-size:26px}
  .section1 .row {
    gap: 4px;
    line-height: 1;
  }

  .section3 .video { margin: 22px 0 30px 0;}
  .section4 .SV_list h3 {font-size: 20px; margin: 15px 0 5px 0;}

  .section4 .title {line-height: 32px;}
  .section4 .card_list img {width: 15%;}
  .section4 .card_text h4 {font-size: 16px;}
  .section4 .card_text p {font-size: 15px; line-height: 20px;}
  .section4 .SV_list p {line-height: 22px; margin-bottom: 30PX;}

  footer {padding: 20px; padding-bottom: 80px; font-size: 11px;}
}

@media (max-width:370px){
  footer {padding: 20px; padding-bottom: 100px; font-size: 11px;}
}

/*=============얼리버드 이벤트 팝업=============*/
#main-layer-popup {
    display: flex; /* 초기 상태를 노출로 설정 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-container {position: relative; width: 100%; max-width: 710px; margin-top: 20px;}
.popup-container img {display: block; width: 100%; height: auto; border-radius: 20px;}
/*버튼*/
.btn-close-overlay {
    position: absolute;
    top: 3%; left: 3%;
    width: 40px; height: 40px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-close-overlay::before, 
.btn-close-overlay::after {
    content: '';
    position: absolute;
    width: 25px; height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
}
.btn-close-overlay::before { transform: rotate(45deg); }
.btn-close-overlay::after { transform: rotate(-45deg); }