@charset "utf-8";

.main-visual {position: relative; height: 100vh; overflow: hidden;}
.main-visual .visual-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/main/main-visual.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: -1; transition: all 0.6s; animation: zoom 4s ease-out both;}
.main-visual .text-box {height: 100%;}
.main-visual .text-box .wrap {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.main-visual .text-box h2 {font-family: 'GmarketSans'; font-size: 68px; font-weight: 500; line-height: 1.38em; color: #fff; margin-bottom: 23px;}
.main-visual .text-box p {font-size: 26px; line-height: 1.4em; color: rgba(255,255,255,0.8);}
.scroll-down {position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); font-size: 12px; line-height: 1em; color: #fff;}
.arrow {margin: 13px auto 0; text-align: center;}
.arrow-down:nth-child(1) {animation: pulse 500ms ease infinite alternate;}
.arrow-down:nth-child(2) {margin-top: -6px; animation: pulse 500ms ease infinite alternate 250ms;}

@keyframes pulse {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

/* 공통 */
.section-title {text-align: center; margin-bottom: 86px;}
.section-title h3 {position: relative; display: inline-block; font-family: 'GmarketSans'; font-size: 55px; line-height: 1em; font-weight: 500; color: #111; margin-bottom: 36px; padding: 0 35px;}
.section-title h3:before {position: absolute; top: 18px; left: 0; content: ''; width: 7px; height: 7px; background: #001f76; border-radius: 50%;}
.section-title h3:after {position: absolute; top: 18px; right: 0; content: ''; width: 7px; height: 7px; background: #00678d; border-radius: 50%;}
.section-title p {font-size: 22px; line-height: 1.4em; color: #333;}

/* section01 */
.section01 {padding: 150px 0 172px;}
.section01 ul {display: flex; margin: 0 -20px;}
.section01 ul li {width: 25%; padding: 0 20px;}
.section01 ul li a {border-radius: 25px; overflow: hidden; transition: all 0.6s;}
.section01 ul li .img-box {position: relative; border-radius: 25px 25px 0 0; overflow: hidden; z-index: 2;}
.section01 ul li .img-box img {transition: all 0.6s;}
.section01 ul li .text-box {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 160px; text-align: center; border: 1px solid #ddd; border-radius: 0 0 25px 25px; overflow: hidden; margin-top: -1px; transition: all 0.8s;}
.section01 ul li .text-box:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-image: url('../img/main/section01-textbox-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.6s; z-index: -1;}
.section01 ul li .text-box h4 {font-size: 26px; font-weight: 400; line-height: 1.3em; color: #111; margin-bottom: 22px; transition: all 0.3s;}
.section01 ul li .text-box p {display: inline-block; width: 70px; font-size: 14px; line-height: 30px; color: #999; background: #f6f6f6; border-radius: 15px; transition: all 0.3s;}
.section01 ul li a:hover {box-shadow: 0px 0px 30px 0px rgba(156, 156, 156, 0.35);}
.section01 ul li a:hover .img-box img {transform: scale(1.06);}
.section01 ul li a:hover .text-box {border: none;}
.section01 ul li a:hover .text-box:before {opacity: 1;}
.section01 ul li a:hover .text-box h4 {color: #fff;}
.section01 ul li a:hover .text-box p {font-weight: 600; color: #001f76; background: #fff;}

/* section02 */
.section02 {background-image: url('../img/main/section02-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 152px 0 160px;}
.section02 .wrap {display: flex; justify-content: space-between; margin: 0 -20px;}
.section02 .wrap > div {padding: 0 20px;}
.section02 .gallery {max-width: 420px; width: 100%;}
.section02 .gallery a {/* max-width: 420px; */ width: 100%; border-radius: 25px; overflow: hidden;}
.section02 .gallery .img-box {position: relative; overflow:hidden;}
.section02 .gallery .img-box .pic {position:relative; height:0; padding-bottom:61.90%; overflow:hidden; transition:all 0.6s;}
.section02 .gallery a:hover .img-box .pic {transform:scale(1.06);} 
.section02 .gallery .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section02 .gallery .menu {position: absolute; top: 40px; left: 35px;}
.section02 .gallery .menu p {width: 85px; line-height: 40px; font-size: 14px; font-weight: 500; color: #333; background: rgba(255,255,255,0.8); text-align: center; border-radius: 20px;}
.section02 .gallery .text-box {position: relative; display: flex; align-items: center; height: 80px; background-color: #fff; padding: 0 35px; transition: all 0.6s;}
.section02 .gallery .text-box:before {opacity: 0; position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-image: url('../img/main/section01-textbox-bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.6s;}
.section02 .gallery .text-box p {position: relative; font-size: 18px; font-weight: 500; line-height: 1.4em; color: #333; height:calc(1.4em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: all 0.3s; z-index: 3;}
.section02 .gallery a:hover .text-box {background: transparent;}
.section02 .gallery a:hover .text-box:before {opacity: 1;}
.section02 .gallery a:hover .text-box p {color: #fff;}
.section02 .board {width: 1%; flex: 1 1 auto;}
.section02 .board ul {height: 100%; background: #fff; border: 6px solid #f6f6f5; border-radius: 25px; overflow: hidden; padding: 15px 46px;}
.section02 .board ul li {display: flex; align-items: center; height: 33.3333%; border-bottom: 1px dashed #ddd;}
.section02 .board ul li:last-child {border-bottom: none;}
.section02 .board ul li a {display: flex; align-items: center; width:100%;}
.section02 .board .menu {max-width: 135px; width: 100%;}
.section02 .board .menu p {width: 85px; line-height: 40px; font-size: 14px; color: #fff; text-align: center; border-radius: 20px;}
.section02 .board .menu.notice p {background: #001f76;}
.section02 .board .menu.report p {background: #00678d;}
.section02 .board .menu.data p {width: 95px; background: #333;}
.section02 .board .title {width: 1%; flex: 1 1 auto; padding-right: 60px;}
.section02 .board .title p {font-size: 18px; line-height: 1.3em; color: #666; height:calc(1.3em * 1 * 1); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: all 0.6s;}
.section02 .board .date {display: flex; justify-content: space-between; align-items: center; max-width: 110px; width: 100%;}
.section02 .board .date .icon {width: 18px; height: 18px; background-image: url('../img/main/section02-cal-icon.png'); background-repeat: no-repeat; background-position: center center; transition: all 0.6s;}
.section02 .board .date p {font-size: 18px; color: #999; transition: all 0.6s;}
.section02 .board a:hover .title p {font-weight: 500; color: #001f76;}
.section02 .board a:hover .date .icon {background-image: url('../img/main/section02-cal-icon-on.png');}
.section02 .board a:hover .date p {color: #111;}