.cms-main-content{ margin-top: -20px;}
.cms-main-wrap p{color: #fff; font-size: 1.15rem;line-height: 150%; margin-bottom: 15px;}
/*about us----*/
.cms-main-wrap{ width: 100%; padding-right: 10px; padding-left: 10px; max-width: calc((100% - 40px)/12*12 + 40px); margin: auto; height: auto;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; background-color: transparent;}
@media (min-width:1200px) {
.cms-main-wrap{  padding-right:20px; padding-left: 20px;max-width: 1280px; }
}
@media (min-width:1400px) {
.cms-main-wrap { padding-right: 40px; padding-left: 40px; max-width: 1440px; }
}
.cms-40 {  margin: 0px auto; width:307px;height:300px; display: block; z-index: 9; background: url(../images/index/40.svg) no-repeat right bottom; background-size: auto;}
.bg-about{ background: url("../images/about/bg-about.jpg") no-repeat left top #000;background-size:90% auto; }   
@media (min-width:1600px) {
.bg-about{ background-size:80% auto; }   
.cms-40 {  margin: 0px auto; width:407px;height:400px;  }
}
.cms-block-wrap {width:100%;   padding:100px 50px; display: flex; flex-wrap: wrap;position: relative;  }
.cms-block {width:50%; height: auto; padding:50px 50px 100px 0px;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1; direction: rtl; text-align: right; }
@media (min-width:1600px) {
.cms-block {width:30%;  }
}

.cms-block-title{width:auto; margin:10px 0px 50px 0px; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1; font-family: 'Noto Serif TC', serif; ;}
.cms-block-title h3{font-size:2rem; line-height: 130%; color:#db0632; font-weight: 700;}
#cms-main .cms-block-title p{ font-size: 1.15rem!important; line-height: 130%; color:#848381; font-weight: 700!important;}

.cms-block-txt{width:100%; margin:0; padding:20px 0px; display: flex; flex-wrap: wrap;align-content: center; position: relative; z-index: 1;}
#cms-main .cms-block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px;   }
.cms-about-card { width:50%;  margin:-2% 0px 0px 0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: center; align-items: flex-start;position: relative;z-index: 1 }
.cms-about-card .item{ width: 50%; max-width: 100%;height: auto ; margin:-20px auto auto auto; padding:0px; position: relative;z-index: 1 }
/*.cms-about-card .item figure:before{content: ""; width: 96%;  height:94% ; margin:2%; padding:10px; position: absolute; left:0px; top:0px; z-index:2 ; border: solid 1px rgba(255,255,255,.5);}
*/.cms-about-card .item-2{ width:60%; max-width: 100%; margin:280px 0px 0px 200px; height: auto; position: absolute;z-index: 2  }
.cms-about-card .item-2 figure:before{content: ""; width: 96%;  height:94% ; margin:2%; padding:10px; position: absolute; left:0px; top:0px; z-index:2 ; border: solid 1px rgba(255,255,255,.5);}
.cms-block-txt p{color: #fff;}
@media (max-width: 990px) {
.cms-block {width: 100%; margin: 0px auto; padding:0px 25px; }
.cms-about-card {width: 100%; margin: 0px auto;  padding: 0px;}  
.cms-block-wrap:after { display: none; }   
}


@media (max-width:768px) {
.bg-about{  background-size:100% auto; }   
.cms-main-about{ padding:40px 0px; }
 .cms-block-wrap {  padding:100px 20px;  }
   
.cms-block {width: 100%; margin: 0px auto; padding:0px; }
.cms-block-txt{ padding: 0px;}
.cms-about-card .item-2{ width:60%; max-width: 100%; margin:80px 150px 0 0;  }
.cms-about-card .item{ width: 100%; max-width: 100%;height: auto ; margin:-20px auto auto auto; padding:0px; position: relative;z-index: 1 }
}

/*-------------------*/
/***** bg *****/
/*------------------*/
 
.cms-box-wrap{ padding:150px 30px; display: flex; flex-wrap: wrap; justify-content: flex-end;position: relative; z-index: 0; background: url("../images/about/bg-about.jpg") no-repeat left bottom #fff;
background-size:100% auto}
.cms-box-wrap h3{ margin:0px 0px 20px 0px; font-size: 2.25rem; position: relative; z-index: 2;}
.cms-box-wrap p{ margin: 0px 5px!important; line-height: 2.25rem;  position: relative; z-index: 2;}
.cms-box-block{ width: 45%; position: relative; z-index: 1}

@media (min-width:1600px) {
.cms-box-wrap{padding:180px 30px; background-size:80% auto;} 
.cms-box-wrap h2{ margin:0px 0px 20px 0px; font-size: 2.5rem!important; position: relative; z-index: 2;}
.cms-box-wrap h3{ margin:0px 0px 20px 0px; font-size: 2rem!important; position: relative; z-index: 2;}

}


/*.item-wrap-end{width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: center; position: relative;}*/
.item-wrap{width: 100%;display: flex; flex-wrap: wrap; justify-content: flex-start; align-self: flex-end; position: relative;}
.item-pic{width: 100%; }
.item-pic figure{ width:100%;  height:auto ; margin:auto; position:relative;z-index: 1;}
.item-pic figure img{  width:100%; height: auto; position:relative;z-index: 1;}
.item-pic figure:before{content: ""; width: 86%;  height:90%; margin:auto; padding:0px; position: absolute; left:-2%; top:-2%; z-index:0; border: solid 2px #b38f36;}

.item-pic-70{width:90%; }
.item-txt{width:30%;display: flex; flex-wrap: wrap; align-self: center; flex-direction: column;}
.item-box{width: 100%;max-width: 900px; display: flex; flex-wrap: wrap;  margin: 3% auto; position: relative; }
.item-box-1{width: calc(100%/2 - 40px ); margin: 10px 20px; display: flex; }
 



 /*ms-title-2  樣式
=================================*/
.cms-name { width:100%;  margin:0px;  padding:30px 0px; display: flex;  flex-wrap: wrap; justify-content: flex-start; flex-direction: column;position: relative; direction: rtl; text-align: right; }
.cms-name h2{  width: 100%;  display: block; margin:0px; font-size: 2.5rem; font-weight:700; color: #fff!important;  }
.cms-name p{  width: 100%; display: block;margin:0px; font-size:0.9rem; font-weight: 700; color: #bfa571!important;   letter-spacing: 1px;  font-family: 'Noto Serif TC', sans-serif;}
.cms-name span{  width:100%; display: block;margin:0px; font-size: 0.875rem; font-weight: 700; color: #bfa571;   font-family: 'Noto Serif TC', sans-serif;}
 @media (min-width: 1600px) {
.bg-box-wrap-2:before{ width:300px; height:300px;}    
}
.cms-box-wrap-2{ width:100%; padding:40px 0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 0; }
.cms-box-righ-2{width: 50%; margin: 0px; padding: 50px 20px 0 20px; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-items: center;z-index: 0; direction: rtl; text-align: right; }
.cms-box-left-2{ width:50%; margin:0px; padding:0px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1 }

@media (max-width:1024px) {
.cms-box-righ-2{ padding:20px;}
.cms-name {  padding:0px 0px 30px 0px; }
.cms-box-righ-2 .cms-block-txt{padding: 0px;}   
}
@media (max-width:768px) {
.cms-box-wrap-2{  padding:50px 0px;  }
.cms-box-righ-2{width: 100%;}
.cms-box-left-2{ width:100%;}
.cms-name h2 {font-size: 2rem;}
}

.cms-box-wrap-3{ margin: 0px auto; padding:100px 30px; display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index:0; background: #000;}
.cms-box-wrap-3:after{content: ""; position: absolute;right:0px; top:43%; width:46%; height:260px; background: #db0632; z-index: 0;} 
.cms-box-right-3{width: 45%; margin: 0px; padding:20px 0px; display: flex; flex-wrap: wrap; justify-content:center;z-index: 3; }
.cms-box-left-3{ width:55%;  margin:0px; padding:0px 150px 0px 20px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1; direction: rtl; text-align: right;}
@media (max-width:1024px) {
.cms-box-left-3{ width:55%;  margin:0px; padding:0px 20px;  }
.cms-box-wrap-3:after{  width:46%; height:140px; } 
}
@media (max-width:767.98px) {
.cms-box-left-3{ width:100%;  margin:0px; padding:0px;  }
.cms-box-right-3{width: 100%; margin: 0px; padding:0px;  }
.cms-box-wrap-3:after{  display: none; } 
 .bg-box-wrap-white .cms-name {  padding:20px 0px 10px 20px; }  
    
}


.cms-box-right-3 .item-wrap{ flex-direction: row-reverse;}
.cms-box-right-3 .item-pic{width:100%; }
.cms-box-right-3 .item-txt{width:40%;}
 
 
.cms-box-right-3 .item-pic figure{ width: 100%;  height:auto ; margin:auto; position:relative;z-index: 1;}
.bg-about-end {  background:url("../images/about/bg-about.jpg") no-repeat left bottom; background-size:80% auto;  position: relative;z-index: 0;}
 
/*-------------------*/
/***** about-specialty.html *****/
/*------------------*/
.bg-box-wrap-2 { background:url("../images/index/bg-line.svg") no-repeat right top #db0632;  background-size: auto 100%;}
.bg-box-wrap-2:before{ content: ""; display: block; position: absolute; left:-2px; top:-2px;width:250px; height:250px; clip-path: polygon(0 0, 0% 100%, 100% 0); background:#020204; z-index: 9; }
@media screen and (max-width: 840px) {
.bg-box-wrap-2 {  background-position:40% top;   }
.bg-box-wrap-2:before{  width:100px; height:100px;}  
}
.bg-box-wrap-3{background: #000;}
 
.cms-box-wrap-4{ width:100%; padding:150px 0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 0; }
.bg-box-wrap-4:before{ content: ""; display: block; position: absolute; left:-2px; top:-2px;width:250px; height:250px; clip-path: polygon(0 0, 0% 100%, 100% 0); background:#232323; z-index: 9; }
.bg-box-wrap-4{ background: #000; padding: 40px 0 0 0;}
.bg-specialty{  background:url("../images/about/bg-2.jpg") no-repeat left bottom #232323; background-size:60% auto;  position: relative;z-index: 0;}
@media screen and (max-width: 1024px) {
.bg-specialty{   background-size:80% auto; }
.bg-box-wrap-4:before{ width:150px; height:150px; }
}
@media screen and (max-width: 768px) {
.bg-box-wrap-4{ padding-top: 100px;}
.bg-box-wrap-4:before{ width:100px; height:100px; }
    
 }
@media screen and (max-width: 767.98px) {
.bg-specialty{  background:#232323;}
    
}
.bg-box-wrap-white:before{ content: ""; display: block; position: absolute; left:-2px; top:-2px;width:250px; height:250px; clip-path: polygon(0 0, 0% 100%, 100% 0); background:#000; z-index: 9; }
.bg-box-wrap-white{ background: #fff;}
.bg-box-wrap-white h2,.bg-box-wrap-white h3,.bg-box-wrap-white p{color: #000!important; text-shadow: -1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;}
@media screen and (max-width: 1300px) {
 .bg-box-wrap-white:before{ width:200px; height:200px; }
}
@media screen and (max-width: 820px) {
 .bg-box-wrap-white:before{ width:100px; height:100px; }
}


/**banner=================================*/
.cms-item-banner { width: 100%; max-width:100%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 2;  }
.cms-item-banner .imgSliderBox {  width: 100%;  display: flex; flex-wrap: wrap;justify-content: center; }
.cms-item-banner img{ display: block; width: 100%; max-width: 100%;  height: auto; position: relative;  -webkit-animation: zoom 6s ease-in-out; -moz-animation: zoom 6s ease-in-out; -o-animation: zoom 6s ease-in-out; -ms-animation: zoom 6s ease-in-out; animation: zoom 6s ease-in-out;animation-iteration-count:infinite;   -webkit-animation-duration: 6s; animation-duration: 6s;  animation-direction:alternate;}
.cms-item-banner .cms-sloga {   position: absolute;  width: 100%;  display: flex; flex-wrap: wrap; justify-content:center; align-self: flex-start;  z-index: 9; }   
.item-v{ width:auto; padding: 20px 30px;  }
.item-v-name{  width: auto; height: 100%; margin:0px 5px 0px 20px; font-size:2rem; line-height:4rem; letter-spacing: 10px; font-weight:400;  word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif;}
.item-summary{  width: auto; height: 100%; margin:0px 5px; padding: 0px; list-style: none; }
.item-summary li{ font-size: 1.063rem; margin:0px 15px; letter-spacing: 3px; }

/*----------------------------------------/
timeline
----------------------------------------*/
 
.timeline { position: relative; max-width: 1160px;  margin: 0 auto;  z-index:1;}
.timeline::after {  content: '';  position: absolute; width: 1px; background-color: #000; top: 0; bottom: 0;  left: 50%;  margin-left: -3px; z-index:1;}
.timewrap { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after { color: #000; margin:0px;  content: attr(data-year)' '; position: absolute; font-weight:700;  width: 66px; height: 66px; right: -33px; background-color:#fff;  border-color: #000; border-style: solid;  border-width:1px; top: 15px; border-radius: 50%; z-index:9; line-height: 65px; text-align: center;}
.circlecontainer { color: #b69472; content: " "; position: absolute; width: 66px; height: 66px; right: -33px; background-color: #774e36; border-color: #b69472; border-style: solid;  border-width:1px; top: 15px;  border-radius: 50%;  z-index:99;}
.left { left: 0; text-align:left!important;}
.right { left: 50%; text-align:left; }
.right::after { left: -36px;}
.time-content { color:#774e36; padding: 20px 30px; position: relative; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; flex-direction: column; }
#cms-main .time-content h3{ width: 100%; margin: 5px 0px!important; font-family: 'Noto Serif TC', serif; font-weight: 700;color: #000; }
#cms-main .time-content p{ width: 100%; margin: 5px 0px!important;}
.time-content figure{ margin: 0 auto 20px auto; }
.contentboxr { color:#b69472; padding: 20px 30px; background-color: #181818; position: relative; border-style: solid;  border-left: 1px; border-left-color:#181818; border-width:1px; left:-43px;  z-index:5; line-height:1.2;}
.containerbox { padding: 10px 40px; position: relative; background-color: inherit;  width: 50%;}
.contentboxr::after { display: none !important; visibility: hidden;}
@media screen and (max-width: 600px) {
.timeline::after { left: 51px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {  width: 100%; padding-left: 70px; padding-right: 25px; }
.contentboxr { color:#b69472; padding: 10px 20px; background-color: #181818;  position: relative; border-style: solid; border-left: 0px; border-left-color:#181818; border-right: 0px; border-right-color:#181818; width:330%;}
.timewrap::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.left::after, .right::after { left: 15px; }
.right {  left: 0%; text-align:left;}
.left { text-align:left; }
}

@media screen and (min-width:990px) {
:root {
    --card-height: 60vw;
 	--card-top-offset: 1em;
	--numcards: 4;
	--outline-width: 0px;
 
}
#card_1 { --index: 1;}
#card_2 { --index: 2; }
#card_3 { --index: 3; }
#card_4 { --index: 4;}
.card { /*position: sticky; top: 0;*/  }
#cards { display: grid; grid-template-columns: 1fr;}
}
@media screen and (max-width:840px) {
#cards .card { border: none;}
}
/*about-manufacturing.html*/ 
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base, .progress_inner #step-5:checked + div + div + div + div > .box_base, .progress_inner #step-4:checked + input + div + div + div + div > .box_base, .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base {top: 50%; left: 0px;  opacity: 1;}
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item, .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress_inner #step-4:checked + input + div + div + div + div > .box_item, .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item { top: -30px; left: 0px; opacity: 0;}
.progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid,.progress_inner #step-5:checked + div + div + div + div > .box_lid, .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
top: -20px;  left: 0px;  opacity: 0;}
.progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
top: -10px; left: 0px; opacity: 1;}
.progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
top: 10px; left: 0px; opacity: 1;}
.progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid, .progress_inner #step-5:checked + div + div + div + div > .box_lid, .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
top: -1px; left: 0px; opacity: 1;}
.progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon, .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
top: 70%; left: 0px;  opacity: 0;}
.progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow, .progress_inner #step-5:checked + div + div + div + div > .box_bow, .progress_inner #step-4:checked + input + div + div + div + div > .box_bow { top: 0px; left: 0px; opacity: 0;}
.progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, .progress_inner #step-5:checked + div + div + div + div > .box_ribbon { top: 50%; left: 0px; opacity: 1;}
.progress_inner #step-4:checked + input + div + div + div + div > .box_bow, .progress_inner #step-5:checked + div + div + div + div > .box_bow { top: -10px; left: 0px; opacity: 1;}
.progress_inner #step-5:checked + div + div + div + div > .box_tag { top: 10px; left: 20px; opacity: 1;}
.progress_inner #step-5:checked + div + div + div + div > .box_string { top: 10px; left: 20px;  opacity: 1;}
.progress_inner__status .box_string,.progress_inner__status .box_tag,.progress_inner__status .box_bow__right,.progress_inner__status .box_bow__left,.progress_inner__status .box_bow,.progress_inner__status .box_ribbon,.progress_inner__status .box_item, .progress_inner__status .box_base,.progress_inner,.progress_inner__step:before {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: auto;}
.progress_inner__bar--set,.progress_inner__bar { height: 6px; left: 10%; background: repeating-linear-gradient(45deg, #fff0f2, #db0531 4px, #db0531 4px, #fff0f2 10px); transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005); border-radius: 6px; width: 0; position: relative; z-index: -1;}
.progress_inner__step:before { width: 30px; height: 30px; color:#db0531; background:#fff; line-height: 30px; border: 3px solid #db0531; font-size: 12px; top: 3px; border-radius: 100%; transition: all 0.4s; cursor: pointer; pointer-events: none;}
.progress_inner__step { width: 20%; font-size: 14px; padding: 0 10px; transition: all 0.4s; float: left; text-align: center; position: relative;}
.progress_inner__step label { padding-top: 50px;  top: -20px; display: block; position: relative; cursor: pointer;}
.progress_inner__step:hover {color: #db0531;}
.progress_inner__step:hover:before { color:#fff;background:#db0531; }
 @media screen and (max-width: 768px) {
.progress_inner__step label { font-size: 0.875rem;}
.progress_inner__tabs h3{font-size: 1rem;}
}
  
.progress { position: relative; display: block; width: 100%; height: auto;  max-width: 1000px; min-height: 1160px;  padding: 0px;  margin:5% auto 2% auto;  background-color: transparent; }
.progress_inner { display: block; margin:80px auto; position: relative;  }
.progress_inner #step-5:checked + div { width: 100%;}
.progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) { opacity: 1; top: 0;}
.progress_inner #step-5:checked + div + div + div + div { right: 10%;}
.progress_inner #step-4:checked + input + div {width: 60%;}
.progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {opacity: 1; top: 0;}
.progress_inner #step-4:checked + input + div + div + div + div {right: 30%;}
.progress_inner #step-3:checked + input + input + div { width: 40%;}
.progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {opacity: 1; top: 0;}
.progress_inner #step-3:checked + input + input + div + div + div + div { right: 50%;}
.progress_inner #step-2:checked + input + input + input + div { width: 20%;}
.progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) { opacity: 1;top: 0;}
.progress_inner #step-2:checked + input + input + input + div + div + div + div {right: 70%;}
.progress_inner #step-1:checked + input + input + input + input + div {  width: 0%;}
.progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {opacity: 1; top: 0;}
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div { right: 90%;}
 

.progress_inner__step:nth-of-type(1):before { content: "1";}
.progress_inner__step:nth-of-type(2):before { content: "2";}
.progress_inner__step:nth-of-type(3):before { content: "3";}
.progress_inner__step:nth-of-type(4):before { content: "4";}
.progress_inner__step:nth-of-type(5):before { content: "5";}
.progress_inner__bar--set { width: 80%; top: -6px; background: #db0531; position: relative; z-index: -2;}
.progress_inner__tabs .tab { opacity: 0; position: absolute; top: 40px; text-align: center; margin-top: 80px;  padding: 30px;   transition: all 0.2s;    }
.progress_inner__status {width: 40px; height: 40px; top:-50px; transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005); transform: translateX(50%); position: absolute;}
.progress_inner__status div { opacity: 0;  transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005); transition-delay: 300ms;}
.progress_inner__status div {  position: relative;}
.progress_inner__status .box_base {width: 36px; height: 40px; z-index: 1; border-radius:10px; background: repeating-linear-gradient(45deg, #000, #fff 2px, #fff 2px, #000 4px);}
.progress_inner__status .box_lid { width: 40px; height: 13.3333333333px; background: #000; z-index: 2; border-radius: 1px; top: 0;}
.progress_inner__status .box_item {  width: 20px;  height: 20px; background: #000; z-index: 0;  border-radius: 4px; transform: rotate(45deg);}
.progress_inner__status .box_ribbon { width: 10px; height: 42px; background: #000; z-index: 4; border-radius: 1px;}
.progress_inner__status .box_bow__right,.progress_inner__status .box_bow__left { width: 6px; height: 10px; background:#434343;  position: absolute; z-index: 3; opacity: 1; border-radius: 1px;}
.progress_inner__status .box_bow { top: -6px; z-index: 1; transition-delay: 500ms;}
.progress_inner__status .box_bow__left { left: 6px; transform: rotate(45deg);}
.progress_inner__status .box_bow__right { left: -4px; transform: rotate(-45deg);}
.progress_inner__status .box_tag {width: 20px; height: 10px;  background: #487ac7; z-index: 4; transform: rotate(-10deg) translateX(-40px) translateY(0px); border-radius: 2px;  transition-delay: 500ms;}
.progress_inner__status .box_string { width: 17px; height: 2px; background: #343434; z-index: 4; transform: rotate(-39deg) translateX(-22px) translateY(-12px);}
.progress_inner input[type=radio] {display: none;}
  
.box-pic{ width: 100%; max-width: 1000px;padding: 0px;margin: 0px auto; display: flex; flex-wrap: wrap;}
.box-pic img{border-radius: 10px;}
.box-pic-1{width: 100%; margin: auto;}
.box-pic-2{display: flex;width: calc(100%/2 - 10px); margin: 10px 5px; padding: 0px;}
.box-pic-2 img{width: 100%;min-width: 460px; display: block; margin: auto; }
@media screen and (max-width: 920px) {
.progress {  width: 100%; height: auto;  max-width: 100%; min-height: 720px;  }
.progress_inner__tabs .tab {  top: 40px; text-align: center; margin-top: 80px;  padding: 0px;   }
.box-pic{ width: 100%; max-width: 100%; }
.box-pic-2 img{width: 100%;min-width: 100%;  max-width: 100%;  }

}
@media screen and (max-width: 768px) {
.progress {   min-height: 720px;  }
}
@media screen and (max-width: 640px) {
.progress {    min-height: 600px;  }
}