@charset "UTF-8";
.top_header_middle {
  display: inline-block;
}

.top_header_middle_iconArea {
  display: inline-block;
  margin-right: 2rem;
  margin-left: 4rem;
}

.top_header_middle_iconArea img {
  max-width: 65.5px;
}

.top_header_middle_iconArea p {
  font-size: 1.2rem;
  font-family: noto_L;
  text-align: center;
  display: block;
}

.top_header_middle_textArea {
  display: inline-block;
  flex: none;
}

.top_header_middle_textArea p {
  font-size: 1rem;
  font-family: noto_L;
  position: relative;
  color: #4b505c;
  padding-left: 1.75rem;
}

.top_header_middle_textArea p::after {
  content: "";
  background: url(../../assets/images/main/header_aim_icon.png);
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  left: 0;
  background-size: 100%;
  top: 0.1rem;
}

.top_header_middle_textArea h2 {
  font-family: noto_L;
  color: #4b505c;
  font-size: 1rem;
  padding: 0.2rem 0;
}

.top_header_middle_textArea h3 {
  font-family: noto_L;
  color: #4b505c;
  font-size: 1rem;
  padding: 0.2rem 0;
  padding-top: 0;
}

.top_header_middle_textArea .color {
  display: inline-block;
  color: #3860d2;
  font-family: noto_L;
  padding-right: 0.75rem;
  letter-spacing: 0.1px;
}

.top_header_middle_textArea .title {
  display: inline-block;
  width: 5rem;
  font-size: 0.875rem;
  font-family: noto_L;
}

#section {
  width: 100%;
  display: flex;
  align-items: center;
  height: 105vh;
}

.section_1 {
  /* background: url(../../assets/images/main/main_background2.png) no-repeat;
  background-position: center;
  background-size: cover; */
  /* height: calc(100vh - 9.375rem); */
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 10vh;
  /* height: 165vh; */
}

div.slider {
  width: 100%;
}

div.slider1 {
  /* background: url(../../assets/images/main/main_background01.png) no-repeat; */
  background-position: center;
  background-size: cover;
  /* height: 937px; */
  height: calc(100vh - 9.375rem);
  overflow: hidden;
}

div.slider2 {
  /* background: url(../../assets/images/main/main_background02.png) no-repeat; */
  background-position: center;
  background-size: cover;
  height: calc(100vh - 9.375rem);
  /* height: 937px; */
  overflow: hidden;
}

div.slider3 {
  /* background: url(../../assets/images/main/main_background03.png) no-repeat; */
  background-position: center;
  background-size: cover;
  /* height: 937px; */
  height: calc(100vh - 9.375rem);
  overflow: hidden;
}

.section_1_wrapper {
  max-width: 1130px;
  margin: 0 auto;
  width: 100%;
}

.section_1_text {
}

.section_1_text h1 {
  font-size: 2.688rem;
  color: #fff;
  font-family: noto_B;
}

.section_1_text h2 {
  font-size: 3.625rem;
  #color: #fff;
  font-family: noto_B;
  margin-top: 0.5rem;
  line-height: 1;
}

.section_1_btn_list {
  padding-top: 5rem;
}

.section_1_btn_list li {
  display: inline-block;
  border: 1px solid #fff;
  margin-right: 1rem;
}

.section_1_btn_list li:last-of-type {
  margin-right: 0;
}

.section_1_btn_list li a {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  width: 12rem;
  text-align: center;
  height: 3.5rem;
  line-height: 3.5rem;
  font-size: 1.5rem;
}

.footer {
  position: relative;
  z-index: 6;
}

.footer_top {
  width: 90%;
  text-align: center;
  padding-top: 1.25rem;
  margin: 0 auto;
  padding-bottom: 3.5rem;
  max-width: 1130px;
  text-align: left;
  margin: 0 auto;
}

.footer_top li {
  display: inline-block;
  margin-right: 5.1rem;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section_2 {
  background-color: #fbfbfb;
  height: 100vh;
}

.section_2_textArea {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

.section_2_textArea h1 {
  font-size: 2.7rem;
  font-family: noto_L;
  color: #4b505c;
}

.section_2_textArea h1 b {
  color: #3860d2;
  font-weight: normal;
  font-family: noto_DL;
}

.section_2_textArea h2 {
  font-size: 1.18rem;
  color: #4b505c;
  padding: 3.5rem 0;
  opacity: 0;
  word-break: keep-all;
}

.section_2_btn {
  display: block;
  background-color: #3860d2;
  width: 12.5rem;
  font-size: 1.125rem;
  color: #fff;
  text-align: center;
  font-family: noto_M;
  padding: 1rem 0;
  border-radius: 2rem;
  display: block;
  opacity: 0;
}
.section_2_clientArea {
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  width: 50%;
}

.section_2_clientArea_list {
  font-size: 0;
}

.section_2_clientArea_list li {
  font-size: 1rem;
  display: inline-block;
  width: 16.666%;
  margin-top: 3rem;
  vertical-align: middle;
}

.section_2_clientArea_list li:nth-of-type(1),
.section_2_clientArea_list li:nth-of-type(2),
.section_2_clientArea_list li:nth-of-type(3) {
  #margin-top: 0;
}

.section_2_clientArea_list li img {
  max-width: 110px;
  margin: 0 auto;
  display: block;
}

.section_contents_wrapper {
  max-width: 1130px;
  width: 90%;
  margin: 0 auto;
  font-size: 0;
}

.section_3 {
  background: rgba(56, 96, 210, 0);
  position: relative;
}

.section_3_imgArea {
  display: inline-block;
  vertical-align: middle;
  width: 55%;
  opacity: 0;
}

.section_3_imgArea img {
  max-width: 300px;
  display: block;
  margin-left: 7rem;
}

.section_3_textArea {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  width: 45%;
  opacity: 0;
}

.section_3_textArea h1 {
  font-size: 2.7rem;
  font-family: noto_L;
  color: #fff;
}

.section_3_textArea h2 {
  font-size: 1.18rem;
  color: #fff;
  padding: 3.5rem 0;
}

.section_3_btns {
}

.section_3_btns li {
  display: inline-block;
  color: #fff;
  margin-right: 1.75rem;
  position: relative;
  cursor: pointer;
}

.section_3_btns li:last-of-type {
  margin-right: 0;
}

.section_3_btns .active::after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
}

.section_3_btn {
  position: absolute;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 12.5rem;
  padding: 1rem 0;
  border-radius: 2rem;
  background-color: #fff;
  font-size: 1.125rem;
  font-family: noto_M;
  color: #3860d2;
  left: 50%;
  margin-left: -6.25rem;
  bottom: 5rem;
  cursor: pointer;
}

.section_4 {
  background-color: #f9f8f7;
  position: relative;
}

.section_4_textArea {
  font-size: 1rem;
  vertical-align: middle;
  display: inline-block;
  width: 50%;
  opacity: 0;
}

.section_4_textArea h1 {
  font-size: 2.7rem;
  font-family: noto_L;
  color: #4b505c;
}

.section_4_textArea h2 {
  font-size: 1.18rem;
  color: #4b505c;
  padding: 3.5rem 0;
}

.section_4_btns {
}

.section_4_btns li {
  display: inline-block;
  color: #999999;
  margin-right: 1.75rem;
  position: relative;
  cursor: pointer;
}

.section_4_btns li:nth-of-type(1) {
}

.section_4_btns li:nth-of-type(2) {
}

.section_4_btns li:nth-of-type(3) {
}

.section_4_imgArea {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  opacity: 0;
}

.section_4_imgArea p {
  max-width: 328px;
  margin: 0 auto;
  display: block;
}

.section_4_imgArea p img {
  max-width: 328px;
}

.section_4_btns .active::after {
  content: "";
  position: absolute;
  background-color: #5583f0;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0;
}

.section_4_btns .active {
  color: #5583f0 !important;
}

.section_4_btn {
  position: absolute;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 12.5rem;
  padding: 1rem 0;
  border-radius: 2rem;
  background-color: #5583f0;
  font-size: 1.125rem;
  font-family: noto_M;
  color: #fff;
  left: 50%;
  margin-left: -6.25rem;
  bottom: 5rem;
  cursor: pointer;
  opacity: 0;
}

.section_5 {
  height: auto !important;
  padding: 7rem 0;
}

.section_contents_wrapper {
}

.section_5_topText {
  font-size: 1rem;
  opacity: 0;
}

.section_5_topText h1 {
  font-size: 2.7rem;
  font-family: noto_L;
  color: #4b505c;
  display: inline-block;
}

.section_5_topText a {
}

.section_5_btn {
  display: inline-block;
  vertical-align: bottom;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 12.5rem;
  padding: 1rem 0;
  border-radius: 2rem;
  background-color: #5583f0;
  font-size: 1.125rem;
  font-family: noto_M;
  color: #fff;
  cursor: pointer;
}

.section_5_bottomArea {
  font-size: 1rem;
  margin-top: 2rem;
}

.section_5_bottomArea_list {
  font-size: 0;
  text-align: center;
}

.section_5_bottomArea_list li {
  display: inline-block;
  background-color: #aaa;
  width: 361px;
  height: 250px;
  margin-top: 23px;
  margin-right: 23px;
  font-size: 1rem;
  position: relative;
  opacity: 0;
  cursor: pointer;
  transition: 0.4s;
  background-position: center !important;
}

.section_5_bottomArea_list li:nth-of-type(1) {
  background: url(../../assets/images/main/main_repl_1.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(2) {
  background: url(../../assets/images/main/main_repl_2.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(3) {
  background: url(../../assets/images/main/main_repl_3.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(4) {
  background: url(../../assets/images/main/main_repl_4.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(5) {
  background: url(../../assets/images/main/main_repl_5.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(6) {
  background: url(../../assets/images/main/main_repl_6.png) no-repeat;
  background-size: cover;
}

.section_5_bottomArea_list li:nth-of-type(3n) {
  margin-right: 0;
}

.section_5_bottomArea_list_text {
  position: absolute;
  width: 100%;
  bottom: 0.875rem;
  text-align: left;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0px;
}

.section_5_bottomArea_list_text h1 {
  font-size: 1.1rem;
  display: inline-block;
  margin-left: 1rem;
  text-align: left;
  color: #fff;
  margin-top: 20px;
}

.section_5_bottomArea_list_text_mark {
  font-size: 1rem;
  color: #fff;
  text-align: center;
  display: inline-block;
  padding: 0.2rem 1rem;
  background-color: #000;
  margin-right: 1rem;
  float: right;
}

.section_6 {
  background-color: #0b60d6;
  position: relative;
  overflow: hidden;
  display: block !important;
  height: auto !important;
}

.section_contents_wrapper {
}

.section_6_topArea {
  font-size: 1rem;
  margin-top: 7rem;
  padding-bottom: 470px;
}

.section_6_topArea h1 {
  font-size: 2.7rem;
  font-family: noto_L;
  color: #fff;
  text-align: center;
  opacity: 0;
}

.section_6_topArea h2 {
  font-size: 1.18rem;
  color: #fff;
  padding: 3.5rem 0;
  text-align: center;
  opacity: 0;
}

.store_list p,
.store_list a {
  display: inline-block;
  border: 1px solid #fff;
  width: 13rem;
  border-radius: 3px;
  margin-right: 1rem;
  cursor: pointer;
  opacity: 0;
}

.store_list p:nth-of-type(2),
.store_list a:nth-of-type(2) {
  margin-right: 0;
}

.store_list img {
  max-width: 133px;
  margin: 0 auto;
  padding: 0.65rem 0;
}

.store_list {
  text-align: center;
  font-size: 0;
}

.section_6_imgArea {
  position: absolute;
  bottom: -290px;
  z-index: 4;
  width: 318px;
  left: 50%;
  margin-left: -159px;
}

.section_6_imgArea img {
  max-width: 318px;
  z-index: 4;
  position: relative;
  opacity: 0;
}

.top_header_middle_wrapper {
}

.header_right_m {
  display: none;
}
.mark_1 {
  background-color: #00b552;
  margin-top: 20px;
}

.mark_2 {
  background-color: #3fa9f5;
  margin-top: 20px;
}

.mark_3 {
  background-color: #ff931e;
  margin-top: 20px;
}

.link {
  width: 361px;
  height: 250px;
  display: inline-block;
}


.popup{position:absolute; left:10%; top:10%; max-width:600px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;z-index:100}
.popup .pop_img{font-size:0}
.popup .pop_img img{max-width:100%; display:inline}
.popup .pop_img .mo{display:none}
.popup .pop_btm{background:#4f4f4f;padding:3px 10px;box-sizing:border-box}
.popup .pop_btm::after{clear:both; display:block; content:'';}
.popup .pop_btm a{display:block; line-height:30px; float:right;font-size:16px;color:#fff}
.popup .pop_btm a:first-child{float:left}

.popup.popup2{left:1%;}
.popup.popup3{left:37%;}
/*sub_page_css*/
@media (max-width: 1300px) {
  .section_5_bottomArea_list li:nth-of-type(3n) {
    margin-right: 2rem;
  }

  .section_5_bottomArea_list li:nth-of-type(2n) {
    margin-right: 0rem;
  }
  .popup.popup3{left:1%}
 .popup.popup2{ left: auto;    right: 1%;}
}
@media (max-width: 900px) {
  .top_header_middle_iconArea {
    display: inline-block;
    margin-right: 2rem;
    margin-left: 0;
  }
}
@media (max-width: 800px) {
  .section_2_clientArea {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    width: 100%;
    max-width: 370px;
  }
  .section_2_clientArea_list {
    width: 100%;
  }

  .section_2_textArea {
    display: block;
    vertical-align: middle;
    padding-top: 0 !important;
    margin-top: 0 !important;
    width: 100%;
  }

  .section_2_btn {
    margin: 0 auto;
  }

  .section_2 {
    text-align: center;
  }

  .section_2_clientArea {
    padding-top: 4rem;
    margin: 0 auto;
  }

  .footer_top {
    text-align: center;
  }

  .footer_top li {
    margin-right: 1.1rem;
  }

  .footer_bottom_textArea {
    display: block;
    margin-top: 1rem;
  }

  .footer_bottom_logo {
  }

  .footer_bottom_textArea h1 {
    color: #4b505c;
    word-break: keep-all;
  }

  .footer_bottom_textArea_bottom_list {
    margin-top: 1.375rem;
    padding-bottom: 2.25rem;
    display: block;
  }
}

@media (max-width: 767px) {
.popup .pop_img .mo{display:block}
.popup .pop_img .pc{display:none}


  .section_5 {
    padding: 0;
  }
  .section_3_textArea h2 {
    padding-bottom: 0;
  }
  .animation_box_active {
  }
  .animation_box_active {
  }
  .animation_box_active_2,
  .top_ani_nor_2,
  .top_ani_nor {
  }
  .last_word {
  }
  .section_5_bottomArea_list li:nth-of-type(2n) {
    margin-right: 0rem;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .section_1_text,
  .section_1_btn_list {
  }

  .section_contents_wrapper {
    text-align: center;
    padding: 6rem 0;
    margin: 0;
    margin: 0 auto;
  }

  .section_2_btn {
    margin: 0 auto;
  }

  .section_2_clientArea {
    padding-top: 4rem;
    margin: 0 auto;
  }

  .section_2_clientArea_list li img {
    max-width: 75px;
  }

  .section_2_clientArea_list li {
	  font-size: 1rem;
	  display: inline-block;
	  width: 33.333%;
	  margin-top: 3rem;
	  vertical-align: middle;
	}

  .section_2_textArea h1 {
    margin-top: 0;
  }

  .section_3_imgArea img {
    max-width: 190px;
    margin: 0 auto;
  }

  .section_3_textArea {
    display: block;
    margin: 0 auto;
  }

  .section_3_textArea {
    width: 100%;
    padding-bottom: 7rem;
  }

  #section {
    height: auto;
  }

  .section_1_wrapper {
    padding: 10rem 0;
    max-height: fit-content;
  }

  .section_3_btn {
    bottom: 5rem;
  }

  .section_2_clientArea_list {
    margin: 0 auto;
  }

  .section_2_clientArea {
    display: block;
  }

  .section_4_textArea {
    font-size: 1rem;
    vertical-align: middle;
    display: block;
    width: 100%;
  }

  .section_4_imgArea p img {
    width: 100%;
  }

  .section_4_btns li:nth-of-type(3) {
    margin-right: 0;
  }

  .section_4_imgArea {
    vertical-align: middle;
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-top: 3rem;
    padding-bottom: 2rem;
  }

  .section_5_bottomArea_list li {
    display: inline-block;
    background-color: #aaa;
    width: 290px;
    height: 210px;
    margin-top: 23px;
    margin-right: 23px;
    font-size: 1rem;
    position: relative;
    margin-right: 0;
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .section_5_btn {
    display: block;
    vertical-align: bottom;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 12.5rem;
    padding: 1rem 0;
    border-radius: 2rem;
    background-color: #5583f0;
    font-size: 1.125rem;
    font-family: noto_M;
    color: #fff;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 2rem;
  }

  .section_5_bottomArea_list li:nth-of-type(3n) {
    margin: 0 auto;
    margin-top: 2rem;
  }

  .section_6 {
    height: 59rem !important;
  }

  .section_6_topArea {
    margin-top: 0;
  }

  .section_6_imgArea img {
    max-width: 250px;
    z-index: 4;
    position: relative;
    margin: 0 auto;
  }
	.popup{left:5%; max-width:90%;top:28%}
	.popup .pop_btm a{font-size:14px}
	.popup.popup2{left:5%;right:auto; max-width:90%;z-index:99;top:10%}
	.popup.popup3{left:5%;right:auto; max-width:90%;z-index:100;top:10%}
  /*검색용오오오옹*/
}

@media (max-width: 400px) {
  .last_word {
    font-size: 2.5rem !important;
  }
  .section_1_text h2 {
    font-size: 2.625rem;
  }

  .section_1_text h1 {
    font-size: 1.875rem;
    color: #fff;
    font-family: noto_B;
  }

  .section_2_textArea h1,
  .section_3_textArea h1,
  .section_4_textArea h1,
  .section_5_textArea h1,
  .section_6_topArea h1 {
    font-size: 2.25rem;
  }

  .section_5_topText h1 {
    font-size: 2.25rem;
  }

.m-hd .m-hd-logo{height:auto}
  .m-hd >  a {max-width:150px}
}
@media (max-width: 329px) {
  .store_list p {
    margin-right: 0;
    margin: 0 auto !important;
    margin-top: 0.5rem !important;
    display: block;
  }
}
@media (max-width: 474px) {
  .section_6_topArea h1 {
    font-size: 2rem;
  }
  .top_header_middle_iconArea {
    display: inline-block;
    margin-right: 1rem;
    margin-left: 0;
  
  }
  .top_header_right_btn p{padding-right:0.7rem}
  .top_header_right_btn p a{font-size:1.1rem}
  .top_header_right_btn p::before{top:16%}
}