﻿/*** slide_popup ***/
.spopup_wrap {top:10.75rem !important;}
#wrap.scroll .spopup_wrap {top: 0 !important;}
.spopup_wrap {transition: margin-top 0.3s ease, left 0.3s !important;}
#wrap.openPop.scroll .spopup_wrap {/* top: -7rem !important; */}
@media (max-width: 1540px) {
	.spopup_wrap {top:10.75rem !important;}
}
@media (max-width: 1200px) {
	.spopup_wrap {top:10.75rem !important;}
	#wrap.scroll .spopup_wrap {top: 0 !important;}
	#wrap.openPop.scroll .spopup_wrap {/* top: -7rem !important; */}
}
@media (max-width: 1024px) {
	.spopup_wrap {top:6.5rem !important;}
	#wrap.scroll .spopup_wrap {top: 0 !important;}
}


/* 메인비주얼 */
.visual { position: relative; height: 100%; }
.visual .slider { height: 100%; }
.visual .slider div { height: 100%; }
.visual .slider .item a { display: flex; justify-content: center; align-items: center; height: 100%; }
.visual .slider .item a img { height: 100%; object-fit: cover; }
.visual .control { position: absolute; bottom: 12.5rem; left: 50%; transform: translateX(-35rem); display: flex; align-items: center; }
.visual .control a { color: #fff; transition: 0.3s; }
.visual .control a + a { margin-left: 1.2rem; }
.visual .control a.play { display: none; }
.visual .control .page { display: flex; align-items: center; gap: 1.25rem; color: #fff; font-size: 0.85rem; margin-right: 1rem; }
.visual .control .page strong { color: #FFF051; font-weight: 600; }
.visual .control .page span { position: relative; }
.visual .control .page span::before { position: absolute; top: 50%; transform: translateY(-50%); left: -0.7rem; width: 5px; height: 5px; border-radius: 50%; background: #fff; content: ""; }
.visual .progressbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 0.5rem; background: #1D1D1D; }
.visual .progressbar p { display: block; width: 0; height: 100%; background: #0055F4; }
.visual .progressbar p.proBar { transition: 4s ease-in-out; }
.visual .control a:hover,
.visual .control a:focus { color: #FFF051; }

/* 사업소개 */
.bsnsIntrd { position: relative; }
.bsnsIntrd .heading { position: relative; text-align: center; color: #1D1D1D; margin-bottom: 1.5rem; }
.bsnsIntrd .heading::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 4.9rem; background: url('/images/web/ssi/main/bsnsIntrd_deco.png') no-repeat center / contain; content: ""; z-index: -1; }
.bsnsIntrd ul { display: flex; gap: 4rem; }
.bsnsIntrd ul li { flex: 1; }
.bsnsIntrd ul li a { position: relative; display: flex; text-align: center; flex-direction: column; justify-content: space-between; height: 100%; gap: 1rem; }
.bsnsIntrd ul li a .tit { font-size: 1.1rem; color: #1D1D1D; font-weight: 600; transition: 0.3s; }
.bsnsIntrd ul li a .txt { margin-top: 0.5rem; font-size: 0.8rem; color: #747474; line-height: 150%; word-break: keep-all; }
.bsnsIntrd ul li a .img { height: 10rem; border-radius: 1.5rem; overflow: hidden; transition: 0.5s ease-in-out; }
.bsnsIntrd ul li a .img img { width: 100%; height: 100%; object-fit: cover; }
.bsnsIntrd ul li a .more { position: absolute; bottom: 5rem; right: -2.5rem; justify-content: center; align-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: rgba(0, 85, 244, 0.85); color: #fff; font-size: 1rem; opacity: 0; display: none; transition: 0.3s; }
.bsnsIntrd ul li a .more::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/images/web/ssi/main/curvetext.png') no-repeat center / contain; content: ""; animation: spinBg 6s linear infinite; }
.bsnsIntrd ul li a:hover .tit,
.bsnsIntrd ul li a:focus .tit { color: #0055F4; }
.bsnsIntrd ul li a:hover .img,
.bsnsIntrd ul li a:focus .img { border-radius: 25rem; }
.bsnsIntrd ul li a:hover .more,
.bsnsIntrd ul li a:focus .more { display: flex; opacity: 1; }

@keyframes spinBg {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 사업 우수사례 */
.bsnsBest { position: relative; }
.bsnsBest .heading { color: #fff; margin-bottom: 1.8rem; }
.bsnsBest ul { display: flex; gap: 2rem; }
.bsnsBest ul li { flex: 1; }
.bsnsBest ul li a { display: block; }
.bsnsBest ul li a .img { display: flex; justify-content: center; align-items: center; height: 8rem; overflow: hidden; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.2); }
.bsnsBest ul li a .img img { max-width: 100%; transition: 0.3s; }
.bsnsBest ul li a .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; color: #fff; margin-top: 1rem; line-height: 150%; word-break: keep-all; }
.bsnsBest .btn_more { position: absolute; top: -3px; right: 0; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #fff; color: #fff; font-size: 1.3rem; } 
.bsnsBest .btn_more i { transition: 0.3s; }
.bsnsBest .btn_more:hover i,
.bsnsBest .btn_more:focus i { transform: rotate(180deg); }
.bsnsBest ul li a:hover .img img,
.bsnsBest ul li a:focus .img img { transform: scale(1.1); }

/* 인터뷰 */
.interView { position: relative; }
.interView .slider { position: relative; }
.interView .slider .item a { display: block; }
.interView .slider .item a .img { display: flex; justify-content: center; align-items: center; height: 10rem; overflow: hidden; border-radius: 0.5rem; margin-bottom: 1.5rem; background: rgba(0, 0, 0, 0.2); }
.interView .slider .item a .img img { height: 100%; transition: 0.3s; }
.interView .slider .item a .badge { display: inline-block; padding: 0.2rem 0.75rem; color: #fff; border: 1px solid #fff; border-radius: 2rem; font-size: 0.9rem; }
.interView .slider .item a .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: #fff; margin-top: 1rem; line-height: 150%; word-break: keep-all; margin-top: 1rem; }
.interView .control { position: absolute; top: 5rem; right: 0; }
.interView .control a { display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; background: #000; color: #fff; }
.interView .control a.prev { border-radius: 1rem 0 0 0; }
.interView .control a.next { border-radius: 0 0 0.5rem 0; }
.interView .control a + a { border-top: 1px solid #fff; }
.interView .slider .item:hover .img img,
.interView .slider .item:focus .img img { transform: scale(1.1); }

/* 공지사항 */
.notice { position: relative; }
.notice .heading { margin-bottom: 1.4rem; color: #1D1D1D; }
.notice .titTab { position: absolute; top: 0; right: 1rem; }
.notice .titTab ul { display: flex; gap: 1.75rem; }
.notice .titTab ul li { position: relative; }
.notice .titTab ul li + li::before { position: absolute; top: 50%; left: -0.85rem; transform: translateY(-50%) rotate(30deg); width: 1px; height: 0.5rem; background: #999; content: ""; }
.notice .titTab ul li a { font-size: 1.1rem; color: #1D1D1D; transition: 0.3s; }
.notice .titTab ul li a.current { color: #0055F4; font-weight: 600; }
.notice .titTab ul li a.current span { box-shadow: inset 0 -13px #EBF2FF; }
.notice .tabWrap { border-top: 1px solid #333; border-bottom: 1px solid #777; }
.notice .tabWrap .list_box { display: none; }
.notice .tabWrap .list_box.on { display: block; }
.notice .tabWrap .list_box ul li + li { border-top: 1px dotted #bbb; }
.notice .tabWrap .list_box ul li.no_data { display: flex; justify-content: center; align-items: center; height: 13.3rem; }
.notice .tabWrap .list_box ul li a { display: flex; align-items: center; padding: 0.75rem 0; gap: 0.75rem; font-size: 0.75rem; font-weight: 500; }
.notice .tabWrap .list_box ul li a .badge { border: 1px solid #0055F4; border-radius: 5px; color: #0055F4; padding: 0.4rem; }
.notice .tabWrap .list_box ul li a .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; color: #1D1D1D; transition: 0.3s; }
.notice .tabWrap .list_box ul li a .date { display: flex; align-items: center; gap: 0.3rem; color: #747474; }
.notice .tabWrap .list_box ul li a:hover .txt,
.notice .tabWrap .list_box ul li a:focus .txt { font-weight: 600; }
.notice .btn_more { position: absolute; top: -3px; right: 0; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #1D1D1D; font-size: 1.3rem; } 
.notice .btn_more i { transition: 0.3s; }
.notice .btn_more:hover i,
.notice .btn_more:focus i { transform: rotate(180deg); }
.notice .titTab ul li a:hover,
.notice .titTab ul li a:focus { color: #0055F4; font-weight: 600; }

/* 바로가기 */
.link { height: 100%; }
.link a { display: block; height: 100%; background: #FFF051 url('/images/web/ssi/main/link03_img.png') no-repeat right bottom; border-radius: 1.5rem; padding: 2.5rem 2rem; }
.link a .txt { display: inline-block; background: #fff; padding: 5px 0.8rem; color: #1D1D1D; border-radius: 1rem; font-weight: 700; }
.link a .txt em { color: #256CED; }
.link a .txt i { font-weight: 500; margin-right: 8px; }
.link a .tit { margin: 0.75rem 0; font-size: 1.5rem; font-weight: 700; color: #1D1D1D; }
.link a .more { display: inline-block; background: #1D1D1D; color: #fff; padding: 0.4rem 1.25rem; border-radius: 2rem; font-size: 0.85rem; border: 2px solid #1D1D1D; transition: 0.3s; } 
.link a:hover .more,
.link a:focus .more { color: #1D1D1D; background: #fff; }

/* 뉴스 및 홍보 */
.news { position: relative; }
.news .heading { margin-bottom: 1.4rem; color: #1D1D1D; }
.news ul { display: flex; gap: 2rem; }
.news ul li { flex: 1; }
.news ul li a { display: block; color: #1D1D1D; }
.news ul li a .img { display: flex; justify-content: center; align-items: center; height: 10rem; border-radius: 0.5rem; overflow: hidden; background: #ccc; }
.news ul li a .img img { max-width: 100%; transition: 0.3s; }
.news ul li a .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin: 1rem 0 0.5rem; font-size: 0.9rem; font-weight: 600; line-height: 150%; }
.news ul li a span { font-size: 0.75rem; }
.news .btn_more { position: absolute; top: -3px; right: 0; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #1D1D1D; font-size: 1.3rem; }
.news .btn_more i { transition: 0.3s; }
.news .btn_more:hover i,
.news .btn_more:focus i { transform: rotate(180deg); }
.news ul li a:hover .img img,
.news ul li a:focus .img img { transform: scale(1.1); }

/* vr */
.vRoom { position: relative; border-radius: 1.5rem; overflow: hidden; text-align: center; padding: 4.3rem; }
.vRoom .txt_box { position: relative; z-index: 2; }
.vRoom .txt_box .tit { font-size: 2rem; font-weight: 700; color: #fff; line-height: 130%; }
.vRoom .txt_box .tit em { display: inline-block; background: #256CED; color: #fff; border-radius: 5px; padding: 0 0.6rem; }
.vRoom .txt_box .txt { margin: 1.5rem 0 2.5rem; color: #fff; font-size: 0.85rem; }
.vRoom .txt_box .btn_more { display: inline-flex; align-items: center; gap: 3.7rem; background: #fff; color: #1D1D1D; padding: 0.9rem 1.5rem; border-radius: 2rem; font-size: 1rem; transition: 0.3s; }
.vRoom .txt_box .btn_more span img { width: 1.8rem; height: 1.8rem; display: inline-flex; justify-content: center; align-items: center; line-height: 1; margin-right: 0.7rem; vertical-align: middle; background: #fff; border-radius: 50%; object-fit: none; }
.vRoom .txt_box .btn_more span strong { font-weight: 700; }
.vRoom .slider { margin-top: 2.65rem; }
.vRoom .slider div { height: 100%; }
.vRoom .slider .slick-list { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.vRoom .slider .slick-list .item { height: 100%; background: #000; }
.vRoom .slider .slick-list .item .img { display: flex; justify-content: center; align-items: center; height: 100%; }
.vRoom .slider .slick-list .item .img img { height: 100%; opacity: 0.4; }
.vRoom .slider .slick-dots { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 3.3rem; width: 100%; z-index: 2; }
.vRoom .slider .slick-dots li button { color: #fff; font-size: 1.1rem; padding: 0; transition: 0.3s; }
.vRoom .slider .slick-dots li.slick-active button { color: #256CED; background: #fff !important; font-weight: 700; }
.vRoom .slider .slick-dots li button:hover,
.vRoom .slider .slick-dots li button:focus { background: #256CED; }
.vRoom .txt_box .btn_more:hover,
.vRoom .txt_box .btn_more:focus { background: #256CED; color: #fff; }

/* 배너존 */
/* .banner_zone {line-height: 1; border-top: 1px solid #d1d8e4;}
.banner_zone .container {position: relative; height: 4rem; overflow: hidden;}
.banner_zone h2 {float:left; margin-top: 1.5rem; width: 4rem; font-size: 0.8rem; font-weight: 600; color: #191919;}
.banner_zone .btn {float: left; margin-top: 1.1rem; overflow: hidden;}
.banner_zone .btn a {float: left; width: 1.8rem; height: 1.8rem; line-height:1.8rem; border-radius:50%; background:#f6f6f6; text-align:center; overflow: hidden;}
.banner_zone .btn a + a {margin-left:.25rem;}
.banner_zone .btn a.play{display:none;}
.banner_zone .bnWrap { width: calc(100% - 8rem); float:left; padding-top: 0.75rem; padding-left:1.75rem; overflow: hidden;}
.banner_zone .bnWrap a {display: block; height: 2.5rem; line-height: 2.3rem; text-align: center; margin:0 5px; overflow: hidden;}
.banner_zone .bnWrap a img {max-width: 100%; max-height: 100%; vertical-align: middle;} */

.popBtn {top: 9px !important;}

@media screen and (max-width: 1540px){   
  .popBtn {top: 9px !important;}
} 

@media (max-width:1440px) {
	
.openPop .up_pop + .spopup_wrap {/* position: fixed; */top: 355px !important;margin-top: 0 !important;}
  #wrap.scroll .spopup_wrap {position: absolute !important;top: 355px  !important;}
	.spopup_wrap { height: auto!important; }
	
  #header {position: relative;top: auto !important;left: auto;}

  .fp-overflow { max-height: none; }
  .fp-is-overflow .fp-overflow.fp-auto-height-responsive, .fp-is-overflow .fp-overflow.fp-auto-height, .fp-is-overflow>.fp-overflow { overflow: visible; }

  #fullpage .section { overflow: visible; }
  #fullpage .section .section_inner { padding-top: 0; }

  .visual .slider .item a img { height: auto; width: 175%; }
  .visual .control { transform: translateY(4rem); left: 2.5%; bottom: 9.5rem; transform: translateX(0); }

  .bsnsIntrd ul { gap: 2.5rem; }
  .bsnsIntrd ul li a .more { width: 4rem; height: 4rem; right: -1rem; }

} 

@media (max-width:1240px) {

  .bsnsIntrd .heading::before { height: 3rem; }
  .bsnsIntrd ul { gap: 1.5rem; }

  .bsnsBest ul { gap: 1.5rem; }
  .bsnsBest ul li:nth-child(3) { display: none; }

  .news ul { gap: 1.5rem; }
  .news ul li:nth-child(4) { display: none; }

  #fp-nav { display: none; }
}

@media (max-width:1024px) {

	
  .up_pop { position:relative !important; top:auto !important; left:auto !important; }
  .openPop #container { padding-top: 0 !important;}

	.openPop .up_pop + .spopup_wrap {top: 270px !important;}
  #wrap.scroll .spopup_wrap {top: 270px  !important;}

  .heading { font-size: 1.3rem; }

  .bsnsIntrd ul { flex-wrap: wrap; }
  .bsnsIntrd ul li { flex: none; width: calc((100% - 1.5rem) / 2); }
  .bsnsIntrd ul li a { gap: 0.5rem; }
  .bsnsIntrd ul li a .tit { font-size: 1rem; }
  .bsnsIntrd ul li a .txt { font-size: 0.75rem; line-height: 130%; }
  .bsnsIntrd ul li a .img { height: 7rem;}
  .bsnsIntrd ul li a .more { right: 0; bottom: 4rem; width: 3rem; height: 3rem; }

  .bsnsBest ul li a .txt { font-size: 0.8rem; }

  .notice .titTab ul li a { font-size: 1rem; }

  .link a { background-size: 10rem; }
  .link a .tit { font-size: 1.3rem; }

  .vRoom { padding: 2rem; }
  .vRoom .txt_box .tit { font-size: 1.5rem; }
  .vRoom .txt_box .btn_more { font-size: 0.9rem; padding: 0.5rem 1rem; gap: 2rem; }
  .vRoom .slider .slick-dots { gap: 1rem 1.5rem; }
  .vRoom .slider .slick-dots li button { font-size: 1rem; }
}

@media (max-width:860px) {
  .bsnsBest ul li:nth-child(2) { display: none; }
}

@media (max-width:768px) {

	.openPop .up_pop + .spopup_wrap {top: 200px !important;}
  #wrap.scroll .spopup_wrap {top: 200px  !important;}

  .heading { font-size: 1.15rem; }

  .visual .control a + a { margin-left: 1rem; }

  .bsnsIntrd ul li a .tit { font-size: 0.9rem; }
  .bsnsIntrd ul li a .txt { font-size: 0.7rem; }
  .bsnsIntrd ul li a .img { border-radius: 1rem; }

  .bsnsBest .heading { margin-bottom: 1rem; }
  .bsnsBest ul li:nth-child(2) { display: block; }
  .bsnsBest ul li a .txt { font-size: 0.8rem; }
  .bsnsBest .btn_more { top: -1px; width: 1.5rem; height: 1.5rem; font-size: 1rem; }

  .interView .slider .item a .badge { font-size: 0.8rem; padding: 0.2rem 0.4rem; }
  .interView .control { top: 7rem; }
  .interView .control a { width: 2rem; height: 2rem; }

  .notice .heading { margin-bottom: 1rem; }
  .notice .titTab { right: 2.5rem; }
  .notice .btn_more { top: -1px; width: 1.5rem; height: 1.5rem; font-size: 1rem; }

  .news .btn_more { top: -1px; width: 1.5rem; height: 1.5rem; font-size: 1rem; }

  .link a { padding: 1.5rem; border-radius: 1rem; }
  .link a .tit { font-size: 1.15rem; }
  .link a .more { font-size: 0.75rem; padding: 0.2rem 0.5rem; }

  .news .heading { margin-bottom: 1rem; }
  .news ul li:nth-child(3) { display: none; }
  .news ul li a .txt { font-size: 0.8rem; }

  .vRoom .txt_box .tit { font-size: 1.3rem; }
  .vRoom .txt_box .btn_more { font-size: 0.8rem; }
  .vRoom .slider .slick-dots li button { font-size: 0.9rem; }
}

@media (max-width:580px) {

  .visual .control { bottom: 1.5rem; transform: none; }
  .visual .control .page { font-size: 0.7rem; }
  .visual .control a + a { margin-left: 0.5rem; }

  .bsnsIntrd ul { gap: 1.5rem 1rem; }
  .bsnsIntrd ul li { width: calc((100% - 1rem) / 2); }
  .bsnsIntrd ul li a .more { bottom: 7rem; }

  .bsnsBest ul { gap: 1rem; }
  .bsnsBest ul li:nth-child(2) { display: none; }
  .bsnsBest ul li a .img { height: 7rem; }

  .interView .slider .item a .img { height: 9rem; margin-bottom: 1rem; }
  .interView .slider .item a .badge { font-size: 0.7rem; }
  .interView .slider .item a .txt { margin-top: 0.5rem; font-size: 0.7rem; }
  .interView .control { top: 5rem; }

  .news ul { gap: 1rem; }
  .news ul li:nth-child(2) { display: none; }
  
  .vRoom { border-radius: 1rem; }
  .vRoom .txt_box .tit { font-size: 1.1rem; }
  .vRoom .txt_box .tit em { padding: 0 0.4rem; }
  .vRoom .txt_box .txt { margin: 1.5rem 0; }
  .vRoom .txt_box .btn_more { padding: 0.5rem 0.8rem; gap: 1rem; font-size: 0.75rem; }
  .vRoom .slider { margin-top: 2rem; }
}

@media (max-width:460px) {
	.openPop .up_pop + .spopup_wrap {top: 170px !important;}
  #wrap.scroll .spopup_wrap {top: 170px  !important;}
}


@media (max-width:460px) {
  .heading { font-size: 1rem; }

  .bsnsIntrd .heading { text-align: left; }
  .bsnsIntrd ul li { width: 100%; }
  .bsnsIntrd ul li a { text-align: left; }
  .bsnsIntrd ul li a .tit { font-size: 0.8rem; }
  .bsnsIntrd ul li a .txt { font-size: 0.65rem; }
  .bsnsIntrd ul li a:hover .img,
  .bsnsIntrd ul li a:focus .img { border-radius: 5rem; }

  .interView .slider .item a .img { height: 7rem; }
  .interView .control { display: flex; }
  .interView .control a + a { border-top: none; border-left: 1px solid #fff; }

  .notice .titTab ul { gap: 1rem; }
  .notice .titTab ul li + li::before { left: -0.5rem; }
  .notice .titTab ul li a { font-size: 0.9rem; }
  .notice .tabWrap .list_box ul li a .badge { display: none; }
  .notice .tabWrap .list_box ul li a .txt { font-size: 0.8rem; }
  .notice .tabWrap .list_box ul li a .date { font-size: 0.7rem; }

  .link a { padding: 1rem; border-radius: 0.5rem; }
  .link a .txt { font-size: 0.7rem; }
  .link a .tit { font-size: 1rem; }

  .vRoom { border-radius: 0.5rem; }
  .vRoom .txt_box .tit { font-size: 1rem; }
  .vRoom .txt_box .tit br { display: none; }
  .vRoom .txt_box .txt { font-size: 0.8rem; margin: 1rem 0; }
  .vRoom .txt_box .btn_more { gap: 0.5rem; font-size: 0.7rem; }
  .vRoom .txt_box .btn_more span img { display: none; }
  .vRoom .slider .slick-dots { gap: 0.5rem; }
  .vRoom .slider .slick-dots li button { font-size: 0.8rem; }
}

@media (max-width:360px) {
  .notice .titTab { position: relative; top: auto; right: auto; margin-bottom: 1rem; }
} 

@media (max-width:340px) {
	.openPop .up_pop + .spopup_wrap {top: 200px !important;}
  #wrap.scroll .spopup_wrap {top: 200px  !important;}
}