@charset "utf-8";

.frame {max-width:158rem; margin:0 auto; width:100%;}

@media screen and (max-width:1500px) {
	.frame {padding:0 4rem;}
}

@media screen and (max-width:768px) {
	.frame {padding:0 2rem;}
}

/* [S] section1 - department */
.wrap-department {position: relative; display: flex; align-items: center; justify-content: center; height:96rem; background:url('../../images/main/bg-department.jpg') no-repeat center / cover;}
.wrap-department .slogan {visibility:visible; margin-top: -7rem; text-align: center; color:#fff; transition:.3s; transition-property: opacity, visibility; opacity:1;}
.wrap-department.on .slogan {visibility:hidden; opacity:0;}
.wrap-department .slogan em {position: relative; top: 8rem; font-size: 2.6rem; font-family: sm; text-shadow: 0 0 1.5rem rgba(0,0,0,0.7); opacity: 0;}
.wrap-department .slogan-text {font-size: 9rem; text-shadow: 0 0 1rem rgba(0,0,0,0.4); letter-spacing: 0; font-family: sl;}
.wrap-department .row1 {position: relative; top: 8rem; padding-left:2rem; opacity: 0;}
.wrap-department .row1 span {position: relative; font-size: 11rem; font-family: sm; margin-left:-2rem;}
.wrap-department .row1 span:nth-child(1) {top: -1rem;}
.wrap-department .row1 span:nth-child(2) {top: 1.5rem;}
.wrap-department .row2 {position: relative; top: 8rem; display: flex; justify-content: center; align-items: center; margin-top:-2.8rem; opacity: 0;}
.wrap-department .row2 span {position: relative; font-family: sb;}
.wrap-department .row2 .img-box {position: relative;}

/* 별만들기 */
/* 별1 */
.wrap-department .row2 .img-box .star1 {position: absolute; right:1.5rem; top:0; z-index: 1; width: 2.1rem; height: 2.1rem; animation: starAni 1.5s infinite linear; }
.wrap-department .row2 .img-box .star1 i {position: absolute; display: inline-block; width:50%; height:50%;}
.wrap-department .row2 .img-box .star1 i:first-child {overflow:hidden; position: absolute; top:0; left:0;}
.wrap-department .row2 .img-box .star1 i:first-child::before {content:''; width:100%; position: absolute; left:0; top:0; height:100%; border-radius:0 0 100% 0;}
.wrap-department .row2 .img-box .star1 i:nth-child(2) {overflow:hidden; position: absolute; top:0; right:0; }
.wrap-department .row2 .img-box .star1 i:nth-child(2)::before {content:''; width:100%; position: absolute; left:0; right:0; height:100%; border-radius:0 0 0 100%;}
.wrap-department .row2 .img-box .star1 i:nth-child(3) {overflow:hidden; position: absolute; bottom:0; left:0; }
.wrap-department .row2 .img-box .star1 i:nth-child(3)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:0 100% 0 0;}
.wrap-department .row2 .img-box .star1 i:nth-child(4) {overflow:hidden; position: absolute; bottom:0; right:0; }
.wrap-department .row2 .img-box .star1 i:nth-child(4)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:100% 0 0 0;}
.wrap-department .row2 .img-box .star1 i::before { box-shadow: 0 0 0 1rem #0ED8C5;}

/* 별2 */
.wrap-department .row2 .img-box .star2 {position:absolute; left:1.5rem; bottom:0.6rem; width: 3rem; height:2.4rem;}
.wrap-department .row2 .img-box .star2 > span:first-child {position: absolute; left:0; bottom:0; z-index: 1; width: 2.1rem; height: 2.1rem; transform: scale(0); animation: starAni 1.5s infinite linear; animation-delay: 0.6s;}
.wrap-department .row2 .img-box .star2 > span:first-child i {position: absolute; display: inline-block; width:50%; height:50%;}
.wrap-department .row2 .img-box .star2 > span:first-child i:first-child {overflow:hidden; position: absolute; top:0; left:0;}
.wrap-department .row2 .img-box .star2 > span:first-child i:first-child::before {content:''; width:100%; position: absolute; left:0; top:0; height:100%; border-radius:0 0 100% 0;}
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(2) {overflow:hidden; position: absolute; top:0; right:0; }
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(2)::before {content:''; width:100%; position: absolute; left:0; right:0; height:100%; border-radius:0 0 0 100%;}
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(3) {overflow:hidden; position: absolute; bottom:0; left:0; }
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(3)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:0 100% 0 0;}
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(4) {overflow:hidden; position: absolute; bottom:0; right:0; }
.wrap-department .row2 .img-box .star2 > span:first-child i:nth-child(4)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:100% 0 0 0;}
.wrap-department .row2 .img-box .star2 > span:first-child i::before { box-shadow: 0 0 0 1rem #0ED8C5;}

/* 별3 */
.wrap-department .row2 .img-box .star2 > span:last-child {position: absolute; right:0; bottom:-0.4rem; z-index: 1; width: 1.3rem; height: 1.3rem; transform: scale(0); animation: starAni 1.5s infinite linear; animation-delay: 1s;}
.wrap-department .row2 .img-box .star2 > span:last-child i {position: absolute; display: inline-block; width:50%; height:50%;}
.wrap-department .row2 .img-box .star2 > span:last-child i:first-child {overflow:hidden; position: absolute; top:0; left:0;}
.wrap-department .row2 .img-box .star2 > span:last-child i:first-child::before {content:''; width:100%; position: absolute; left:0; top:0; height:100%; border-radius:0 0 100% 0;}
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(2) {overflow:hidden; position: absolute; top:0; right:0; }
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(2)::before {content:''; width:100%; position: absolute; left:0; right:0; height:100%; border-radius:0 0 0 100%;}
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(3) {overflow:hidden; position: absolute; bottom:0; left:0; }
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(3)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:0 100% 0 0;}
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(4) {overflow:hidden; position: absolute; bottom:0; right:0; }
.wrap-department .row2 .img-box .star2 > span:last-child i:nth-child(4)::before {content:''; width:100%; position: absolute; bottom:0; left:0; height:100%; border-radius:100% 0 0 0;}
.wrap-department .row2 .img-box .star2 > span:last-child i::before { box-shadow: 0 0 0 1rem #1DFE6C;}

@keyframes starAni {
	0% {transform:rotate(0deg) scale(0);}
	50% {transform:rotate(180deg) scale(1);}
	70% {transform:rotate(280deg) scale(1);}
	100% {transform:rotate(360deg) scale(0);}
}
/* // 별만들기 */

.wrap-department .row2 .img-box-inner {position: relative; width: 35rem; height:18rem; margin:0 2.5rem 0 3rem;}
.wrap-department .row2 .img-box-inner::after {content:''; position: absolute; left:0; top:0; z-index: 1; width: 100%; height:100%; border:0.1rem solid #6AFCE9; border-radius:50%;transform: rotate(-15deg);}
.wrap-department .row2 .img-box-inner img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; border-radius:50%; transition:all .3s;}
.wrap-department .row2 .img-box-inner img {opacity:0; visibility: hidden;}
.wrap-department .row2 .img-box-inner img.on {opacity:1; visibility: visible;}
/* @keyframes imgAfterMove {
	0% {transform: rotate(-15deg); }
	50% {transform: rotate(15deg);}
	100% { transform: rotate(-15deg);}
} */

/* 별모양 */
.wrap-department .row1 span:nth-child(1) > span {overflow:hidden; position: absolute; left:3.7rem; top:3.1rem; width:3.5rem; height: 3.5rem; background:#085098; border-radius:0.3rem;}
.wrap-department .row1 span:nth-child(1) > span::after {content:''; position: absolute; left:50%; top:50%; width: 100%; height:100%; background:#fff; border-radius:50%;}
.wrap-department .row1 span:nth-child(1) > span::before {content:''; position: absolute; right:50%; top:50%; width: 100%; height:100%; background:#fff; border-radius:50%;}
.wrap-department .row1 span:nth-child(1) > span i {display: inline-block; width: 100%; height: 100%;}
.wrap-department .row1 span:nth-child(1) > span i::before {content:''; position: absolute; right:50%; bottom:50%; width: 100%; height:100%; background:#fff; border-radius:50%;}
.wrap-department .row1 span:nth-child(1) > span i::after {content:''; position: absolute; left:50%; bottom:50%; width: 100%; height:100%; background:#fff; border-radius:50%;}

/* 눈 */
.wrap-department .row2 .eyes {position: absolute; left:1.1rem; top:2.8rem; display: inline-flex; justify-content: space-between; width: 3.5rem; background: #fff;}
.wrap-department .row2 .eyes i {overflow:hidden; position: relative; display: inline-block; width: 1.7rem; height: 2.7rem; background:#fff; border:0.2rem solid #000; border-radius:10rem;}
.wrap-department .row2 .eyes i::after {content:''; position: absolute; left:50%; top:50%; width: 1.2rem; height:1.5rem; background:#000; border-radius:1rem; animation: eyesMove 10s infinite;}
@keyframes eyesMove {
	0% { transform: translate(-25%,-50%);}
	15% { transform: translate(-25%,-25%);}
	30% { transform: translate(-75%,-25%);}
	55% { transform: translate(-75%,-50%);}
	65% { transform: translate(-75%,-25%);}
	80% { transform: translate(-25%,-25%);}
	100% { transform: translate(-25%,-50%);}
}

/* 학과 */
/* 학과 - button */
.wrap-department .list-area li button {position: absolute; font-size: 2.2rem; font-family: sm; color:#000; line-height: 1.8rem; transition: background .5s; animation: upDown 5s infinite ease; opacity: 0; filter: blur(0);}
.wrap-department .list-area li button br {display: none;}
.wrap-department .list-area li:nth-child(1) button {top:2.7rem; right:50%; margin-right:-51rem; width: 33.2rem; height:29.4rem; background:url('../../images/main/bg-dept1.png') no-repeat center / cover; animation-delay: -0.5s;}
.wrap-department .list-area li:nth-child(2) button {top:17rem; right:50%; margin-right:-87rem;width: 30.9rem; height:29.5rem; background:url('../../images/main/bg-dept2.png') no-repeat center / cover; animation-delay: -0.5s; animation-direction: reverse;}
.wrap-department .list-area li:nth-child(3) button {bottom:16rem; right:50%; margin-right:-92rem;width: 30rem; height:29.4rem; background:url('../../images/main/bg-dept3.png') no-repeat center / cover; animation-delay: -0.3s;}
.wrap-department .list-area li:nth-child(4) button {bottom:0rem; right:50%; margin-right:-59rem;width: 30.3rem; height:30.2rem; background:url('../../images/main/bg-dept4.png') no-repeat center / cover; animation-delay: -0.8s;}
.wrap-department .list-area li:nth-child(5) button {bottom:0rem; left:50%; margin-left:-59rem;width: 29.4rem; height:29.9rem; background:url('../../images/main/bg-dept5.png') no-repeat center / cover; animation-delay: -0.1s; animation-direction: reverse;}
.wrap-department .list-area li:nth-child(6) button {bottom:18.5rem; left:50%; margin-left:-86.5rem;width: 30.3rem; height:28.1rem; background:url('../../images/main/bg-dept6.png') no-repeat center / cover; animation-delay: -0.4s;}
.wrap-department .list-area li:nth-child(7) button {top:17rem; left:50%; margin-left:-92.3rem;width: 32.9rem; height:34.1rem; background:url('../../images/main/bg-dept7.png') no-repeat center / cover; animation-delay: -0.5s; animation-direction: reverse;}
.wrap-department .list-area li:nth-child(8) button {top:1.5rem; left:50%; margin-left:-57.5rem;width: 30.8rem; height:30.1rem; background:url('../../images/main/bg-dept8.png') no-repeat center / cover; animation-delay: -0.9s;}

@keyframes upDown {
	0% {transform: translateY(1rem);}
	50% {transform: translateY(-1rem);}
	100% {transform: translateY(1rem);}
}

/* 학과 - button hover */
.wrap-department .list-area li:nth-child(1) button:hover {background:url('../../images/main/bg-dept1-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(2) button:hover {background:url('../../images/main/bg-dept2-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(3) button:hover {background:url('../../images/main/bg-dept3-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(4) button:hover {background:url('../../images/main/bg-dept4-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(5) button:hover {background:url('../../images/main/bg-dept5-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(6) button:hover {background:url('../../images/main/bg-dept6-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(7) button:hover {background:url('../../images/main/bg-dept7-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(8) button:hover {background:url('../../images/main/bg-dept8-on.png') no-repeat center / cover;}

.wrap-department .list-area li:nth-child(1) button.on {background:url('../../images/main/bg-dept1-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(2) button.on {background:url('../../images/main/bg-dept2-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(3) button.on {background:url('../../images/main/bg-dept3-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(4) button.on {background:url('../../images/main/bg-dept4-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(5) button.on {background:url('../../images/main/bg-dept5-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(6) button.on {background:url('../../images/main/bg-dept6-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(7) button.on {background:url('../../images/main/bg-dept7-on.png') no-repeat center / cover;}
.wrap-department .list-area li:nth-child(8) button.on {background:url('../../images/main/bg-dept8-on.png') no-repeat center / cover;}

/* 학과 - 상세보기 */
.detail {position: absolute; visibility:hidden; left:50%; top:50%; z-index: 1; width: 100%; max-width:108.5rem; transform:translate(calc(-50% + 0.05rem),calc(-50% + 0.05rem)); opacity:0; transition: .3s; transition-property: opacity, visibility;}
.detail.on {visibility:visible; opacity:1;}
.detail .inner {display: flex;}
.detail .img-box {overflow:hidden; position: absolute; left:0; top:.3rem;width: 45rem;height: 39rem; z-index: 1; border-radius:0 0 6rem 0;}
.detail .img-box img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.detail .con {overflow:hidden; position: relative; width: 100%; min-height:39em; margin-left:6rem; margin-top: .3rem; background:#1554B0; border-radius:0 4rem 0 4rem; color:#fff;}
.detail .con::before {content:'JANGAN \A UNIVERSITY'; position: absolute; right: -1rem; bottom:-3.5rem; font-size: 10rem; line-height: 1.2; font-family: sm; text-align:right; text-shadow: -0.1rem 0 #2AA8FF, 0 0.1rem #2AA8FF, 0.1rem 0 #2AA8FF, 0 -0.1rem #2AA8FF; color:#1554B0; opacity:0.15; white-space:pre;}
.detail .title {padding:1.6rem 4rem 0.5rem 43rem;background:#fff url('../../images/main/bg-dept-title.png') no-repeat right 7.2rem top -0.7rem;}
.detail .title strong {position: relative;font-size: 2.6rem; font-family: sm; line-height: 1.5; color:#121212;}
.detail .title strong::after {content: ''; position:absolute; left:100%; top:-1.2rem; width: 2.7rem; height:2.9rem; background:url('../../images/main/ic-dept-title-obj.png') no-repeat center;}
.detail .list {position: relative;max-height:33rem; padding: 1.5rem 0;}
.detail .list .scroll-box {overflow-y:auto;max-height:calc(33rem - 3rem);}

.detail .list ul > li {display: flex; align-items: center; padding:0.5rem 4rem 0.5rem 43rem;}
.detail .list ul > li:hover {background:#45EDE0;}
.detail .list span {position: relative; top: .1rem; width: 100%; padding-right: 1rem;font-size: 1.8rem; font-family: sl; line-height: 1.5;}
.detail .list span i {position: relative;}
.detail .list span i::after {content: ''; display: none; position: absolute; left: calc(100% + 1rem); top: .3rem; width: 2.7rem; height: 1rem; background: url('../../images/main/ic-dept-arrow.png') no-repeat center / 2.7rem auto;}
.detail .list ul > li:hover span {color:#111;}
.detail .list ul > li:hover span i::after {display: block;}
.detail .link-box {display: flex; gap:0 2rem;}
.detail .link-box a {display: flex;}
.detail .link-box a span {font-size: 1.4rem; font-family: sl; color:#fff;}
/* .detail .link-box .a-info span{background-image: linear-gradient(#222, #222); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem;} */
/* .detail .link-box .a-home span{background-image: linear-gradient(#0A528F, #0A528F); background-repeat: no-repeat; background-position: left 0 bottom 0; background-size: 0 0.1rem;} */
.detail .link-box .a-info:hover span,
.detail .link-box .a-home:hover span{color:#0A528F;}
.detail .list ul > li:hover .link-box .a-info,
.detail .list ul > li:hover .link-box .a-home{color:#222;}
.detail .link-box .a-info::before {content:''; display: inline-block; flex-shrink:0; width: 1.5rem; height:1.8rem; margin-right: 0.6rem; background:url('../../images/main/ic-a-info.png') no-repeat center; }
.detail .list ul > li:hover .link-box .a-info::before {background:url('../../images/main/ic-a-info-on.png') no-repeat center; }
.detail .link-box .a-home::before {content:''; display: inline-block; flex-shrink:0; width: 1.5rem; height:1.6rem; margin-right: 0.6rem; background:url('../../images/main/ic-a-home.png') no-repeat center; }
.detail .list ul > li:hover .link-box .a-home::before {background:url('../../images/main/ic-a-home-on.png') no-repeat center; }
.detail .list ul > li .link-box .a-info:hover::before {background:url('../../images/main/ic-a-info-on2.png') no-repeat center; }
.detail .list ul > li .link-box .a-home:hover::before {background:url('../../images/main/ic-a-home-on2.png') no-repeat center; }

.detail .close-btn {position: absolute;right: 0;top: -1rem;width: 5rem;height: 5rem;background: #063e83 url('../../images/main/ic-dept-close-btn.png') no-repeat center / 1.5rem;border-radius: 50%;text-indent: -9999px;}

@media screen and (max-width:1800px) {
	.wrap-department .list-area li button {background-size:cover !important; font-size: 1.8rem;}
	.wrap-department .list-area li:nth-child(2) button {margin-right:unset; right:0;}
	.wrap-department .list-area li:nth-child(3) button {margin-right:unset; right:1%;}
	.wrap-department .list-area li:nth-child(4) button {margin-right:unset; right:14%;}
	.wrap-department .list-area li:nth-child(5) button {margin-left:unset; left:24%;}
	.wrap-department .list-area li:nth-child(6) button {margin-left:unset; left:1%;}
	.wrap-department .list-area li:nth-child(7) button {margin-left:unset; left:1%;}
	.wrap-department .list-area li:nth-child(8) button {margin-left:unset; left:19%;}

	/* detail */
	.detail {max-width:58%;}
	.detail .img-box {width: 38.5rem; height:32rem;}
	.detail .img-box img {width:100%; height:100%; object-fit: cover;}
	.detail .title {padding:1.6rem 4rem 0.5rem 35rem;}
	.detail .list ul > li {padding:0.9rem 4rem 0.9rem 35rem;}
}

@media screen and (max-width:1740px) {
	.wrap-department .slogan em {font-size: 2.2rem;}
	.wrap-department .slogan-text {font-size: 7rem;}
	.wrap-department .row1 {padding-left: 1rem;}
	.wrap-department .row1 span {font-size: 7rem; margin-left:-1rem;}
	.wrap-department .row1 span:nth-child(1) {top:-0.5rem;}
	.wrap-department .row1 span:nth-child(1) > span {left:2rem; top:1.8rem; width: 1.8rem; height:1.8rem; border-radius:unset; }
	.wrap-department .row1 span:nth-child(2) {top:0.5rem;}
	.wrap-department .row2 {margin-top:-0.2rem;}
	.wrap-department .row2 span {font-size: 7rem;}
	.wrap-department .row2 .eyes {width: 2.1rem; left:0.6rem; top:1.7rem; }
	.wrap-department .row2 .eyes i {width: 1rem; height:1.5rem;}
	.wrap-department .row2 .eyes i::after {width: 0.7rem; height:0.9rem;}
	.wrap-department .row2 .img-box-inner {width: 22rem; height:11rem; margin:0 1rem 0 1.5rem;}
	.wrap-department .row2 .img-box .star1 {top:0; right:0;}
	.wrap-department .row2 .img-box .star2 {bottom:0; left:-0.5rem;}
}

@media screen and (max-width:1500px) {
	.wrap-department .slogan em {font-size: 1.8rem;}
	.wrap-department .slogan-text {font-size: 4.6rem;}
	.wrap-department .row1 span {font-size: 6rem;}
	.wrap-department .row2 span {font-size: 5rem;}

	.wrap-department .list-area li:nth-child(1) button {top:11%; right:22%; width: 24.2rem; height:23.4rem; margin-right:unset;}
	.wrap-department .list-area li:nth-child(2) button {top:23%; width: 23.9rem; height:22.5rem;}
	.wrap-department .list-area li:nth-child(3) button {bottom:18.3%; right:0%; width: 22rem; height:22.4rem;}
	.wrap-department .list-area li:nth-child(4) button {bottom:7.7%; right:23.8%; width: 23.3rem; height:23.2rem;}
	.wrap-department .list-area li:nth-child(5) button {bottom:7.3%; left:21%; width: 23.4rem; height:23.9rem;}
	.wrap-department .list-area li:nth-child(6) button {bottom:22.7%; left:2%; width: 23.3rem; height:21.1rem;}
	.wrap-department .list-area li:nth-child(7) button {top:23%; left:0; width: 25.9rem; height: 27.1rem;}
	.wrap-department .list-area li:nth-child(8) button {top:10.3%; left:22.5%; width: 24.8rem; height:24.1rem;}

	.detail .img-box {width: 33.5rem; height:26rem;}
	.detail .con {min-height:32rem;}
	.detail .list {max-height:unset;}
	.detail .list .scroll-box {max-height:calc(26rem - 3rem);}
	.detail .title {padding:1.6rem 4rem 0.5rem 30rem;}
	.detail .list ul > li {padding:0.9rem 4rem 0.9rem 30rem}
	.detail .list ul > li:hover span i::after {display: none;}
}

@media screen and (max-width:1350px) {
	.detail .list span  {margin-bottom: .3rem;}
}

@media screen and (max-width:1300px) {
	.wrap-department {height: 80rem;}
	.wrap-department .slogan {margin-top: 2rem;}
	.wrap-department .slogan em {font-size: 1.6rem;}
	.wrap-department .slogan-text {font-size: 3.2rem;}
	.wrap-department .row1 span {font-size: 4.6rem;}
	.wrap-department .row1 span:nth-child(1) > span {left: 1.9rem; top: 1.45rem; width: 1.2rem; height: 1.2rem;}
	.wrap-department .row2 span {font-size: 4rem;}
	.wrap-department .row2 .eyes {left: .5rem; top: 1.4rem; width: 1.7rem;}
	.wrap-department .row2 .eyes i {width: .8rem; height: 1.3rem;}
	.wrap-department .row2 .eyes i::after {width: .4rem; height: .7rem;}
	.wrap-department .row2 .img-box-inner {width: 15.5rem; height: 8rem;}
	.wrap-department .row2 .img-box .star1 {right: -.5rem; top: -.5rem;}

	.wrap-department .list-area {margin-top: 5rem;}
	.wrap-department .list-area > ul {display: flex; flex-wrap:wrap; margin:0 -1.5rem;}
	.wrap-department .list-area li {width:25%;}
	.wrap-department .list-area li button {position: relative; left:unset !important; top:unset !important; right:unset !important; bottom:unset !important; width:100% !important; height:17rem !important; background-size:contain !important; font-size: 1.4rem; animation:unset;}
	.wrap-department .list-area li button br{display: block;}

	.detail {top:9rem; left:0; width:100%; max-width:100%; transform: unset;}
	.detail .title {padding: 1.1rem  2rem;}
	.detail .title strong {position: relative; top: .2rem; font-size: 1.8rem;}
	.detail .img-box {display: none;}
	.detail .con {min-height: 25rem; margin:0 2rem; border-radius: 0 3rem 0 3rem;}
	.detail .list .scroll-box {max-height: calc(25rem - 7rem);}
	.detail .list ul > li {flex-direction: unset;width:100%; padding-left: 2rem; padding-right: 2.3rem;}
	.detail .link-box .a-info::before {position: relative;width: 1.5rem; height: 1.4rem; top: .6rem;}
	.detail .link-box .a-home::before {position: relative;width: 1.5rem; height: 1.5rem; top: .6rem;}
	.detail .list span {margin-bottom: 0;}
	.detail .link-box .a-info span {transform: translateY(.42rem);}
	.detail .link-box .a-home span {transform: translateY(.42rem);}
	.detail .list ul > li:hover span i::after {display: block;}

	.detail .close-btn {top: 1rem;right: 3.1rem;width: 3.2rem;height: 3.2rem;background-size: 1.1rem;}
}

@media screen and (max-width:768px) {
	.wrap-department {height: 70rem;}
	.wrap-department .slogan {margin-top: 9rem;}
	.wrap-department .list-area li button {height: 14rem !important; background-size: 16rem auto !important;}
	.detail .link-box a span {display: none;}
}

@media screen and (max-width:550px) {
	.wrap-department .slogan {margin-top: 6rem;}
	.wrap-department .list-area li button {height:12rem !important; background-size: 12.3rem auto !important;}
}
/* [E] section1 - department */

/* [S] section3 */
.benefit-wrap {position: relative; padding:15rem 0 16rem 0; background: url('../../images/main/bg-benefit.png') no-repeat center / cover;}
.benefit-wrap .frame > .title {position: relative; top: -10rem; text-align: center; margin-bottom: 6.8rem; opacity: 0;}
.benefit-wrap .title h2 {color:#111; font-family: sm; font-size: 5rem; position: relative; display: inline-block;}
.benefit-wrap .title h2 br {display: none;}
.benefit-wrap .title h2::after {content:''; width:5rem; height: 5rem; background:url('../../images/main/img-title-obj2.png') no-repeat center; position: absolute; left:100%;top:-3rem;}
.benefit-wrap .title h2 .color1 {color:#009E96;}
.benefit-wrap .title h2 .color2 {color:#0057B8;}
.benefit-wrap .benefit-list {position: relative;}
.benefit-list > ul {display: flex; gap:0 2.5rem; justify-content: center;}
.benefit-list > ul > li {position: relative; top: 10rem; width:28%; height:65rem; transition: width .35s; position: relative; background:#000;overflow: hidden; opacity: 0;}
.benefit-list > ul > li.active {width:100%;}
.benefit-list > ul > li .box::before {content:''; width:100%; height:100%; position: absolute; left:0; top:0;transition: transform .25s ease-in-out;}
.benefit-list > ul > li:first-child .box::before {background:url('../../images/main/img-benefit1.jpg') no-repeat center / cover;}
.benefit-list > ul > li:nth-child(2) .box::before {background:url('../../images/main/img-benefit2.jpg') no-repeat center / cover;}
.benefit-list > ul > li:nth-child(3) .box::before {background:url('../../images/main/img-benefit3.jpg') no-repeat center / cover;}
.benefit-list > ul > li:hover .box::before {transform: scale(1.1);}
.benefit-list > ul > li a {display: block; width:100%; height:100%; position: relative; color:#fff;}
.benefit-list > ul > li a::before {content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); position: absolute; left:0; top:0; opacity:1; transition:opacity .75s;}
.benefit-list > ul > li.active .box::after {content:''; width:100%; height:100%; background:linear-gradient(to bottom, transparent 17%, rgba(0,0,0,0.5) 79%), 0%; position: absolute; left:0; top:0; opacity:1 !important;z-index: 2;}
.benefit-list > ul > li.active a::after {content:''; width: 19.8rem; height: 19.8rem; background:url('../../images/main/ic-benefit-arrw.png') no-repeat top 2.7rem right 2rem / 2.5rem, url('../../images/main/ic-benefit-arrw-bg.png') no-repeat center / cover; position: absolute; right:0; top:0;z-index: 1;}
.benefit-list > ul > li > a:hover::before {opacity:0;}
.benefit-list .box {padding:4.5rem 2.5rem; display: flex; flex-direction: column; justify-content: space-between; height:100%; position: relative; z-index: 1;}
.benefit-list .box.no .title {transition:.3s ease;transition-property: top, opacity;opacity: 1;}
.benefit-list .box.no p {transition:.3s ease;transition-property: top, opacity;opacity: 1;;}
.benefit-list .box .title {position: relative; z-index: 1; flex:1;opacity: 0;}
.benefit-list .box .title em {font-family: sl; font-size: 1.8rem; display: block; margin-bottom: 0.7rem;}
.benefit-list .box .title strong {font-family: sm;  line-height: 3.5rem; font-size: 3rem;}
.benefit-list .box p {position: relative; font-family: pm; font-size: 2.2rem; line-height: 3.5rem; z-index: 3;opacity: 0;}
.benefit-list .box.no p {opacity:0;}
/* .benefit-list li.active::after {content:''; width:100%; height:100%; position: absolute; left:0; top:0; border:1rem solid #0057B8;} */
.benefit-list li.active .box {padding:4.5rem 5rem 5rem 5rem;z-index: 1; position: relative;}
.benefit-list li.active .box p { animation: titleActive2 .35s forwards; z-index: 3;animation-delay: .3s;  position: relative;}
.benefit-list li.active .box .title { animation: titleActive2 .35s forwards; animation-delay: .3s; z-index: 3; position: relative;}

@keyframes titleActive1 {
	0% {top:0; opacity:0;}
	100% {top:0; opacity:1;}
}

@keyframes titleActive2 {
	0% {top:5rem; opacity:0;}
	100% {top:0; opacity:1;}
}

.benefit-list li.active .box .title em {font-size: 2rem; margin-bottom: 1.5rem;}
.benefit-list li.active .box .title strong {font-size: 4rem;}

@media screen and (max-width:1400px) {
	.benefit-wrap .title h2 {font-size: 4.5rem;}
	.benefit-list > ul > li {width: 43%;}
}

@media screen and (max-width:1300px) {
	.benefit-wrap .title h2 br.tablet {display: block;}
	.benefit-wrap .title h2 br.mobile {display: none;}
	.benefit-wrap .title h2::after {left: 98%;}
}

@media screen and (max-width:1200px) {
	.benefit-wrap {padding:9rem 0 10rem 0;}
	.benefit-wrap .title h2 {line-height: 6rem;}
	.benefit-wrap .frame > .title {margin-bottom: 5.5rem;}
	.benefit-list > ul {gap:0 2rem;}
	.benefit-list > ul > li {height:34rem; width:41.6%;}
	.benefit-list > ul > li.active a::after {width: 18rem; height: 18rem; background:url('../../images/main/ic-benefit-arrw.png') no-repeat top 2rem right 2rem / 2.2rem, url('../../images/main/ic-benefit-arrw-bg.png') no-repeat center / cover;}
	.benefit-list .box {padding:2.5rem 1rem 2.5rem 2.5rem;}
	.benefit-list .box .title em {font-size: 1.4rem;}
	.benefit-list .box .title strong {font-size: 2.2rem; line-height: 1.2; padding-right: 3rem;}
	.benefit-list li.active .box {padding:2.5rem 3rem 1.5rem 3rem;}
	.benefit-list li.active .box .title em {font-size: 1.8rem; margin-bottom: 0.7rem;}
	.benefit-list li.active .box .title strong {font-size: 3.6rem;}
	.benefit-list .box p {font-size: 1.8rem; line-height: 1.5;}
}

@media screen and (max-width: 1024px) {
	.benefit-list > ul > li {width: 46.5%;}
	.benefit-wrap .title h2 {width: 79rem;}
	.benefit-wrap .title h2::after {left: 92%;}
	.benefit-list .box {padding: 2.5rem 1rem 2.5rem 1.5rem;}
	.benefit-list .box .title strong {padding-right: 0;}
	.benefit-wrap .title h2::after {left: 98%;}
}

@media screen and (max-width: 920px) {
	.benefit-wrap .title h2 {width: auto;}
	.benefit-wrap .title h2 br.tablet {display: none;}
	.benefit-wrap .title h2 br.mobile {display: block;}
	.benefit-wrap .title h2::after {left: 96%;}
}

@media screen and (max-width: 768px) {
	.benefit-wrap {padding: 7rem 0 8rem 0;}
	.benefit-wrap .frame > .title {margin-bottom: 4.5rem;}
	.benefit-wrap .title h2 {width: auto;font-size: 3.5rem; line-height: 1.5;}
	.benefit-wrap .title h2::after {width: 3.5rem; height: 3.5rem; background-size:cover; top:-2rem; left:unset; right:-1.5rem;}
	.benefit-list > ul {flex-direction: column;}
	.benefit-list > ul > li {width:100%; max-width:100%; margin-bottom: 2rem; height:auto; height:20rem; overflow:hidden; transition:height .5s;}
	.benefit-list > ul > li:nth-child(3)::before {background: url('../../images/main/img-benefit3.jpg') no-repeat top center/ cover;}
	.benefit-list > ul > li:last-child {margin-bottom: 0;}
	.benefit-list > ul > li.active {height:31rem;}
	.benefit-list > ul > li.active a::before {background:linear-gradient(to bottom, transparent 24%, rgba(0,0,0,0.5) 57%), 0%}
	.benefit-list > ul > li.active a::after {width: 16rem; height: 16rem;background:url('../../images/main/ic-benefit-arrw.png') no-repeat top 2rem right 1.5rem / 2.2rem, url('../../images/main/ic-benefit-arrw-bg.png') no-repeat center / cover;}
	.benefit-list li.active::after {border:0.5rem solid #0057B8}
	.benefit-list li.active .box .title em {margin-bottom: 0; margin-bottom: 0.5rem;}
	.benefit-list li.active .box .title strong {font-size: 2.6rem;}
	.benefit-list .box {overflow:hidden; padding:2.5rem 3rem !important;}
	.benefit-list .box .title em {font-size: 1.6rem;}
	.benefit-list .box p {font-size: 1.6rem;}
	.benefit-list .box p br {display: none;}
}
/* [E] section3 */