html, body {overflow-x: hidden;}
#header nav {color: #111;}
#header .mobile_menu span {background-color: #111;}

#main {position: relative;}
#main .main_slide {height: 100vh; width: 100%}
#main .main_slide .banner_txt {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; /* color: #05081a; */ color: #fff; text-shadow: 0 0 5px rgb(0 0 0 / 50%);}
#main .main_slide .banner_txt .t_bold {font-size: 3.5em; line-height: 150%; width: max-content; max-width: 100%; margin: 0 auto; padding: 0 20px; transition: all 0.3s; letter-spacing: -1px;}
#main .main_slide .banner_txt .t_reg {font-size: 1.625em; width: max-content; max-width: 100%; padding: 0 20px; text-align: center; margin: 0 auto; transition: all 0.3s; margin-top: 30px;}
#main .main_slide .banner1 {background: url(/img/main_banner1.jpg) no-repeat center center; background-size: cover;}
#main .main_slide .banner2 {background: url(/img/main_banner2.jpg) no-repeat center center; background-size: cover;}
#main .main_slide .banner3 {background: url(/img/main_banner3.jpg) no-repeat center center; background-size: cover;}
#main .main_slide .banner4 {background: url(/img/main_banner4.jpg) no-repeat center center; background-size: cover;}
#main .main_slide .banner5 {background: url(/img/main_banner5.jpg) no-repeat center center; background-size: cover;}
#main .main_slide .swiper-button-wrap {position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; align-items: center;}
#main .main_slide .swiper-button-wrap > div { position: static; border-radius: 50%; margin: 0 10px; transition: all 0.3s; width: 70px; height: 70px;}
#main .main_slide .swiper-button-wrap > div.main_prev {background: url(/img/main_prev.png) no-repeat center center; background-size: 26px;}
#main .main_slide .swiper-button-wrap > div.main_next {background: url(/img/main_next.png) no-repeat center center; background-size: 26px;}
#main .main_slide .swiper-button-wrap > div:hover {background-color: rgba(255,255,255,0.7);}

#sec_info {position: relative;}
#sec_info .pin_egg {position: absolute; right: -4%; top: 15%; animation: rotate 10s linear infinite;}
#sec_info .video_sec {display: flex; align-items: center; margin-bottom: 80px; margin-top:80px; position: relative; z-index: 2;}
#sec_info .video_sec > div {width: 50%;}
#sec_info .video_sec .lt {position: relative;}
#sec_info .video_sec .lt .thumb {position: relative; height: 0; padding-bottom: 63.4%; overflow: hidden; border-radius: 30px; box-shadow: 20px 20px 10px rgba(0,0,0,0.11);}
#sec_info .video_sec .lt .thumb img.thumb_img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: all 1s;}
#sec_info .video_sec .lt .thumb img.play_btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;}
#sec_info .video_sec .lt .thumb:hover img.thumb_img {transform: translate(-50%, -50%) scale(1.05);}
#sec_info .video_sec .lt .video {position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-bottom: 63.4%; visibility: hidden; z-index: -1;}
#sec_info .video_sec .lt .video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#sec_info .video_sec .rt {padding-left: 5%;}
#sec_info .video_sec .rt > .t_bold.red {font-size: 1.125em; color: #b8282e; margin: 0;}
#sec_info .video_sec .rt > .t_bold {font-size: 2.5em; margin: 0.5% 0 4% 0;}
#sec_info .video_sec .rt > .noto {font-size: 1.375em;}
#sec_info .video_sec .rt a {display: inline-block; margin-top: 12%; position: relative;}
#sec_info .video_sec .rt a .t_bold {font-size: 1.125em;}
#sec_info .video_sec .rt a i {font-size: 32px; font-weight: bold; margin-left: 40px; transition: all 0.3s;}
#sec_info .video_sec .rt a .btn_txt {display: inline-flex; align-items: center; position: relative; z-index: 2;}
#sec_info .video_sec .rt a::before {content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: #b8282e; width: 0%; transition: all 0.3s; z-index: 1; border-radius: 30px;}
#sec_info .video_sec .rt a:hover::before {width: 100%; padding: 10px 15px;}
#sec_info .video_sec .rt a:hover {color: #fff;}
#sec_info .video_sec .rt a:hover i {margin-left: 50px;}

#sec_info .box_wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec_info .box_wrap li {width: 23%;}
#sec_info .box_wrap li .top_img {position: relative;}
#sec_info .box_wrap li .top_img img.hover {position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.3s;}
#sec_info .box_wrap li:hover img.hover {opacity: 1;}
#sec_info .box_wrap li:hover .txt .t_bold {color: #d62329;}
#sec_info .box_wrap li .txt {text-align: center; transform: rotate(-0.03deg);}
#sec_info .box_wrap li .txt .t_bold {margin: 40px 0 15px 0; font-size: 1.625em;}
#sec_info .box_wrap li .txt .desc {font-size: 1.111em;}

#sec_story {margin-top: 130px; padding-bottom: 130px; position: relative;}
#sec_story .story_title {font-size: 2.5em; margin-bottom: 50px; text-align: center; color: #05081a;}
div[class*="show_box"] {/* width:900px; height:640px; */width: 100%; max-width: 900px;}
.show_img {	
	position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 71.112%;
  margin: 0 auto;
	/* width:900px;
	height:640px; */
	z-index:10;
}
.show_box1 .show_img {background:url('/img/sec4_1980.png')no-repeat center center; background-size: contain;}
.show_box2 .show_img {background:url('/img/sec4_1990.png')no-repeat center center; background-size: contain;}
.show_box3 .show_img {background:url('/img/sec4_2000.png')no-repeat center center; background-size: contain;}
.show_box4 .show_img {background:url('/img/sec4_2010.png')no-repeat center center; background-size: contain;}
.show_box5 .show_img {background:url('/img/sec4_2020.png')no-repeat center center; background-size: contain;}

.show_info {position: absolute; z-index: 100; left: -80px; bottom: 80px; display:none; color: #05081a; mix-blend-mode: multiply;}
.show_info h3 {position:relative; font-size: 11.5625em; margin-bottom: 50px; line-height:1; color: #fff; /* text-shadow: -5px 0 #05081a, 0 5px #05081a, 5px 0 #05081a, 0 -5px #05081a; */ margin-left: -20px; -webkit-text-stroke: 5px #05081a; font-family: 'SpoqaHanSansNeo-Bold';}
.show_desc {font-size: 1.375em;text-align:left;}

.show_num > span:last-child {transition-delay:0.4s;}
.swiper-slide-active .show_info {display:block;}
#sec_story .arrow_box {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 900px; margin-left: -80px;display: flex; align-items: center; z-index: 10;}
#sec_story .arrow_box > div {position: static;}

#sec_story .arrow_box > div.story_prev {background: url(/img/story_prev.png) no-repeat center center; background-size: 27px; margin-top: 0 !important; height: 14px !important;}
#sec_story .arrow_box > div.story_next {background: url(/img/story_next.png) no-repeat center center; background-size: 27px; margin-left: 50px; margin-top: 0 !important; height: 14px !important;}
#sec_story .arrow_box > div.story_prev:hover {background: url(/img/story_prev_hover.png) no-repeat center center; background-size: 27px;}
#sec_story .arrow_box > div.story_next:hover {background: url(/img/story_next_hover.png) no-repeat center center; background-size: 27px;}
#sec_story .pin_egg {position: absolute; left: 5%; bottom: -10%; animation: rotate 10s linear infinite; z-index: -1;}

#sec_bt {flex-wrap: wrap;}
#sec_bt a.link_box {width: 25%; display: flex; justify-content: center; align-items: center; height: 0; padding-bottom: 25%; position: relative; transition: all 0.5s;}
#sec_bt a.link_box .t_reg {font-size: 1.75vw; transition: all 0.3s; position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; padding-bottom: 5px;}
#sec_bt a.link_box .t_reg::after {content: ""; display: block; width: 0; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s;}
#sec_bt a.link_box:hover .t_reg::after {width: 100%;}
#sec_bt a.link_box:nth-child(1) {background: url(/img/sec5_1.png) no-repeat center center; background-size: cover;}
#sec_bt a.link_box:nth-child(2) {background: url(/img/sec5_2.png) no-repeat center center; background-size: cover;}
#sec_bt a.link_box:nth-child(3) {background: url(/img/sec5_3.png) no-repeat center center; background-size: cover;}
#sec_bt a.link_box:nth-child(4) {background: url(/img/sec5_4.png) no-repeat center center; background-size: cover;}
#sec_bt a.link_box:hover {transform: translateY(-25px); box-shadow: 10px 15px 5px rgb(0 0 0 / 15%);}

@media screen and (max-width: 1340px) {
  #sec_info .box_wrap li {width: 22%;}
  #sec_info .box_wrap li .txt .desc {font-size: 1em;}
  #sec_info .box_wrap li .txt .desc br {display: none;}
}

@media screen and (max-width: 1200px) {
  div[class*="show_box"] {max-width: 700px;}
  .show_info h3 {font-size: 8.5em; margin-bottom: 8%; margin-left: -10px;}
  .show_desc {font-size: 1.125em;}
  .show_info {left: -5%;}
  #sec_story .arrow_box {max-width: 700px; margin-left: -33px;}
}

@media screen and (max-width: 1024px) {
  #main .main_slide .banner_txt .t_bold {font-size: 3em;}
  #main .main_slide .banner_txt .t_reg {font-size: 1.25em;}

  #sec_info .video_sec .rt > .t_bold.red {font-size: 1.111em; transition: all 0.3s;}
  #sec_info .video_sec .rt > .t_bold {font-size: 2.25em; margin: 0.5% 0 3% 0; transition: all 0.3s;}
  #sec_info .video_sec .rt > .noto {font-size: 1em; transition: all 0.3s;}
  #sec_info .video_sec .rt a {margin-top: 10%;}
  #sec_info .video_sec .rt a .t_bold {font-size: 1.111em; transition: all 0.3s;}
  #sec_info .video_sec .rt a i {font-size: 28px; margin-left: 30px;}
  #sec_info .video_sec .rt a:hover i {margin-left: 40px;}
}


@media screen and (max-width: 800px) {
  div[class*="show_box"] {max-width: 530px;}
  #sec_story .arrow_box {max-width: 530px; margin-left: -50px;}
  #sec_story .arrow_box > div.story_prev {background-size: 22px; height: 11px !important;}
  #sec_story .arrow_box > div.story_next {background-size: 22px; height: 11px !important; margin-left: 35px;}
  #sec_story .arrow_box > div.story_prev:hover {background-size: 22px;}
  #sec_story .arrow_box > div.story_next:hover {background-size: 22px;}
  .show_info h3 {font-size: 7em; margin-bottom: 6%; margin-left: -7px;}
  .show_info {bottom: 16%; left: -10%;}
  .show_desc {font-size: 1em; transform: rotate(-0.03deg);}
  #sec_story .pin_egg {width: 50%; left: -5%;}
}

@media screen and (max-width: 768px) {
  #main .main_slide .banner_txt {width: 100%;}
  #main .main_slide .banner_txt .t_bold {width: 100%; font-size: 2.75em; line-height: 135%;}
  #main .main_slide .banner_txt .t_reg {width: 100%; line-height: 140%; margin-top: 6%;}
  #main .main_slide .banner_txt .br_mo {display: block;}

  #sec_info .video_sec {margin-bottom: 10%;}
  #sec_info .video_sec .rt > .noto {display: none;}
  #sec_info .video_sec .rt > .t_bold {font-size: 2em;}
  #sec_info .video_sec .rt a {margin-top: 7%;}
  #sec_info .video_sec .rt a i {font-size: 24px;}
  #sec_info .video_sec > div.lt {width: 60%;}
  #sec_info .video_sec > div.rt {width: 40%;}

  #sec_info .box_wrap li {width: 44%; margin: 0 3% 5% 3%;}
  #sec_info .box_wrap li .txt .desc {font-size: 0.95em;}
  #sec_info .box_wrap li .txt .desc br {display: block;}
  #sec_info .box_wrap li .txt .desc br.br_mo {display: none;}
  #sec_info .box_wrap li .txt .t_bold {font-size: 1.5em; margin: 15% 0 7% 0;}
  #sec_info .box_wrap li .top_img {width: 85%; margin: 0 auto;}

  #sec_story {margin-top: 15%; padding-bottom: 17%;}
  #sec_story .story_title {margin-bottom: 6%; font-size: 2.325em;}

  #sec_bt a.link_box {width: 50%; padding-bottom: 25vh;}
  #sec_bt a.link_box .t_reg {font-size: 1.325em;}
}

@media screen and (max-width: 680px) {
  div[class*="show_box"] {max-width: 450px;}
  #sec_story .arrow_box {max-width: 450px; margin-left: -28px;}
  .show_info h3 {font-size: 5.75em;}
  .show_info {width: 60%; left: -6%;}
  .show_desc {font-size: 0.8em;}
}

@media screen and (max-width: 540px) {
  #main .main_slide .banner_txt .t_bold {font-size: 2.4em;}

  #sec_info .video_sec {padding: 0; margin-bottom: 23%;margin-top: 10%;}
  #sec_info .pin_egg {display: none;}
  #sec_info .video_sec .lt .thumb {border-radius: 0 20px 20px 0;}
  #sec_info .video_sec .lt .thumb img.play_btn {max-width: 25%;}
  #sec_info .video_sec .lt .thumb {box-shadow: 5px 5px 10px rgb(0 0 0 / 11%);}
  #sec_info .video_sec .rt {padding-left: 4%;}
  #sec_info .video_sec .rt > .t_bold {font-size: 1.75em; margin: 0.5% 0 5% 0;}
  #sec_info .video_sec .rt > .t_bold.red {font-size: 1em;}
  #sec_info .video_sec .rt a .t_bold {font-size: 1em;}
  #sec_info .video_sec .rt a i {font-size: 24px; margin-left: 15px;}
  #sec_info .video_sec .rt a:hover i {margin-left: 15px;}
  #sec_info .video_sec .rt a:hover::before {padding: 2px 2px 2px 14px;}

  #sec_info .box_wrap li {width: 48%; margin: 0 1% 8% 1%;}

  #sec_story .story_title {font-size: 2.125em; margin-bottom: 5%;}
  div[class*="show_box"] {max-width: 350px;}
  #sec_story .arrow_box {max-width: 350px; margin-left: -22px;}
  .show_info h3 {font-size: 5em; text-shadow: -2px 0 #05081a, 0 2px #05081a, 2px 0 #05081a, 0 -2px #05081a; margin-bottom: 4%;}
  .show_info {width: 54%; left: -6%; bottom: 10%;}
  .show_info br {display: none;}
  #sec_story {padding-bottom: 25%;}
  #sec_story .arrow_box {bottom: -5%;}
  #sec_story .arrow_box > div.story_prev {background-size: 16px; height: 10px !important;}
  #sec_story .arrow_box > div.story_next {background-size: 16px; height: 10px !important; margin-left: 15px;}
  #sec_story .arrow_box > div.story_prev:hover {background-size: 16px;}
  #sec_story .arrow_box > div.story_next:hover {background-size: 16px;}
  #sec_info .box_wrap li .top_img img.hover {opacity: 1;}
  #sec_info .box_wrap li .txt .t_bold {margin: 10% 0 5% 0;}
  #sec_bt a.link_box:hover {transform: translateY(-10px);}



}

@media screen and (max-width: 460px) {
  #sec_info .box_wrap li {width: 47%; margin: 0 1.5% 10% 1.5%;}
  #sec_info .box_wrap li .txt .desc {font-size: 0.9em;}
  #sec_info .box_wrap li .txt .desc br {display: none;}
  #sec_info .box_wrap li .txt .desc br.br_mo {display: block;}
  #sec_info .box_wrap li .txt .t_bold {font-size: 1.35em;}
}

@media screen and (max-width: 414px) {
  #sec_info .video_sec .rt > .t_bold {font-size: 1.625em;}
  #sec_info .video_sec .rt > .t_bold.red {font-size: 0.875em;}
  #sec_info .video_sec .rt a .t_bold {font-size: 0.875em;}

  #sec_story .story_title {font-size: 2em; margin-bottom: 4.5%;}
  div[class*="show_box"] {max-width: 300px;}
  #sec_story .arrow_box {max-width: 300px; margin-left: -14px;}
  .show_info h3 {font-size: 4.325em;}
  .show_info {width: 50%; left: -4%;}

  .show_info {bottom: 6%;}
  #sec_story .arrow_box {bottom: -9%;}
}

@media screen and (max-width: 375px) {
  #sec_info .video_sec > div.lt {width: 55%;}
  #sec_info .video_sec > div.rt {width: 45%;}
}

@media screen and (max-width: 360px) {
  #main .main_slide .banner_txt .t_bold {font-size: 2.325em;}
}