body{position: relative;  background: url(../img/bg_grid.png)no-repeat; background-color: #2a2a2a;  background-attachment: fixed;}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {/* border-right: solid 1px #1d1f20; */background: #5f5f5f;border-radius:5px;}
::-webkit-scrollbar-track { border: none; background: #2a2a2a;}
body:after{ z-index: -10; pointer-events: none; top: 0; right: 0; content:""; position: absolute; width: 100%; height:1080px; background: linear-gradient(to bottom, rgba(42,42,42,0.1)0%, rgba(42,42,42,0.4)10%, rgba(42,42,42,0.5)20%), url(../img/main_bg3.png)no-repeat center 0%; background-size: cover;}
.wrap{overflow:visible; -webkit-overflow-scrolling:touch;}
/* body:before{ pointer-events: none; top: 0; right: 0; content:""; position: absolute; width: 100%; height: 1093px;  background: linear-gradient(to top, #1a1a1a, #2a2a2a);} */
/* .c-scrollbar_thumb{background-color: #fff !important;} */
/* ::-webkit-scrollbar{display: none;} */
/* .banner , .history_title, .pin_section {background: url(../img/bg_red.png)no-repeat; background-attachment: fixed;} */
html.is-ready .notice_modal{opacity: 1; visibility:visible;}

.notice_modal{opacity: 0; visibility:hidden; transition: 0.3s 0.5s; z-index: 99999; width: 600px; max-width: 100%; position: fixed;  border:1px solid rgba(255,27,27,0.4); background: #2a2a2a; top: 50%; left: 50%; transform: translate(-50% , -50%);} 
.notice_modal_padding_wrap{padding: 30px;}
.notice_modal_head{}
.notice_modal_head p{color: #fff; opacity: 0.9; font-size: 21px; text-align: center; border-bottom:1px solid rgba(255,2,7,0.4); padding-bottom: 10px;}
.notice_modal_body{margin: 30px 0;}
.notice_modal_img{margin-bottom: 20px;}
.notice_modal_content{}
.notice_modal_content p{ font-size: 14px; margin-bottom: 15px;}
.notice_modal_bottom{}
.notice_modal_bottom ul{display: flex;}
.notice_modal_bottom ul li{cursor: pointer; width: 50%; border-right: 1px solid rgba(255,2,7,0.4); border-top: 1px solid rgba(255,2,7,0.4);}
.notice_modal_bottom ul li:last-child{border-right: 0;}
.notice_modal_bottom ul li:last-child p{background: rgba(255,255,255,0.08);}
.notice_modal_bottom ul li:first-child p{background: rgba(255,2,7,0.08);}
.notice_modal_bottom ul li p{text-align: center; padding: 15px 5px;}



section.on{opacity: 0;}
nav{ -webkit-backface-visibility: hidden;z-index: 5; position: fixed; top: 49%; left: 4%;right: 0px;/* pointer-events: none; */width: 70px;}
nav.on{display: none;}
nav li{ margin: 12px 0;list-style: none;}
nav li:nth-child(1) a{opacity: 0.1;}
nav li:nth-child(2) a{opacity: 0.3;}
nav li:nth-child(3) a{opacity: 0.5;}
nav li:nth-child(4) a{opacity: 0.7;}
nav li:nth-child(5) a{opacity: 0.5;}
nav li:nth-child(6) a{opacity: 0.3;}
nav li:nth-child(7) a{opacity: 0.1;}
nav li span{position: absolute; left: 30px; top: 41px; font-size: 13px; opacity: 0.8;}
nav a{ display: block; width: 17px; height: 1px; background-color: #fff; transition: all 0.3s ease; position: relative;left: 0px;top: 0px;}
nav a:hover, nav a.active{}


/* 애니메이션 */
/* 타이핑 */
@keyframes typing {
    from {
      width: 0
    }
  }
      
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }


/* 가로스크롤 (섹션1) */
.pin_section { height: auto; width: 100%; position: relative;}
.portfolio { width: 100%; height: 100vh; display: flex; flex-wrap: nowrap;}
/* .portfolio_title { position: absolute; top: 0; left: -15rem; font-size: 24rem; letter-spacing: 0; -webkit-text-stroke-color: #343A42; display: inline-block;} */
/* .text-stroke {-webkit-text-fill-color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #343A42;} */
/* .grid {display: flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;overflow: hidden;} */
.panel.panel_start{ flex: 0 0 1920px;  height: 100%;  background-color: transparent; overflow: hidden;}
.panel{ pointer-events: none; flex: 0 0 1920px;  height: 100%;  background-color: transparent; overflow: hidden;}
.panel.size_re{flex: 0 0 1000px;}
/* .panel_item {height: 100%;width: 100%;margin: 0 auto;}
.panel_img {width: 100%; height: 100%;margin: 0 auto;} */
/* .panel2{flex: 0 0 500px;} */


.his_sec1_1{display: none !important;}
.his_sec1_2{display: none !important;}
.his_sec1_3{display: none !important;}
.his_sec1_4{display: none !important;}
.his_sec1_1.active{display: block !important;}
.his_sec1_2.active{display: block !important;}
.his_sec1_3.active{display: block !important;}
.his_sec1_4.active{display: block !important;}
.his_sec2_1{display: none !important;}
.his_sec2_2{display: none !important;}
.his_sec2_3{display: none !important;}
.his_sec2_4{display: none !important;}
.his_sec2_1.active{display: block !important;}
.his_sec2_2.active{display: block !important;}
.his_sec2_3.active{display: block !important;}
.his_sec2_4.active{display: block !important;}
.his_sec3_1{display: none !important;}
.his_sec3_2{display: none !important;}
.his_sec3_3{display: none !important;}
.his_sec3_4{display: none !important;}
.his_sec3_1.active{display: block !important;}
.his_sec3_2.active{display: block !important;}
.his_sec3_3.active{display: block !important;}
.his_sec3_4.active{display: block !important;}

/* 연혁 탭버튼 */
.pin_tab_button{position: absolute; top: 150px; width: 100%; z-index: 9999;}
.pin_tab_button .ptb_wrap{width: 700px; font-size: 0; max-width:100%; padding-right:30px;}
.pin_tab_button .ptb_wrap ul{}
.pin_tab_button .ptb_wrap ul li{transition: 0.3s; background: rgba(255,27,27,0.05);  border:1px solid rgba(255,27,27,0.2);  cursor: pointer; display: inline-block; border-right:1px solid rgba(255,27,27,0.1); font-size: 14px; height: 50px; line-height: 50px; width: 33.3333%; text-align: center;}
.pin_tab_button .ptb_wrap ul li.active{ border:1px solid rgba(255,27,27,0.4); box-shadow: inset 0px 0px 30px rgba(255,27,27,0.3);}
.pin_tab_button .ptb_wrap ul li:last-child{border-right:0px;}

/* 배너 */
.banner{position: relative; width: 100%; height: 937px;}
.banner .container{height: 100%;}
.swiper{}
.swiper .swiper-slide{}
.swiper-slide{}
.banner .banner_title_wrap{position: relative;  top: 330px; display: inline-block;}
.banner_title_wrap h2{animation: typing 2s steps(22), blink .5s step-end infinite alternate; letter-spacing: -2px; font-size: 75px; font-weight: 500; width: 100%; white-space: nowrap; overflow: hidden; border-right: 25px solid; padding-right: 20px;line-height: 100px;}
/* h2.btwh_1{} */
/* h2.btwh_2.on{animation: typing 2s steps(22), blink .5s step-end infinite alternate;} */
/* h2.btwh_3.on{animation: typing 2s steps(22), blink .5s step-end infinite alternate;} */
.banner_title_wrap p{font-size: 21px; margin-bottom: 20px;}
.banner .banner_btn{z-index: 10; position: relative; display: inline-block; top:425px; left: 5px;}
.banner_btn button{letter-spacing: 3px; font-size: 13px; position: relative; transition:0.3s; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.3); color: #fff; height: 65px; width: 210px;}
.banner_btn button:hover{background: rgba(255,2,7,0.03); border:1px solid rgba(255,2,7,0.4); box-shadow: 0px 0px 40px rgba(255,2,7,0.2);}
.banner_btn button:hover .btn_dot1{background: rgba(255,2,7,0.8);}
.banner_btn button:hover .btn_dot2{background: rgba(255,2,7,0.8);}
.banner_btn button:hover .btn_dot3{background: rgba(255,2,7,0.8);}
.banner_btn button:hover .btn_dot4{background: rgba(255,2,7,0.8);}
.btn_dot1{transition:0.3s; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; top: -3px; left: -3px; opacity: 0.7;}
.btn_dot2{transition:0.3s; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; top: -3px; right:-3px; opacity: 0.7;}
.btn_dot3{transition:0.3s; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; bottom: -3px; left: -3px; opacity: 0.7;}
.btn_dot4{transition:0.3s; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; bottom: -3px; right: -3px; opacity: 0.7;}
.banner .scroll_down{position: absolute; bottom: 0; left: 50%; transform:translateX(-50%); }
.banner .scroll_down p{font-size: 11px; font-weight: 300;}
.banner .scroll_down .sc_bar{position: relative; display: block; width: 1px; height: 100px; background:rgba(255,255,255,0.1); margin: 15px auto 0;}
.banner .scroll_down .sc_bar:after{  animation-name: scroll;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite; content:""; position: absolute; width: 100%; height: 50%; background-image: linear-gradient(to bottom, #aaaaaa, #b9b9b9, #c9c9c9, #d9d9d9, #e9e9e9, #e7e7e7, #e5e5e5, #e3e3e3, #cfcfcf, #bbbbbb, #a7a7a7, #949494);}

@keyframes scroll{
  0%{opacity: 0;}
  10%{transform:translate(0); opacity: 1;} 
  100%{transform:translateY(50px); opacity: 0;}
}

.page_bar{position: absolute; width: 250px; height: 1px; background: #fff; right: 40px; bottom: 13px;}
.swiper_btn{position: absolute; right: 30px; top: 457px;}
.swiper_btn .swiper-button-prev{top: 0; left: 0; width: 15px; height: 15px; background: url(../img/left_icon.png)no-repeat; background-size: contain;}
.swiper_btn .swiper-button-prev:after{display: none;}
.swiper_btn .swiper-button-next{top: 0; left: 20px; width: 15px; height: 15px; background: url(../img/left_icon.png)no-repeat; background-size: contain; transform:rotate(180deg);}
.swiper_btn .swiper-button-next:after{display: none;}
.page_num{position: absolute; left: 50px; bottom: 3px; }
.page_num span{margin: 0 5px;}
.page_num span.opl{opacity: 0.3;}





/* 연혁 타이틀 섹션 */
.history_title{padding-top: 180px;}
.history_title .banner_title_wrap{ display: inline-block;}
.history_title .banner_title_wrap h2{font-size: 100px; font-weight: 500;width: 100%; white-space: nowrap; overflow: hidden; border-right: 25px solid;padding-right: 20px;line-height: 110px;}
/* .btwh_2.on{ animation: typing 2s steps(22), blink .5s step-end infinite alternate;} */
.history_title .banner_title_wrap p{font-size: 23px; margin-top: 20px;}
.history_title .banner_title_wrap p strong{color: #c92020;}

/* 연혁 */
.sec2_box .sec2_img{box-shadow:50px 50px 30px rgba(0,0,0,0.25);  display: inline-block; filter:grayscale(1) brightness(0.7); position: relative; margin: 0 60px;}
.sec2_box .sec2_img .round_dot1{position: absolute; left: -1px; top: -1px; display: inline-block; width: 13px; height: 1px; background: #fff;}
.sec2_box .sec2_img .round_dot1:after{content:""; position: absolute; left: 0; top: 0; width: 1px; height: 13px; background: #fff;}
.sec2_box .sec2_img .round_dot2{position: absolute; right: -1px; top: -1px; display: inline-block; width: 13px; height: 1px; background: #fff;}
.sec2_box .sec2_img .round_dot2:after{content:""; position: absolute; right: 0; top: 0; width: 1px; height: 13px; background: #fff;}
.sec2_box .sec2_img .round_dot3{position: absolute; left: -1px; bottom: -1px; display: inline-block; width: 13px; height: 1px; background: #fff;}
.sec2_box .sec2_img .round_dot3:after{content:""; position: absolute; left: 0; bottom: 1px; width: 1px; height: 13px; background: #fff;}
.sec2_box .sec2_img .round_dot4{position: absolute; right: -1px; bottom: -1px; display: inline-block; width: 13px; height: 1px; background: #fff;}
.sec2_box .sec2_img .round_dot4:after{content:""; position: absolute; right: 0; bottom: 0; width: 1px; height: 13px; background: #fff;}
.sec2_box .sec2_img.on_1{margin-left: 0; width: 441px; height: 280px; background: url(../img/his_1.jpg)no-repeat; background-size: cover;}
.sec2_box .sec2_img.on_2{width: 348px; height: 212px; top: 40px; background: url(../img/his_2.jpg)no-repeat; background-size: cover;}
.sec2_box .sec2_img.on_3{width: 264px; height: 242px; top: 100px; background: url(../img/his_3.jpg)no-repeat; background-size: cover;}
.sec2_box .sec2_img.on_4{width: 293px; height: 224px; background: url(../img/his_4.jpg)no-repeat; background-size: cover; /* box-shadow: 30px 30px 50px rgba(0,0,0) !important; */}
.sec2_box .sec2_img.on_5{width: 250px;}
.sec2_box .sec2_img.on_6{width: 350px;}
.sec2_img_wrap{ margin-top: 300px;}
/* .sec2_img_wrap.mlf{margin-left: 196px;} */
/*	.sec2_exp{position: absolute; bottom: -60px; width: 100%;}	*/
.sec2_exp{position: absolute; bottom: -40px; width: 100%;}
/*	.sec2_exp p{font-size: 27px;}	*/
.sec2_exp p{font-size: 18px;}
/*	.sec2_exp p strong{position: absolute; top: 10px; font-size: 16px; opacity: 0.5; margin-left: 20px; font-weight: 300; vertical-align: middle;}	*/
.sec2_exp p strong{position: absolute; bottom: -60px; font-size: 12px; opacity: 0.5; margin-left: -88px; font-weight: 300; vertical-align: middle;}


.history_scroll{position: fixed; bottom: 60px; left: 50%; transform:translatex(-50%);}
.history_scroll .his_wrap{width: 800px;}
.history_scroll .his_wrap ul{font-size: 0;}
.history_scroll .his_wrap ul li{width: 50%; display: inline-block; font-size: 15px;}
.history_scroll .his_wrap ul li.active p{opacity: 1;}
.history_scroll .his_wrap ul li.his_left{position: relative;}
.history_scroll .his_wrap ul li.his_left span{left: 14%; top: 50%; width: 172%; height: 2px; background: rgba(255,255,255,0.5); position: absolute;}
.history_scroll .his_wrap ul li.his_left span strong{position: absolute; background: rgba(255,255,255,0.8); height: 2px; top: 0; left: 0;} /* width: 40%; */
.history_scroll .his_wrap ul li.his_left span strong a{position: absolute; right: -20px; bottom: 30px; font-size: 11px; font-weight: 400;  font-family: 'Cormorant Garamond', serif;}
.history_scroll .his_wrap ul li.his_left span strong a:after{position: absolute; content:""; width: 1px; height: 25px; background: #fff; top: 20px; left: 50%;  opacity: 0.3;}
.history_scroll .his_wrap ul li.his_center{position: relative; text-align: center;}
.history_scroll .his_wrap ul li.his_center span{left: 66%; top: 50%; width: 110%; height: 2px; background: rgba(255,255,255,0.5); position: absolute;}
.history_scroll .his_wrap ul li.his_center span strong{ position: absolute; background: rgba(255,255,255,0.8); width: 30%; height: 2px; top: 0; left: 0;}
.history_scroll .his_wrap ul li.his_center span strong a{position: absolute; right: -20px; bottom: 30px; font-size: 11px; font-weight: 400;  font-family: 'Cormorant Garamond', serif;}
.history_scroll .his_wrap ul li.his_center span strong a:after{position: absolute; content:""; width: 1px; height: 25px; background: #fff; top: 20px; left: 50%;  opacity: 0.3;}
.history_scroll .his_wrap ul li.his_center p{opacity: 0.5; transition:0.3s; cursor: pointer;}
.history_scroll .his_wrap ul li.his_center p.on{opacity: 1;}
.history_scroll .his_wrap ul li.his_center p:hover{opacity: 1;}
.history_scroll .his_wrap ul li.his_right{text-align: right;}
.history_scroll .his_wrap ul li.his_right p{opacity: 0.5; transition:0.3s; cursor: pointer;}
.history_scroll .his_wrap ul li.his_right p.on{opacity: 1;}
.history_scroll .his_wrap ul li.his_right p:hover{opacity: 1;}
.history_scroll .his_wrap ul li.his_left p{ transition:0.3s; cursor: pointer;}
.history_scroll .his_wrap ul li.his_left p.on{opacity: 0.5;}
.history_scroll .his_wrap ul li.his_left p:hover{opacity: 1;}
.history_scroll .his_wrap ul li p{letter-spacing: 1px;}

.his_down_btn{cursor: pointer; transition: 0.3s; position: absolute; right: -100px; bottom: -2px; opacity: 0.7; font-size: 18px;}
.his_down_btn:hover{opacity: 1;}

/* 모바일 연혁 탭버튼 */
.mob_his_tab{position: sticky; top: 220px; z-index: 999; width: 150px; margin-left: -60px;}
.mob_his_tab .mob_tab_wrap{}
.mob_his_tab .mob_tab_wrap ul{}
.mob_his_tab .mob_tab_wrap ul li{border:1px solid rgba(255,27,27,0.2); transform: rotate(90deg); font-size: 14px; text-align: center; background: rgba(255,27,27,0.05);  padding: 8px; margin-bottom: 120px; }
.mob_tab_wrap>ul>li.active{border:1px solid rgba(255,27,27,0.4); box-shadow: inset 0px 0px 30px rgba(255,27,27,0.3);}
.mob_his_box_wrap{display: none;}
.mob_his_box_wrap.active{display: block;}

/* 모바일 연혁 */
.mob_section{padding-bottom: 200px; display: none;}
.mob_section .container{width: 500px; margin: 0 auto; max-width:100%; margin-top: -525px;}
.mo_his_wrap{}

/* sec3 */
.sec3{height: 100vh; width: 100%;}
.sec3_wrap{width: 100%; height: 100%; background: url(../img/sec3_1_bg.jpg)no-repeat center center; background-size: cover;}
.sec3_wrap ul{font-size: 0; display: flex; justify-content: center; align-items: center; height: 100%;}
.sec3_wrap ul li{border-right:1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; font-size: 16px; width: 25%; height: 100%; text-align: center;}
.sec3_wrap ul li .sec3_text_wrap{transition: 0.3s; opacity: 0.3; bottom: 0; position: relative;}
.sec3_wrap ul li:hover .sec3_text_wrap{opacity: 1; bottom: 40px;}
.sec3_wrap ul li:last-child{margin-right: 0;}
.sec3_wrap ul li .sec3_num{ font-size: 25px; margin-bottom: 120px; }
.sec3_wrap ul li .sec3_num h2{ font-weight: 500; }
.sec3_wrap ul li .sec3_exp{}
.sec3_wrap ul li .sec3_exp h2{font-size: 38px; margin-bottom: 20px; font-weight: 500; line-height: 50px;}
.sec3_wrap ul li .sec3_exp p{font-size: 16px;}

.sec3_wrap ul li .banner_btn{ transition: 0.3s; bottom: 80px; position: relative; transform:scale(0);} 
.sec3_wrap ul li:hover .banner_btn{bottom: -60px;  transform:scale(1);}


.sec3_wrap ul li .banner_btn button{}



/* sec4 */
.sec4{text-align: center; margin: 180px 0; position: relative;}
.sec4 .banner_title_wrap{display: inline-block; text-align: center;}
.sec4 .banner_title_wrap h2{line-height: 110px; font-size: 100px; font-weight: 500;}
.sec4 .banner_title_wrap p{font-size: 23px; margin-top: 30px;}
.sec4 .sec4_wrap{margin-top: 80px; position: relative;}
.sec4 .sec4_wrap .world_wrap{position: relative; width: 1700px; margin: 0 auto; max-width: 100%; padding: 0 20px;}

.se4_pont_dot{}
.se4_pont_dot span{ position: relative; display: inline-block; width: 8px; height: 8px; background: #fff; position: absolute; border-radius:50%;}
.se4_pont_dot span:hover strong{transform:scale(1);}
.se4_pont_dot span:hover:before{transform:scale(1);}
.se4_pont_dot span strong{transform:scale(0); transition:0.3s; text-shadow: 1px 1px 6px #fff, 0 0 1em #fff, 0 0 0.2em #fff; font-weight: 300; position: absolute; right: -240px; bottom: -5px; font-size: 19px;}
.se4_pont_dot span:before{filter: brightness(50); transform:scale(0); transition:0.3s; content:""; position: absolute; left: 1px; top: 3px; background: url(../img/map_bar.png)no-repeat; width: 284px; height: 21px;}
.se4_pont_dot span.spd1{top: 20%; right: 26.5%;}
.se4_pont_dot span.spd1:after{ animation: dots 1.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd2{top: 41%; right: 28.5%;}
.se4_pont_dot span.spd2:after{ animation: dots 1.8s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd3{top: 63%; right: 28%;}
.se4_pont_dot span.spd3:after{ animation: dots 1.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd4{top: 55%; left: 34.5%;}
.se4_pont_dot span.spd4:after{ animation: dots 2s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd5{top: 35%; left: 23.5%;}
.se4_pont_dot span.spd5:after{ animation: dots 2.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd6{top: 25%; left: 25%;}
.se4_pont_dot span.spd6:after{ animation: dots 3s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd7{top: 52%; left: 22%;}
.se4_pont_dot span.spd7:after{ animation: dots 3.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd8{top: 17%; left: 45.5%;}
.se4_pont_dot span.spd8:after{ animation: dots 4s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd9{top: 55%; left: 51.5%;}
.se4_pont_dot span.spd9:after{ animation: dots 4.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd10{top: 47.5%; left: 81.8%;}
.se4_pont_dot span.spd10:after{ animation: dots 5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}
.se4_pont_dot span.spd11{top: 27%; left: 55%;}
.se4_pont_dot span.spd11:after{ animation: dots 5.5s infinite; z-index: -1; position: absolute; content:""; width: 60px; height: 60px; background: #fff; opacity: 0.5; border-radius: 50%; bottom: -26px; left: -26px;}


@keyframes dots{
  0%{opacity: 0; transform:scale(0);}
  100%{transform:scale(1); opacity: 0.5;}
}



/* sec6 */
dl{display: table; table-layout:fixed; width: 100%; padding: 0 54px;}
dd{display:table-cell; vertical-align: middle; padding:64px 32px;}

  .sec6{ width: 100%; background: #2a2a2a; margin-top: 100px;}
  .sec6 .sec6_menu_wrap{}
  .sec6 .sec6_menu_wrap ul{}
  .sec6 .sec6_menu_wrap ul li{transition:0.5s; width: 100%; opacity: 0.5; border-bottom:1px solid rgba(255,255,255,0.3); cursor: pointer;}
  .sec6 .sec6_menu_wrap ul li:hover{ background: url(../img/sec6_menu_bg.png)no-repeat center center; background-size: cover; opacity: 1;}
  .s6_dd1{width: 500px;  max-width: 100%;}
  .sec6 .sec6_menu_wrap ul li:hover .dd1_head p{color: rgba(255,255,255,0.5);}
  .s6_dd1 .dd1_head{}
  .s6_dd1 .dd1_head p{font-size: 13px; color: #c92024; font-weight: 300;}
  .s6_dd1 .dd1_main{}
  .s6_dd1 .dd1_main h2{font-size: 28px; font-weight: 500;}
  .s6_dd2{width: 250px;  max-width: 100%; text-align: center; font-weight: 400; letter-spacing: 1px;}
  .s6_dd2 strong{font-weight: 300; opacity: 0.5; letter-spacing: 0;}
  .s6_dd3{width: auto;  max-width: 100%; font-weight: 200;}
  .s6_dd4{width: 100px;  max-width: 100%; padding: 16px;}





  /* sec7 */
  .sec7{width: 100%; background: url(../img/sec7_bg.png)no-repeat center center; background-size: cover; padding-top: 350px; padding-bottom: 270px;}
  .sec7 .sec7_wrap{position: relative; height: 100%;}
  .sec7 .banner_title_wrap{position: relative; pointer-events: none;}
  .sec7 .banner_title_wrap p{opacity: 0; transform:translateX(400px); transition: 1.5s;  font-size: 23px; margin-top: 30px;}
  .sec7 .banner_title_wrap p strong{opacity: 0.7; font-weight: 300;}
  .sec7 .banner_title_wrap h2{opacity: 0; transform:translateX(400px); transition: 1s; font-weight: 500; line-height: 110px; font-size: 100px; white-space: nowrap; overflow: hidden;  animation: typing 2s steps(22), blink .5s step-end infinite alternate;  border-right: 3px solid;}
  .sec7 .banner_title_wrap h2 {
      display: inline-block;
      animation: typing 2s steps(22), blink .5s step-end infinite alternate;
      white-space: nowrap;
      overflow: hidden;
      border-right: 25px solid;
    }
    .sec7 .banner_title_wrap .btw_2 h2{width: 14ch !important;}
  
    
    @keyframes typing {
      from {
        width: 0
      }
    }
        
    @keyframes blink {
      50% {
        border-color: transparent
      }
    }
  
    .slick-prev, .slick-next{display: none !important;}
    .slick-slide.slick-active h2{ opacity: 1; transform:translateX(0);}
    .slick-slide.slick-active p{opacity: 1; transform: translateX(0);}
    
  .sec7 .banner_btn{margin-top: 110px;}






/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
  .banner_title_wrap p{margin-bottom: 10px;}
  .banner_title_wrap h2{font-size: 70px;}
  .swiper_btn{top: 440px; right: 180px;}
  .banner .banner_btn{top: 385px;}
  .page_bar{width: 150px;}
   
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
  .swiper_btn{left: 190px; top: 310px; position: relative;}
  .page_bar{left: 50px;}
  .banner .banner_title_wrap{top: 250px;}
  .page_bar{left: -180px;}
  .banner .banner_btn{top: 375px;}
  .sec4 .sec4_wrap .world_wrap{margin-bottom: 50px;}
  .sec2_box .sec2_img {margin: 0 30px;}
  .sec2_box .sec2_img.on_1{width: 391px; height: 248px;}
  .sec2_box .sec2_img.on_2{width: 298px; height: 182px;}
  .sec2_box .sec2_img.on_3{width: 234px; height: 215px;}
  .sec2_box .sec2_img.on_4{width: 263px; height: 201px;}
  .panel.panel_start{flex: 0 0 1450px;}
  .panel.size_re{flex: 0 0 200px;}
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  .sec3_wrap ul li .sec3_num{margin-bottom: 50px;}
  .sec3{height: 60vh;}
  .sec3_wrap ul li .sec3_exp h2{font-size: 33px;}
  .banner_btn button{height: 60px; width: 190px;}
  .sec3_wrap ul li:hover .banner_btn{bottom: -40px;}
  .sec4 .banner_title_wrap h2{font-size: 90px; line-height: 100px;}
  .history_title .banner_title_wrap h2{font-size: 90px; line-height: 100px;}
  .sec4 .banner_title_wrap p{font-size: 21px; margin-top: 20px;}
  .se4_pont_dot span.spd1:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd2:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd3:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd4:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd5:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd6:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd7:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd8:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd9:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd10:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}
  .se4_pont_dot span.spd11:after{bottom: -16px; left: -16px; height: 40px; width: 40px;}

  .se4_pont_dot span:before{background-size: contain; width: 154px;}
  .se4_pont_dot span strong{right: -160px; font-size: 16px;}
  .banner_title_wrap h2{border-right: 0; white-space: normal; animation:none;}
  .history_title .banner_title_wrap h2{border-right:0; animation: none; white-space: normal; }
  .sec4 .banner_title_wrap h2{border-right: 0; animation:none; white-space: normal; padding-right: 0;}
  .sec4{margin: 140px 0;}
  
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
  .sec3_wrap ul li .sec3_exp h2{font-size: 29px;}
  .banner_btn button{width: 180px;}
  .banner_title_wrap h2{font-size: 65px; line-height: 90px;}
  .history_title .banner_title_wrap h2{font-size: 85px; line-height: 100px;}
  .sec4 .banner_title_wrap h2{font-size: 75px; line-height: 90px;}
  .sec4 .banner_title_wrap p{font-size: 20px;}
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
  .sec3{height: auto;}
  .sec3_wrap ul{display: block;}
  .sec3_wrap ul li{float: left; width: 50%; padding: 30px 0; border-right: 0; border-bottom:1px solid rgba(255,255,255,0.1);}
  .sec3_wrap ul li .banner_btn{transform: scale(1); bottom: 0px; margin-top: 30px;}
  .sec3_wrap ul li:hover .banner_btn{bottom: 0;}
  .sec3_wrap ul li .sec3_num{margin-bottom: 20px;}
  .sec3_wrap ul li:hover .sec3_text_wrap{bottom: 0;}
  .history_scroll .his_wrap{width: 700px;}
  .sec4{margin: 100px 0;}
  .sec4 .sec4_wrap{margin-top: 60px;}

  .sec3_wrap ul li{padding: 0;}
  .sec3_wrap ul li:nth-child(1){background: url(../img/car_part.jpg)no-repeat center; background-size: cover;}
  .sec3_wrap ul li:nth-child(2){background: url(../img/erection.jpg)no-repeat center; background-size: cover;}
  .sec3_wrap ul li:nth-child(3){background: url(../img/sec3_1_bg.jpg)no-repeat center; background-size: cover;}
  .sec3_wrap ul li:nth-child(4){background: url(../img/research.jpg)no-repeat center; background-size: cover;}
  .sec3_wrap ul li .sec3_text_wrap{padding: 30px; opacity: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
  .sec4 .sec4_wrap .world_wrap{margin-bottom: 20px;}
  .panel.size_re{flex: 0 0 0;}
}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

 
}
@media screen and (max-width: 768px){
  .banner_title_wrap h2{font-size: 60px; line-height: 80px;}
  .history_title .banner_title_wrap h2{font-size: 75px; line-height: 90px;}
  .sec4 .banner_title_wrap h2{font-size: 65px; line-height: 80px;}
  .banner .scroll_down .sc_bar{height: 80px;}
  .history_scroll .his_wrap{width: 600px;}
  .history_scroll .his_wrap ul li.his_left span{width: 162%; left: 18%;}
  .sec4 .sec4_wrap .world_wrap{padding: 0;}
  .sec4 .sec4_wrap{margin-top: 40px;}
  .sec4 .banner_title_wrap p{font-size: 18px;}
  .se4_pont_dot span:after{display: none;}
  .se4_pont_dot span:before{display: none;}
  .se4_pont_dot span strong{transform:scale(1); right: -19px; font-size: 14px; top: -26px;}
  .se4_pont_dot span{width: 5px; height: 5px;}
  .banner_btn button{width: 160px; height: 55px;}
  .pin_section{display: none;}

  .history_title{margin-bottom: 180px;}
  .sec2_img_wrap{margin-top: 0; text-align: right; padding-right: 16px;}
  .sec2_box .sec2_img{width: 300px !important; margin: 0; position: static; margin-bottom: 90px; height: 0 !important; padding-bottom: 46%;}
  .sec2_box .sec2_img.on_1{}
  .sec2_exp p{line-height: 27px;}
  .sec2_exp p strong{position:static;}
  .sec2_exp{top: 104%; text-align:left;}
  .mob_section{display: block;}
  .sec3_wrap ul li .sec3_exp h2{line-height: 34px;}
}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
  .banner .scroll_down{display: none;}
  .banner .banner_title_wrap{top: 200px;}
  .banner_title_wrap h2{font-size: 45px; line-height: 60px;}
  .banner_title_wrap p{font-size: 18px; margin-bottom: 0;}
  .swiper_btn{top: 250px;}
  .page_bar{width: 100px; left: -120px;}
  .swiper_btn{left: 130px;}
  .banner .banner_btn{top: 305px;}
  .history_title .banner_title_wrap h2{font-size: 55px; line-height: 70px;}
  .history_title .banner_title_wrap p{margin-top: 10px; font-size: 21px;}
  .history_scroll .his_wrap{width: 400px;}
  .history_scroll .his_wrap ul li.his_left span{width: 142%; left: 28%;}
  .sec4 .banner_title_wrap h2{font-size: 55px; line-height: 60px;}
  .se4_pont_dot span strong{font-size: 12px; right: -16px; top: -23px;}
  .sec4 .banner_title_wrap p{font-size: 16px; margin-top: 10px;}
  .sec4{margin: 60px 0;}
  /* .banner_btn button{width: 140px; height: 50px; font-size: 12px;} */
  .history_title{padding-top: 0;}
  .banner{height: 737px;}
  .sec3_wrap ul li .sec3_exp h2{font-size: 26px; line-height: 29px;}
  .sec3_wrap ul li .sec3_exp p{font-size: 15px;}
  .sec3_wrap ul li .sec3_exp h2{margin-bottom: 15px;}
  .sec3_wrap ul li .sec3_num{margin-bottom: 15px;}
  .sec3_wrap ul li .sec3_num{font-size: 23px;}
  .sec3_wrap ul li .banner_btn{margin-top: 20px;}
  .banner_btn button{width: 135px; height: 40px; font-size: 10px;}
  .sec3_wrap ul li .sec3_text_wrap{padding: 30px 15px;}
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

  .history_scroll .his_wrap{width: 300px;}
  .history_scroll .his_wrap ul li p{font-size: 13px;}
  .history_title .banner_title_wrap h2{font-size: 45px; line-height: 60px;}
  .history_title .banner_title_wrap p{font-size: 19px;}
  .history_title{padding-top: 80px;}
  .se4_pont_dot span strong{font-size: 10px; right: -12px; top: -19px;}
  .sec4 .banner_title_wrap h2{font-size: 45px; line-height: 50px;}
  .sec4 .banner_title_wrap p{font-size: 14px;}
  .banner_btn button{ font-size: 11px;} 
  .sec2_box .sec2_img{width: 250px !important;}
  .sec2_exp p{font-size: 21px; line-height:23px;}
  .sec2_exp p strong{margin-left: 10px; font-size: 15px;}
  .mob_his_tab .mob_tab_wrap ul li{padding: 5px;}
  .mob_section .container{margin-top: -517px;}
  .sec3_wrap ul li .sec3_num{margin-bottom: 10px; font-size: 22px;}
  .sec3_wrap ul li .sec3_exp h2{font-size: 22px; margin-bottom: 10px;}
  .sec3_wrap ul li .sec3_exp p{font-size: 14px;}
  .sec3_wrap ul li .sec3_text_wrap{padding: 30px 10px;}
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
 .banner_title_wrap p{font-size: 16px;}
 .banner_title_wrap h2{font-size: 45px; line-height: 65px;}
 .sec4 .banner_title_wrap h2{font-size: 35px; line-height: 35px;}
 .sec2_box .sec2_img{width: 220px !important; padding-bottom: 40%;}
 .sec2_exp p{font-size: 19px;}
 .sec2_exp p strong{font-size: 14px;}
 .sec3_wrap ul li .sec3_text_wrap{padding: 20px 5px;}
 .sec3_wrap ul li .sec3_num{font-size: 20px; margin-bottom: 5px;}
 .sec3_wrap ul li .sec3_exp h2 {font-size: 17px;margin-bottom: 5px;line-height: 22px;}
 .sec3_wrap ul li .sec3_exp p{font-size: 12px;}
 .banner_btn button{height: 35px; font-weight: 300;}

}



@media screen and (max-width: 350px){

  .sec2_box .sec2_img{width: 200px !important;}
}