@charset "UTF-8";
#content_wrapper { width: 100%; max-width: 1904px; margin-left: auto; margin-right: auto;overflow: hidden }

/* 메인슬라이드 start*/
.main_slide {
  width: 100%;
  height: 950px;
  transition: height 0.12s ease-in-out;
}
#main_slide_controler {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 120px;
  z-index: 2;
  background-color: rgba(0, 109, 186,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}
#main_slide_button_prev {
  cursor: pointer;
  font-size: 48.21px;
  font-weight: bold;
  font-family: "NanumGothic";
  color: rgb(255, 255, 255);
}
#main_slide_button_next {
  cursor: pointer;
  font-size: 48.21px;
  font-weight: bold;
  font-family: "NanumGothic";
  color: rgb(255, 255, 255);
}
#main_slide_button_stop {
  cursor: pointer;
  background: url(/img/btn_pause.png);
  width: 50px;
  height: 50px;
  margin: 0 40px;
  background-size: cover;
}
#main_slide_button_start {
  cursor: pointer;
  background: url(/img/btn_play.png);
  width: 50px;
  height: 50px;
  margin: 0 40px;
  background-size: cover;
  display: none;
}
.visual_img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  transition: all 0.12s ease-in-out;
}

.visual_img > div {
  width: 100%;
  height: auto;
  max-width: 1240px;
  margin-top: 40px;
  padding: 0 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  /*align-items: center;*/
  transition: all 0.12s ease-in-out;
}

.visual_img > div > h4 {
  font-size: 52.76px;
  letter-spacing: -0.025em;
  font-weight: normal;
  color: white;
  transition: all 0.12s ease-in-out;
}

.visual_img > div > h3 {
  font-weight: bold;
  font-size: 72.54px;
  letter-spacing: -0.025em;

  color: white;
  transition: all 0.12s ease-in-out;
}


@media all and (max-width: 1212px) {
  .main_slide {
    height: 700px;
  }
  #main_slide_controler {
    height: 100px;
  }
  .visual_img > div > h3 {
    font-size: 60px;
  }

  .visual_img > div > h4 {
    font-size: 40px;
  }
}

@media all and (max-width: 960px) {
  .main_slide {
    height: 550px;
  }
  #main_slide_controler {
    height: 75px;
  }

  #main_slide_button_prev,
  #main_slide_button_next {
    font-size:40px;
  }
  #main_slide_button_stop,
  #main_slide_button_start {
    width:40px;
    height: 40px;
    margin: 0 40px;
  }
  .visual_img > div > h3 {
    font-size: 40px;
  }

  .visual_img > div > h4 {
    font-size: 26px;
  }
}
@media all and (max-width: 740px) {
  .main_slide {
    height: 450px;
  }
  #main_slide_controler {
    height: 70px;
  }
  #main_slide_button_prev,
  #main_slide_button_next {
    font-size:30px;
  }
  #main_slide_button_stop,
  #main_slide_button_start {
    width:30px;
    height: 30px;
    margin: 0 30px;
  }
  .visual_img > div > h3 {
    font-size: 30px;
  }

  .visual_img > div > h4 {
    font-size: 20px;
  }
}
@media all and (max-width: 600px) {
  .main_slide {
    height: 400px;
  }
  #main_slide_controler {
    height: 55px;
  }
  #main_slide_button_prev,
  #main_slide_button_next {
    font-size:25px;
  }
  #main_slide_button_stop,
  #main_slide_button_start {
    width:25px;
    height: 25px;
    margin: 0 25px;
  }
  .visual_img > div > h3 {
    font-size: 25px;
  }

  .visual_img > div > h4 {
    font-size: 16px;
  }
}
@media all and (max-width: 480px) {
  .main_slide {
    height: 300px;
  }
  #main_slide_controler {
    height: 45px;
  }
  #main_slide_button_prev,
  #main_slide_button_next {
    font-size:20px;
  }
  #main_slide_button_stop,
  #main_slide_button_start {
    width:20px;
    height: 20px;
    margin: 0 20px;
  }
  .visual_img > div > h3 {
    font-size: 22px;
  }

  .visual_img > div > h4 {
    font-size: 14px;
  }
}
@media all and (max-width: 400px) {
  .main_slide {
    height: 250px;
  }
  #main_slide_controler {
    height: 38px;
  }
  /*#main_slide_button_prev,*/
  /*#main_slide_button_next {*/
  /*  font-size:15px;*/
  /*}*/
  /*#main_slide_button_stop,*/
  /*#main_slide_button_start {*/
  /*  width:15px;*/
  /*  height: 15px;*/
  /*  margin: 0 15px;*/
  /*}*/
  .visual_img > div > h3 {
    font-size: 18px;
  }

  .visual_img > div > h4 {
    font-size: 12px;
  }
}
/* 메인슬라이드 end */





#content01 { margin-top: 10%; text-align: center; }
#content01 h3 { font-size: 50px; letter-spacing: -0.025em; color: #121212; font-weight: bold; }
#content01 p { font-size: 20px; letter-spacing: -0.025em; color: #666666; margin-bottom:45px;}

@media all and (max-width: 960px) {
  #content01 h3 {font-size: 40px;}
  #content01 p { font-size: 26px;}
}
@media all and (max-width: 740px) {
  #content01 h3 {font-size: 30px;}
  #content01 p { font-size: 20px;}
}
@media all and (max-width: 600px) {
  #content01 h3 {font-size: 25px;}
  #content01 p { font-size: 16px;}
}
@media all and (max-width: 480px) {
  #content01 h3 {font-size: 22px;}
  #content01 p { font-size: 14px;}
}
@media all and (max-width: 400px) {
  #content01 h3 {font-size: 18px;}
  #content01 p { font-size: 12px;}
}
#content01 .slider_area {
  width:calc(100% - 20px);
  margin: 0 auto;
  max-width: 1200px;
  height: auto;
  overflow: hidden;
}
#content01 .swiper-slide {
  width:calc(25% - 9px);
  background-size: cover;
}
#content01 .swiper-slide img {
  width:100%;
  border: 1px solid rgb(245, 252, 254);
}
@media all and (max-width: 960px) {  #content01 .swiper-slide { width: calc(33.33% - 8px); }  }
@media all and (max-width: 480px) {  #content01 .swiper-slide { width: calc(50% - 6px); }  }


#content02 { background: url(/img/main/main_mid_bk.png); background-size: cover; height: 440px; margin-top: 16%; text-align: center; display: flex; flex-flow: column nowrap; justify-content: center; }
#content02 h3 { font-size: 50px; letter-spacing: -0.025em; color: #121212; font-weight: bold; }
#content02 p { font-size: 24px; letter-spacing: -0.025em; color: #121212; }
#content02 button { background-color: #326ec0; width: 330px; height: 60px; margin: 40px auto 0 auto; color: white; font-size: 18px; letter-spacing: -0.025em; }

@media all and (max-width: 960px) {
  #content02 {height: 400px;}
  #content02 button {width: 330px; height: 60px; margin-top: 40px; font-size: 18px; }
  #content02 h3 {font-size: 40px;}
  #content02 p { font-size: 24px;}
}
@media all and (max-width: 740px) {
  #content02 {height: 350px;}
  #content02 button {width: 300px; height: 50px; margin-top: 30px; font-size: 17px; }
  #content02 h3 {font-size: 30px;}
  #content02 p { font-size: 20px;}
}
@media all and (max-width: 600px) {
  #content02 {height: 300px;}
  #content02 button {width: 330px; height: 45px; margin-top: 20px; font-size: 15px; }
  #content02 h3 {font-size: 25px;}
  #content02 p { font-size: 16px;}
}
@media all and (max-width: 480px) {
  #content02 {height: 200px;}
  #content02 button {width: 330px; height: 40px; margin-top: 15px; font-size: 12px; }
  #content02 h3 {font-size: 22px;}
  #content02 p { font-size: 14px;}
}
@media all and (max-width: 400px) {
  #content02 {height: 200px;}
  #content02 button {width: 150px; height: 30px; margin-top: 10px; font-size: 10px; }
  #content02 h3 {font-size: 18px;}
  #content02 p { font-size: 12px;}
}
#content03 .video_area {max-width: 1200px; margin: 9.5% auto;}
#content03 .video_area .video{ position:relative; max-width: 1200px; height:0; padding-bottom:56.25%;}
#content03 .video_area .video iframe {position:absolute; top:0; left:0; width:100%; height:100%}
/* #content03 .video_area { max-width: 1098px; width: 100%; margin:9.5% auto; height: 618px; }
@media (max-width: 960px) { #content03 .video_area { height: 420px; margin: 12% auto 12% auto;} }
@media (max-width: 480px) { #content03 .video_area { height: 260px; margin: 9% auto 8% auto;} } */

#content04 { display: flex; flex-flow: row wrap; }
#content04 .shortcut { width: 50%; display: flex; }
#content04 .shortcut:nth-child(1), #content04 .shortcut:nth-child(2) { flex-flow: row wrap; }
#content04 .shortcut:nth-child(3), #content04 .shortcut:nth-child(4) { flex-flow: row-reverse; }
#content04 .shortcut .shortcut_description { background-size: cover; width: 50%; display: flex; flex-flow: column nowrap; justify-content: center; }
#content04 .shortcut .shortcut_description > div { max-width: 340px; width: calc(100% - 40px); margin-left: auto; margin-right: auto; display: flex; flex-flow: column nowrap; justify-content: center; }
#content04 .shortcut .shortcut_description > div h3 { font-size: 30px; letter-spacing: -0.025em; color: white; font-weight: bold; }
#content04 .shortcut .shortcut_description > div p { margin-top: 6%; font-size: 16px; color: white; letter-spacing: -0.025em; }
#content04 .shortcut .shortcut_description > div a { margin-top: 10%; font-size: 18px; color: white; letter-spacing: -0.025em; }
#content04 .shortcut:hover .shortcut_description > div a {
  text-shadow: 1px 1px 1px black;
}
#content04 .shortcut .shortcut_bg { width: 50%; }
#content04 .shortcut .shortcut_bg img { width: 100%;height: 100% }

@media (max-width: 1200px) {
  #content04 .shortcut .shortcut_description > div h3 { font-size:25px;}
  #content04 .shortcut .shortcut_description > div p { font-size: 14px;}
  #content04 .shortcut .shortcut_description > div a { font-size:16px;}
}
@media (max-width: 960px) {
  #content04 .shortcut .shortcut_description > div h3 { font-size:30px;}
  #content04 .shortcut .shortcut_description > div p { font-size: 16px;}
  #content04 .shortcut .shortcut_description > div a { font-size:18px;}
  #content04 .shortcut { width: 100%; }
  #content04 .shortcut:nth-child(1), #content04 .shortcut:nth-child(3) { flex-flow: row wrap; }
  #content04 .shortcut:nth-child(2), #content04 .shortcut:nth-child(4) { flex-flow: row-reverse; }
}
@media (max-width: 650px) {
  #content04 .shortcut .shortcut_description > div h3 { font-size:20px;}
  #content04 .shortcut .shortcut_description > div p { font-size: 12px;}
  #content04 .shortcut .shortcut_description > div a { font-size:14px;}
}
@media (max-width: 480px) {
  #content04 .shortcut .shortcut_description > div h3 { font-size:25px;}
  #content04 .shortcut .shortcut_description > div p { font-size: 14px;}
  #content04 .shortcut .shortcut_description > div a { font-size:16px;}
  #content04 .shortcut:nth-child(1), #content04 .shortcut:nth-child(2), #content04 .shortcut:nth-child(3), #content04 .shortcut:nth-child(4) { flex-flow: row wrap; }
  #content04 .shortcut .shortcut_description { width: 100%; height: 200px;padding-left: 10px; }
  #content04 .shortcut .shortcut_bg { width: 100%; }
}