@charset "utf-8";

.section1 {background:#F4F8FF; position: relative;}
.section1::before {content:''; width:465px; height:496px; position: absolute; left:59%; top:20%; background:url('../../images/main/s1-obj.png') no-repeat center;}
.section1 > div {max-width:1720px; width:100%; margin:0 auto; padding:120px 0;}

.commu-title {position: relative; margin-right: 90px;}
.commu-title .inner {padding:0;}
.commu-title em {display: block; color:#005BAC; font-size: 22px; font-family: 'SUITE ExtraBold'; line-height: 1; margin-bottom: 50px; letter-spacing: -.025em;}
.commu-title .title1,
.commu-title .title2 {font-size: 50px; font-family: 'SUITE ExtraBold';}
.commu-title .title1 {letter-spacing: -.025em; color:#9DACC5;display: block; line-height: 1; margin-bottom: 5px;}
.commu-title .title2 {color:#CFD9E9;display: block; margin-bottom: 40px;}
.commu-title .sub-title {color:#1A1919; font-family: 'SUITE SemiBold'; line-height: 60px; font-size: 35px; display: block; margin-bottom: 13px;}
.commu-title .sub-title span{font-size: 40px;}
.commu-title p {font-size: 18px; line-height: 32px; font-family: 'HG Regular'; color: #666; padding-right: 70px;}

.wrap-box {position: relative; margin-top: 40px;}
.wrap-box .inner {position: relative; padding:0;}
.wrap-box ul {display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; margin:auto; grid-template-areas: ". card1" "card2 card3";}
.wrap-box .card {max-width:350px; width:100%; max-height:320px; aspect-ratio: 1 / 1; position: relative;}
.wrap-box a {display: block; height:100%; width:100%; position: relative;}
.wrap-box .box {height:100%;}
.wrap-box .card .img-box {position: relative; height:100%;}
.wrap-box a:hover .img-box::after {content:''; width:100%; height:100%; position: absolute; top:0; left:0; background:linear-gradient(to bottom, transparent 50%, rgba(0,91,172, 0.7) 90% 0) no-repeat center;}
.wrap-box .card img {position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.wrap-box .card1 {grid-area:card1;}
.wrap-box .card1 a::after {content:'introduction'; font-family: 'SUITE Heavy'; position: absolute; bottom:0; right:0; color:rgba(255,255,255,0.1); font-size: 2.19vw; line-height: 30px; letter-spacing: -.025em; text-transform: uppercase;}
.wrap-box .card2 {grid-area:card2;}
.wrap-box .card2 a::after {content:'vision'; font-family: 'SUITE Heavy'; position: absolute; bottom:0; right:0; color:rgba(255,255,255,0.1); font-size: 2.19vw; line-height: 30px; letter-spacing: -.025em; text-transform: uppercase;}
.wrap-box .card3 {grid-area:card3;}
.wrap-box .card3 a::after {content:'curriculum'; font-family: 'SUITE Heavy'; position: absolute; bottom:0; right:0; color:rgba(255,255,255,0.1); font-size: 2.19vw; line-height: 30px; letter-spacing: -.025em; text-transform: uppercase;}
.wrap-box p {position: absolute; bottom:38px; left:40px; font-size: 28px; color:#fff; font-family: 'SUITE Bold'; }

@media screen and (max-width:1800px) {
    .section1 {padding:0 20px;}
}
@media screen and (max-width:1200px) {
  .section1 {padding:0 40px;}
  .section1 > div {padding:80px 0;}
  .section1::before {left:unset; right:40px;}
  .commu-title {margin-right: 0;}
  .commu-title em {margin-bottom: 35px;}
  .commu-title .title1 {font-size: 40px;}
  .commu-title .title2 {font-size: 40px; margin-bottom: 15px;}
  .commu-title .sub-title {font-size: 30px; line-height: 50px; margin-bottom: 10px;}
  .commu-title .sub-title span {font-size: 35px;}
  .commu-title p {font-size: 16px; line-height: 28px; padding-right: 0;}

  .wrap-box ul {display:flex; gap:30px;}
  .wrap-box .card {width:33.3333%; max-width:unset; max-height:260px;}
  .wrap-box p {font-size: 24px; line-height: 1; }
  .wrap-box .card a::after {font-size: 3.5vw;}

  .wrap-box ul {overflow-x:auto; margin:0 -20px; padding:0 20px; overflow-y:hidden;}
  .wrap-box ul::-webkit-scrollbar {display:none;}
  .wrap-box .card {width:285px; flex-shrink: 0;}
  .wrap-box .card a::after {font-size: 35px;}
}
@media screen and (max-width:768px) {
  .section1 {padding:0 20px;}
  .section1 > div {padding:50px 0 102px 0;}
  .commu-title .title1 {font-size: 30px; line-height: 40px;}
  .commu-title .title2 {font-size: 30px; line-height: 40px;}
  .commu-title .sub-title {font-size: 24px; line-height: 40px; margin-bottom: 5px;}
  .commu-title .sub-title span {font-size: 28px;}
  .commu-title p {font-size: 15px; line-height: 26px;}

  .wrap-box ul {gap:10px; overflow-x:auto; margin:0 -20px; padding:0 20px; overflow-y:hidden;}
}

.section2 {background:#005BAC; padding:120px 0; position: relative; overflow:hidden;}
.section2::before {content:''; width:740px; height:357px; position: absolute; right:-198px; top:-41px; background:url('../../images/main/s2-obj.png') no-repeat center;}
.title {max-width:1720px; width:100%; margin:0 auto; }
.title em {display: block; color:#fff; font-size: 22px; font-family: 'SUITE ExtraBold'; line-height: 1; margin-bottom: 50px;}

@media screen and (max-width:1800px) {
    .title {padding: 0 20px;}
}
@media screen and (max-width:1200px) {
    .section2 {padding:80px 0;}
    .title {padding: 0 40px;}
}
@media screen and (max-width:768px) {
    .section2 {padding:50px 0;}
    .section2::before {width:313px; height:151px; background-size:cover; right:-82px; top:-21px; }
    .title {padding:0 20px;}
    .title em {margin-bottom: 23px;}
}

.section3 {padding:120px 0; position: relative;}
.section3::before {content:''; width:510px; height:374px; background:url('../../images/main/s3-obj.png') no-repeat center; position: absolute; left:0; top:0;}
.section3 .title em {display: block; color:#005BAC; font-size: 22px; font-family: 'SUITE ExtraBold'; line-height: 1; margin-bottom: 50px;}
@media screen and (max-width:1200px) {
    .section3 {padding:80px 0;}
}
@media screen and (max-width:768px) {
    .section3 {padding:50px 0;}
    .section3::before {width:326px; height:241px; background-size:cover; top:20px; left:0;}
}

/* Tween */
header {top:-150px;}
/* visual */
.wrap-visual .item {opacity:0;}
.wrap-visual .text_0 {left:100px; opacity:0; position: relative;}
.wrap-visual .text_1 {left:100px; opacity:0; position: relative;}
.wrap-visual .detail-view {left:100px; opacity:0;}
.wrap-visual .control {opacity:0;}
/* section1 */
.commu-title em {opacity:0; top:50px; position: relative;}
.commu-title .title1 {opacity:0; top:50px; position: relative;}
.commu-title .title2 {opacity:0; top:50px; position: relative;}
.commu-title .sub-title {opacity:0; top:50px; position: relative;}
.commu-title p {opacity:0; top:50px; position: relative;}

.wrap-box .card {opacity:0; filter: blur(10px);}

.wrap-link {opacity:0; top:50px;}
/* section2 */
.section2 .title em {opacity:0; top:50px; position: relative;}
.wrap-notice .notice-header {opacity:0; top:50px; position: relative;}
.wrap-notice .control {opacity:0; top:0px;}
.wrap-notice .slider {opacity:0; top:50px;}
/* section3 */
.section3 .title em {opacity:0; top:50px; position: relative;}
.wrap-photo .title-inner {opacity:0; top:50px;}
.wrap-photo .control {opacity:0; top:50px;}
.wrap-photo .slider {opacity:0; top:50px; position: relative;}