@charset "utf-8";
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }
body { background: #FFF; }
body.intro { background: #301123; overflow: hidden; }
body, th, td, input { font-size: 14px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 45px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h2 { font-size: 20px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h3 { font-size: 18px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #C00003; }
h4 { font-size: 17px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h5 { font-size: 16px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
h6 { font-size: 15px; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; color: #C00003 }
p { font-size: 14px; color: #434343; }
a:link, a:visited { text-decoration: none; cursor: pointer; }
/*Fitimg css*/
.fitimg { overflow: hidden; position: relative; }
.fitimg img { display: block; min-width: 100%; height: auto; opacity: 0; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -ms-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; }
.fitimg img.fitimg-loaded { opacity: 1; }
.fitimg img.fitimg-height { min-height: 100%; }
.fitimg img.fitimg-width { min-width: 100%; }
.fitimg .fitimg-debug { position: absolute; top: 10px; left: 10px; }
.imgwrap img { opacity: 0; }
.desk-480 { display: block; }
.desk-1024 { display: block; }
.mobile-phone { display: none; }
.mobile-pad { display: none; }
.mobile-menu { display: none; }
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }
.loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; text-align: center; z-index: 2000; color: #003a7e; font-size: 32px; background: rgba(255,255,255,.2); }
.loading .mark { padding: 100px 0 0 0; }

.more_bar{ position: relative; z-index: 100; padding: 10px 0; text-align: left;}
.more_bar.center{ text-align: center;}
.more_bar.right{ text-align: right;}

.btn_more{ position: relative; display: inline-block; color: #FFF; text-align: center; background: #003a7e; font-weight: 400; font-size: 18px; line-height: 40px; border-radius: 15px; padding: 0 20px;
	transition: 200ms ease;
}
.btn_more:hover, .btn_more:focus, .btn_more:active{ color: #FFF; background: #003a7e;
	transform: scale(1.04);
}

#wrapper { overflow: hidden; min-width: 960px; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 90px; background: #003a7e; background: rgba(0,58,126,.8); z-index: 1000; }
#header .logo { padding: 30px 0 0 20px; float: left; }
#header .language { position: absolute; top: 10px; right: 10px; color: #FFF; z-index: 1000; cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; }
#header .language .tit { float: left; margin: 0 10px 0 0; }
#header .language .now { float: left; padding: 0 5px; background: #003a7e; }
#header .language .now:before { float: right; padding: 0 5px; content: "\f0d7"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
#header .language.on .now:before { float: right; padding: 0 5px; content: "\f0d8"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
#header .language .sel { display: none; position: absolute; top: 22px; right: 0; background: #FFF; }
#header .language .sel a { display: block; padding: 5px 13px; color: #333; }
#header .language .sel a:hover { background: #333; color: #FFF; }
#header .top_menu { position: absolute; top: 0; right: 0; height: 100px; overflow: hidden; padding: 30px 0 0 0; }
#header .top_menu ul, #header .top_menu li { display: block; list-style: none; margin: 0; padding: 0; }
#header .top_menu li { float: left; position: relative; padding: 0 10px; }
#header .top_menu>ul>li>a { text-align: center; display: block; line-height: 80px; color: #FFF; font-size: 16px; font-weight: 400; font-family: "lato", "微軟正黑體", "Microsoft Jhenghei", Helvetica, Arial, sans-serif; padding: 0 10px; position: relative; }
#header .top_menu li span { display: block; position: relative; z-index: 100; }
#header .top_menu li i { opacity: 0; display: block; width: 71px; height: 88px; background: url(../images/menu_1.png) no-repeat center center; position: absolute; top: 40px; left: 0; z-index: 1; background-size: cover; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
#header .top_menu li b { opacity: 0; display: block; min-width: 71px; max-width: 78px; width: 100%; height: 88px; background: url(../images/menu_2.png) no-repeat center center; position: absolute; top: 80px; left: 0; z-index: 2; background-size: cover; -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
#header .top_menu li.big i { left: 15px; }
#header .top_menu li.big b { left: 5px; max-width: 84px; }
#header .top_menu>ul>li.cur i { opacity: 1; top: 0; }
#header .top_menu>ul>li.cur b { opacity: 1; top: 0; }
.intro { height: 900px; overflow: hidden; margin: 0; position: relative; box-shadow: 0 0 40px rgba(0,0,0,.4); }
.inner { width: 960px; padding: 0 20px; margin: auto; position: relative; z-index: 100; }
#HOME { background: url(../images/intro_1_bg.jpg) no-repeat top center fixed #FFF; }
#HOME .bg { background: url(../images/intro_1_bg_top.png) no-repeat top center fixed; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: bgm1 15s linear 2s infinite alternate; -moz-animation: bgm1 15s linear 2s infinite alternate; -o-animation: bgm1 15s linear 2s infinite alternate; animation: bgm1 15s linear 2s infinite alternate; }
#HOME { -webkit-animation: opacity1 5s ease-in 4s infinite alternate; -moz-animation: opacity1 5s ease-in 4s infinite alternate; -o-animation: opacity1 5s ease-in 4s infinite alternate; animation: opacity1 5s ease-in 4s infinite alternate; }
 @keyframes opacity1 {
0% {
opacity:1;
}
25% {
opacity:0.5
}
50% {
opacity:0.8
}
100% {
opacity:0.4
}
}
 @-moz-keyframes opacity1 {
0% {
opacity:1
}
25% {
opacity:0.5
}
50% {
opacity:0.8
}
100% {
opacity:0.4
}
}
 @-webkit-keyframes opacity1 {
0% {
opacity:1;
}
25% {
opacity:0.7;
}
50% {
opacity:1;
}
100% {
opacity:0.8;
}
}
 @-o-keyframes opacity1 {
0% {
opacity:1
}
25% {
opacity:0.5
}
50% {
opacity:0.8
}
100% {
opacity:0.4
}
}
 @-webkit-keyframes bgm1 /* Safari 和 Chrome */ {
0% {
opacity:1;
margin-left:0;
}
25% {
opacity:0.8;
margin-left:-15px;
}
50% {
opacity:1;
margin-left:0;
}
100% {
opacity:0.6;
margin-left:-15px;
}
}
#HOME h2 { padding: 430px 0 0 0; text-align: center; opacity: 0; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; transition: opacity 2s ease-in; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }
#HOME h1 { padding: 10px 0 0 0; text-align: center; opacity: 0; -webkit-transition: opacity 2s ease-in; -moz-transition: opacity 2s ease-in; -ms-transition: opacity 2s ease-in; -o-transition: opacity 2s ease-in; transition: opacity 2s ease-in; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }
#HOME h1.ed { opacity: 1; }
#HOME h2.ed { opacity: 1; }
.tip_next { display: block; text-align: center; padding: 10px; font-size: 32px; }
.tip_next a { opacity: 0.5; color: #5099d7; }
.tip_next a:hover { opacity: 1; }
.tip_next_b { display: block; text-align: center; padding: 10px; font-size: 32px; }
.tip_next_b a { opacity: 0.5; color: #333; }
.tip_next_b a:hover { opacity: 1; }
.tips a { -webkit-transition: all 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ }
.tips a:hover { font-size: 32px; }
#About { background: url(../images/intro_2_bg.jpg) no-repeat top center fixed; overflow: visible; z-index: 100; }
#About .mobile-phone img { max-width: 100%; }
#About .txt { float: right; padding: 0 20px 0 0; width: 370px; margin: 140px 0 0 0; }
#About .txt.tw { height: 700px; overflow: auto; -webkit-overflow-scrolling: touch; }
#About .txt h1 { margin: 0 0 20px 0; }
#About .txt p { color: #333; font-size: 13px; }
#About .pic { position: absolute; top: -110px; left: 0; z-index: 100; }
#About .pic2 { position: absolute; top: -130px; left: 0; }
#About .pic2 .p1 { position: absolute; top: 0; left: 20px; }
#Profile { background: url(../images/intro_3_bg.jpg) no-repeat top center fixed #FFF; }
#Profile.tw { background: url(../images/intro_3_bg_2.jpg) no-repeat top center fixed #FFF; }
#Profile .txt { padding: 200px 0 150px 0; }
#Profile .txt.tw { padding: 200px 0 0 0; }
#Profile .profile_slider { }
#Profile .profile_slider .item { width: 19%; float: left; background: #FFF; background: rgba(255,255,255,.9); margin: 0 1% 0 0; height: 300px; }
#Profile .profile_slider .item .info { padding: 20px; }
#Profile .profile_slider .item .info h4 { margin: 0 0 30px 0; font-size: 20px; }
#Profile .profile_slider .item .info p { color: #666; font-size: 15p; text-align: left; }
#Products { background: url(../images/intro_4_bg.jpg) no-repeat top center fixed; overflow: visible; z-index: 100; }
#Products .txt { padding: 200px 0 100px 0; text-align: center; }
#Products .txt h1 { margin: 0 0 20px 0; }
#Products .txt p { color: #191001; }
#Products .products_slider { }
#Products .products_slider .item { width: 32%; float: left; margin: 0 1% 0 0; height: 300px; }
#Products .products_slider .item .info { text-align: center; }
#Products .products_slider .item .info a { color: #000; }
#Products .products_slider .item .info a h2 { font-size: 24px; }
#Customers { background: url(../images/intro_5_bg.jpg) no-repeat top center fixed; overflow: visible; z-index: 100; }
#Customers .txt { padding: 200px 0 0 100px; width: 500px; }
#Contact { background: url(../images/intro_6_bg.jpg) no-repeat top center fixed; overflow: visible; z-index: 100; height: 1100px; }
#Contact .txt { margin: 200px 0 0 0; float: right; width: 400px; padding: 40px; background: #FFF; background: rgba(255,255,255,.9) }
#footer { padding: 20px; margin: -60px 0 0 0; }
#footer .info { display: block; text-align: left; }
#footer a { color: #000; }
.btn_send1 { display: inline-block; padding: 0 10px 0 40px; line-height: 2.5em; font-size: 16px; background: #9e1b1e; color: #FFF; }
.btn_send1:hover { background: #e62c30; color: #FFF; }
.btn_send2 { text-decoration: underline !important; display: inline-block; padding: 0 10px 0 40px; line-height: 2.5em; font-size: 16px; background: inherit; color: #666; }
.btn_send2:hover { color: #000; }
.pager_bar { padding: 30px; text-align: right; }
.pager_bar a { display: inline-block; padding: 0 15px; line-height: 30px; margin: 0 4px 0 0; color: #999999; font-size: 16px; }
.pager_bar a:hover, .pager_bar a.cur { color: #FFF; background: #333; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; }
.view_box { position: relative; display: none; width: 96%; background: #FFF; top: 2%; height: 96%; margin: auto; z-index: 2000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: center; overflow: auto; -webkit-overflow-scrolling: touch; }
.view_box h3 { display: block; padding: 0; font-size: 50px; color: #003a7e; margin: 0; }
.view_box p { margin: 0 0 0.5em; font-size: 18px; }
.view_box .close { position: fixed; z-index: 9999; top: 2%; right: 2%; display: block; cursor: pointer; padding: 10px; text-align: right; font-size: 24px; background: #FFF; }
.view_box .txt { padding: 5%; font-size: 15px; text-align: center; width: 50%; float: right; }
.view_box .pic { width: 30%; padding: 5%; float: left; }
.view_box .pic img { max-width: 100%; }
.mask { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; background: rgba(0,0,0,.8); z-index: 1000; }


.his_list{ position: relative; display: block; list-style: none; margin: 30px; }
.his_list .line{ position: absolute; display: block; top: 8px; left: 50%; width: 2px; height: 0; margin: 0 0 0 -1px; background: #CCC;
	transition: 500ms ease-in-out;
}
.his_list li{ position: relative; display: block; width: calc(50% - 40px); float: left; clear: both;}
.his_list li h4{ font-size: 24px; font-weight: 700; text-align: right; margin: 0; color: #333;}
.his_list li p{ margin: 0; line-height: 1.4em; font-size: 15px;}
.his_list li .text{ margin: 0 0 30px 0; text-align: right;}
.his_list li .cou{ display: block; position: relative; padding: 4px 0;}
.his_list li .cou span{ display: inline-block; padding: 0px 5px; margin: 3px 2px; font-size: 14px; color:#000; background: #dedede;}
.his_list li::before{ position: absolute; display: block; content: ""; top: 0; right: -60px; width: 32px; height: 32px; background: #FFF; border:solid 4px #FFF; border-radius: 20px; z-index: 100;
    transform: scale(0.7);
}
.his_list li::after{ position: absolute; display: block; content: ""; top: 8px; right: -52px; width: 24px; height: 24px; background: #CCC;  border-radius: 18px; z-index: 100;
    transform: scale(0.7);
}
.his_list li:nth-of-type(2n){ float: right;}
.his_list li:nth-of-type(2n) h4{ text-align: left; }
.his_list li:nth-of-type(2n) .text{ text-align: left;}
.his_list li:nth-of-type(2n)::before{ left: -60px;}
.his_list li:nth-of-type(2n)::after{ left: -52px;}
.his_list li:nth-of-type(1)::before{ border: solid 4px #003a7e;}
.his_list li:nth-of-type(1)::after{ background: #003a7e;}


/*RWD*/
@media only screen and (max-width: 1400px) {
}

@media only screen and (max-width: 1024px) {
.intro, .intro>.bg { overflow: visible; background-size: 100% auto !important; background-attachment: inherit !important; }
#HOME { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; }
#HOME .bg { background: url(../images/intro_1_bg_top.png) no-repeat top center fixed; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; }
#About, #Products, #Customers, #Contact { overflow: hidden; z-index: auto; }
#About .pic { top: 220px; }
#About .pic2 { top: 200px; }
#Profile .inner { width: 90%; padding: 0 5%; }
}

@media only screen and (max-width: 960px) {
}

@media only screen and (max-width: 768px) {
#wrapper { width: 100%; min-width: inherit; }
.inner { width: 100%; padding: 0; }
#header { overflow: visible; }
#header .top_menu { position: absolute; top: 90px; left: 0; overflow: visible; width: 100%; background: #5099d7; padding: 0; height: 40px; z-index: 100; }
#header .top_menu ul { width: 100%; }
#header .top_menu li { margin: 0; padding: 0; width: 16.6666%; }
#header .top_menu>ul>li>a { background: #5099d7; margin: 0; padding: 0; line-height: 40px; height: 40px; text-align: center; }
#header .top_menu li a i, #header .top_menu li a b { display: none; }
#header .top_menu li.cur a { background: #003a7e; }
#header .language { top: 50px; right: 10px; }
#About { height: 1100px; }
#About .txt { margin-top: 180px; }
#About .txt.tw { height: 980px; }
#About .pic { width: 300px; top: 290px; }
#About .pic img { max-width: 100%; }
#About .pic2 { width: 300px; top: 320px; }
#About .pic2 img { max-width: 100%; }
#Contact .txt { margin: 200px auto 0; float: none; width: 400px; padding: 40px; background: #FFF; background: rgba(255,255,255,.9); }
}

@media only screen and (max-width: 640px) {
.inner { width: 96%; padding: 0 2%; }
#header { height: 50px; }
#header .logo { padding: 15px 0 0 10px; }
#header .logo img { height: 20px; }
#header .top_menu { position: absolute; top: 10px; left: 0; overflow: visible; width: 100%; background: none; padding: 0; height: 40px; }
#header .top_menu:before { display: block; float: right; width: 32px; height: 32px; padding: 10px; color: #FFF; font-size: 32px; content: "\f036"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
#header .top_menu.on:before { display: block; float: right; width: 32px; height: 32px; padding: 10px; color: #FFF; font-size: 32px; content: "\f00d"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
#header .top_menu>ul { display: none; background: #5099d7; position: absolute; top: 40px; left: 0; width: 100%; }
#header .top_menu li { width: 100%; float: none; border-bottom: 1px solid #333; }
#header .top_menu li.cur a { background: #5099d7; }
#header .language { top: 10px; right: 60px; width: 90px; }
#header .language .tit { display: none; }
#header .language .now { float: left; padding: 5px; background: #003a7e; }
#header .language .sel { top: 30px; left: 0; background: #FFF; }
.intro, .intro>.bg { overflow: visible; background-size: 100% auto !important; background-attachment: inherit !important; }
#HOME { background: url(../images/intro_1_bg.jpg) no-repeat top center; opacity: 1 !important; background-size: auto 100% !important; height: 500px; }
#HOME .bg { background: url(../images/intro_1_bg_top.png) no-repeat top center; opacity: 1 !important; background-size: auto 100% !important; height: 500px; }
#HOME h2 { width: 80%; margin: auto; padding: 40% 0 0 0; }
#HOME h2 img { max-width: 100%; }
#About { height: auto; }
#About .pic { width: 80%; top: 80px; left: 10%; }
#About .pic2 { width: 90%; top: 0; left: 0; margin: 0 auto; position: relative; padding: 80px 0 0 0; }

#About .pic2 .p1 { position: relative; top: 0; left: 0; }
#About .txt { margin: 0; width: auto; float: none; padding: 30px 15px 60px 15px; }
#About .txt.tw { height: auto; overflow: visible; }
#About .txt img { max-width: 100%; }
#Profile { height: 600px; z-index: 100; position: relative; }
#Profile.tw { height: auto; }
#Profile .txt { padding: 80px 15px 20px 15px; }
#Profile .profile_slider .item { height: 240px; }
#Profile .bx-controls { display: none; }
#Profile .inner { width: 100%; padding: 0; }
#Products { height: 1050px; }
#Products.tw { height:auto; }
#Products .txt { padding: 80px 0 0 0; }
#Products .products_slider .item { width: 100%; float: none; margin: 0; height: auto; }
#Customers { height: 400px; }
#Customers.tw { height:auto; }
#Customers .txt { padding: 80px 0 0 0; width: 80%; float: none; margin: auto; }
#Contact.tw { height: 700px; }
#Contact { height: 800px; }
#Contact .txt { margin: 80px auto 0; float: none; width: 90%; padding: 5%; background: #FFF; background: rgba(255,255,255,.9); }
#footer { padding: 10px; margin: -60px 0 0 0; background: #333; color: #FFF; }
#footer a { color: #FFF; text-decoration: underline; }
.txt h1 { text-align: center; }
.view_box .txt { width: auto; float: none; }
.view_box .pic { width: auto; float: none; }

    .his_list li { float: right !important; width: calc(100% - 50px);}
    .his_list li h4, .his_list li:nth-of-type(2n) h4 { float: none; width: auto; text-align: left; padding: 0 10px;}
    .his_list li .text { float: none !important; width: auto; text-align: left; padding: 0 10px;}
    .his_list li::before { left: -40px;}
    .his_list li::after { left: -32px;}
    .his_list .line { top: 2px; left: 30px;}
   
    .his_list li:nth-of-type(2n)::before { left: -40px;}
    .his_list li:nth-of-type(2n)::after { left: -32px;}
    .his_list .line{ top: 15px;}
}

@media only screen and (max-width: 320px) {
}