/**
	* @file Main.css
	* @author WonnyJ
	* @date 2025.08.20
 */
.Main main {padding: 0; }
section > h2 {font-size: 2rem; text-align: center; font-weight: 600; padding-bottom: 2rem;}
section > h2 .subDesc {font-size: 1.125rem; color: var(--color-gy2); display: block; margin: 0.625rem auto;}

.topSection {display: flex; width: 100%; justify-content: space-between; padding: 4rem 0 2.5rem 0;}
.topSection .mainVis {width: calc(100% - 25rem); display: flex;  position: relative;}
.topSection .mainVis .swiperWrap {width: 100%; overflow: hidden; background: #f1f1f1; border-radius: 2rem;}

.mainVis .swiper-wrapper > .swiper-slide {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; padding-bottom: 54%; }
.mainVis .swiper-wrapper > .swiper-slide > a {position: absolute; width: 100%; height: 100%; top: 50%;left: 50%; transform: translate(-50%, -50%);}
.mainVis .swiper-wrapper > .swiper-slide > a img,
.mainVis .swiper-wrapper > .swiper-slide > img {position: absolute; width: 100%; height: 100%; top: 50%;left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
/* .topSection .mainVis .nextBtn,
.topSection .mainVis .prevBtn {position: absolute; top: 50%;}
.topSection .mainVis .prevBtn { left: 0; transform: translate(-50%, -50%)}
.topSection .mainVis .nextBtn {right:0; transform: translate(50%, -50%)} */

.topSection .mainVis .swiperPageWrap { position: absolute; text-align: center; z-index: 10;left: 50%; bottom: 1rem; transform: translateX(-50%); width: 100%; display: flex; justify-content: center; align-items: center; gap: 0.5rem;}
.topSection .mainVis .swiperPageWrap .pageNav {position: relative; display: flex; width: auto; top: auto; left: auto; bottom: auto; gap: 0.5rem;}
.topSection .mainVis .swiperPageWrap .pageStoper {all: unset; cursor: pointer; opacity: 0.8; transition: 0.3s; width: 0.6875rem ;}
.topSection .mainVis .swiperPageWrap .pageStoper::before { content: '\f04c'; font: var(--fa-font-solid); color: var(--color-white); font-size: 0.85rem; transition: 0.3s;}
.topSection .mainVis .swiperPageWrap .pageStoper.has::before { content: '\f04b'; font: var(--fa-font-solid); color: var(--color-white); font-size: 0.85rem; transition: 0.3s;}
.topSection .mainVis .pageNav .swiper-pagination-bullet {background-color: var(--color-white); opacity: 0.5; height: 0.625rem; width: 0.625rem; margin: 0;}
.topSection .mainVis .pageNav .swiper-pagination-bullet-active {background-color: var(--color-white); opacity: 1; width: 1.375rem; border-radius: 100rem;}

.topSection .qMenu { width: 22rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 0;}
.topSection .qMenu > a {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;  border-radius: 0.5rem; } 
.topSection .qMenu > a .objBox { width: 9em; height: 9rem; position: relative; border-radius: 2.5rem; padding: 0.85rem; background: #F2F4FC; transition: 0.3s; border: 2px solid transparent;} 
.topSection .qMenu > a > span { font-size: 1rem; font-weight: 700; color: var(--color-gy1); margin-top: 0.75rem; transition: 0.3s;}

.cateSection {padding: 0.5rem 0 3rem 0;}
.cateSection .inner .cateWrap {width: 100%; display: flex; gap: 1.5rem; }
.cateSection .inner .cateWrap > a {display: flex; align-items: center; width: calc((100%/4) - (4.5rem/4)); background: #F2F4FC; border-radius: 0.625rem; flex: 1;  padding: 1rem 2rem; gap: 1rem; border: 2px solid transparent; transition: 0.3s;} 
.cateSection .inner .cateWrap > a > span { font-weight: 600; font-size: 1.25rem; color: var(--color-bl1);}
.cateSection .inner .cateWrap > a > .thum {width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; position: relative;   border: 1px solid var(--color-line-w); transition: 0.3s; background: var(--color-white);}
.cateSection .inner .cateWrap > a > .thum  > img {position: absolute; left:50%; bottom: 0; width: 90%; height: 90%; transform: translateX(-50%); object-fit: cover; transition: 0.3s; }

.btmSection {background: #f5f6f9; }
.btmSection .inner {display: flex; align-items: flex-start; }
.btmSection .inner .btmAside { width: 20rem; display: flex; flex-direction: column; position: sticky; top: 0; padding: 3rem 2rem 2rem 0;}
.btmSection .inner .btmAside h2 {font-size: 1.25rem; font-weight: 700; color: var(--color-bl1); padding-bottom: 1rem;}
.noticeList h2 > a {display: flex; align-items: center; gap: 0.625rem;}
.noticeList h2 > a::after {content: '\f054'; font: var(--fa-font-solid); font-size: 0.9375rem; }
.noticeList > div {padding: 0 0 2rem 0; border-bottom:  1px  solid #ddd; display: flex; flex-direction: column; gap: 0.625rem;}
.noticeList > div > a {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; color: var(--color-gy1);}

.csCenter {padding: 2rem 0 0 0; }
.csCenter > div { display: flex; flex-direction: column; gap: 0.5rem;}
.csCenter > div > strong {color: var(--color-primary-1-dk); font-weight: 800; font-size: 2rem; }
.csCenter > div > span {color: var(--color-gy1); font-weight: 500;}
.csCenter > div > span:last-of-type {font-weight: 400;}

.btmSection .inner .btmAside .btnWrap {padding-top: 1.25rem; }
.btmSection .inner .btmAside .btnWrap a {width: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; background: var(--color-primary-1); color: var(--color-white); height: 2.875rem; border-radius: 0.25rem; }
.btmSection .inner .btmContents {flex: 1; display: flex;  flex-direction: column; min-height: 200vh; border-left: 1px solid #ddd; padding: 3rem 0 0 0}

.supervisorCon .cardBox.item-Zoom b::before {content: '비대면 ZOOM'; }
.supervisorCon .cardBox.item-Book b::before {content: '우편'; }
.supervisorCon .cardBox.item-Online b::before {content: '온라인'; }
.supervisorCon {padding-top: 2rem;}
.supervisorCon h2 { font-size: 2.5rem; color: var(--color-bl1); font-weight: 800; letter-spacing: -0.05em;}
.supervisorCon h2 > b {color: var(--color-primary-1);}
.supervisorCon .cateWrap  {display: flex; gap: 0.25rem; padding-top: 4rem;}
.supervisorCon .cateWrap > button {border: 1px solid var(--color-line-w); display: inline-flex; justify-content: center; align-items: center; background: var(--color-white); border-radius: 100rem; width: 10rem; height: 3rem; font-size: 1.125rem; color: var(--color-gy1); font-weight: 600;}
.supervisorCon .cardBox .cateTag span em {width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-block; border: 1px solid var(--color-line-w); }
.supervisorCon .cardBox.SSindustry2 .cateTag span em { background: url(/application/views/Client/safety/Images/sub/innobi_2.png) no-repeat center bottom;
    background-size: cover; }
.supervisorCon .btnWrap {width: 100%; display: flex; justify-content: center;}

.prideCon,
.diffCon,
.vidCon {padding-left: 3rem;}

.prideCon .cardList {display: flex; flex-wrap: wrap; gap: 1rem; padding: 1.875rem 0 8rem ; width: 100%;}
.prideCon .cardBox {background: var(--color-white); padding: 2.125rem 1.875rem; border-radius: 0.625rem; display: flex; flex-direction: column; width: calc(100% / 3 - 1rem); gap: 0.5rem; }
.prideCon .cardBox > span {color: var(--color-primary-1); font-weight: 800; letter-spacing: -0.05em;}
.prideCon .cardBox > strong {width: 100% ; font-size: 1.75rem ; color: var(--color-bl1); font-weight: 800; letter-spacing: -0.05em; display: block; line-height: 2.25rem;}
.prideCon .cardBox > p {padding-top: 0.3125rem ; letter-spacing: -0.05em; color: var(--color-gy1);}

.diffCon .cardList {display: flex; flex-direction: column; gap: 1rem; padding: 1.875rem 0 8rem 0; width: 100%;}
.diffCon .cardBox { display: flex; align-items: center; flex-direction: row; background: var(--color-white);  border-radius: 0.625rem; padding: 1.5rem  1.5rem 1.5625rem 1.5rem; gap: 0 1.25rem;}
.diffCon .cardBox .imgWrap {width: 3.5rem; height: 3.1875rem; position: relative;}
.diffCon .cardBox .imgWrap > img  {width: 100%;}
.diffCon .cardBox div:last-of-type > strong {font-size: 1.625rem; line-height: 138%; letter-spacing: -0.05em; font-weight: 800; color: var(--color-bl1);}
.diffCon .cardBox div:last-of-type > p {padding-top: 0.3125rem ; font-size: 1.125rem; letter-spacing: -0.05em; color: var(--color-gy1);}

.vidCon > div {display: flex; align-items: center; flex-direction: row; padding: 2.5rem 0 8rem 0; gap: 3.625rem;}
.vidCon > div > .iframeWarp {width: 32.875rem; height: 18.4375rem; position: relative; border-radius: 0.625rem; overflow: hidden;}
.vidCon > div > .iframeWarp  iframe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.vidCon > div > div:last-of-type {font-size: 1.625rem; font-weight: 700; letter-spacing: -0.075em; color: var(--color-bl2);; line-height: 2.75rem;}
.vidCon > div > div:last-of-type > span {display: block;}
.vidCon > div > div:last-of-type b { color: var(--color-primary-1);  font-weight: 700;}

.ratingCon {text-align: center; padding-bottom: 5.625rem; position: relative; margin-bottom: 8rem; }
.ratingCon::before {content: ''; width: calc(100%); height: 60%; background: #efeef7; background: radial-gradient(circle at center, #efeef7 0%, #efeef7 20%, transparent 80%); position: absolute; bottom: 0; left: 0; z-index: 1;}

.ratingCon h2 {font-size: 1.875rem; line-height: 2.375rem; color: var(--color-bl2); padding-bottom: 2.625rem; }
.ratingCon .txtCon {position: relative; z-index: 2;}
.ratingCon .txtCon > div {color: #5e48d4; letter-spacing: -0.05em;}
.ratingCon .txtCon > div > b {font-size: 18.125rem; font-weight: 800; position: relative;}
.ratingCon .txtCon > div > b::after { content: ''; width: 8.375rem; height: 5.4375rem; display: block; position: absolute; background: url('/application/views/Client/safety/Images/common/rating_img1.png') no-repeat; top: 0; left: 50%; transform: translate(-50%, 11%); }
.ratingCon .txtCon > div > span {font-size: 2.625rem; font-weight: 900;}
.ratingCon .txtCon > p:first-of-type {font-size: 1.25rem; color:var(--color-gy1) ; font-weight: 600; line-height: 1.75rem; }
.ratingCon .txtCon > p:last-of-type {font-size: 1.875rem; color:var(--color-bl2) ; font-weight: 600; line-height: 2.375rem; padding-top: 2.5rem; font-weight: 700;} 

@media (max-width:1440px) {
	.topSection,
	.cateSection,
	.btmSection {padding-left: var(--gird-margin); padding-right: var(--gird-margin);}

	.topSection .qMenu {width: 20rem;}
	.topSection .mainVis {width: calc(100% - 21rem)} 
	.prideCon, .diffCon, .vidCon {padding-left: var(--gird-margin);}
	.vidCon > div {flex-direction: column;  align-items: flex-start; gap: 1.625rem; padding-top: 2rem;}
	.vidCon > div > .iframeWarp {width: 100%; height: auto; padding-bottom: 56.25%;}
	.vidCon > div > div:last-of-type {order: -1;}
	.vidCon > div > div:last-of-type > span {display: inline-block; }
	.vidCon > div > div:last-of-type > span:nth-of-type(3) {display: block;}	
	
}
@media (max-width:1280px) {
	.topSection  {flex-direction: column; padding: 0; }	
	.topSection .mainVis {width: 100%;}
	.topSection .mainVis .swiperWrap {border-radius: 0;}
	.topSection .qMenu { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; width: 100%; padding-top: 4%; padding-left: var(--gird-margin) ; padding-right: var(--gird-margin) ;}
	.topSection .qMenu > a {width: 100%;}
	.cateSection {padding: 3.5% var(--gird-margin);}
	.cateSection .inner .cateWrap { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:1rem; }
	.cateSection .inner .cateWrap a {width: 100%; padding: 1rem; justify-content: center; gap: 0.875rem;}
	.cateSection .inner .cateWrap > a > .thum {width: 3.6125rem; height: 3.6125rem;}
	.cateSection .inner .cateWrap > a > span { font-size: 1.5rem; font-weight: 800 ; color: var(--color-bl2);}

	.btmSection .inner {flex-direction: column ; padding : 0 var(--gird-margin);}	
	.btmSection .inner .btmAside {position: relative; flex-direction: row; width: 100%; border-bottom: 1px solid #ddd; gap: 4rem; padding: 2.5rem 0;}
	.noticeList {flex: 1; border-right: 1px solid #ddd; padding-right: 4rem;}
	.noticeList > div {border: 0;}
	.noticeList > div > a {font-size: 1.125rem;}
	.csCenter {padding: 0; width: 40%;}
	
	.btmSection .inner .btmContents {flex: 0 0 auto; width: 100%; border: 0; order: -1; padding: 6rem 0 0 0;}
	.prideCon, .diffCon, .vidCon {padding-left: 0; }
	.diffCon .cardBox > div:last-of-type {flex: 1;}
	.diffCon .cardBox div:last-of-type > p {width: 100%;}
	
	.supervisorCon h2 {text-align: center;}
	.vidCon > div > .iframeWarp {order: -1;}
	
}

@media (min-width: 991px) {	
	.mainVis .swiper-wrapper > .swiper-slide > a:hover { opacity: 0.9;}
	.topSection .mainVis .swiperPageWrap .pageStoper:hover {opacity: 1;}
	.topSection .qMenu > a:hover .objBox {border-color:  var(--color-primary-1); background: #f0ebf9;}
	.topSection .qMenu > a:hover span {color: var(--color-primary-1);}
	.topSection .qMenu a:hover {border-color: var(--color-primary-1); color: var(--color-primary-1);}
	.cateSection .inner .cateWrap > a:hover {border-color:  var(--color-primary-1); background: #f0ebf9;}
	.noticeList > div > a:hover {color: var(--color-primary-1);}
	.btmSection .inner .btmAside .btnWrap a:hover {background: var(--color-primary-1-li);}
}

@media (max-width: 990px) {
	
	.topSection .qMenu  {gap: 0.5rem;}
	.topSection .qMenu > a {width: 100%;} 
	.topSection .qMenu > a .objBox {width: 100%; height: 0; padding-bottom: 80%; border-radius: 1.5rem; position: relative; border: 0; }
	.topSection .qMenu > a .objBox > img {position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); object-fit: cover; }
	
	.cateSection .inner .cateWrap {gap: 0.5rem;}
	.cateSection .inner .cateWrap a {padding: 1rem 0.5rem; gap: 0.5rem;}
	.cateSection .inner .cateWrap > a > .thum {width: 3rem; height: 3rem;}
	.cateSection .inner .cateWrap > a > span {font-weight: 600; color: var(--color-bl2); line-height: 0;}

}

@media (max-width: 786px) {
	
	.topSection .qMenu {grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8% 5%; padding: 5% var(--gird-margin) 5% var(--gird-margin);}
	.topSection .qMenu a:nth-of-type(2),
	.topSection .qMenu a:nth-of-type(4) {display: none;}
	.cateSection .inner .cateWrap {grid-template-columns: 1fr 1fr;}
	.cateSection {padding-bottom: 8.5%; padding-top: 0;}
	
	.btmSection .inner,
	.supervisorCon {padding:0;}
	
	.ratingCon, 
	.prideCon, 
	.diffCon,
	.vidCon {padding: 17% 0; margin: 0;}
	.ratingCon {padding-top: 32%;}
	.ratingCon::before {height: 45%; }
	
	.ratingCon h2 {font-size: 1.5rem; line-height: 140%; padding-bottom: 9%;}
	.ratingCon .txtCon > div > b {font-size: 36vw;}
	.ratingCon .txtCon > div > b::after {width: 19.5vw; height: 10vw; background-size: cover;}
	.ratingCon .txtCon > div > span {font-size: 7vw;}
	.ratingCon .txtCon > p:first-of-type { font-size: 1.125rem; line-height: 138%; padding-top: 4%;}
	.ratingCon .txtCon > p:last-of-type {padding-top: 6%;}

	.supervisorCon .ratingCon h2 { padding-bottom: 23%;}
	.supervisorCon h2 { font-size: 2.25rem; line-height: 138%;}
	.btmSection .inner .btmContents {padding-top: 0;}
	.diffCon .cardList,
	.prideCon .cardList,
	.vidCon > div {flex-direction: column; gap: 0.625rem; padding: 9% 0 0 0;}
	.diffCon .cardBox,
	.prideCon .cardBox {width: 100%; padding: 2rem 3rem;}
	/* .prideCon .cardBox > strong br {display: none;} */
	.prideCon .cardBox > p { font-size: 1.5rem; font-weight: 600; color: var(--color-gy2);}

	.diffCon .cardBox { position: relative; }
	.diffCon .cardBox .imgWrap {width: 2.25rem; top: 1.625rem; left: 3rem; position: absolute;}
	.diffCon .cardBox div:last-of-type {display: flex; flex-direction: column; gap: 1rem;}
	.diffCon .cardBox div:last-of-type > strong { font-size: 1.25rem; padding-left: 2.75rem;}
	.diffCon .cardBox div:last-of-type > p {line-height: 138%;}

	.btmSection .inner .btmAside {display: flex; flex-direction: column; gap: 0; padding-top: 0; border-bottom: 0;}
	.noticeList {border-right: 0; border-right: 0; border-bottom: 1px solid #ddd; padding-top: 2rem ; border-top: 1px solid #ddd;}
	.csCenter {padding-top: 2rem; width: 100%; text-align: center; align-items: center; justify-content: center;}
	.noticeList > div > a {font-size: 1rem;}
}


@media (max-width: 550px) {
	.topSection .qMenu {gap: 8% 0.625rem;}
	.topSection .qMenu > a .objBox {border-radius: 0.625rem;}
	.topSection .qMenu > a > span {font-size: 0.8125rem;}
	
	.cateSection .inner .cateWrap a {padding: 0.25rem 0.5rem;}
	.cateSection .inner .cateWrap > a > .thum {width: 2.5rem; height: 2.5rem;}
	.cateSection .inner .cateWrap > a > span {font-size: 1rem;}

	.supervisorCon h2 {font-size: 1.875rem;}
	
	.ratingCon .txtCon > p:last-of-type {font-size: 1.2rem; line-height: 130%;}
	
	.ratingCon, 
	.prideCon, 
	.diffCon,
	.vidCon {padding: 20% 0; margin: 0;}

	.diffCon .cardBox, 
	.prideCon .cardBox {padding: 1.25rem 1.5rem; }
	.prideCon .cardBox > strong {font-size: 1.25rem; line-height: 138%; }
	.prideCon .cardBox > strong br {display: none;}
	.prideCon .cardBox > p {font-size: 1rem;}	
	.diffCon .cardBox .imgWrap {width: 2.25rem; top: 1.375rem; left: 1.5rem; }
	.diffCon .cardBox div:last-of-type { gap: 0.625rem; padding-top: 0.5rem;}
	.diffCon .cardBox div:last-of-type > strong {padding-left: 2.5rem;}


	.vidCon > div > div:last-of-type {font-size: 1.25rem; line-height: 168%; padding-top: 4%;}

}

@media (max-width: 410px) {
	.supervisorCon h2 {font-size: 1.5rem;}
	.cateSection .inner .cateWrap a {border-radius: 0.5rem;}
	.cateSection .inner .cateWrap > a > .thum {width: 2rem; height: 2rem;}
}