
.main_visual										{position:relative; margin:0 auto;}


/* 메인비쥬얼_스크롤 start*/

.vis_txt_ani{ position: absolute; left: 8%; z-index:10; display: flex; align-items: center; height: 100%; max-width: 1635px; margin: 0 auto; }
.vis_txt_ani .vis_txt{ font-size: 20px; font-weight: 500;}
.vis_txt_ani .vis_ani_top{ font-size: 80px; font-weight: 700; justify-content: flex-start; align-items: center; flex-flow: row wrap; line-height: 1.2; }
.vis_txt_ani .vis_ani_top .vis-text-slide{ color: var(--main-color); overflow: hidden; height: 60px; line-height: 60px; width: 490px; }
.vis_txt_ani .vis_ani_top .ani_t2{ width: 100%;}


.main_visual_scroll{ position: absolute; bottom: 68px; left: 8%; text-align: center; z-index: 9;  transition: all 0.6s cubic-bezier(0.47, 0, 0.745, 0.715);}
.main_visual_scroll .scroll_circle{ display: block; position: relative; width: 12px; height: 26px;  border: 2px solid #686868; margin: 0 auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px;}
.main_visual_scroll .scroll_circle:before{ position: absolute; content: ""; left: 1.3px; top: 5px; width: 4px; height: 4px; background-color: #686868; opacity: 0; -webkit-border-radius: 50%;-moz-border-radius:50%; -o-border-radius: 50%; border-radius: 50%; animation: mouseScroll 1.5s infinite;}
.main_visual_scroll::after{ content: ""; display: block; width: 2px; height: 80px; background: #686868; position: absolute; bottom: -80px; margin: 0 auto; left: 0; right: 0; }

@keyframes mouseScroll {
  0% { opacity:1; transform: translateY(0px) }
  100% {opacity:0; transform: translateY(8px)}
}
/* 메인비쥬얼_스크롤 end*/


/*  */
section{ position: relative; width: 100%; margin: 0 auto; cursor: default; }
.m_inner{ max-width: 1635px; margin: 0 auto; }
.m_inner1{ max-width: 1200px; margin: 0 auto;}
.m_pding2{ padding-bottom: 200px;}
.m_pding{ padding-top: 200px; padding-bottom: 200px;}
.m_title{ margin-bottom: 75px; }
.mtit{ font-size: 45px; line-height: 1.2; overflow: hidden; transition: all .5s ease; font-weight: 600; }
.mtit strong{ font-weight: 800;}
.mtxt{ font-size: 17px; font-weight: 500; color: var(--font-s-color); overflow: hidden; transition: all .5s ease; margin-top: 15px; }
.move_tt{ display: inline-block; transform: translateY(100%);}
.m_info{ text-align: center;}
.ms_tit{ font-size: 26px; font-weight: 700; text-transform: uppercase; color: var(--w-color);}
.ms_txt{ font-size: 17px; color: var(--w-color);}
.mc_tit{ font-size: 20px; font-weight: 700; margin: 25px 0 10px;}
.mc_txt{ color: var(--font-b-color);}

/* bg_img_move */
.m_bg_in{ position: relative; display: block; width: 100%; margin: 0 auto; overflow: hidden;}
.mbg_eff{ position: absolute; display: block; z-index: -1;}
.mbg_eff img{ display: block; width: 100%; }
.mbg_obj1{ top: 0; right: -1px;}
.mbg_obj2{ top: 30%; left: -1px;}
.mbg_obj3{ top: 40%; right: 3%;}
.mbg_obj4{ bottom: 10%; right: -1px; }
.mbg_obj5{ bottom: 0%; left: 3%; }
/* bg_img_move_end */


.main_01 .m_title, .main_03 .m_title { text-align: center;}

/* m01 */
.main_01 .flex{ justify-content: space-between; }
.main_01 .flex > div{ width: 48%; position: relative; display: block; overflow: hidden; } 
.main_01 .flex > div a{ width: 100%; height: 100%; display: block; text-align: center; }
.main_01 .m_img{ position: relative; display: block; overflow: hidden; transition: all .5s;}
.main_01 .m_img::after{ content: ""; display: block; position: absolute; left: 0; top: 0; background: linear-gradient(to top, #342006 30%, #f8981d); width: 100%; height: 100%; transition: all .5s; opacity: 0; z-index: -1;}
.main_01 .m_img > img{ display: block; width: 100%; }
.main_01 .lbox .m_img{ border-radius: 65px 0 0 0;}
.main_01 .rbox .m_img{ border-radius: 0 0 65px 0; }
.main_01 .m_info{ position: absolute; width: 100%; left: 50%; top: 55%; transform: translate( -50%, -50%); z-index: 10; transition: all .5s;}
.main_01 .ms_tit{ margin: 25px auto 15px;}
.m_link{ font-weight: 500; color: var(--w-color); display: flex; align-items: center; justify-content: space-evenly; width: 65%; margin: 0 auto; padding-top: 70px; opacity: 0;}
.m_link span{ position: relative; width: 45px; height: 45px; border-radius: 100%; background: var(--main-color); display: inline-block; vertical-align: middle;}
.m_link span s{ position: absolute; top: 50%; left: -45px; transform: translateY(-50%); transition: all .3s; width: 72px; height: 14px; background: url("./img/arrow-1.png") no-repeat; background-size: 100% auto; }

.main_01 .flex > div:hover .m_img{ border-radius: 0 !important;}
.main_01 .flex > div:hover .m_img::after{ opacity: .8; z-index: 1; transition: all .5s ease; }
.main_01 .flex > div:hover .m_info{ top: 50%;}
.main_01 .flex > div:hover .m_link{ opacity: 1;}



/* m02 */
.main_02 .flex > div{ width: 50% !important;}
.main_02 .m_img{ overflow: hidden; border-radius: 20px; margin-top: 75px; }
.main_02 .m_title .m_img{ width: 90%;}
.main_02 img{ display: block; width: 100%;}

.m2_wrap{ padding-left: 35px; }
.m2_wrap .m_info{ text-align: left;}
.m2_wrap .ml_1{ max-width: 450px;}
.m2_wrap .ml_2{ max-width: 530px; margin: 0 0 0 auto;}
.m2_wrap .ml_3{ max-width: 380px;}

/* m03 */
.main_03 .m_con{ width: 100%; border-top: 1px solid var(--line-color); padding: 85px 0;}

/* m04 */
.main_04{ position: relative; background: url("./img/m04_bg.jpg") no-repeat center left; width: 100%; display: block; padding: 155px 0; }
.main_04::before, .main_04::after{ content: ""; display: block; width: 1px; height: 100%; background: var(--line-color); position: absolute; right: 280px; top: 0; opacity: .3;}
.main_04::after{ right: 135px;}
.main_04 .m_title, .main_04 .mtxt{ color: var(--w-color);}
.main_04 .m_title{ margin-bottom: 0; width: 70%;}
.main_04 .flex{ align-items: center; justify-content: space-between;}
.m4_link{ width: 30%; display: flex; justify-content: flex-end; }
.m4_link a{ display: block; color: var(--w-color); padding: 60px 0; transform: rotate(90deg); transition: all .4s ease;}
.m4_link a i{ position: relative; padding-left: 10px;   transition: all .4s; }
.m4_link a:hover i{  transform: translateX( -10px);} 

@media(max-width: 1620px){
  .main_04 .m_title{ padding-left: 3%; }
}

@media(max-width: 1320px){
  .m_inner1{ padding: 0 3%;}
}
@media(max-width: 1080px){
  .vis_txt_ani{ left: auto; padding: 0 3%;}
  .vis_txt_ani .vis_ani_top{ font-size: 60px; }
  .vis_txt_ani .vis_txt{ font-size: 18px;}
  .vis_txt_ani .vis_ani_top .vis-text-slide{ width: 370px;}

  .m_pding{ padding-top: 100px; padding-bottom: 100px;}
  .m_pding2{ padding-bottom: 100px;}
  .m_title{ margin-bottom: 50px;}
  .mtit{ font-size: 38px;}
  .mtxt{ font-size: 16px; margin-top: 10px;}
  .ms_tit{ font-size: 22px; }
  .ms_txt{ font-size: 16px; line-height: 1.6;}
  .mc_tit{ font-size: 18px; margin: 15px 0 5px;}
  .mc_txt{ font-size: 15px;}
  .main_01 .ms_tit{ margin: 15px auto 10px; }
  .m_icon img{ width: auto; height:78px; display: block; margin: 0 auto;  }
  .main_02 .m_title{ padding-top: 80px !important;}  
  .main_02 .m_title .mtxt br{ display: none;}
}
@media(max-width: 780px){
  .vis_txt_ani .vis_ani_top{ font-size: 45px;}
  .vis_txt_ani .vis_txt{ font-size: 16px; }
  .vis_txt_ani .vis_ani_top .vis-text-slide{ width: 270px;}
  
	.main_visual_scroll{ display: none;}
  .mtit br{ display: none;}
  .main_01 .flex > div{ width: 100%; height: 50vh; }
  .main_01 .flex > div:nth-child(1){ margin-bottom: 5%;}
  .main_01 .m_img{ height: 100%;}
  .main_01 .m_info{ left: 0; top: 25%; transform: translate(0, 0); padding: 0 5%;}

  .main_02 .flex > div{ width: 100% !important; margin-bottom: 0; padding-top: 0 !important; padding-left: 0;}
  .m2_wrap .ml_3{ max-width: 100%;}
  .main_02 .m_title .m_img{ display: none; }
  .main_03 .m_con{ padding: 10% 0;}
  .mbg_obj3{ top: 60%;}
  
  .main_04{ padding: 15% 0;}
  .main_04 .m_title{ width: 100%;}
  .m4_link{ width: 100%; justify-content: flex-start;}
  .m4_link a{ transform: rotate(0); padding: 10% 3% 0;}
}
@media(max-width: 500px){
  .vis_txt_ani .vis_txt{ font-size: 15px;}
  .m_pding{ padding-top: 15%; padding-bottom: 15%;}
  .m_pding2{ padding-bottom: 15%;}
  .mtit{ font-size: 30px;  line-height: 1.4;}
  .mtxt{ font-size: 15px; margin-top: 10px;  line-height: 1.6;}
  .ms_tit{ font-size: 18px;  line-height: 1.6;}
  .ms_txt{ font-size: 15px; }
  .mc_tit{ font-size: 16px;  line-height: 1.6;}
  .mc_txt{ font-size: 14px;  line-height: 1.6;}
  .ms_txt br{ display: none;}
  .m_icon img{ height: 68px;}
}