/*main*/
/*intro_history*/
.blueBe {
  color: #bee4fc;
}

.blue00 {
  color: #00ade6;
}

.bg-blue30 {
  background-color: #302b6c;
}
.bg-Blueb9 {
  background-color: #b9e6fb;
}
.bg-blue00 {
  background-color: #00ade6;
}
.bg-gray81 {
  background-color: #818284;
}
.bg-gray87 {
  background-color: #b9babd;
}
.bg-goldDf {
  background-color: #dfc588;
}

#container_wr {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.visual {
  position: relative;
  width: 100%;
  height: 50.3rem;
}
.visual:before, .visual:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.visual:before {
  z-index: 3;
  background: #fff;
}
.visual:after {
  z-index: 4;
  left: -100%;
  background: #1d3b6e;
}
.visual.on:before {
  animation: opacity-hide 1s 0.8s 1 cubic-bezier(0.4, 0.99, 0.7, -0.75) both;
}
.visual.on:after {
  animation: moveRight 1s 0.1s 1 cubic-bezier(0.22, 0.54, 0.71, 0.2) both;
}
.visual.end:before, .visual.end:after {
  display: none;
}
@media (max-width: 991px) {
  .visual {
    height: 70.022rem;
  }
}
@media (max-width: 576px) {
  .visual {
    height: auto;
  }
}
@keyframes moveRight {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes opacity-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.visual .swiper-slide {
  width: 100%;
  height: 100%;
}
.visual .swiper-slide .han-container {
  position: relative;
  height: 100%;
  padding: 0;
}
.visual .swiper-slide .txt {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  position: absolute;
  left: 1rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 0 2.5rem;
}
.visual .swiper-slide .txt .slogun {
  text-indent: -2.5rem;
  font-size: 4.1rem;
  font-weight: 700;
  line-height: 1.2181;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.28);
}
.visual .swiper-slide .txt p {
  font-size: 2rem;
  color: #fff;
  line-height: 1.4;
}
.visual .swiper-slide .txt p span {
  display: inline-block;
  padding: 0.2rem 2rem;
  margin-bottom: 1rem;
  background: #333957;
}
.visual .swiper-slide .txt p b {
  display: inline-block;
  font-weight: 500;
  color: #00aee6;
}
@media (max-width: 991px) {
  .visual .swiper-slide .txt {
    top: 40%;
  }
  .visual .swiper-slide .txt .slogun {
    text-indent: -2.2rem;
    font-size: 3.8rem;
  }
  .visual .swiper-slide .txt p {
    font-size: 1.8rem;
  }
  .visual .swiper-slide .txt p span {
    padding: 0.5rem 2rem;
  }
}
@media (max-width: 991px) {
  .visual .swiper-slide .txt {
    display: none;
  }
}
@media (max-width: 500px) {
  .visual .swiper-slide .txt p {
    padding: 0.8rem 2rem;
    font-size: 1.6rem;
    background: #333957;
  }
  .visual .swiper-slide .txt p span {
    display: inline;
    padding: 0;
  }
  .visual .swiper-slide .txt p br {
    display: none;
  }
}
@media (max-width: 400px) {
  .visual .swiper-slide .txt {
    left: 0;
    gap: 6rem;
    padding: 0 1rem;
  }
  .visual .swiper-slide .txt .slogun {
    padding: 0 1rem;
    text-indent: -2rem;
    font-size: 3.5rem;
  }
  .visual .swiper-slide .txt p {
    padding: 0.8rem 2rem;
    background: #333957;
  }
  .visual .swiper-slide .txt p span {
    display: inline;
    padding: 0;
  }
  .visual .swiper-slide .txt p br {
    display: none;
  }
}
.visual .swiper-slide .bg-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.visual .swiper-slide .bg-box .bg-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media (max-width: 576px) {
  .visual .swiper-slide {
    height: 31.786rem;
  }
}
.visual .over {
  position: relative;
  z-index: 2;
}
.visual .over ul {
  display: flex;
  gap: 1.2rem;
  position: absolute;
  right: 8rem;
  bottom: 7rem;
}
.visual .over ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4321;
  text-align: center;
  color: #e63516;
  background: #fff;
  transition: 0.2s;
}
.visual .over ul li a i {
  width: 100%;
  height: 3.2rem;
  background: no-repeat center/contain;
}
.visual .over ul li a p {
  word-break: keep-all;
  letter-spacing: -0.07em;
  line-height: 1.3;
}
.visual .over ul li:nth-of-type(1) a i {
  background-image: url(/img/han/ico_visual1.png);
}
.visual .over ul li:nth-of-type(1) a:hover i {
  background-image: url(/img/han/ico_visual1_h.png);
}
.visual .over ul li:nth-of-type(1) a:hover p {
  color: #777;
}
.visual .over ul li:nth-of-type(2) a i {
  background-image: url(/img/han/ico_visual2.png);
}
.visual .over ul li:nth-of-type(2) a:hover i {
  background-image: url(/img/han/ico_visual2_h.png);
}
.visual .over ul li:nth-of-type(2) a:hover p {
  color: #777;
}
.visual .over ul li:nth-of-type(3) a i {
  background-image: url(/img/han/ico_visual3.png);
}
.visual .over ul li:nth-of-type(3) a:hover i {
  background-image: url(/img/han/ico_visual3_h.png);
}
.visual .over ul li:nth-of-type(3) a:hover p {
  color: #777;
}
.visual .over ul li:nth-of-type(4) a i {
  background-image: url(/img/han/ico_visual4.png);
}
.visual .over ul li:nth-of-type(4) a:hover i {
  background-image: url(/img/han/ico_visual4_h.png);
}
.visual .over ul li:nth-of-type(4) a:hover p {
  color: #777;
}
@media (min-width: 577px) {
  .visual .over {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: 0 10px;
    width: 100%;
    max-width: 1320px;
  }
}
@media (max-width: 1200px) {
  .visual .over ul {
    right: 1rem;
    gap: 1.5rem;
  }
  .visual .over ul li a {
    width: 10rem;
    height: 10rem;
    font-size: 1.2rem;
    gap: 0.5rem;
  }
  .visual .over ul li a i {
    height: 3rem;
  }
}
@media (max-width: 991px) {
  .visual .over ul {
    right: 50%;
    transform: translateX(50%);
    gap: 2.119rem;
    bottom: 8.686rem;
  }
  .visual .over ul li a {
    width: 10.593rem;
    height: 10.593rem;
  }
}
@media (max-width: 576px) {
  .visual .over ul {
    position: relative;
    left: inherit;
    right: inherit;
    bottom: inherit;
    transform: none;
    gap: 0;
  }
  .visual .over ul li {
    flex: 1;
    border: 1px solid #ccc;
    border-left: 0;
  }
  .visual .over ul li a {
    width: 100%;
    height: 12.143rem;
  }
  .visual .over ul li a i {
    height: 3.81rem;
  }
  .visual .over ul li a p {
    font-size: 1.202rem;
    line-height: 1.431;
  }
  .visual .over ul li:last-of-type {
    border-right: 0;
  }
}
.visual .controller {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  position: absolute;
  right: 8rem;
  bottom: 1.5rem;
  height: 3rem;
  background: #40403f;
  border-radius: 1.6rem;
}
.visual .controller .swiper-pagination {
  position: static;
  display: flex;
  gap: 5px;
}
.visual .controller .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  margin: 0;
  border: 2px solid #fff;
  background: transparent;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}
.visual .controller .swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}
.visual .controller_btn span {
  display: block;
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
  background: no-repeat center/contain;
}
.visual .controller_btn span.play {
  display: none;
  background-image: url(/img/han/ico_play.png);
}
.visual .controller_btn span.stop {
  background-image: url(/img/han/ico_stop.png);
}
@media (max-width: 1200px) {
  .visual .controller {
    right: 1rem;
  }
}
@media (max-width: 991px) {
  .visual .controller {
    right: 50%;
    transform: translateX(50%);
    bottom: 3.178rem;
  }
}
@media (max-width: 576px) {
  .visual .controller {
    display: none;
  }
}

.new {
  padding: 3rem 0;
}
.new .inner {
  position: relative;
  width: 31.8%;
}
.new .tit {
  margin-bottom: 3rem;
  font-size: 3rem;
  line-height: 1;
}
.new .more {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  color: #002b5c;
  border: 1px solid #002b5c;
}
.new .more:hover {
  color: #fff;
  background: #00aeef;
}
@media (max-width: 991px) {
  .new .flex {
    flex-wrap: wrap;
    gap: 5rem 1rem;
  }
  .new .inner {
    padding-bottom: 4rem;
    width: 48%;
    border-bottom: 1px solid #e1e1e1;
  }
}
@media (max-width: 768px) {
  .new .flex {
    flex-wrap: wrap;
    gap: 5rem 1rem;
  }
  .new .inner {
    width: 100%;
  }
}

.departments {
  padding: 5rem 0;
  background: url(/img/han/m_departments_bg.png) no-repeat center/cover;
}
.departments .han-container {
  position: relative;
}
.departments .header {
  text-align: center;
  padding-bottom: 4rem;
}
.departments .header .h2 {
  font-size: 6rem;
  line-height: 0.9;
  color: #111;
}
.departments .header .h2 span {
  display: inline-block;
  position: relative;
}
.departments .header .h2 span:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2rem;
  background: #8393ca;
}
.departments .header .h2 b {
  position: relative;
  z-index: 2;
}
@media (max-width: 576px) {
  .departments .header .h2 {
    font-size: 5rem;
  }
}
.departments .header .h2 + span {
  display: inline-block;
  padding-top: 2.2rem;
}
.departments .swiper-wrapper .swiper-slide {
  position: relative;
}
.departments .swiper-wrapper .swiper-slide .img {
  overflow: hidden;
  height: 51rem;
  text-align: right;
}
.departments .swiper-wrapper .swiper-slide .txt {
  position: absolute;
  padding: 6.4rem 10rem 7.6rem;
  width: 100%;
  max-width: 70rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
}
.departments .swiper-wrapper .swiper-slide .txt .part {
  display: block;
}
.departments .swiper-wrapper .swiper-slide .txt .sub-tit {
  display: block;
  font-size: 2.4rem;
}
.departments .swiper-wrapper .swiper-slide .txt .subject {
  font-size: 4.8rem;
  font-weight: 700;
}
.departments .swiper-wrapper .swiper-slide .txt .p {
  color: #666;
}
.departments .swiper-button {
  top: 60%;
  width: 6rem;
  height: 6rem;
  color: #0773cf;
  border: 1px solid #0773cf;
  background: #fff;
}
.departments .swiper-button-prev {
  left: 0%;
  transform: translateX(-50%);
}
.departments .swiper-button-next {
  right: 0%;
  transform: translateX(50%);
}
.departments .swiper-button:after {
  font-size: 2.4rem;
}
.departments .swiper-button:hover {
  color: #fff;
  background: #0773cf;
}
@media (max-width: 1400px) {
  .departments .swiper-button {
    width: 4rem;
    height: 4rem;
  }
  .departments .swiper-button-prev {
    left: 1rem;
    transform: none;
  }
  .departments .swiper-button-next {
    right: 1rem;
    transform: none;
  }
  .departments .swiper-button:after {
    font-size: 1.8rem;
  }
}
@media (max-width: 440px) {
  .departments .swiper-button {
    width: 3.2rem;
    height: 3.2rem;
  }
  .departments .swiper-button-prev {
    left: 0;
  }
  .departments .swiper-button-next {
    right: 0;
  }
  .departments .swiper-button:after {
    font-size: 1.6rem;
  }
}
@media (max-width: 1400px) {
  .departments .swiper {
    width: calc(100% - 4rem);
  }
}
@media (max-width: 1200px) {
  .departments .swiper-wrapper .swiper-slide .img img {
    height: 100%;
    object-fit: cover;
  }
  .departments .swiper-wrapper .swiper-slide .txt {
    margin: 0 1rem;
  }
}
@media (max-width: 768px) {
  .departments .swiper-wrapper .swiper-slide .img img {
    height: 100%;
    object-fit: cover;
  }
  .departments .swiper-wrapper .swiper-slide .txt {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5rem 7rem 7rem;
    margin: 0;
    max-width: calc(100% - 2rem);
  }
}
@media (max-width: 576px) {
  .departments .swiper-wrapper .swiper-slide .img {
    height: 48rem;
  }
  .departments .swiper-wrapper .swiper-slide .txt {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4rem 3rem 6rem;
    margin: 0;
    max-width: calc(100% - 2rem);
  }
  .departments .swiper-wrapper .swiper-slide .txt .sub-tit {
    font-size: 2.2rem;
  }
  .departments .swiper-wrapper .swiper-slide .txt .subject {
    margin-bottom: 1rem;
    font-size: 4.4rem;
  }
}
@media (max-width: 440px) {
  .departments .swiper {
    width: 100%;
  }
  .departments .swiper-wrapper .swiper-slide .img {
    height: 46rem;
  }
  .departments .swiper-wrapper .swiper-slide .txt {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4rem 1rem 6rem;
    margin: 0;
    max-width: calc(100% - 2rem);
  }
  .departments .swiper-wrapper .swiper-slide .txt .part {
    font-size: 1.6rem;
    text-align: center;
  }
  .departments .swiper-wrapper .swiper-slide .txt .sub-tit {
    font-size: 2rem;
    text-align: center;
  }
  .departments .swiper-wrapper .swiper-slide .txt .subject {
    margin-bottom: 1rem;
    font-size: 4.2rem;
    text-align: center;
  }
}

/*# sourceMappingURL=main.css.map */