@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Roboto:wght@400;700&display=swap');
@font-face {
    font-family: 'NanumSquare';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquareR.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquareR.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquareR.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquareR.ttf) format("truetype");
}

html, body
{
	margin:0px; padding:0px; 
	font-family:'Roboto', 'Noto Sans KR', sans-serif; font-size:14px; color:#666;
	height:100%;
	-webkit-text-size-adjust:100%; 
	-moz-text-size-adjust:100%; 
	-ms-text-size-adjust:100%; 
	text-size-adjust:100%; 
}

body { max-width:500px; margin:0 auto; }

h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px; font-weight:normal; line-height:1; }
p { margin:0px; padding:0px; line-height:1; }

button { font-family:'Roboto', 'Noto Sans KR', sans-serif; font-size:14px; color:#333; }
input { font-family:'Roboto', 'Noto Sans KR', sans-serif; font-size:14px; color:#333; }
textarea { font-family:'Roboto', 'Noto Sans KR', sans-serif; font-size:14px; color:#333; }

button, .pointer { cursor:pointer; }
.hidden { display:none; }

textarea:focus { outline: none; }
input:focus { outline: none; }
button:focus { outline: none; }
select:focus { outline: none; }
a:focus { outline: none; }

input::placeholder { color:#BEBEBF; }
input::-webkit-input-placeholder { color:#BEBEBF; }
input::-moz-placeholder { color:#BEBEBF; }
input:-ms-input-placeholder { color:#BEBEBF; }

div.header { position:relative; border-bottom:1px solid #E4E4E4; padding:15px; }
div.header h1 { height:30px; background-image:URL("/img/logo/logo_sisafer01.svg"); background-repeat:no-repeat; background-position:left center; background-size:contain; }
div.header ul { position:absolute; right:15px; top:15px; list-style:none; margin:0px; padding:0px; }
div.header ul li { display:inline-block; }
div.header button { border:0px;  padding:5px 15px; background:#4C4C4C; font-size:14px; color:#FFF; border-radius:20px; }

div.visual { }
div.visual div.txt1 { padding:20px; font-family:'Roboto', 'NanumSquare', 'Noto Sans KR', sans-serif; }
div.visual div.txt1 h2 { font-size:20px; }
div.visual div.txt1 p { font-size:26px; margin-top:10px; font-weight:700; }
div.visual div.bg1 { position:relative; height:200px; background-image:URL("/m/img/default/visual_bg1.png"); background-repeat:no-repeat; background-position:center center; background-size:contain; background-color:#8D8C8A; background-color:radial-gradient(circle at 50%, #b9BBBA 0%, #8D8C8A 100%); }
div.visual div.bg1 div.pos1 { position:absolute; top:90px; left:50%; }
div.visual div.bg1 span.qr { position:absolute; display:inline-block; top:0px; left:-38px; width:75px; height:75px; background-image:URL("/m/img/default/qr.png"); background-size:contain; animation:fadeIn1 3s linear; animation-iteration-count:1; }

div.box1 { padding:40px 20px; }
h2.st1 { margin-bottom:20px; font-size:22px; color:#444444; text-align:center; font-weight:700; font-family:'NanumSquare', 'Roboto', 'Noto Sans KR', sans-serif; }
h3.st1 { margin-bottom:15px; font-size:16px; color:#444444; text-align:center; font-weight:700; font-family:'NanumSquare', 'Roboto', 'Noto Sans KR', sans-serif; }
h3.st2 { margin-bottom:15px; font-size:18px; text-align:center; font-weight:700; font-family:'NanumSquare', 'Roboto', 'Noto Sans KR', sans-serif; }
p.st1 { color:#666; font-size:16px; text-align:center; }

div.section1 {}
div.section1 div.bg { margin-top:20px; height:300px; background-image:URL("/m/img/contents/bg11.png"); background-repeat:no-repeat; background-position:center center; background-size:contain; }

div.section2 {}
div.section2 ul { list-style:none; margin:0px; padding:0px; font-size:16px; text-align:center; }
div.section2 div.bg1 { position:relative; margin-top:30px; height:200px; background-image:URL("/m/img/contents/bg21.png"); background-position:center center; background-repeat:no-repeat; background-size:auto 200px; }
div.section2 div.pos1 { position:absolute; top:50%; left:50%; }
div.section2 span.gear1 { position:absolute; top:-25px; left:-10px; width:127px; height:127px; background-image:URL("/m/img/contents/bg21-1.png"); background-size:contain; animation:rotation1 5s linear infinite;  }
div.section2 span.gear2 { position:absolute; top:-65px; left:-105px; width:105px; height:105px; background-image:URL("/m/img/contents/bg21-2.png"); background-size:contain; animation:rotation2 4s linear infinite;  }
div.section2 span.gear3 { position:absolute; top:-90px; left:0px; width:61px; height:61px; background-image:URL("/m/img/contents/bg21-3.png"); background-size:contain; animation:rotation2 2s linear infinite;  }
div.section2 div.bg2 { position:relative; margin-top:30px; height:201px; background-image:URL("/m/img/contents/bg22.png"); background-position:center bottom; background-repeat:no-repeat; background-size:auto 201px; }
div.section2 div.bg2 span { position:absolute; top:-50px; left:-65px; width:122px; height:122px; background-image:URL("/m/img/contents/bg22-1.png"); background-size:contain; animation:rotation1 5s linear infinite;  }

div.section3 {}
div.section3 h3 { font-weight:700; }
div.section3 div.group { padding:15px; text-align:center; }
div.section3 h3 { margin-top:10px; text-align:center; }
div.section3 div.group span.bg { display:inline-block; width:100px; height:100px; border:1px solid #DDD; border-radius:50px; background-position:center center; background-repeat:no-repeat; }
div.section3 div.group span.bg1 { background-image:URL("/m/img/contents/bg31.png"); }
div.section3 div.group span.bg2 { background-image:URL("/m/img/contents/bg32.png"); }
div.section3 div.group span.bg3 { background-image:URL("/m/img/contents/bg33.png"); }
div.section3 div.group ul { list-style:none; margin:10px 0px; padding:0px; }
div.section3 div.group ul li { text-align:center; }

div.section4 {}
div.section4 div.bg { height:210px; background-image:URL("/img/contents/bg12.png"); background-position:center center; background-repeat:no-repeat; background-size:contain; }

div.section5 {}
div.section5 .inner { height:700px; }
div.section5 .box { width:100%; }
div.section5 div.bg1 { margin-top:30px; width:100%; height:470px; background-image:URL("/m/img/contents/bg51.png"); background-size:auto 470px; background-position:center center; background-repeat:no-repeat; }
div.section5 div.bg21 { margin-top:30px; width:100%; height:80px; background-image:URL("/m/img/contents/bg52-1.png"); background-size:auto 80px; background-position:center center; background-repeat:no-repeat; }
div.section5 div.bg22 { margin-top:30px; width:100%; height:288px; background-image:URL("/m/img/contents/bg52-2.png"); background-size:auto 288px; background-position:center center; background-repeat:no-repeat; }
div.section5 div.txt1 { width:250px; margin:0 auto; }
div.section5 div.txt1 h3 { margin-bottom:10px; font-weight:700; }
div.section5 div.txt1 ul { margin:0px 0px 0px 10px; padding:0px 0px 0px 10px }
div.section5 div.txt2 { margin-top:20px; display:inline-block; }
div.section5 div.txt2 li { text-align:left; }
div.section5 div.bg3 { margin-top:30px; width:100%; height:225px; background-image:URL("/m/img/contents/bg53.png"); background-size:auto 225px; background-position:center center; background-repeat:no-repeat; }
div.section5 div.bg4 { margin-top:30px; width:100%; height:470px; background-image:URL("/m/img/contents/bg54.png"); background-size:auto 470px; background-position:center center; background-repeat:no-repeat; }

div.section9 {}
div.section9 ul { margin:0px; width:200px; margin:10px auto; }
div.section9 ul li { font-size:16px; text-align:left; }
div.section9 div.bg { position:relative; margin-top:30px; width:100%; height:269px; background-image:URL("/m/img/contents/bg91.png"); background-size:auto 269px; background-position:center center; background-repeat:no-repeat; }
div.section9 div.pos1 { position:absolute; top:50%; left:50%; }
div.section9 div.pos1 span.bg1 { position:absolute; top:13px; left:-80px; width:66px; height:47px; background-image:URL("/m/img/contents/bg91-1.png"); background-size:contain; z-index:10; }
div.section9 div.pos1 span.bg2 { position:absolute; top:20px; left:-65px; width:32px; height:37px; background-image:URL("/m/img/contents/bg91-2.png"); background-size:contain; animation:move2 4s linear; animation-iteration-count:infinite; }
div.section9 div.pos1 span.bg3 { position:absolute; top:20px; left:-65px; width:32px; height:36px; background-image:URL("/m/img/contents/bg91-3.png"); background-size:contain; animation:move3 4s linear; animation-iteration-count:infinite; }

div.section6 {}
div.section6 ul { margin:0px; width:200px; margin:10px auto; }
div.section6 ul li { font-size:16px; text-align:left; }
div.section6 div.bg { margin-top:30px; position:relative; height:189px; }
div.section6 div.pos1 { position:absolute; top:50%; left:50%; }
div.section6 span.gear1 { position:absolute; top:-85px; left:-130px; width:84px; height:84px; background-image:URL("/m/img/contents/bg61-1.png"); background-size:contain; animation:rotation1 6s linear infinite;  }
div.section6 span.gear2 { position:absolute; top:-110px; left:60px; width:105px; height:105px; background-image:URL("/m/img/contents/bg61-2.png"); background-size:contain; animation:rotation2 9s linear infinite;  }
div.section6 span.gear3 { position:absolute; top:-80px; left:3px; width:46px; height:46px; background-image:URL("/m/img/contents/bg61-3.png"); background-size:contain; animation:rotation1 3s linear infinite;  }
div.section6 span.bg1 { position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-image:URL("/m/img/contents/bg61.png"); background-size:auto 189px; background-position:center center; background-repeat:no-repeat; }

div.section7 {}
div.section7 h2 span { font-size:14px; }
div.section7 div.bg { margin-top:30px; position:relative; height:115px; background-image:URL("/m/img/contents/bg71.png"); background-size:auto 115px; background-position:center center; background-repeat:no-repeat; }
div.section7 div.pos1 { position:absolute; top:50%; left:50%; }
div.section7 div.pos1 span.bg1 { position:absolute; top:-55px; left:-50px; width:47px; height:16px; background-image:URL("/m/img/contents/bg71-1.png"); background-size:contain; animation:move1 3s linear; animation-iteration-count:infinite; }
div.section7 div.bg span.bg2 { position:absolute; top:-13px; left:30px; width:104px; height:60px; background-image:URL("/m/img/contents/bg71-2.png"); background-size:contain; animation:fadeIn2 3s linear; animation-iteration-count:infinite; }
div.section7 div.bg span.bg3 { position:absolute; top:-28px; left:13px; width:137px; height:60px; background-image:URL("/m/img/contents/bg71-3.png"); background-size:contain; animation:fadeIn3 3s linear; animation-iteration-count:infinite; }
div.section7 div.btn { margin-top:30px; text-align:center; }
div.section7 div.btn button { border:0px; width:300px; height:60px; background:#F96541; color:#FFF; font-size:20px; border-radius:5px; }

div.section8 {}
div.section8 div.st1 { margin-bottom:20px; }
div.section8 div.st1 span.st1 { display:block; margin-bottom:5px; }
div.section8 div.st1 span.st2 { display:block; font-size:20px; }
div.section8 a { text-decoration:none; color:#666; }

div.section10 {}
div.section10 div.bg { background-image:URL("/m/img/contents/bg14.png"); height:825px; background-position:center center; background-repeat:no-repeat; background-size:auto 825px; }



div.footer { padding:20px 20px 30px 20px; background-color:#3A3A3A; color:#DDD; }
div.footer ul { list-style:none; margin:0px 0px 20px 0px; padding:0px; }
div.footer ul li { display:inline-block; }
div.footer button { border:0px; background:transparent; font-size:12px; color:#DDD; padding:5px 10px; background:#5f5f5f; }
div.footer span.separator { display:inline-block; width:10px; height:10px; margin-left:10px; border-left:1px solid #555; }
div.footer p.copyright { margin-top:30px; color:#888; font-size:12px; }

#layer_a { display:none; position:fixed; z-index:10000000; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.8); }
#layer_b { position:absolute; top:0px; left:0px; right:0px; bottom:0px; }
#layer_c { position:absolute; top:0px; left:0px; right:0px; bottom:0px; border:1px solid #000; background:#FFF; padding:10px; }
#layer_c button.close { position:absolute; top:10px; right:10px; border:0px; width:40px; height:40px; background:#333; color:#FFF; font-size:20px; }
#layer_d { height:100%; overflow-y:auto; }
#layer_d h2 { margin-top:50px; margin-bottom:20px; font-size:22px; color:#444444; font-weight:700; font-family:'NanumSquare', 'Roboto', 'Noto Sans KR', sans-serif; }
#layer_d div.layer_box1 { position:absolute; top:110px; left:10px; right:10px; bottom:10px; border:1px solid #DDD; padding:10px; }
#layer_d div.layer_box2 { height:100%; overflow-y:auto; font-size:14px; line-height:1.6; }
#layer_d table { width:100%; border-collapse: collapse; }
#layer_d table th { border:1px solid #DDD; font-weight:400; padding:5px; }
#layer_d table td { border:1px solid #DDD; padding:5px; }
#layer_d form input.st1 { background:#fff0b5; padding:6px 0px; border:0px; font-size:16px; width:100%; }
#layer_d form input.st2 { background:#F5F5F5; padding:6px 0px; border:0px; font-size:16px; width:100%; }
#layer_d form textarea { background:#F5F5F5; padding:6px 0px; border:0px; font-size:16px; width:100%; height:100px; line-height:1.6; }
#layer_d form div.agree { color:#FF6D00; font-weight:700; font-size:16px; padding:20px 0px; }
#layer_d form div.agree button { margin-top:20px; border:0px; width:100%; height:50px; background:#F96541; color:#FFF; font-size:18px; border-radius:5px; }
#layer_d div.personal { margin-top:10px; border:1px solid #DDD; padding:10px; height:50px; overflow-y:auto; font-size:12px; line-height:1.3; }

.bgc1 { background-color:#F9F9F9; }
.bgc3 { background-color:#F4F5FF; }
.color1 { color:#888; }
.color2 { color:#666; }
.color3 { color:#FF6D00; }
.mt10 { margin-top:10px; }
.mt20 { margin-top:20px; }
.mt30 { margin-top:30px; }
.mt50 { margin-top:50px; }
.mt70 { margin-top:70px; }
.mb10 { margin-bottom:10px; }
.mb30 { margin-bottom:30px; }
.ib { display:inline-block; }
.b { display:block; }
.lh16 { line-height:1.6; }
.lh13 { line-height:1.3; }
.center { text-align:center; }

@keyframes fadeIn1{ 0% { opacity:0; } 33% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeIn2{ 0% { opacity:0; } 50% { opacity:1; } }
@keyframes fadeIn3{ 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }
@keyframes move1{ 0% { left:-50px; } 50% { left:-40px; } 100% { left:-50px; } }
@keyframes move2{ 0% { top:20px; left:-65px; } 25% { top:20px; left:-65px; } 50% { top:-30px; left:-15px; } 90% { opacity:1; top:-30px; left:-15px; } 100% { opacity:0; top:-30px; left:-15px; } }
@keyframes move3{ 0% { top:20px; left:-65px; } 50% { top:20px; left:-65px; } 75% { top:-15px; left:-60px; } 90% { opacity:1; top:-15px; left:-60px; } 100% { opacity:0; top:-15px; left:-60px; } }
@keyframes rotation1{ 0% {transform:rotate(0deg);} 100% {transform: rotate(360deg);} }
@keyframes rotation2{ 0% {transform:rotate(360deg);} 100% {transform: rotate(0deg);} }

.swiper { width:100%; height:100%; cursor:grab; }
.swiper-slide { height:100%; display:flex; justify-content:center; align-items:center; }

#sending { position:fixed; top:0px; left:0px; right:0px; bottom:0px; background:rgba(255,255,255,0.8); z-index:1000000000; }
#sending > div { position:absolute; left:50%; top:50%; }
#sending > div > div.rotate { animation:sending_animate 3s linear infinite; border:5px dotted #EC7D16; position:absolute; left:-55px; top:-55px; height:100px; width:100px; border-radius:100px; }
#sending > div > div.per { position:absolute; left:-50px; top:-50px; height:100px; width:100px; line-height:100px; text-align:center; color:#EC7D16; }
@keyframes sending_animate { 100% { transform:rotate(360deg); } }


/* 공통 섹션 스타일 */
.custom-content-section {
	
	margin: 0 auto; /* 수평 가운데 정렬 */
	display: flex;
	justify-content: space-between;

	/* padding: 60px 80px 0px 80px; */
	/* background-color: #F4F5FF; */
	flex-direction: column;
	  gap: 15px;
  }
  
  .custom-notice,
  .custom-consult {
	width: 100%;
    background: #ffffff;
    /* border-radius: 12px; */
    overflow: hidden;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ddd;
  }

  
  /* 헤더 스타일 */
  .custom-section-header {
	display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #F9F9F9;
    /* color: #ffffff; */
    border-bottom: 1px solid #ddd;
  }
  
  .custom-section-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
  }
  
  .custom-section-header .custom-more {
	font-size: 14px;
	color: #ffffff;
	text-decoration: underline;
  }
  
  
  /* 리스트 스타일 */
  .custom-list {
	list-style: none;
	margin: 0;
	padding: 10px 20px;
  }
  
  .custom-list-item {
	font-size: 14px;
	padding: 5px 0;
	border-bottom: 1px dashed #ddd;
	display: flex;
	align-items: center;
	gap: 10px;
  }
  
  .custom-list-item:last-child {
	border-bottom: none;
  }
  
  .custom-list-item .custom-status {
	width: 70px;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 5px;
	color: #ffffff;
	text-align: center;
  }

  .custom-list-item .notice-status {
	width: 50px;
	font-size: 12px;
	font-weight: bold;
	padding: 5px 10px;
	/* border-radius: 5px; */
	border : 1px solid #ddd;
	color: #999;
	text-align: center;
  }
  
  /* 상태 스타일 */
  .custom-status-ongoing {
	background: #1ba333;
  }
  
  .custom-status-complete {
	background: #ddd;
  }
  
  .custom-status-pending {
	background: #ffc107;
	color: #212529;
  }
  
  .custom-status-canceled {
	background: #dc3545;
  }
    

  /* 항목 세부 스타일 */
.custom-item-details {
	display: flex; /* 세부 항목들을 가로로 배치 */
	justify-content: space-between; /* 왼쪽, 가운데, 오른쪽 정렬 */
	align-items: center; /* 세로로 중앙 정렬 */
	width: 100%; /* 전체 너비 */
  }
  
  .custom-item-details strong {
	font-weight: bold;
  }
  
  .custom-item-right {
	display: flex; /* 요소를 가로로 정렬 */
    align-items: center; /* 요소의 세로 정렬 */
    gap: 0.8rem; /* 요소 간 간격 */
  }
  
  .custom-item-right span {
	line-height: 1; /* 줄 높이를 통일 */
    vertical-align: middle; /* 텍스트를 동일한 높이로 정렬 */
    font-family: inherit; /* 폰트를 부모 요소와 동일하게 */
  }
  
  .custom-date {
	font-size: 14px;
	color: #999;
  }
  
  .multi-line-ellipsis {
	width: 55%; /* 원하는 너비로 설정 */
	overflow: hidden; /* 넘친 텍스트 숨기기 */
	text-overflow: ellipsis; /* 텍스트가 넘칠 때 '...' 표시 */
	display: -webkit-box; /* 웹킷 기반 브라우저에서 동작 */
	-webkit-line-clamp: 1; /* 2줄로 제한 */
	-webkit-box-orient: vertical; /* 세로로 정렬 */
	white-space: normal; /* 기본 공백 처리 */
}


/* 교육공지 관련 스타일 */
.custom-notice {
}

.notice-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

.notice-list {
    list-style: none;
    padding: 0 20px 0 20px;
}

.notice-item {
    font-size: 16px;
    /* margin-bottom: 10px; */
    line-height: 1.6;
}

.notice-status {
    font-weight: bold;
    color: #e91e63;
    margin-right: 10px;
}

.notice-address {
    font-size: 14px;
    color: #555;
    font-style: italic;
}

.notice-other-info {
    padding-left: 20px;
    font-size: 14px;
    color: #444;
}

.notice-other-info li {
    margin-bottom: 5px;
}

/* 모바일에서 텍스트 크기 조정 */
@media (max-width: 500px) {
    .notice-title {
        font-size: 20px;
    }

    .notice-item {
        font-size: 14px;
    }

    .notice-status {
        font-size: 14px;
    }
}