/*

font-family : 'Noto Serif KR', serif;
font-family : 'Noto Sans KR', sans-serif;
font-family : 'NanumSquare', sans-serif;

font-family: 'GmarketSansLight';
font-family: 'GmarketSansMedium';
font-family: 'GmarketSansBold';

font-family: 'NEXON Lv1 Gothic OTF Light';
font-family: 'NEXON Lv1 Gothic OTF';
font-family: 'NEXON Lv1 Gothic OTF Bold';

font-family: 'Pretendard', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;

*/




* { margin: 0; padding: 0; outline: none;}
html,body { width: 100%; height: 100%; min-width: 1064px; position: relative; }
html {font-size: 17px;}
body.hidden {overflow: hidden;}
ul,li {list-style: none;}
a {text-decoration: none; color: inherit;}
p, span, h1, h2, h3, h4, h5, h6, a, li, div {font-family: 'Pretendard', 'sans-serif';}
.mob {display: none;}
.pc {display: block;}
#header {min-width: 1064px;}
.roboto {font-family: 'Roboto', sans-serif !important;}



/* 초기화 영역 끝 */



/*header*/
.wrap {width: 100%; position: relative;}
#header {width: 100%; position: absolute; left: 0; top: 0; height: 80px; z-index: 100;  transition: all 0.4s; box-sizing: border-box;}
#header:hover {height: 300px;background-color: rgba(255,255,255,1);}
#header::after {position: absolute;top: 79px;  width: 100%;  content: "";  left: 0px;  background-color: #d9d9d9; height: 1px;  z-index: -1;}
#header.hide {margin-top: -80px;}
#header_inner {width: 90%;height: 100%;overflow: hidden; margin: 20px auto 0px; font-size: 0px; transition: all 0.4s;}

#header_logo {width: 10%; display: inline-block; vertical-align: top; position: relative;}
#header_logo a { display: block; width: 100%; line-height: 50px;}
#header_logo img { width: 100%; max-width: 70px; position: absolute; left: 0px; top: 0px; transition: all 0.4s;}
#header_logo img:nth-child(1) { opacity: 1;}
#header_logo img:nth-child(2) { opacity: 0;}
#header:hover #header_logo img:nth-child(1) { opacity: 0;}
#header:hover #header_logo img:nth-child(2) { opacity: 1;}

.nav_box { width: 50%; margin-top: 10px; display: inline-block; vertical-align: middle; font-size: 0px; text-align: center;}

#nav { width: 100%; font-size: 0px; text-align: center;}
#nav > li {cursor: pointer;display: inline-block; width: 16.666%; font-size: 0.95rem;  color: #fff;  vertical-align: top;  transition: all 0.4s; font-weight: 500; position: relative;}
#header:hover #nav > li {color: #000;}
#nav > li::after { content: "";  width: 100%;  height: 2px;  position: absolute;  left: 0px;  top: 49px; background-color: #fd8a2c;  opacity: 0; transition: all 0.4s;}
#nav > li:hover::after {opacity: 1;}
.nav_ul { width: 100%; padding: 10px; display: none; margin-top: 40px; box-sizing: border-box; font-weight: normal;}
#header:hover .nav_ul {display: block;}
.nav_ul li { font-size: 0.85rem;  line-height: 1.3;  margin-bottom: 15px;  color: #333333;  transition: all 0.4s; text-transform: capitalize;  word-break: keep-all;}
#nav > li.m_sub_li {display: none;}
.nav_ul li a {display: inline-block; transition: all 0.4s; }
.nav_ul li:hover a {color: #fd8a2c;}





#right_header { font-size: 0px;  display: inline-block;  width: 40%;  vertical-align: top;  text-align: right; margin-top: 5px;}
#right_header > li {vertical-align: top;  text-align: center;  display: inline-block; box-sizing: border-box;  }
#lang { width: 100%;  max-width: 75px;  cursor: pointer;  position: relative;  font-size: 0.9rem;   text-transform: uppercase;  overflow: hidden;padding: 5px 10px; color: #fff; transition: all 0.4s; margin-right: 15px;}
#lang > i {font-size: 1.1rem;}
#lang .lang_sub { width: 100%; height: 0px; transition: all 0.4s; }
#lang:hover .lang_sub{height: 85px; }
#lang .lang_sub li { display: block; position: relative; padding: 4px 0px; font-size: 0.8rem;}
#lang .lang_sub li:nth-child(1) {padding-top: 10px;}
#lang .lang_sub li a {display: inline-block; border-bottom: 1px solid transparent; transition: all 0.4s; color: inherit;}
#lang .lang_sub li:hover a {border-bottom: 1px solid #fd8a2c;}
#lang:hover {color: #fff;  background-color: #fd8a2c; border-color: #fd8a2c;}
#lang:hover .lang_sub li:hover a {border-bottom: 1px solid #fff;}
#header:hover #lang {color: #fff;  background-color: #fd8a2c; border-color: #fd8a2c;}
#header:hover #lang .lang_sub li:hover a {border-bottom: 1px solid #fff;}

.sch_btn {cursor: pointer; line-height: 35px; margin-right: 2px; padding-right: 12px; position: relative;}
.sch_btn::after {content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: rgba(255,255,255,0.3);}
.sch_btn .iconbox {position: relative; width: 18px; height: 35px;}
.sch_btn .iconbox img {width: 18px; transition: all 0.4s; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}
.sch_btn .iconbox img:nth-child(1) {opacity: 1;}
.sch_btn .iconbox img:nth-child(2) {opacity: 0;}
#header:hover .sch_btn .iconbox img:nth-child(2) {opacity: 0;}
#header:hover .sch_btn .iconbox img:nth-child(2) {opacity: 1;}
#header:hover .sch_btn::after {background-color: #ddd;}

.schbox {position: absolute; right: 0px;  top: 80px; width: 350px;  padding: 10px; box-sizing: border-box; transition: all 0.4s; opacity: 0; pointer-events: none; font-size: 0;}
.schbox.on {opacity: 1; pointer-events: initial;}
.schbox #hd_sch {border:0px; border-radius: 0px !important;}
.schbox #sch_str { width: calc(100% - 35px) !important; box-sizing: border-box; border: 1px solid #ddd !important;  line-height: 30px;  padding: 0px 10px; background-color: #fff !important;  backdrop-filter: blur(3px); font-size: 13px !important;  float: none !important;  height: auto !important;  padding-left: 10px !important;  border-radius: 0px !important;  color: inherit !important;}
.schbox #sch_str:focus {border: 1px solid #ccc !important;}
.schbox #sch_str::placeholder { color:#666666; }
.schbox #sch_submit {width: 35px !important; vertical-align: top; height: 32px !important; border: 1px solid #ff951a!important; box-sizing: border-box; margin: 0px; padding: 0px; background: #ff951a!important; color: #fff !important; float: none !important; border-radius: 0px !important; font-size: 13px !important; cursor: pointer;}
.schbox #sch_submit .sound_only {display: none;}

#admin {font-size: 0.9rem;line-height: 35px;text-transform: uppercase;margin-left: 15px;margin-right: 10px;  color: #fff;transition: all 0.4s;}
#admin a {display: inline-block; color: inherit; margin-right: 10px;}
#admin a:last-child {margin-right: 0px;}
#header:hover #admin {color: #ff951a;}
 

#sitemap { width: 100%;  max-width: 90px;  cursor: pointer;  position: relative;  margin-right: 20px;  font-size: 0.9rem;  border: 1px solid #fff;text-transform: uppercase;  overflow: hidden;  padding: 5px 10px;  color: #fff; }
#sitemap.pc {display: none;}
#sitemap.mob {display: none;}  
#sitemap a {display: block; width: 100%; height: 100%;}
#sitemap i {font-size: 2rem; color: #fff; transition: all 0.4s;}
#header:hover #sitemap {color: #fff;  background-color: #fd8a2c; border-color: #fd8a2c;}

.menu_icon {z-index: 100; position: relative; width: 40px; height: 30px;  cursor: pointer;}
.menu_icon span {width: 40px; height: 2px; background-color: #fff; display: block;  margin-bottom: 5px;  transition: 0.4s;}
.menu_icon span:last-child { height: auto; background-color: transparent; margin-bottom: 0; font-size: 0.7rem; color: #fff; letter-spacing: 2px;}
#header:hover .menu_icon span  { color: #666; background-color: #666;}
#header:hover .menu_icon span:last-child { background-color: transparent;}
#header.on #menu_icon {background-color: #fd8a2c;}
#header.on #nav-icon:hover span {background-color: #666;}
#header.on #nav-icon:hover span:nth-child(3) {background-color: transparent;}
#sitemap {margin-top: -5px;}
#sitemap i {font-size: 2rem; color: #fff; transition: all 0.4s;}
#header:hover #sitemap i{ color: #666666;}

#nav-icon.open span { background-color: #666; position: absolute;}
#nav-icon.open span:nth-child(1) { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg);left: 0px; top: 5px;}    
#nav-icon.open span:nth-child(2) { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); left: 0px; top: 5px; }   
#nav-icon.open span:nth-child(3) { bottom: 0; background-color: transparent; color:#666;}


.nav_box2 { position: fixed;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  z-index: 10;  background-color: #fff; margin: 0px; pointer-events: none; overflow-y: scroll; overflow-x: hidden; -ms-overflow-style: none; opacity: 0; -webkit-transition: .25s ease-in-out;  -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#header.on .nav_box2 {opacity: 1; pointer-events: initial; }
.nav_box2::-webkit-scrollbar {display: none; }
.nav_box2_cont { width: 100%;  font-size: 0px;  height: 100%;}
.nav_box2_cont > li { display: inline-block; vertical-align: top; height: 100%; box-sizing: border-box;}
.nav_box2_cont > li.left { width: 35%; background: url(../image/navbox2_bg.png) no-repeat center/cover; position: relative;  padding: 6vh 2%; overflow: hidden;}
.nav_box2_cont > li.left .title { font-size: 3rem; font-weight: 600;  line-height: 1.3; color: #fff;
position: relative; border-bottom: 0px;}
.nav_box2_cont > li.left .title::after { content: "";  display: block;  width: 2px;  height: 100px;  background-color: #ffffff;  margin-left: 10px;  margin-top: 20px;  opacity: 0.8;}
.nav_box2_cont > li.left img {position: absolute; right: -12%; bottom: 7vh;  width: 90%; opacity: 0.5;}
.nav_box2_cont > li.right { width: 65%; padding: 10vh 5%;}
#nav2 { width: 100%; font-size: 0px;}
#nav2 > li { display: inline-block;  width: 25%;  vertical-align: top;  margin-bottom: 10vh;}
#nav2 > li.bottom {margin-bottom: 0px;}
#nav2 > li > .tit {  font-weight: 800;  font-size: 1.8rem;  letter-spacing: -0.75px;  text-transform: uppercase;  color: #1a1a1a;  position: relative;}
#nav2 > li > .tit:hover {transition: all 0.4s; color: #ff951a;}
#nav2 > li > .tit::after { content: "";  display: block;  width: 2px;  height: 20px;    background-color: #ff951a;  margin-left: 3px;  margin: 10px 0px 10px 3px;}
.nav_ul2 { width: 100%;}
.nav_ul2 > li { font-size: 1rem;  line-height: 1.7;  margin-bottom: 10px;}
.nav_ul2 > li:last-child {margin-bottom: 0px;}
.nav_ul2 > li a {display: inline-block; color: #757575; border-bottom: 1px solid transparent;
transition: all 0.4s;}
.nav_ul2 > li:hover a { border-bottom: 1px solid #757575;}



/*footer*/



.footer {  width: 100%;  z-index: 10;  position: relative;  background: #cccccc;}

.top_btn {position: absolute;right: 0%;top: -20px;cursor: pointer; background-color: #c5c5c5; width: 90%;
max-width: 40px; text-align: center; padding: 10px 0px 8px; transition: all 0.4s;}
.top_btn:hover { background:#FF951A;}
.top_btn p { font-size: 1.1rem; line-height: 1.3; color: #fff; position: relative; text-align: center;}
.top_btn p::before { content: ""; display: block; width: 12px; height: 2px; margin: auto; background-color: #fff; margin-bottom: 2px;}
.top_btn p i {display: block;}    


.f_wrap {  width: 90%;  margin: auto;  padding: 5vh 0px;}

.f_logo {  width: 100%; margin-bottom: 5vh;}
.f_logo img { max-width: 245px;  width: 100%;}

.f_wrap_ul {  width: 100%; font-size: 0px;  position: relative;}
.f_wrap_ul > li {display: inline-block; vertical-align: bottom; width: 50%;}
.f_wrap_ul > li.info1 p { font-size: 0.9rem;  line-height: 1.7; color: #666666;}
.f_wrap_ul > li.info1 p > span { position: relative;  display: inline-block;  vertical-align: middle;}
.f_wrap_ul > li.info1 p > span > span { position: relative;  display: inline-block;  vertical-align: middle;}
.f_wrap_ul > li.info1 p:nth-child(2) > span::after { content: "";  background-color: #666666;  width: 1px;  height: 15px;  display: inline-block;  vertical-align: middle;  margin: 0px 20px;}
.f_wrap_ul > li.info1 p:nth-child(2) > span:last-child:after {display: none;}

.f_wrap_ul > li.info2 { text-align: right;}
.f_wrap_ul > li.info2 .copy { font-size: 0.9rem;  line-height: 1.7;  color: #666666;  display: inline-block;  vertical-align: middle;  margin-right: 20px;}
.f_lang { font-size: 0.9rem;  color: #666666;  display: inline-block;  background-color: #fff;  position: relative;  width: 185px;  padding: 10px;  box-sizing: border-box; text-align: left;     cursor: pointer;}
.select_lang {  position: relative;  width: 100%;  z-index: 5;  background: #fff;}
.select_lang i { position: absolute;  right: 0px;  top: 0px;}
.f_lang_cont { position: absolute;  left: 0px;  bottom: 0px;  background-color: #fff;  padding: 10px;  box-sizing: border-box;  transition: all 0.4s;  width: 100%;  height: 0px;  overflow: hidden; z-index: -1;line-height: 25px;}
.f_lang.on .f_lang_cont { bottom: 38px; height: 85px;  z-index: 0;}
.f_lang_cont > li { display: block;}
.f_lang_cont > li a {display: block; border-bottom: 1px solid transparent; transition: all 0.4s;}
.f_lang_cont > li:hover a {color:#fd8a2c;}



/* main */

.main {width: 100%; position: relative; }
.center {text-align: center;}
.main_inner { width: 90%; max-width: 1200px; margin: auto}
.main_inner2 { width: 80%; max-width: 1500px; position: absolute;  left: 50%; top: 50%;  transform: translate(-50% ,-50%);}
.m_txt1 { font-size: 1.2rem; line-height: 1.3;  word-break: keep-all;  color: #1a1a1a;}
.m_txt2 { font-weight: 700;  line-height: 1.2;  letter-spacing: -1px;  color: #000000;  font-size: 3rem;  margin-top: 4vh;  margin-bottom: 3vh; text-transform: capitalize;}
.m_txt3 { font-size: 1rem;  line-height: 1.3;  color: #666666;}


.upper {text-transform: uppercase !important;}
.white {color: #fff !important;}
.black {color: #1a1a1a !important;}
.bold0 {font-weight: 600 !important;}
.bold {font-weight: 700 !important;}
.bold2 {font-weight: 800 !important;}

.main_top { display: none;  position: fixed;  right: 30px;  bottom: 30px;  width: 60px;  height: 60px;  border-radius: 100%; background-color: #fff; z-index: 10; cursor: pointer; color: #ff951a; transition: all 0.4s; box-shadow: 3px 4px 8px rgb(0 0 0 / 30%);}
.main_top i { font-size: 1.5rem;  position: absolute;  left: 50%;  top: 48%;  transform: translate(-50%,-50%);}
.main_top:hover {background-color: #ff951a; color: #fff;}
.fp-viewing-INTRO .main_top, .fp-viewing-FOOTER .main_top {opacity: 0; z-index: -999;}

.m2::before, .m3::before, .m4::before, .m5::before, .m6::before, .m7::before { content:""; position:absolute;  left: 5%;  top: 0px; width: 1px;  height: 100%;  background-color: #d9d9d9; z-index: 10;  opacity: 0.8; transition: all 0.4s;}
.m1::before { content: ""; position: absolute;  left: 5%;  top: 80px;  width: 1px;  height: calc(100% - 80px); background-color: #d9d9d9; z-index: 10;  opacity: 0.8;}
.main::after { content: "";  background: url(../image/scroll_icon.png) no-repeat center/100%;  width: 20px;  height: 55px;  position: absolute;  left: calc(5% + 20px);  bottom: 8%;  z-index: 10; animation: scroll_mov 3s infinite;}
.main.m7::after, .main.m8::after {display: none;}

@keyframes scroll_mov {
    0% {
      bottom:8%
    }  
    50% {
     bottom:12%
   }
   100% {
    bottom:8%
  }
  }




/* main1 */
.m1 .move {opacity: 0;}
.m1 {width: 100%; height: 95vh;}
.m1 .swiper-container {height: 100%;}
.m1 .swiper-slide {width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }

#ms1_1 {background-image: url(../image/ms1_img1.png);}
#ms1_2 {background-image: url(../image/ms1_img2.png);}
#ms1_3 {background-image: url(../image/ms1_img3.png);}

.ms1_text {  width: 80%;  max-width: 1200px;  position: absolute;  left: 50%;  top: 55%;  transform: translate(-50%, -50%); z-index: 3;}
.ms1_text img {display: block; margin: auto;}
.ms1_text_1 { font-weight: 500;  font-size: 1.2rem;  line-height: 1; text-transform: uppercase;  color: #fff;}
.ms1_text_1 span { padding: 5px 10px; box-sizing: border-box;  display: inline-block;  background: linear-gradient(to right, #bb441c, #fd8a2c);}
.ms1_text_2 { font-weight: 600;  font-size: 4rem;  line-height: 1.2;  color: #FFFFFF;  margin: 10px 0px 35px;  text-transform: uppercase; text-shadow: 3px 3px 7px rgb(0 0 0 / 30%)}
.ms1_text_3 {font-size: 1rem; line-height: 1.7; color: #fff;}
.ms1_text_4 {font-weight: 600;font-size: 1.5rem;line-height: 1.3;border-bottom: 2px solid #fff;padding-bottom: 10px;margin-bottom: 10px;color: #fff;width: 470px;}

#ms1_1 .ms1_text {width: 50%;left: 55%;transform: translate(0,-50%);}

.ms1_videobox {position: absolute; top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index: 1;  padding: 0;  width: 100vw;  height: 100%;  overflow: hidden;}
.ms1_videobox .video {z-index: -1; width: 100vw; position: absolute; left: 50%; top: 50%;  transform: translate(-50%,-50%);}

@media screen and (max-aspect-ratio: 1219/685) {

  .ms1_videobox .video {  width: auto; height: 100%; }

}


.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: none;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: none;}

.ms1_btnbox {position: absolute;left: 50%;bottom: 5%; transform: translateX(-50%); text-align: center; padding:0px 30px; font-size: 0px; box-sizing: border-box; z-index: 10;;}
.ms1_btnbox .swiper-button-next, .ms1_btnbox .swiper-button-prev {color: #FFFFFF; font-size: 1rem; position: relative; display: inline-block; vertical-align: middle; top: auto; left: auto; right: auto;  margin: 0; width: auto; height: auto;}
.ms1_prev {left: 0px; }
.ms1_next {right: 0px}
.ms1_pag {position: relative; display: inline-block; vertical-align: middle; margin: 0px 5px;}
.ms1_pag  .swiper-pagination-bullet {background: transparent; opacity: 1; border: 2px solid #fff; box-sizing: border-box; margin: 0px 7px;}
.ms1_pag .swiper-pagination-bullet-active {background: #FFFFFF;}
.ms1_playbox {display: inline-block;vertical-align: middle; position: relative; font-size: 1rem; color:#fff; width: 15px; height: 17px; margin-right: 10px;}
.ms1_playbox .swiper-button-pause, .ms1_playbox .swiper-button-play {position: absolute; left: 0px; top: 0px; display: none; cursor: pointer; line-height: 17px;}
.ms1_playbox .swiper-button-pause.on {display: block;}
.ms1_playbox .swiper-button-play.on {display: block;}

.m1_side { position: absolute;  right: 0px;  top: 50%;  transform: translateY(-50%);  z-index: 10;  font-size: 0px; width: 232px;text-align: center; transition: all 0.4s; }
.m1_side.toggle {right:-240px}
.m1_item { position: relative; transition: all 0.4s; overflow: hidden;}
.m1_item.item1 {float: right; mask: url(../image/m1_side_item1.png);  -webkit-mask-box-image: url(../image/m1_side_item1.png);}
.m1_item.item2 {float: left; margin: -82.5px 9.4px 0px; mask: url(../image/m1_side_item2.png);  -webkit-mask-box-image: url(../image/m1_side_item2.png);}
.m1_item.item3 {float: left; margin: -33px 0px; mask: url(../image/m1_side_item3.png);  -webkit-mask-box-image: url(../image/m1_side_item3.png);}
.m1_item.item4 {float: left; margin: 0px 11px -82px; mask: url(../image/m1_side_item4.png);  -webkit-mask-box-image: url(../image/m1_side_item4.png);}
.m1_item.item5 {float: right; mask: url(../image/m1_side_item5.png);  -webkit-mask-box-image: url(../image/m1_side_item5.png);}
.m1_item.item5::after {content: ""; display: block; clear: both;}
.m1_item_color { position: relative; display: block;}
.m1_item .m1_item_color::before {content: "";  background-color: #ff951a; display: block; position:absolute; left:0px; top:0px; width:100%; height:100%; opacity: 0.55; filter: brightness(0.9); transition: all 0.4s;}

.m1_item.item1 .m1_item_color { width: 139px;  height: 127px;}
.m1_item.item1 .m1_item_color::before {mask: url(../image/m1_side_item1.png);  -webkit-mask-box-image: url(../image/m1_side_item1.png);}
.m1_item.item1 .m1_item_color > .txtbox {left: 60%;  top: 50%; }

.m1_item.item2 .m1_item_color { width: 145px;  height: 150px; }
.m1_item.item2 .m1_item_color::before { mask: url(../image/m1_side_item2.png);  -webkit-mask-box-image: url(../image/m1_side_item2.png);}
.m1_item.item2 .m1_item_color > .txtbox {left: 50%;  top: 60%; }

.m1_item.item3 .m1_item_color {  width: 108px;  height: 144px; }
.m1_item.item3 .m1_item_color::before {mask: url(../image/m1_side_item3.png);  -webkit-mask-box-image: url(../image/m1_side_item3.png);}
.m1_item.item3 .m1_item_color > .txtbox {left: 50%;  top: 50%; }

.m1_item.item4 .m1_item_color { width: 145px;  height: 148px; }
.m1_item.item4 .m1_item_color::before { mask: url(../image/m1_side_item4.png);  -webkit-mask-box-image: url(../image/m1_side_item4.png);}
.m1_item.item4 .m1_item_color > .txtbox {left: 50%;  top: 50%; }

.m1_item.item5 .m1_item_color {  width: 137px;  height: 126px; }
.m1_item.item5 .m1_item_color::before {mask: url(../image/m1_side_item5.png);  -webkit-mask-box-image: url(../image/m1_side_item5.png);}
.m1_item.item5 .m1_item_color > .txtbox {left: 62%;  top: 55%; }


.m1_item_color > .txtbox { position: absolute;   width: 90%; transform: translate(-50%,-50%);}
.m1_item_color > .txtbox  p:nth-child(1) { font-size: 0.9rem;  letter-spacing: 0.9px;  text-transform: uppercase;  color: #fff;}
.m1_item_color > .txtbox .iconbox > i {transition: all 0.4s; font-size: 12px; color: transparent;}
.m1_item_color > .txtbox .iconbox .icon {width: 100%; max-width: 40px; margin: auto; display: block;  position: relative;}
.m1_item_color > .txtbox .iconbox .icon img {width: 100%; transition: all 0.4s;}
.m1_item_color > .txtbox .iconbox .icon img:nth-child(1) { opacity: 0; }
.m1_item_color > .txtbox .iconbox .icon img:nth-child(2) { position: absolute; left: 0;  top: 0;}

.m1_item:hover {z-index: 5;}
.m1_item:hover .m1_item_color::before { opacity: 1;  background-color: #fff;  filter: brightness(1);}
.m1_item:hover .m1_item_color > .txtbox p:nth-child(1) { color: #ff951a;}
.m1_item:hover .m1_item_color > .txtbox .iconbox > i {color:#ff951a}
.m1_item:hover .m1_item_color > .txtbox .iconbox .icon img:nth-child(1) {opacity: 1;}
.m1_item:hover .m1_item_color > .txtbox .iconbox .icon img:nth-child(2) {opacity: 0}

.m1_item_btn {position: absolute; right: 0px; top: 50%; transform: translateY(-50%);  z-index: 10; cursor: pointer;}
.m1_item_btn i {font-size: 3rem; color: #ff951a; padding: 10px; text-align: center; transition: all 0.4s;}
.m1_item_btn:hover i {color: #fff}
.m1_item_btn i:nth-child(2) { position: absolute; right: 0px; top: 0px;  opacity: 0;}
.m1_item_btn.toggle i:nth-child(1) { opacity: 0;}
.m1_item_btn.toggle i:nth-child(2) { opacity: 1;}

/*main2*/
.m2 .move {opacity: 0;}
.m2 {width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;background-image: url(../image/m2_bg.png); }

.m2_ul { font-size: 0px;  width: 100%;}
.m2_ul > li { display: inline-block;  vertical-align: bottom;  width: 25%; padding: 3vh 0px; box-sizing: border-box; text-align: center;}
.m2_ul > li.box1 { background: linear-gradient(30deg, #bb441c, #fd8a2c);}
.m2_ul > li.box2 { text-align: right;}
.m2_ul > li.box3 {background-color: #fff; padding:0px}
.m2_ul > li.box3::before { content: ""; position: absolute;  left: 10px;  top: 10px;  background-color: #ff951a;  width: 100%;  height: 100%;  z-index: -1;}
.m2_ul > li.box3 .txtbox { width: 100%;  height: 100%;  background-color: #fff;  padding: 3vh 0px;  box-sizing: border-box;}
.m2_ul > li.box4 { background-color: #fff;}
.m2_ul > li.box5 { background-color: #262626;}
.m2_txt1 { font-size: 1.3rem;  line-height: 1.3;  color: #FF951A; margin-bottom: 5vh;}
.m2_txt1 span {font-size: 4rem;display: inline-block;vertical-align: middle;margin-right: 5px;  font-weight: 500;}
.m2_txt2 { font-weight: 600;  font-size: 1.8rem;  line-height: 1.3;  text-transform: uppercase;  color: #262626;}
.m2_txt3 { font-size: 1rem;  line-height: 1.3;  text-transform: uppercase;  color: #666666;}
.m2_ul > li img {width: 100%; max-width: 70px; margin:auto; display: block; margin-top: 3vh;}


/*main3*/
.m3 .move {opacity: 0;}
.main_ul { width: 100%;  height: 100%;  font-size: 0px;}
.main_ul > li {  display: inline-block;  vertical-align: top;  width: 50%;  height: 100%;}
.main_ul > li.bg { background: no-repeat center/cover;}
.m3 .main_ul > li.bg { background-image: url(../image/m3_bg.png);}
.main_ul > li.txt { padding: 5%;  box-sizing: border-box;  position: relative; overflow: hidden;}

.main_ul > li.txt .txtbox_top { margin-bottom: 15vh;}
.main_ul > li.txt .txtbox_bottom p:nth-child(1) { font-weight: 700;  font-size: 2.2rem;  letter-spacing: -1px;
color: #1a1a1a;  margin-bottom: 2vh;}
.main_ul > li.txt .txtbox_bottom p:nth-child(2) { margin-bottom: 3vh;}

.more { display: inline-block;  transition: all 0.4s;  font-size: 1rem;  line-height: 1;  color: #666666;  font-weight: 300;}
.more .txt { display: inline-block;  vertical-align: middle;}
.more .arrow {  display: inline-block;  width: 40px;   height: 2px;  background-color: #666666;  position: relative;  margin-left: 5px;  transition: all 0.4s; vertical-align: middle; margin-top: 5px;}
.more .arrow::before { content: "";  position: absolute; right: 0px;top: -3px; width: 8px; height: 2px;background-color: #666666; transform: rotate(45deg); }
.more:hover .arrow {margin-left: 20px;}

.pro_img {position: absolute;  right: 0px;  bottom: 5%; z-index: -1;}
.pro_img.img1 { width: 100%;  max-width: 45%;}
.pro_img img {width: 100%;}



/*main4*/
.m4 .move {opacity: 0;}
.m4 .main_ul > li.bg { background-image: url(../image/m4_bg.png);}
.m4 .main_ul > li.txt {padding-left: 10%;}
.pro_img.img2 { width: 100%;  max-width: 38%;}



/*main5*/
.m5 .move {opacity: 0;}
.m5 .main_ul > li.bg { background-image: url(../image/m5_bg.png);}
.pro_img.img3 { width: 100%;  max-width: 80%;  bottom: 0%;}



/*main6*/
.m6 .move {opacity: 0;}
.main_ul2 { width: 100%;  height: 100%;  font-size: 0px;}
.main_ul2 > li {  display: inline-block;  vertical-align: top;  width: 50%;  height: 100%;}
.main_ul2 > li.cont { box-sizing: border-box;  position: relative; overflow: hidden;}
.main_ul2_ul { width: 100%; height: 100%;}
.main_ul2_ul > li { height: 50%; box-sizing: border-box; display: inline-block;  vertical-align: top;}
.main_ul2_ul > li.box1 {width: 100%; background: url(../image/m6_box1_bg.png) no-repeat center/cover; padding-left: 20%; position: relative;}
.main_ul2_ul > li.box1 .txtbox { position: absolute;  left: 20%;  top: 50%; transform: translate(0%,-50%);}
.main_ul2_ul > li.box1 .more { margin-top: 7vh;}
.main_ul2_ul > li.box2 { width: 50%;  background-color: #ff951a;  padding-left: 10%;}
.main_ul2_ul > li.box2 a { width: 100%;  height: 100%;  display: block; position: relative;}
.main_ul2_ul > li.box2 a img { position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  width: 90%; max-width: 160px; transition: all 0.4s;}
.main_ul2_ul > li.box2:hover a img {top: 45%;}
.main_ul2_ul > li.box3 { width: 50%; position: relative;}
.main_ul2_ul > li.box3 .txtbox { position: absolute;  left: 10%;  top: 50%; transform: translate(0%,-50%);}
.main_ul2_ul > li.box3 .more { margin-top: 10vh;}
.main_ul2_ul > li.box3 .box3_img { position: absolute;  right: 0px;  top: 0px;  width: auto;  height: 100%;  z-index: -1;}
.m6_txt1 { font-size: 1rem;  line-height: 1.3;  color: #b2b2b2;}
.m6_txt2 { font-weight: 600;  font-size: 2.6rem;  letter-spacing: -1.1px;  color: #1a1a1a;  margin: 1vh 0px 3vh;}
.m6_txt3 { font-size: 1.1rem;  line-height: 1.3;  color: #757575;}
.m6 .more { border: 1px solid #757575;  padding: 8px 15px;  box-sizing: border-box;  transition: all 0.4s;}
.m6 .more.white { border: 1px solid #fff;}
.m6 .more .arrow { margin-left: 35px;  transition: all 0.4s;}
.m6 .more.white .arrow { background-color: #fff;}
.m6 .more .arrow::before {background-color: #757575;   transition: all 0.4s;}
.m6 .more.white .arrow::before { background-color: #fff;}
.m6 .more:hover {background-color: #ff951a; border-color: #ff951a; color: #fff;}
.m6 .more:hover .arrow { background-color: #fff;}
.m6 .more:hover .arrow::before { background-color: #fff;}

.main_ul2 > li.bg { background: no-repeat center/cover;}
.m6 .main_ul2 > li.bg { background-image: url(../image/m6_bg.png); padding: 5%; box-sizing: border-box;}
.m6_board_item .link { border-bottom: 2px solid rgba(255,255,255,0.5); padding-bottom: 3vh; display: block;}
.m6_board_item .link::before { color: #fff;  position: absolute;  right: 10px;  top: 50%;  transform: translateY(-50%); content: "+";  font-size: 1.5rem;}
.m6_board_item {margin-bottom: 7vh;}
.m6_board_item:last-child {margin-bottom: 0;}


/*main7*/
.m7 .move {opacity: 0;}
.m7 {background-color: #262626;}
.m7 .main_ul { height: 85%;}
.m7 .main_ul > li.txt {padding-left: 10%;}
.m7 .main_ul > li.txt .txtbox_top {margin-bottom: 10vh;}
.m7 .main_ul .txtbox_bottom2 { width: 100%;  max-width: 400px;}
.m7 .main_ul .txtbox_bottom2 a { font-size: 1rem;  text-transform: uppercase;  color: #737373;  display: block;  border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 1.8vh;  padding-top: 1.8vh; position: relative;  transition: all 0.4s;}
.m7 .main_ul .txtbox_bottom2 a:hover {color: #fff;}
.m7 .main_ul .txtbox_bottom2 a::after { content: ">";  position: absolute;  right: 15px;  top: 50%;  transform: translateY(-50%);}

.m7 .main_ul > li.bg { background: none;  position: relative;}
.m7_bg { position: absolute;  right: 0px;  top: 0px;  width: 100%;  max-width: 745px; mix-blend-mode: screen;}
.m7 .main_ul > li.bg .imgbox { position: absolute;  left: 20%;  bottom: 8%;  background-color: #fff;  width: 90%;  max-width: 280px;  padding: 29px 10px;  box-sizing: border-box;  text-align: center;}
.m7 .main_ul > li.bg .imgbox img { width: 100%;  max-width: 48px;  margin: 0px auto 2vh;  display: block;}
.m7 .main_ul > li.bg .imgbox p:nth-child(2) { font-weight: bold;  font-size: 1rem;  line-height: 1;  text-transform: uppercase;  color: #000000;}
.m7 .main_ul > li.bg .imgbox p:nth-child(3) { font-size: 0.9rem;  line-height: 1.3;  color: #808080;  font-weight: 300;  margin-top: 1vh;}

.m7_ul_box {width: 100%;  height: 15%;  padding-left: 10%;  box-sizing: border-box;   font-size: 0px;  background: linear-gradient(to right, #bb441c, #fd8a2c); position: relative;}
.m7_ul { width: 90%; font-size: 0px; position: absolute; left: 10%; top: 50%; transform: translateY(-50%)}
.m7_ul > li { display: inline-block;  vertical-align: top;}
.m7_ul > li.first { width: 16%;}
.m7_ul > li.first .m6_txt2 {margin-bottom: 0px;}
.m7_ul > li.info { width: 25%;}
.m7_ul > li.info img { display: inline-block;  vertical-align: middle;  width: 100%;  max-width: 60px;}
.m7_ul > li.info p { display: inline-block;  width: calc(100% - 70px);  margin-left: 10px;  font-size: 1rem;  color: #fff;  vertical-align: middle;  margin-top: 5px;  font-weight: 300;}
.m7_ul > li.info p span { display: block;}