@charset "UTF-8";


    /* font */
    @font-face {
        font-family: 'gmarket';
        font-style: normal;
        font-weight:normal;
        src: url(/resources/wis-layout/fonts/GmarketSansM.woff) format('woff')
    }
    @font-face {
        font-family: 'gmarket';
        font-style: normal;
        font-weight: 100;
        src: url(/resources/wis-layout/fonts/GmarketSansLight.woff) format('woff')
    }
    @font-face {
        font-family: 'gmarket';
        font-style: normal;
        font-weight:400;
        src: url(/resources/wis-layout/fonts/GmarketSansM.woff) format('woff')
    }
    @font-face {
        font-family: 'gmarket';
        font-style: normal;
        font-weight:600;
        src: url(/resources/wis-layout/fonts/GmarketSansBold.woff) format('woff')
    }

      


.tab_content_area {display:block; margin:30px 0;}

 /* list style */
.list_01 > li {
    position:relative; padding-left:12px; box-sizing:border-box; 
    font-size:1.2em; color:#333;
    margin-bottom:5px;
}
.list_01 > li strong {color:#4261d1;}
.list_01 > li:first-child {margin-top:0;}
.list_01 > li:before{
    content:""; display:block; position: absolute; left:0; top:11px; width:4px; height:4px; background:#4261d1; border-radius:50%;
}
.list_01 > li:last-child { margin-bottom: 0;}


.list_02 > li {
    position:relative; padding-left:12px; box-sizing:border-box; 
    font-size:1.2em; color:#333;
    margin-bottom:5px;
}
.list_02 > li strong {color:#000; font-weight: 400;}
.list_02 > li:first-child {margin-top:0;}
.list_02 > li:before{
    content:""; display:block; position: absolute; left:0; top:11px; width:4px; height:4px; background:#F94F54;; border-radius:50%;
}
.list_02 > li:last-child { margin-bottom: 0;}

.list_03 { margin-left: 10px;}
.list_03 > li {
    position:relative; padding-left:11px; box-sizing:border-box; 
    color:#333;
    margin-bottom:5px;
}
.list_03 > li strong {color:#000; font-weight: 400;}
.list_03 > li:first-child {margin-top:0;}
.list_03 > li:before{
    content:""; display:block; position: absolute; left:0; top:11px; width:3px; height:3px; background:#fb5d5a; border-radius:50%;
}
.list_03 > li:last-child { margin-bottom: 0;}
/* list style 끝 */

/* 버튼 */
a.btn2025,
a.btn2025:link,
a.btn2025:visited,
a.btn2025:active {display: inline-flex; align-items: center;
     justify-content: center; font-size:1.1em; font-weight: 600; color: #fff !important;
    background-color: #F94F54;  border:1px solid #F94F54; text-align: center;
    padding:15px 30px 15px 18px; gap: 10px; line-height: 1; transition: 0.2s
}

 a.btn2025:hover {background:#fff; border:1px solid #F94F54; color:#F94F54 !important; text-decoration:none; cursor:pointer;}



.btn2025>i {
    font-size: 18px;
    font-weight: 400
}
/* 버튼 끝 */


.ri-share-box-line:before {content: "\f0f4";}


.ml10 { margin-left:10px;}

.mb10 { margin-bottom:10px;}
.mb20 { margin-bottom:20px;}
.mb30 { margin-bottom:30px;}
.mb40 { margin-bottom:40px;}
.mb50 { margin-bottom:50px;}

/* 사업안내 */
.internship0101_t {font-family:'gmarket'; font-size:1.8em; text-align:center; font-weight: 600; margin:50px 0 10px 0; color: #000;}
.internship0101_t span { color: #F94F54;}

.internship0101_t02 {font-family:'gmarket'; font-size:1.2em; text-align:center; font-weight:400; margin-bottom:50px; color: #555;}
.internship0101_t03 {color: #000; text-align: center; font-size:1.2em;}


.internship0101 {display: flex; flex-wrap:wrap; justify-content:space-between;}
.internship0101 div {border: 2px solid #494f8e; width:48%; padding:45px 50px 40px 50px;}
.internship0101 h4 {
    font-size:1.3em; color:#494f8e; text-align: center; margin-bottom:20px; 
    font-family:'gmarket'; font-weight:400; letter-spacing: -0.05em;
}
.internship0101 img { width:auto; max-width:100%;}
.internship0101_vision { text-align: center; margin-top:60px;}


     .internship0101_box {
position: relative;
background: url(/resources/wis-layout/images/sub/internship0101_bg.png) no-repeat;
width:1440px;
height: 388px;
padding:40px 0 0 50px;
flex-wrap:wrap;
overflow: hidden; 
}

.internship0101_box p img {
opacity: 0;                  /* 처음엔 보이지 않게 */
transform: translateY(20px); /* 살짝 아래에서 올라오는 효과 */
animation: fadeInUp 1s forwards;
}

.internship0101_box p:nth-child(1) img {
animation-delay: 0.3s; /* 첫 번째 이미지 */
}
.internship0101_box p:nth-child(2) img {
animation-delay: 0.8s; /* 두 번째 이미지 */
}
.internship0101_box p:nth-child(3) img {
animation-delay: 1.3s; /* 세 번째 이미지 */
}
.internship0101_box p:nth-child(4) img {
animation-delay: 1.8s; /* 세 번째 이미지 */
}

@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 별 공통 스타일 */
.star1 {
position: absolute;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
opacity: 0.8;
animation: twinkle 2s infinite ease-in-out;
}

/* 별 반짝임 애니메이션 */
@keyframes twinkle {
0%   { opacity: 0.2; transform: scale(0.5); box-shadow: 0 0 5px #fff; }
50%  { opacity: 1;   transform: scale(0.8); box-shadow: 0 0 15px #fff; }
100% { opacity: 0.2; transform: scale(0.5); box-shadow: 0 0 5px #fff; }
}

@media screen and (min-width:1500px) {
  .internship0101_box  {display:block;}
 .internship0101_box_m  {display:none;} 
}

@media screen and (max-width:1490px) {
 .internship0101_box  {display:none;}
 .internship0101_box_m  {display: block;}
}

@media screen and (max-width:1024px) {
.internship0101 div {width: 100%; margin-bottom:20px; padding:20px;}
.internship0101 h4 {font-size:1.3em;}
.internship0101_t  {margin:30px 0 10px 0}
.internship0101_t02 {margin-bottom:30px;}
.internship0101_vision {margin-top:20px;}
}
/* 사업안내 끝 */


 /* 실전체험형 */
.company {display: flex; flex-wrap: wrap; justify-content: flex-start; gap:30px;}
.company li {flex: 0 0 calc(20% - 30px);}

.company li  {border: 1px solid #d2d2d2; padding:20px 20px 15px 20px; text-align: center; width:19%; transition: all 0.3s ease;}
.company li:hover { cursor: pointer;}
                                                                       
 .company li a {display: block;}
 .company li:hover {border-color: #101a71; transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.company li::before,
.company li::after {
content: "";
position: absolute;
width: 0;
height:3px;
background: #101a71;
transition: all 0.4s ease;
}

.company li::before {top: 0; left: 0;}

.company li::after {bottom: 0; right: 0;}

/* hover 시 가로선 애니메이션 */
.company li:hover::before {width: 100%;}
.company li:hover::after {width: 100%;}

/* 세로선 추가 */
.company li span::before,
.company li span::after {
content: "";
position: absolute;
width: 2px;
height: 0;
background: #101a71;
transition: all 0.4s ease;
}


.company_h4 {
    color: #000;
    font-size: 1.3em;
    display: block;
    padding-left: 25px;
    margin-bottom: 15px;
    position: relative;
    }
.company_h4:before {
    content: "";
    display: block;
    position: absolute;
    background: #494f8e;
    width:5px;
    height: 100%;
    left: 10px;
}



.company_h4_02 {
    background: #FF7F50; border-radius: 50px;
    color: #fff; font-size: 1.2em; text-align: center;
    display: inline-block; padding:10px 35px; margin-bottom:15px; min-width: 220px; overflow: hidden;
    }

     .internship0201_info {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom:50px;
        border: 1px solid #b9b9b9; padding: 40px;
    
    }
    .internship0201_info .info_photo {opacity: 0; transform: translateX(-30px); animation: slideInLeft 1s ease forwards;}
    .internship0201_info .info_txt {
        flex: 1; margin-left:50px; opacity: 0; transform: translateY(20px); 
        animation: fadeInUp 1.2s ease forwards; animation-delay: 0.3s; /* 사진보다 조금 늦게 */}
                /* keyframes 정의 */
                @keyframes slideInLeft {
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
                }

                @keyframes fadeInUp {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
      }

    .info_txt01  {font-size: 1.3em; font-family:'gmarket'; color: #000;  word-break: keep-all; margin:8px 0 20px 0;}
    .info_txt02  {font-size: 1.2em; color: #333;}

.btn_area  {text-align: left;}

@media screen and (max-width:1024px) {
.company li {flex: 0 0 calc(33.3% - 30px);}
.internship0201_info {padding:0; margin-bottom:30px; border:0}
.internship0201_info .info_txt {margin-left:0;}
.btn_area  {text-align:center;}
}
@media screen and (max-width:767px) {
.company li {flex: 0 0 calc(50% - 30px);}
a.btn2025,
a.btn2025:link,
a.btn2025:visited,
a.btn2025:active { padding:10px 30px;}
}
/* 실전체험형 끝 */  

/* 모집공고 */
  #con .temp-step {display: flex; gap: 20px 62px;}
#con .temp-step > li {position: relative;  flex-basis: 100%;  border: 1px solid #1b2372; border-radius: 5px; font-size:17px; font-weight: 500; color: #333; text-align: center;}

#con .temp-step > li::before {
    display: block; content: ''; position: absolute; top: 0; left: 100%; width: 62px; height: 100%; margin-left: 2px; 
   background: url('/resources/wis-layout/images/sub/resident-arrow.svg') no-repeat center;
}
#con .temp-step > li:last-child:before {display: none;}
#con .temp-step > li .info_tit {padding: 5px; text-align: center; background-color:#1b2372; color: #fff; font-size: 19px; }
#con .temp-step > li .info_txt {padding:15px; text-align: center;}
#con .temp-step > li .info_txt span {color: #1b2372; display: block; margin-top:10px; padding-top:10px; font-size:15px; border-top: 1px solid #cccccc;}

.notice { font-size: 17px;}
.notice h4 { font-size:19px; position: relative; padding-left: 32px; margin: 30px 0 10px 0;}
.notice h4 span     {
	display:block; position:absolute; top:-2px; left:0; width:26px; height:26px; 
    border-radius:2px; text-align:center; background:#fb5d5a; color:#fff; padding-top: 2px;
 }
 .notice h5 { font-size: 18px; color:#1b2372;}
 .info { color: #fb5d5a; margin-bottom: 5px;}


@media all and (max-width:1024px) {
  #con .temp-step {flex-wrap: wrap;}
  #con .temp-step > li {flex-basis: calc(33.33% - 62px);}
}

@media all and (max-width:600px) {
#con .temp-step {margin-top: 30px; gap: 10px 25px;}
	#con .temp-step > li {flex-basis: calc(50% - 25px); padding:0; font-size: 16px;}
	#con .temp-step > li:first-child {background-size: contain;}
	#con .temp-step > li::before {width: 25px; background-size: 20px;}
}
/* 모집공고 끝 */


.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    }
    .modal-content {
    position: relative;
    margin:2% auto;
    width: 60%; 
    height:92%;
    background: #fff;
    padding:3rem;
    border-radius: 8px;
    }
    .close {
    position: absolute;
    top:2rem; right:3rem;
    font-size:50px;
    cursor: pointer;
    background:#fff;
    border: none; outline: none;

}

 .table tr th, .table tr td {padding:15px 10px;}

   #modal-body  {overflow-y:auto; height:100%;}
/* 스크롤바 전체 영역 */
#modal-body::-webkit-scrollbar {
  width:7px;              /* 스크롤바 두께 */
}

/* 스크롤바 트랙 (배경) */
#modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;      /* 트랙 색상 */
  border-radius: 4px;
}

/* 스크롤바 핸들 (움직이는 부분) */
#modal-body::-webkit-scrollbar-thumb {
  background: #b8b9d5;         /* 핸들 색상 */
  border-radius: 4px;
}

/* 마우스 오버 시 핸들 색상 */
#modal-body::-webkit-scrollbar-thumb:hover {
  background: #6567a7;
}


    #modal-body h2 { color: #000; font-size: 30px; margin-bottom: 20px;}

    @media screen and (max-width:1024px) {
    #modal-body h2 {font-size:26px;}
        .modal-content {width:95%; padding:0.5rem; }
    .close {top:0.5rem; right:1.5rem; font-size: 40px;}

#modal-body::-webkit-scrollbar {
  width:4px;    
}

    }

     #modal-body h3 { margin-bottom: 15px; color:#494f8e; position: relative; padding-left: 20px;}
   #modal-body  h3:before { 
        position: absolute; content:""; width:4px; height:4px; top:48%; left:10px; display:block; 
        background:#494f8e; border-radius:50%; font-size:18px;
    }



.section03 { position: relative; margin-top: 30px; }
.section03 .box { position: relative; width: 100%; margin:0 auto;} 
.section03 .slider li.slick-slide { position: relative; margin-left: 20px;} 
.section03 .slick-slider{margin-left:-20px; margin-bottom: 10px!important;}
.section03 .slick-slide img { display: block; position: absolute; top: 0; left:0; width: 100%; z-index: -1; } 
.section03 .slider li.slick-slide{display: block; position: relative; width: 100%; height:300px;}

.section03 .slider li.slick-slide > div.tit{position: absolute; bottom: 30px; left: 20px; width: 55%; font-size: 20px; color:#fff; font-weight: 600; }
.section03 .slider li.slick-slide > ul{margin-top:10px}
.section03 .slider li.slick-slide > ul li:nth-child(1){font-size: 20px; display: -webkit-box; display: -ms-flexbox; display: box; overflow: hidden; vertical-align: top; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.section03 .slider .slick-slide li > ul li:nth-child(2){display: -webkit-box; display: -ms-flexbox; display: box; overflow: hidden; vertical-align: top; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  margin-top: 10px; font-size: 18px;}
.section03 .slider li.slick-slide > ul li:nth-child(3){display: flex; align-items: center; margin-top: 10px; font-size: 16px; color:#4845A2; }
.section03 .slider li.slick-slide > ul li:nth-child(3)::before{content: "\ef13";font-family: remixicon!important;}
.section03 .slider li.slick-slide > ul li:nth-child(3) span{ padding-left: 5px;display: -webkit-box; display: -ms-flexbox; display: box; overflow: hidden; vertical-align: top; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }

.section03 .slick-next,
.section03 .slick-prev{position: absolute; width: 24px; height: 24px; bottom: -45px; z-index: 1; font-size: 0;}
.section03 .slick-prev{left:18px!important; right:0px!important; background:#fff;}
.section03 .slick-next{left: 50px!important; right:0px!important; background:#fff;}

.section03 .slick-next::before,
.section03 .slick-prev::before{font-family: remixicon!important; font-size: 28px;}

.section03 .slick-next::before{content:"\ea68"!important; color:#000!important;}
.section03 .slick-prev::before{content: "\ea5c"!important; color:#000!important;}


.section03 .paging_progress{ position: relative; display: flex; align-items: center; margin:30px 0 50px 0;}
.section03 .paging_progress .slick_counter{width: 210px; display: flex; align-items: center; column-gap: 8px; padding-left: 100px;}
.section03 .paging_progress .slick_counter span{display: block; font-weight: 500;}
.section03 .paging_progress .paging_line{display: block; height: 1px; width: 30px; background-color: #D9D9D9;}

.section03 .paging_progress .progress {position: relative; height: 3px; width: calc(100% - 210px); background-color: #E1E5EB; overflow: hidden; border-radius: 10px;}
.section03 .paging_progress .pro_bar{position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #4845A2;}
.section03 .paging_progress .pro_ani{animation: proBar 5s 1; width: 100%;}
@keyframes proBar {0%{width: 0;}100%{width: 100%;}}


h4.review {font-size: 1.3rem; font-weight:700; color:#494f8e; margin-left:25px;}
.review_box {
    margin:10px 0 30px 0; font-size: 1.05rem; border:1px solid #ddd; padding:25px;
    line-height:160%; border-radius: 10px; color:#333;
    }


@media screen and (max-width:1000px){
.section03 .slider li.slick-slide{height:200px;}
}

@media screen and (max-width:800px){
.section03 .slider li.slick-slide{height:100px;}
}

@media screen and (max-width:600px){
.section03 .slider li.slick-slide{height:80px;}
}