html, body{ overflow-x: hidden; }

.main_visual .main_slider .slide_box > div .more a:after{content: 'WOOAH 소개 바로가기' !important; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 18px 0;
text-align: center; font-weight: 500; color: #ffffff; font-size: 16px;
letter-spacing: -1px; z-index: 3; box-sizing: border-box;}

#main .main_visual{overflow: hidden;width:100%;position: relative;z-index: 3; position: relative; }
.main_visual .main_slider{ height:100vh;overflow: hidden; position: relative; }
.main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100vh; position: relative;}
.main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden;
  width: 100%; height: 100%;
  opacity:0;
}


.main_visual .main_slider .slide_box > div{
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img{ position: absolute;left: 0; top: 0; overflow: hidden; width: 100%; height: 100%;
  -moz-transition: all 8s ;
  -webkit-transition: all 8s;
  -o-transition: all 8s;
  -ms-transition: all 8s ;
  transition: all 8s ;
  transform: scale(1.15);
}
.main_visual .main_slider .slide_box .main_img img{ display: block; height: auto; transition: all 1000ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: translate(-50%,0) rotate(.001deg); left: 50%; position: absolute;
   max-height: 110%;

 }
.main_visual .main_slider .slide_box  > div.on .main_img{ transform: scale(1.0); }
.main_visual .main_slider .slide_box .inner{ width: 1260px; margin: 0 auto; top: 55%; position: absolute; transform: translate(-50%,-50%); left: 50%; }
.main_visual .main_slider .slide_box .in_obj{ text-align: left;  }



.main_visual .main_slider .slide_box div strong{ display: block; position: relative;
  color: #fff;font-size:84px;line-height:110px; letter-spacing: -1px; font-weight:600; text-shadow: 4px 4px 8px rgba(0,0,0,0.30); display: block; width: 100%;
  margin-bottom: 32px;
  opacity: 0;
  transform: translate(0,50px);
}
.main_visual .main_slider .slide_box div span{  display: block; position: relative; transform: translate(0,50px); opacity: 0;
  margin-bottom: 15px;
}

.main_visual .main_slider .slide_box div .more{
  opacity: 0;
  transform: translate(0,50px);
}



.main_visual .main_slider .slide_box > div.on{
  z-index: 5; opacity:1;
}





.main_visual .main_slider .slide_box > div span { font-size:22px;line-height:32px;display: block;color: #ffffff;  font-weight: 500; }

.main_visual .main_slider .slide_box > div .more{ display: inline-block; padding: 2.5px; overflow: hidden; }
.main_visual .main_slider .slide_box > div .more{ margin-top: 30px; position: relative; }
.main_visual .main_slider .slide_box > div .more a{ display: block; padding: 18px 50px; border: 2px solid #fff; border-radius: 15px; font-weight: 300;
  color: rgba(255,255,255,0); font-size: 16px; letter-spacing: -1px; position: relative; z-index: 2; overflow: hidden; transition: 0.4s;
}
.main_visual .main_slider .slide_box > div .more a:before{ content: ""; display: block; width: 300px; height: 300px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); z-index: 1; }
.main_visual .main_slider .slide_box > div:nth-child(2) .more a:after{ content: "DXMON 소개 바로가기" !important; }

.main_visual .main_slider .slide_box > div:nth-child(3) .more a:after{ content: "HITGS 소개 바로가기" !important; }

.main_visual .main_slider .slide_box > div .more a:hover:before{ transform: translate(-50%,-50%) scale(1); transition: 1.0s; }
.main_visual .main_slider .slide_box > div .more a:hover:after{ color:#313131;  }

.main_visual .thum_wrap{ position: absolute; right: auto; left: 100px; top: 50%; transform: translate(0,-50%); z-index: 99; width: 13px; }
.main_visual .thum_wrap ul li{ width: 13px; height: 13px; border: 2px solid #fff; border-radius: 3px; margin-top: 20px; position: relative; }
.main_visual .thum_wrap ul li:first-child{ margin-top: 0;  }
.main_visual .thum_wrap ul li.last{ display: none; margin-bottom: 0;  }
.main_visual .thum_wrap ul li:after{ font-family: 'Ubuntu', sans-serif;  content: ""; display: block; position: absolute; top: -30px; left: -7px; font-size: 16px; color: #ffffff; font-weight: 600; }

.main_visual .thum_wrap ul li.on{ width: 1px; border: none; height: 85px; background-color: #fff; left: 50%; transform: translate(-50%,0); }
.main_visual .thum_wrap ul li.on:nth-child(1):after{ content: "01"; }
.main_visual .thum_wrap ul li.on:nth-child(2){ margin-top: 50px; }
.main_visual .thum_wrap ul li.on:nth-child(2):after{ content: "02"; }
.main_visual .thum_wrap ul li.on:nth-child(3){ margin-top: 50px; }
.main_visual .thum_wrap ul li.on:nth-child(4){ margin-top: 50px; }
.main_visual .thum_wrap ul li.on:after{  color: #fff; }


.main_visual .main_slider .slide_box > div.on .more{
  transform: translate(0,0); opacity: 1;
  transition:1s;
  transition-delay: 1.0s;
}

.main_visual .main_slider .slide_box > div.on strong{
    transform: translate(0,0); opacity: 1;
    transition:1s;
    transition-delay: 0.7s;
}


.main_visual .main_slider .slide_box > div.on span{
    transform: translate(0,0); opacity: 1;
    transition:1s;
    transition-delay: 0.6s;
}




#main .inner{ width: 1260px; margin: 0 auto; }
#main .con01{ padding-top: 100px; padding-bottom: 130px; }
#main .con01 ul:after{ content: ""; display: table; clear: both; }
#main .con01 ul > li{ float: left; width: 31.333333333%; margin-right: 3%; transform: translate(0,40px); opacity: 0; transition: 0.8s; }

#main .con01.on ul > li{ opacity: 1; transform: translate(0,0);}
#main .con01.on ul > li:nth-child(2){ transition-delay: 0.3s; }
#main .con01.on ul > li:nth-child(3){ transition-delay: 0.6s; }


#main .con01 ul > li:last-child{ margin-right: 0; }
#main .con01 ul > li .img_box{ overflow: hidden; transition: 1s; }
#main .con01 ul > li .img_box img{ width: 100%; display: block; transition: 1s; }
#main .con01 ul > li a:hover .img_box{ box-shadow: 15px 15px 20px rgba(0,0,0,0.2); }
#main .con01 ul > li a:hover .img_box img{ transform: scale(1.1); }
#main .con01 ul > li .text_box{ padding-top: 40px; }
#main .con01 ul > li .text_box span{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.5px; color:#222; margin-bottom: 15px; }
#main .con01 ul > li .text_box strong{ display: block; font-size: 25px; line-height: 46px; letter-spacing: -1px; color: #222222; word-break: keep-all;
  white-space: normal;
  height: 92px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#main .con01 ul > li .text_box p{ font-size: 16px; font-weight: 400; letter-spacing: -1px; color:#222222; line-height: 34px; word-break: keep-all;
  white-space: normal;
  margin-top: 10px;
  overflow: hidden;
  height: 102px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}



#main .con02{ background: url('/img/main/con02_bg.gif') left top repeat; padding-top: 105px; padding-bottom: 130px; position: relative; }
#main .con02:after{ content: ""; display: block; width: 616px; height: 669px; background: url('/img/main/con02_logo2.png') center center no-repeat; position: absolute; right: 60px; bottom: 0; }
#main .con02 .title{ text-align: center; margin-bottom: 65px; display: flex; justify-content: center; }
#main .con02 .title button{ background-color: transparent; opacity: 0.2; margin-right: 40px; vertical-align: top; }
#main .con02 .title button:last-child{ margin-right: 0; transform: translateY(12px); }
#main .con02 .title button.on{ opacity: 1; }
#main .con02 .title img{ display: block; margin: 0 auto; }
#main .con02 .inner{ position: relative; z-index: 1; }
#main .con02 ul:after{ content: ""; display: table; clear: both; }
#main .con02 ul li{ float: left; width: 20%; text-align: center; }
/*#main .con02 .list01 li{ width: 16.66666666%; }*/
#main .con02 .list01 li .text_box strong{ display: block; font-size: 26px; color: #fff; line-height: 20px;}
#main .con02 .list03 li .text_box strong{ display: block; font-size: 26px; color: #fff; line-height: 20px;}
#main .con02 .list01{ display: none; }
#main .con02 .list03{ display: none; }

#main .con02 ul li:nth-child(odd){ transform: translate(0,40px); opacity: 0; transition: 0.8s; transition-delay: 0.2s; }
#main .con02 ul li:nth-child(even){ transform: translate(0,-40px); opacity: 0; transition: 0.8s; transition-delay: 0.2s; }


#main .con02 ul.on li:nth-child(odd){ transform: translate(0,0); opacity:1; }
#main .con02 ul.on li:nth-child(even){ transform: translate(0,0); opacity: 1;  }


#main .con02 ul li .img_box{ width: 180px; height: 180px; display: inline-block;  transform: translate(0,0); position: relative; transition: 0.6s; }
#main .con02 ul li .img_box .hover_box{ opacity: 0; transition: 0.3s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background-color: rgba(246,27,237,0.8); }
#main .con02 ul li .img_box .hover_box span{ display: block; width: 96px; height: 30px; background-color: #0c0c0c; line-height: 30px; text-align: center; color: #fff; font-weight: 500; font-size: 14px; }
#main .con02 ul li .img_box .hover_box span:nth-child(1){ position: absolute; left: -20px; top: 45%;  transform: translate(-20px,-20px) rotate(-15deg); transition: 0.5s; transition-delay: 0.1s; opacity: 0; }
#main .con02 ul li .img_box .hover_box span:nth-child(2){ position: absolute; right: -20px; bottom: 13%;  transform: translate(20px,20px) rotate(-15deg); transition: 0.5s; transition-delay: 0.1s; opacity: 0; }

#main .con02 ul li .img_box .wrap{  overflow: hidden; border-radius: 50%; box-shadow: 20px 20px 24px rgba(0,0,0,0.5); transition: 0.6s;  }
#main .con02 ul li a:hover .img_box{ transform: translate(0,-30px);  }
#main .con02 ul li a:hover .img_box .wrap{  box-shadow: 50px 50px 28px rgba(0,0,0,0.5); }
#main .con02 ul li a:hover .img_box .hover_box{ opacity: 1; }
#main .con02 ul li a:hover .img_box .hover_box span:nth-child(1){ transform: translate(0,0) rotate(-15deg); opacity: 1; }
#main .con02 ul li a:hover .img_box .hover_box span:nth-child(2){ transform: translate(0,0) rotate(-15deg); opacity: 1; }
#main .con02 ul li .img_box img{ display: block; }
#main .con02 ul li .text_box{ margin-top: 30px; }
#main .con02 ul li .text_box > img{ display: block; margin: 0 auto; }

#main .con03{ padding: 120px 0; }
#main .con03 .title strong{ display: block; font-size: 48px; font-weight: 600; color: #222222; letter-spacing: -1px; margin-bottom: 30px; }
#main .con03 .inner:after{ content: ""; display: table; clear: both; }
#main .con03 .inner .left_box{ width: 65.5%; margin-right: 3%; float: left; transform: translate(-30px,0); opacity: 0; transition: 0.8s; }
#main .con03 .inner .left_box .text_box{ border-top: 2px solid #313131; margin-top: 20px; padding-top: 20px;}
#main .con03 .inner .left_box .video_box{  position: relative; height: 0px; padding-bottom: 56.25%; text-align: left; }
#main .con03 .inner .left_box .text_box span{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.5px; color:#222222; margin-bottom: 15px; }
#main .con03 .inner .left_box .text_box strong{ font-size: 32px; font-weight: 600; letter-spacing: -1px; color:#222222; display:block; word-break: keep-all; }
#main .con03 .inner .right_box{ float: left; width: 31.5%;  transform: translate(30px,0); opacity: 0; transition: 0.8s; }
#main .con03 .inner .right_box ul li{ margin-bottom: 16px; }
#main .con03 .inner .right_box ul li:last-child{ margin-bottom: 0; }
#main .con03 .inner .right_box ul li:after{ content: ""; display: table; clear: both; }
#main .con03 .inner .right_box ul li .video_box{ float: left; width: 45%; margin-right: 5%; position: relative;  }
#main .con03 .inner .right_box ul li .text_box{ float: left; width: 50%; }
#main .con03 .inner .right_box ul li .text_box strong{ transform: translate(0,35%); display: block; font-size: 16px; font-weight: 400 !important; letter-spacing: -0.5px; line-height: 30px; }

#main .con03.on .inner .right_box{transform: translate(0,0); opacity: 1; transition-delay: 0.2s; }
#main .con03.on .inner .left_box{transform: translate(0,0); opacity: 1; transition-delay: 0.2s;  }




#main .con04{ background: url('/img/main/con04_bg.jpg') right center no-repeat; padding-top: 60px; padding-bottom: 60px; }
#main .con04 .text_box{ position: relative; transform: translate(40px,0); opacity: 0; transition: 0.8s; transition-delay: .2s; }

#main .con04.on .text_box{transform: translate(0,0); opacity: 1; }

#main .con04 .text_box > span{ display: block; font-size: 20px; font-weight: 500; color:#ffffff; letter-spacing: -1px; margin-bottom: 10px; }
#main .con04 .text_box > strong{ display:block; font-size: 26px; font-weight: 600; color:#ffffff; letter-spacing: -1px; line-height: 46px; }
#main .con04 .text_box > strong span{ font-weight: 600; font-size: 36px; }
#main .con04 .text_box dl{ margin-top: 15px; margin-bottom: 40px; }
#main .con04 .text_box dl:after{ content: ""; display: table; clear: both; }
#main .con04 .text_box dl dt{ float: left; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color:#ffffff; }
#main .con04 .text_box dl dt:after{ content:""; width: 53px; height: 1px; background-color: #d9e7ed; display: inline-block; margin: 0 13px; position: relative; top: -5px; }
#main .con04 .text_box dl dd{ float: left; font-size: 16px; font-weight: 300; letter-spacing: -0.5px; color:#ffffff;  }
#main .con04 .text_box a{ display: block; padding: 14px 50px; border: 2px solid #fff; border-radius: 15px; font-weight: 300;
  color: rgba(255,255,255,0); font-size: 16px; letter-spacing: -1px; position: relative; z-index: 2; overflow: hidden; transition: 0.4s; display: inline-block;
}
#main .con04 .text_box a:before{ content: ""; display: block; width: 300px; height: 300px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); z-index: 1; }
#main .con04 .text_box a:after{ content: "오디션 바로가기"; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 14px 48px; font-weight: 500; color: #ffffff; font-size: 16px;
letter-spacing: -1px; z-index: 3; box-sizing: border-box;
}
#main .con04 .text_box a:hover:before{ transform: translate(-50%,-50%) scale(1); transition: 1.0s; }
#main .con04 .text_box a:hover:after{ color:#313131;  }






#footer{ background-color: #1b1b1b; padding: 24px 0; }
#footer .inner{ width: 1260px; margin: 0 auto; }
#footer .inner:after{ content: ""; display: table; clear: both; }
#footer .inner h1{ float: left; margin-right: 55px; }
#footer .inner address{ float: left; line-height: 52px; font-size: 15px; font-weight: 300; letter-spacing: -1px; color:#666666; }
#footer .inner .copy_right{ float: right; line-height: 52px; font-size: 15px; font-weight: 300; letter-spacing: -1px; color: #555555; }
#footer .inner .copy_right a{ color: inherit; text-decoration: underline; }







@media (min-width:1920px){
  .main_visual .main_slider .slide_box .main_img img{ width: 100%; height: auto; }
}

@media (max-width:1440px){
  #header .gnb{ text-align: center; width: 100%; }
  #header .gnb ul li{ display: inline-block; float: none; }
  .main_visual .thum_wrap{ left: auto; right: 40px; }
}

@media (max-width:1280px){
  #main .inner{ width: 100%; padding: 0 40px; }
  #footer .inner{ width: 100%; padding: 0 40px; }
}

@media (max-width:1216px){
  .main_visual .main_slider .slide_box > div strong{ font-size: 60px; line-height: 80px; }
  .main_visual .main_slider .slide_box > div .more{ margin-top: 0; }
  #main .con01 ul > li .text_box strong{ font-size: 20px; line-height: 40px; height: 80px; }
  #main .con01 ul > li .text_box p{ font-size: 14px; line-height: 32px; height: 96px; }
  #main .con02:after{ right: -100px; }
  #main .con02 ul li{ width: 33.333333% !important; margin-top: 50px; }
  #main .con02 .title{ margin-bottom: 0; }
  #main .con03 .inner .left_box{ width: 100%; float: none; max-width: 828px; margin: 0 auto;}
  #main .con03 .inner .right_box{ width: 100%; max-width: 828px; margin: 0 auto; float: none; margin-top: 50px; }
  #main .con03 .inner .right_box ul li .video_box{ width: auto; margin-right: 30px; }
  #main .con03 .inner .right_box ul li .text_box{ width: auto; }
  #main .con03 .inner .right_box ul li .text_box strong{ transform: translate(0,100%); }
  #main .con04{ background-position: right -300px center; }
  #footer .sns_nav{ left: auto; right: 25px; }
  #footer.on .sns_nav{ bottom: 250px; }
  #footer .w_btn img{ width: 90px; }
  #footer .w_btn{ top: 120px; }
  #footer .sns_nav{ bottom: 90px;  }
}

@media (max-width:900px){
  #header .gnb{ display: none; }
  #header .logo{ width: 37.5px; height: 61px; }
  #header .logo a{ background-size: auto 100%; }
  #header .menu_btn{ top: 36px; }
  #header .logo{ position: static; float: left;  }
  #header.on .menu_btn{ top: 29px; }
}


@media (max-width:800px){
  #right_menu{ width: 75%; right: -75%; }
  .main_visual .main_slider{ height: 400px; }
  .main_visual .main_slider .slide_box{ height: 400px; }
  .main_visual .main_slider .slide_box > div strong{ font-size: 40px; line-height: 52px; margin-bottom: 15px; }
  .main_visual .main_slider .slide_box > div span{ font-size: 16px; margin-bottom: 0; }
  .main_visual .main_slider .slide_box > div .more a{ padding: 12px 35px; }
  .main_visual .main_slider .slide_box > div .more a:after{ padding: 12px 35px; }
  #main .con01 ul > li .text_box strong{ font-size: 18px; line-height: 36px; }
  #main .con01 ul > li .text_box p{ margin-top: 0; }
  #main .con03{ padding: 70px 0; }
  #main .con04 .text_box a{ padding: 12px 35px; }
  #main .con04 .text_box a:after{ padding: 12px 35px; }
  #main .con04{ background-position: right -400px center; }
  #main .con04 .text_box > span{ font-size: 16px; margin-bottom: 0; }
  #main .con04 .text_box > strong span{ font-size: 28px; }
  #main .con04 .text_box > strong{ font-size: 20px; }
  #main .con04 .text_box dl dt{ font-size: 14px; }
  #main .con04 .text_box dl dd{  font-size: 14px; }
  #main .con03 .inner .left_box .text_box strong{ font-size: 25px; }
  #main .con03 .title strong{ font-size: 36px; }
  #main .inner{ padding: 0 20px; }
  #footer .inner{ padding: 0 20px; text-align: center; }
  #footer .inner h1{ float: none; margin: 0 auto; display: inline-block; margin-bottom: 20px; }
  #footer .inner address{ float: none; width: 100%; font-size: 13px; line-height: 25px; word-break: keep-all; }
  #footer .inner .copy_right{ font-size: 13px; line-height: 25px; word-break: keep-all; float: none; }
  #footer{ padding: 40px 0;  }
}


@media (max-width:640px){
  #main .con02 .title img{ width: 100px; }
  #main .con02 ul li{ width: 50% !important; }
  #main .con02 .list01 li .text_box strong{ font-size: 20px; }
  #main .con02{ padding: 70px 0; }
  #main .con01{ padding: 70px 0; }
  #main .con01 ul > li{ width: 100%; max-width: 396px; margin: 0 auto; margin-bottom: 40px; float: none; }
  #main .con01 ul > li:last-child{ margin: 0 auto; }
  #main .con02 ul li .text_box img{ height: 15px; }
  #main .con02:after{ width: 300px; height:326px; background-size: 100% 100%; right: 0; }
  #main .con04{ padding: 40px 0; }
  #header.on .wrap{ padding: 15px 20px; }
  #header .wrap{ padding: 20px; }
  #header .menu_btn{ right: 20px; }
  #main .con03 .inner .right_box ul li .text_box strong { font-size: 14px; }
  #main .con03 .inner .right_box ul li .text_box{ width: 60%; padding-left: 15px; }
  #main .con03 .inner .right_box ul li .video_box{ width: 40%; margin-right: 0; }
  #footer .sns_nav{ right: 15px; }
  #footer .sns_nav ul li a{ width:32px; height: 32px; }
  #footer .sns_nav ul li a i img{ height: 15px; }

  #footer .sns_nav ul li:nth-child(1) a i img{ height: 14px; }
  #footer .sns_nav ul li:nth-child(2) a i img{ height:10px; }
  #footer .sns_nav ul li:nth-child(3) a i img{ height: 14px; }
  #footer .sns_nav ul li:nth-child(4) a i img{ height: 14px; }
  #footer .sns_nav ul li:nth-child(6) a i img{ height: 13px; }
  #footer .sns_nav ul li:nth-child(7) a i img{ height:30px;}
  .main_visual .main_slider .slide_box > div .more a{ padding: 10px 0; }
  .main_visual .main_slider .slide_box > div .more a:after{ padding: 10px 0; }
  .main_visual .main_slider .slide_box > div .more a{ width: 180px; }
}


@media (max-width:540px){
  #header .logo{ width: 40px; height: 42px; }
  #header .menu_btn{ top: 25px; }
  #header.on .menu_btn{ top: 19px; }
  .main_visual .main_slider .slide_box{ height: 280px; }
  .main_visual .main_slider{ height: 280px; }
  .main_visual .main_slider .slide_box .main_img img{ max-height: 100%; }
  .main_visual .main_slider .slide_box > div strong{ font-size: 24px; line-height: 30px; margin-bottom: 7px; }
  .main_visual .main_slider .slide_box > div span{ font-size: 12px; line-height: 24px; }
  #footer .w_btn{ top: 200px; }
  .main_visual .main_slider .slide_box > div .more a:after{ padding: 7px 12px;  }
  .main_visual .main_slider .slide_box > div .more a{ padding: 7px 12px;  }
  .main_visual .thum_wrap{ display: none; }
  #main .con02 ul li .img_box{ width: 120px; height: 120px; }
  #main .con02 ul li .img_box img{ width: 100%; }
  #main .con03{ padding: 50px 0; }
  #main .con03 .inner .left_box .text_box strong{ font-size: 20px; line-height: 32px; }
  #main .con03 .inner .right_box ul li .video_box img{ width: 100%; }
  #main .con03 .inner .right_box ul li .text_box strong{ transform: translate(0,35%);}
  #main .con04{ background-size: auto 100%; background-position: right -200px center; position: relative; }
    #main .con04:after{ content: ""; display: block; width: 100%; height: 100%; background-color: #222; opacity: .5; position: absolute; left: 0; top: 0; }
        #main .con04 .inner{ position: relative; z-index: 1;  }
  #right_menu{ padding-top: 120px; padding-left: 30px; }
  #right_menu{ transition: 0.5s ease-in-out; }
  #right_menu .sns_nav{ padding-top: 30px; }
  #right_menu .all_menu > ul > li > button{ font-size: 20px; }
  #right_menu .all_menu > ul > li > ul > li > a{ font-size: 15px; }
  #right_menu .all_menu > ul > li > ul > li{ line-height: 40px; }
  #right_menu .sns_nav{ bottom: 40px; }
  #main .con04 .text_box a:after{ font-size: 14px;  }
  .main_visual .main_slider .slide_box > div .more a:after{ font-size: 14px; }
  #right_menu .sns_nav{ padding-left: 20px; }
  #right_menu .sns_nav ul{ padding-top: 20px; }
  #right_menu .sns_nav ul li{ margin-right: 8px; }
  #right_menu .sns_nav ul li a{ width: 32px; height: 32px; }
  #right_menu .sns_nav ul li:nth-child(3) img{ height: 20px; }
  #header.main_header{ background-color: #fff; }
  #header.main_header .logo a{ background-position: left 100% top; }
  #header.main_header .menu_btn{ border: 2px solid #313131; }
  #header.main_header .menu_btn span{ background-color: #313131; }
  #header.main_header .wrap{ padding: 15px 20px; }
  #header.main_header .menu_btn{ top: 19px; }
  #main{ margin-top: 72px; }
  #main .con03 .inner .right_box ul li .video_box img{ height: auto; }
  #main .con03 .inner .left_box .text_box strong{ font-size: 16px; line-height: 30px; }
  #main .con03 .inner .left_box .text_box span{ font-size: 13px; margin-bottom: 5px; }
  #main .con03 .title strong{ font-size: 26px; }
  #main .con03 .inner .right_box ul li .text_box strong{ font-size: 13px; line-height: 22px; }
  #main .con01 ul > li .text_box strong{ height: auto; max-height: 56px; margin-bottom: 12px; font-size: 16px; line-height: 28px; }
  #main .con01 ul > li .text_box span{ margin-bottom: 5px; font-size: 13px; }
  #main .con01 ul > li .text_box{ padding-top: 20px; }
  #main .con01 ul > li .text_box p{ font-size: 13px; line-height: 25px; height: 75px; }

  #footer.on .w_btn{ top: 140px; }
    #footer .w_btn2{ transform: translateY(60px); }
    #footer .w_btn3{ transform: translateY(120px); }
}

@media (max-height:500px){
  .main_visual .main_slider .slide_box > div strong{ font-size: 30px; line-height: 42px; }
  #right_menu .sns_nav{ position: static; margin-top: 50px; margin-bottom: 50px; }
  #right_menu{ overflow-y: scroll; }

}

@media (max-width:375px){
#footer.on .w_btn{ top: 80px; }
}

@media (max-width:365px){
#footer.on .w_btn{ top:60px; }
}