:root {
  --main_c : #0070af;
  --main_c2 : #b8be19;
  --main_c3 : #f5822b;
  --main_c4 : #fcb131;
}


body { width:100%;  min-width:1240px;   display:inline-block  }
html { width:100%;   min-width:1240px; display:inline-block }
#wrap {height:100%; position:relative; width:100%;   display:inline-block}
 
 .in{max-width:1600px; margin:0 auto;}
.main_con * {transition: all 0.2s ease-out;}
.flex {display:flex}
.main_c{color:var(--main_c) !important;}

.main_con .titbox h2{font-size:2.5em;}
.main_con .titbox p {font-size:1em; margin-bottom:30px; font-weight:300;}
 





        iframe {
            width: 100%;
            height: 75vh;
            display: block;
        }
            .section2 {padding:80px 0; box-sizing:border-box; position:relative; }
            .section2::before {position: absolute;
				content: '';
				background: url(/pohang/img/symbol_ic.png) no-repeat 100px bottom;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-size: contain;
				z-index:9;
				opacity:.3;
				}

            .section2 .wrap {
                display: flex;
                gap: 40px;
                justify-content: center;
				z-index:99;
				position:relative;
            }

            .section2 .wrap span {
                width: 150px;
                height: 150px;
                box-sizing: border-box;
                background:#eef4f7; 
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                font-size: 3.5em;

            }

            .section2 .wrap span img {
                width: 60px;
            }

            .section2 .wrap a:hover span {
                border:6px solid var(--main_c);
				box-sizing:border-box;
                transform: translateY(-5px);
            }

            .section2 .wrap p {
                text-align: center;
                margin-top: 13px;
                font-weight: 500;
                font-size: 1.3em;
            }

            .section2 .wrap a:hover p {
                color: var(--main_c)
            }

            .section2 .wrap a:hover img {
                filter: brightness(0) invert(1);
            }



.product{background:#f7f7f7; padding:120px 0; box-sizing:border-box;}
/* ===== 1번 스타일 ===== */

.recruit-head{
    position:relative;
	margin-bottom:40px;
}

.recruit-head h3{
    font-size:2.8em;
	position:relative;
	text-align:center;
}

/* 포인트 라인 */
.recruit-head h3:after{
    content:"";
    display:block;
	position:absolute;
    width:40px;
    height:7px;
	top:-20px;
	left:calc(50% - 20px);
	border-radius:2px;
    background:linear-gradient(90deg,#0070af,#b8be19,#f5822b);
}

/* 전체보기 버튼 */
.recruit-more{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    color:#999;
	font-size:1.2em;
}

.recruit-more .arrow{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#eee;
    position:relative;
    transition:.3s;
}

.recruit-more .arrow:after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:8px;
    height:8px;
    border-top:2px solid #999;
    border-right:2px solid #999;
    transform:translate(-60%,-50%) rotate(45deg);
}

.recruit-more:hover .arrow{
    transform:translateX(6px);
	background:var(--main_c); 
}
.recruit-more:hover .arrow:after{border-color:#fff;}
/*기본 리스트*/


ul.list {width:100%; margin-top:20px; display:flex ; flex-wrap:wrap; justify-content:space-between; margin-bottom:-20px;   }
ul.list li {width:32.5%; margin-bottom:15px; box-sizing:border-box; padding:19px;  border-radius:5px;  position:relative; box-shadow: 1px 1px 20px 3px rgba(0, 0, 0, 0.03); background:#fff;}
ul.list li div.li_wrap {width:100%; position:relative;    top:50%; transform: translate(0, -50%);    }

ul.list li img {vertical-align:middle; }
ul.list li img.img {width:22%; display:inline-block; vertical-align:top;  position:absolute ; top:50%; left:0; transform: translate(0, -50%);  }
ul.list li div.info_t {width:73%;  display:inline-block;  font-size:0.89rem; margin-left:5%;  vertical-align:top; margin-left:27%;   }
ul.list li div.info_t span.s_t {width:100%; display:inline-block;  font-weight:500; font-size:.9rem}
 

ul.list li div.info_t h4 {font-size:1.15rem; margin-bottom:7px;  line-height:1.25em; color:#333; }
ul.list li div.info_t p { color:#8193a7;  }
ul.list li div.info_t b { color:#555;  }
ul.list li a div.info_t  h4 { color:#333 !important}
ul.list li div.info_t  p {width:100%; display:inline-block; margin-bottom:-2px; } 
ul.list li div.info_t span.label {background-color:#eee; border:1px solid #e6e9f0; color:#67696c; border-radius:3px; padding:0 10px; line-height:23px; display:inline-block; margin-right:5px ; font-size:0.83rem}

ul.list li div.info_t dl {width:100%;   display:flex; margin-bottom:3px;}
ul.list li div.info_t dl:first-child {margin-top:7px}
ul.list li div.info_t dl:last-child {margin-bottom:15px}
ul.list li div.info_t dl dt {width:100px; color:#67696c;  font-size:0.93rem; line-height:1.5em; }
ul.list li div.info_t dl dd { width:calc(100% - 100px); line-height:1.5em; font-size:0.93rem; font-weight:500; color:#333}

ul.list .wish_btn_p  {margin-top:-5px; display:inline-block; width:100%;  font-size:0.9rem;    text-align:right; margin-bottom:5px; }

ul.list li a.wish_btn { position:absolute; right:15px; top:12px; line-height:1em}
ul.list li a.wish_btn img {vertical-align:-1px}

@media all and (max-width:1200px){
	ul.list li div.info_t h4 {font-size:1.1rem; }
	ul.list li div.info_t span.support_t {width:100%; display:inline-block; margin-top:5px}
}
 @media all and (max-width:800px){
	 ul.list li div.info_t h4 {font-size:1.05rem; }
}
@media all and (max-width:640px){
   
	ul.list li {width:100%; padding:15px}
    ul.list li div.info_t span.s_t {padding-bottom:3px}

}


.main_bn{margin-top:50px;}
.main_bn *{ color:#fff;}
.main_bn .wrap{display:flex; }
.main_bn dl{background:var(--main_c); padding:60px 40px; box-sizing:border-box; width:100%;}
.main_bn dl:nth-child(2){background:var(--main_c2)}
.main_bn dl:nth-child(3){background:var(--main_c3)}
.main_bn dt{font-size:1.8em; font-weight:700;}
.main_bn dd{font-size:1.1em; margin-top:5px;}



.quick_banner{
  padding: 0 0 100px;
}

.quick_banner .quick_banner_list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.quick_banner .quick_card{
  position:relative;
  min-height:220px;
  padding:32px 28px;
  border-radius:28px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  transition:transform .35s ease, box-shadow .35s ease;
  box-shadow:0 14px 35px rgba(0,0,0,.10);
}

.quick_banner .quick_card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 45px rgba(0,0,0,.16);
}

.quick_banner .quick_card::before{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}

.quick_banner .quick_card::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  height:1px;
  background:rgba(255,255,255,.22);
}

.quick_banner .quick_card .num{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-bottom:26px;
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(255,255,255,.72);
}

.quick_banner .quick_card .txt{
  position:relative;
  z-index:2;
  padding-right:70px;
}

.quick_banner .quick_card .txt strong{
  display:block;
  margin-bottom:14px;
  font-size:30px;
  font-weight:800;
  line-height:1.25;
  color:#fff;
  word-break:keep-all;
}

.quick_banner .quick_card .txt p{
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.88);
  word-break:keep-all;
}

.quick_banner .quick_card .arrow{
  position:absolute;
  right:28px;
  bottom:28px;
  z-index:2;
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:400;
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(4px);
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}

.quick_banner .quick_card:hover .arrow{
  transform:translateX(5px);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.55);
}

.quick_banner .card1{
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    var(--main_c);
}

.quick_banner .card2{
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--main_c2);
}

.quick_banner .card3{
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--main_c3);
}

/* 카드마다 패턴 추가 */
.quick_banner .card1 .txt::before,
.quick_banner .card2 .txt::before,
.quick_banner .card3 .txt::before{
  content:"";
  position:absolute;
  right:-10px;
  top:-10px;
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

.quick_banner .card1{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #0a82c4 0%, #0070af 100%);
}

.quick_banner .card2{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #c7ce2b 0%, #b8be19 100%);
}

.quick_banner .card3{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 35%),
    linear-gradient(135deg, #ff973f 0%, #f5822b 100%);
}

@media (max-width:1024px){
  .quick_banner .quick_banner_list{
    grid-template-columns:1fr;
    gap:18px;
  }

  .quick_banner .quick_card{
    min-height:190px;
    padding:28px 22px;
    border-radius:22px;
  }

  .quick_banner .quick_card .txt{
    padding-right:64px;
  }

  .quick_banner .quick_card .txt strong{
    font-size:26px;
  }

  .quick_banner .quick_card .txt p{
    font-size:15px;
  }

  .quick_banner .quick_card .arrow{
    right:22px;
    bottom:22px;
    width:46px;
    height:46px;
    font-size:20px;
  }

  .quick_banner .quick_card::after{
    left:22px;
    right:22px;
    bottom:22px;
  }
}

@media (max-width:768px){
  .quick_banner{
    padding:0 0 70px;
  }

  .quick_banner .quick_card{
    min-height:auto;
  }

  .quick_banner .quick_card .num{
    margin-bottom:18px;
    font-size:13px;
  }

  .quick_banner .quick_card .txt strong{
    margin-bottom:10px;
    font-size:22px;
  }

  .quick_banner .quick_card .txt p{
    line-height:1.55;
  }
}	



/* 지정해주신 메인 컬러 변수 설정 */
:root {
  --main_c: #0070af;   /* 블루 */
  --main_c2: #b8be19;  /* 그린 */
  --main_c3: #f5822b;  /* 오렌지 */
}

/* 배너 전체 컨테이너 */
.poly-banner-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  }

/* 개별 배너 카드 기본 스타일 */
.poly-banner-item {
  flex: 1;
  position: relative;
  padding: 60px;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden; /* 배경 도형이 영역을 밖으로 나가지 않게 함 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  box-sizing: border-box;
}

/* 마우스 오버 효과 */
.poly-banner-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

/* 배경색 적용 */
.poly-banner-item.bg-orange { background-color: var(--main_c3); }
.poly-banner-item.bg-blue { background-color: var(--main_c); }
.poly-banner-item.bg-green { background-color: var(--main_c2); }

/* --- 로고 모티브 배경 도형 (CSS 가상 요소) --- */
/* 폴리텍 로고의 둥근 링 모양을 반투명한 선으로 표현하여 허전함을 채웁니다. */
.poly-banner-item::before,
.poly-banner-item::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 18px solid rgba(255, 255, 255, 0.08); /* 반투명 화이트 링 */
  z-index: 1;
  transition: all 0.5s ease;
}

/* 큰 원 */
.poly-banner-item::before {
  width: 200px;
  height: 200px;
  top: -40px;
  right: -50px;
}

/* 작은 원 (겹치는 효과) */
.poly-banner-item::after {
  width: 130px;
  height: 130px;
  bottom: -30px;
  right: 60px;
  border-width: 12px;
}

/* 마우스 오버 시 도형이 살짝 움직이는 효과 */
.poly-banner-item:hover::before { transform: scale(1.05) translate(-10px, 10px); }
.poly-banner-item:hover::after { transform: scale(1.1) translate(10px, -10px); }

/* --- 텍스트 및 아이콘 영역 --- */
.banner-content {
  position: relative;
  z-index: 2; /* 도형보다 글씨가 위에 오도록 설정 */
}

.banner-title {
  font-size: 2.2em;
  color:#fff;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: -1px;
}

.banner-desc {
  font-size: 1.1em;
  color:#fff;
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  word-break: keep-all;
}

/* 수정된 아이콘 스타일 */
.banner-icon {
  position: absolute;
  bottom: 25px;
  right: 40px;
  opacity: 0.8;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

}
.banner-content .banner-btn{padding:10px 40px; box-sizing:border-box; color:#fff; border:1px solid #fff; display:inline-block; text-align:left; margin-top:15px; font-size:.9em; border-radius:50px; opacity:.9;}
/* 구글 머티리얼 아이콘 전용 스타일 */
.banner-icon span.material-symbols-outlined {
  font-size: 80px; /* 아이콘 크기 조정 */
  font-variation-settings: 'OPSZ' 24, 'WGHT' 400, 'FILL' 0, 'GRAD' 0; /* 세부 속성 */
    color:#fff;
}

/* 모바일 화면 대응 (반응형) */
@media (max-width: 768px) {
  .poly-banner-container {
    flex-direction: column;
  }
}