/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Open Sans', sans-serif; overflow-x: hidden; position: relative; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1280px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(16px, 1.3vw, 18px); line-height:1.5; color: #2E3545; letter-spacing: 0.5px; font-weight: 400; padding-top: 144px;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}


.demo-section { padding-left: 5%; padding-right: 5%;}

.font-size-16 { font-size: 16px !important;}
.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-19 { font-size: clamp(16px, 1.3vw, 19px);}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.6vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.3vw, 40px); line-height: 1.3;}
.font-size-44 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-60 { font-size: clamp(28px, 4vw, 60px); line-height: 1.2;}

.color-blue { color: #014E85;}
.color-green { color: #009fb4;}
.color-white { color: #fff;}
.color-gray { color: #576B79 !important;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-700 { font-weight: 700;}
.weight-800 { font-weight: 800;}

.padding-bottom-5 { padding-bottom:5px;}

.p-layout { margin: 0; padding:0 0 calc(15px + 1%) 0; font-weight: 400; line-height: 1.5; font-size: clamp(16px, 1.3vw, 18px);}

.hr-type-1 { padding: 0 !important; margin: 20px 0 !important; background: #2E3545;}

.layout-wrap { display: flex; flex-direction: row; flex-wrap: wrap;}
.layout-nowrap { display: flex; flex-direction: row; flex-wrap: nowrap;}


.width-1280 { max-width: 1280px;}
.width-1000 { max-width: 1000px; margin: 0 auto;}
.width-65-percentage { max-width: 65%; margin: 0 auto;}

.banner { position: relative;}
.banner img { width: 100%;}

.banner-pc, .banner-mobile { position: relative;}
.banner-mobile { display: none !important;}

.banner-slogon { color: #000; font-size: clamp(22px, 3.3vw, 36px); position: absolute; top:50%; transform: translateY(-50%); left: 0%; width: 100%; z-index: 3; font-weight: 700; text-shadow: 2px 2px 2px #fff, 3px 3px 2px rgba(0,0,0,0.15); padding: 0 10%;}


#path {  padding:8px 5% 5px 5%; background: #DDDFE2;}
#path ul { padding: 0 0 0 0; margin: 0; line-height: 1.2; text-align: left; }
#path li { display: inline-block; vertical-align: top; font-size: 14px; line-height: 1.2; font-weight: 500; margin: 0; padding: 0; letter-spacing: 0;}
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px; color: #808080; }
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #808080 !important; }
#path li a:hover { color: #0068B7 !important;}
#path li:last-child a { color: #808080 !important;}

/*service*/
.main-box { padding-top: calc(20px + 2%);
background-image: url("/images/theme-b67/banner_bg2.jpg"), url("/images/theme-b67/bg1.jpg");
background-repeat: no-repeat, repeat;
background-position: left top, left top;
background-size: 100%, auto;}

.title-type-1 { padding-bottom:calc(10px + 1%); }
.title-1 {font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; padding: 0px 0 0 0px; margin: 0 0 0 0; letter-spacing: 0.5px; font-family: 'Open Sans', sans-serif; color: #2E3545; }
.title-2 {font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; padding: 0px 0 20px 0px; margin: 0 0 0 0; letter-spacing: 0.5px; font-family: 'Open Sans', sans-serif; color: #2E3545; }

.service-list { margin-right: -25px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%); }
.service-list > a { margin-right: 25px; display: block; width: calc(33.33% - 25px); background: #C0C8D5; margin-bottom: 20px;}
.service-list > a:hover .service-list-name { color: #014E85; font-weight: 700;}
.service-list > a:hover .service-list-over { opacity: 1;}
.service-list > a:hover .service-list-pto img { transform: scale(1.15); filter: brightness(30%);}
.service-list-pto { padding-bottom: 76.25%; position: relative;}
.service-list-pto img { transition: all 0.4s ease-out 0s;}
.service-list-over { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 16px; line-height: 1.5;transition: all 0.4s ease-out 0s; opacity: 0;}
.service-list-over:after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #fff;}
.service-list-name { padding: 10px 20px;}

.bottom-tool-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; padding-bottom:calc(20px + 5%); }

.btn-1 { color: #2E3545; font-size: 16px; position: relative; display: inline-block; letter-spacing: 0; padding-bottom: 3px;}
.btn-1:after { content: ""; position: absolute; width: 100%; height: 1px; background: #2E3545; left: 0; bottom: 0;transition: all 0.4s ease-out 0s; }
.btn-1:hover { color: #CD0D29;}
.btn-1:hover:after { background: #CD0D29;}

/*services-list*/
.services-list-section { display: flex; flex-direction: row; flex-wrap: wrap;}
.services-list-section > div:nth-of-type(1) { width: 240px;}
.services-list-section > div:nth-of-type(2) { width: calc(100% - 240px); padding: 40px 0 0 45px;}

.aside-title { padding: 0 14px 10px 14px; color: #2E3545; font-weight: 700; font-size: clamp(20px, 1.9vw, 24px);}
.aside-menu > a { display: block; position: relative; background: #fff; padding: 10px 14px; border-bottom: solid 1px #ECECEC; font-size: 16px;}
.aside-menu > a:after { content: ""; position: absolute; width: 18px; height: 28px;background: #2E3545; top:50%; transform: translateY(-50%); right: -18px; clip-path: polygon(0% 0, 100% 50%, 0 100%);transition: all 0.4s ease-out 0s; opacity: 0;}
.aside-menu > a:hover, .aside-menu > a.current { background: #2E3545; color: #fff;}
.aside-menu > a:hover:after, .aside-menu > a.current:after { opacity: 1;}

.h1-title-box { margin-bottom: 20px; position:relative; height: 76px;}
.h1-title-box img { object-fit: cover; width: 100%; height: 100%; object-position: 0% 50%;}
.h1-title-box .title-1 { position: absolute; width: 100%; padding: 0 25px;z-index: 4; top:50%; transform: translateY(-50%); color: #fff;}

.third-menu { padding-bottom: calc(20px + 1%); display: flex; flex-direction: row; flex-wrap: wrap;}
.third-menu > a { margin: 0 8px 8px 0; width: calc(33.33% - 8px); text-align: center; border: solid 1px #C0C8d5; border-radius: 100px; color: #576b79 !important; padding: 0.6em 10px;font-size: 16px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.third-menu > a:hover, .third-menu > a.current { color: #fff !important; background: #576b79;}

.loop3 {  padding-bottom: calc(20px + 1%);}
.loop3 .owl-dots { display: none !important;}
.loop3 .owl-item {position: relative; }
.loop3 .owl-item img {width: auto !important;}
.loop3 .owl-nav { position: absolute; top:calc(50% - 35px); left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; background:rgba(87,107,121,.7) !important; width: 40px; height: 40px; margin: 0 !important; border-radius: 100% !important; border: 0px solid #fff !important; transform-origin: 50% 50%;transition: all 0.4s ease-out 0s;}
.loop3 .owl-prev { left:10px; }
.loop3 .owl-next { right:10px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; transition: all 0.4s ease-out 0s;width: 10px; height: 10px; background-size: contain; display: inline-block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; position: absolute; top:50%; left: 50%; }
.loop3 .owl-prev:before { content: ""; transform: translate(-30%, -50%) rotate(-135deg);}
.loop3 .owl-next:before { content: ""; transform: translate(-70%, -50%) rotate(45deg);}
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { background: rgba(0,0,0,.7)  !important;}
.loop3 .owl-stage-outer {z-index: 2; }
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: 30px; left: 0; width: 100%; text-align: center!important; padding: 0 0px; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #cecece !important; width: 12px !important; height: 12px !important;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #151885 !important; }

.services-list-link { display: block; position: relative;}
.services-list-link:hover { transform: scale(0.95);}
.services-list-link-pto { padding-bottom: 112%;}
.services-list-link-name { position: absolute; z-index: 4; bottom: 0;left: 0; width: 100%; padding: 0 10px; text-align: center; font-size: 16px; line-height: 1.1; color: #000;}

/*services-detail*/
.services-detail-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 10px;}
.services-detail-section > div { width: calc(50% - 30px);}

.products-detail-tool { position: relative;}
   .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: inline-block;
      max-width: 800px; width: 100%; 
      /*height: 100%;
      object-fit: cover;*/
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center; padding: 0 0px;
    }

    .mySwiper2 {
      height: 100%;
      width: 100%; margin-bottom: 15px;border: 0px solid #b7b7b7; border-radius: 0px;
    }

    .mySwiper {
      height: auto;
      box-sizing: border-box;
    }

    .mySwiper .swiper-slide {border: 0px solid #b7b7b7; border-radius: 0px; overflow: hidden;
      width: 25%;
      height: 100%; opacity: 0.5;
    }

    .mySwiper .swiper-slide-thumb-active {
		opacity: 1;
    }

.swiper-next, .swiper-prev { background:rgba(87,107,121,1) !important; width: 35px !important; height: 35px !important; margin: 0 !important; border-radius: 100% !important;  border: 0px solid #074151; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%);}
.swiper-next:hover, .swiper-prev:hover { opacity: 0.85 !important;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 10px; height: 10px ; border-width: 2px 2px 0 0; border-color: #fff; border-style: solid; position: relative;}
.swiper-prev:after { transform: rotate(-135deg); left: 1px;}
.swiper-next:after { transform: rotate(45deg); right: 1px;}
.swiper-prev { left: 20px;}
.swiper-next { right: 20px;}

.btn-inquiry-box { display: inline-block;}
.btn-inquiry { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border: 1px solid #576B79;margin: 20px 0; padding: 0.3em 2em; }
.btn-inquiry:hover { background: #576B79; }
.btn-inquiry:hover > img { filter: brightness(100);}
.btn-inquiry:hover > div { color: #fff;}
.btn-inquiry > img { width: 32px;}
.btn-inquiry > div { padding-left: 3px; color: #576B79; font-size: 16px;}


.btn-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 0 calc(20px + 2.5%) 0;}
.btn-box > a { margin-bottom: 10px;box-shadow: 0px 0px 8px 0px rgba(213,213,213,0.55); }
.btn-box > a:hover { transform: scale(0.95);}
.btn-box-prev, .btn-box-next, .btn-box-back { width: 240px; line-height: 54px; text-align: center; position: relative; border: 1px solid #576B79; display: block; border-radius: 27px;}
.btn-box-prev, .btn-box-next { color:#4e4e4e !important;}
.btn-box-prev img{ display:inline-block; position: absolute; top:50%; transform:translateY(-50%); left: 18px;}
.btn-box-next img{ display:inline-block; position: absolute; top:50%; transform:translateY(-50%); right: 18px;}
.btn-box-back { color: #fff !important; background: #576B79; border-color: #576B79;}
.btn-box-back img { display:inline-block; position: relative; margin-right: 10px; top:-2px;}

/*process*/
.process-top-section { padding-top: calc(20px + 2%);}
.process-main-section { padding-top: 0;}

.third-menu-2 { padding-bottom: calc(20px + 2.5%); display: flex; flex-direction: row; flex-wrap: wrap;}
.third-menu-2 > a { margin: 0 13px 18px 13px; width: calc(25% - 26px); text-align: center; border: solid 1px #014E85; color: #014E85 !important; padding: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.third-menu-2 > a:hover, .third-menu > a.current { color: #fff !important; background: #014E85;}

.process-section-1 { position: relative; padding: 0 10% 2em 10%;}
.process-section-1:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 90px; background: #fff; z-index: 2;}
.process-section-1:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: calc(100% - 0px); background: #DDDFE2; z-index: 1;}
.process-section-1-b:before { display: none;}
.process-section-1-content { position: relative; z-index: 2;}

.process-section-2 {padding: 0 10% 2em 10%;
background-image: url("/images/theme-b67/banner_bg2.jpg"), url("/images/theme-b67/bg1.jpg");
background-repeat: no-repeat, repeat;
background-position: left top, left top;
background-size: 100%, auto;}

.process-icon { padding-bottom: 1em; width: 180px; position: relative; background-image: url("/images/theme-b67/icon_idesgin_bg.svg");background-repeat: no-repeat; margin: 1em auto 1em auto;}
.process-icon-name { position: absolute; left: 0; bottom: 40px; width: 100%; color: #fff; transform: scale(0.8); line-height: 1; font-size: 18px; text-align: center;}

.process-1-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.process-1-content > div { width: 32%; background: #C0C8D5; text-align: center;}
.process-1-title { padding: 10px; color: #014E85; font-weight: 500;}

.area_line2 {display: block;margin: 0 auto;width: 1px;background-color: #576B79;height: 57px;}

.process-2-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.process-2-content > div { width: 32%; background: #DDDFE2;}
.process-2-data { padding: 5px 30px 20px 30px;}
.process-2-title { text-align: center; border-bottom: 1px solid #576B79; padding-bottom: 15px; margin-bottom: 15px; color: #576B79; font-weight: 500;font-size: clamp(20px, 1.7vw, 22px);}
.process-2-title > img { width: 33%;}

.process-flow { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;}
.process-flow > div { margin: 10px 15px; padding: 0 0 5px 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-bottom: solid 1px #576B79; min-width: 230px}
.process-flow > div > div:nth-of-type(1) { color: #576B79;font-size: clamp(24px, 3.3vw, 40px); line-height: 1; font-weight: 700; padding-right: 8px; width: 30px;}
.process-flow > div > div:nth-of-type(2) { color: #576B79; width: calc(100% - 30px - 32px); font-weight: 500; font-size: clamp(18px, 1.3vw, 20px);}
.process-flow > div > div:nth-of-type(3) { width: 32px;}

.layout-66 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.layout-66 > div:nth-of-type(1) { width: 66%;}
.layout-66 > div:nth-of-type(2) { width: 34%; padding-left: 4%;}

.data-list { padding: 5px 0; border-bottom: solid 1px #576B79; color: #576B79;}

.layout-50 { display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-between;}
.layout-50-b { align-items: center; margin-bottom: 20px;}
.layout-50 > div { width: 49.5%;}
.layout-50-b > div:nth-of-type(2) { padding-left: 20px;}
.layout-50-b .process-flow { padding-bottom: 0;}


.process-flow-2 > div { min-width: 100%; margin: 0 0;}
.process-flow-2 > div > div:nth-of-type(1), .process-flow-2 > div > div:nth-of-type(2) { color: #465660;}
.process-flow-2 > div > div:nth-of-type(2) { text-align:center;}

.process-data { padding-left: 15px; color: #465660;}

/*about*/
.about-section-2 { margin-top: -8%; padding-left: 10%; padding-right: 10%;}
.about-section-2-content { position: relative;}

.area3_slesmapab1 {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;animation: smp1;animation-duration: 7s;animation-iteration-count: infinite;}
.area3_slesmapab2 {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;animation: smp2;animation-duration: 7s;animation-iteration-count: infinite;}
.area3_slesmapab3 {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;animation: smp3;animation-duration: 7s;animation-iteration-count: infinite;}
.area3_slesmapab4 {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;animation: smp4;animation-duration: 7s;animation-iteration-count: infinite;}
.area3_slesmapab5 {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;animation: smp5;animation-duration: 7s;animation-iteration-count: infinite;}
@keyframes smp1 {
	0%    {top: 10px; opacity: 0;}
	15%   {top: 10px; opacity: 0;}
	20%   {top: 0;    opacity: 1;}
	98%   {top: 0;    opacity: 1;}
	100%  {top: 0;    opacity: 0;}
}

@keyframes smp2 {
	0%    {top: 5px; left: 5px; opacity: 0;}
	25%   {top: 5px; left: 5px; opacity: 0;}
	30%   {top: 0;    left: 0;   opacity: 1;}
	98%   {top: 0;    left: 0;   opacity: 1;}
	100%  {top: 0;    left: 0;   opacity: 0;}
}

@keyframes smp3 {
	0%    {top: 5px; left: -5px; opacity: 0;}
	35%   {top: 5px; left: -5px; opacity: 0;}
	40%   {top: 0;   left: 0;    opacity: 1;}
	98%   {top: 0;   left: 0;    opacity: 1;}
	100%  {top: 0;   left: 0;    opacity: 0;}
}

@keyframes smp4 {
	0%    {top: 5px; left: 5px; opacity: 0;}
	45%   {top: 5px; left: 5px; opacity: 0;}
	50%   {top: 0;   left: 0;   opacity: 1;}
	98%   {top: 0;   left: 0;   opacity: 1;}
	100%  {top: 0;   left: 0;   opacity: 0;}
}

@keyframes smp5 {
	0%    {top: 5px; left: 5px; opacity: 0;}
	55%   {top: 5px; left: 5px; opacity: 0;}
	60%   {top: 0;   left: 0;   opacity: 1;}
	98%   {top: 0;   left: 0;   opacity: 1;}
	100%  {top: 0;   left: 0;   opacity: 0;}
}

.area3_flex4 {display: flex;justify-content: flex-start; flex-wrap: wrap;}
.area3_flex4-div1 {display: block;position: relative;margin: 0.5em auto 0.5em auto;width: 120px;}
.area3_flex4-div1 img {width: 100%;height: auto;}
.area3_flex4-div1-word {display: block;position: absolute;width: 100%;padding: 0 12px;bottom: 35%;line-height: 130%;color: #2E3545;transform: scale(1);}
.area3_flex4-div2 {display: block;position: relative;background-image: url("/images/theme-b67/icon_idesgin_bg.svg");background-repeat: no-repeat;margin: 0.5em auto 0.5em auto;width: 120px;}
.area3_flex4-div2 img {width: 100%;height: auto;}
.area3_flex4-div2-name {display: block;position: absolute;width: 100%;bottom: 11%;text-align: center;line-height: 1;color: #FFFFFF;transform: scale(0.8);}
.area3_flex4-div2-name1 {display: block;position: absolute;width: 100%;bottom: 11%;text-align: center;line-height: 1;color: #FFFFFF;transform: scale(0.7);}
.area3_flex4-div3 {display: block;position: relative;margin: 0.5em auto 0.5em auto;width: 65px;}
.area3_flex4-div3 img {width: 100%;height: auto;}


.about_30years {display: block;position: relative;width: 100%;z-index: 1; padding-bottom: calc(20px + 3%);}
.about_30years img {display: block;width: 100%;}
.about_30years-ab1 {display: block;position: absolute;width: 100%;z-index: 10;animation: ye1;animation-duration: 7s;animation-iteration-count: infinite;}
.about_30years-ab2 {display: block;position: absolute;width: 100%;z-index: 20;animation: ye2;animation-duration: 7s;animation-iteration-count: infinite;}
.about_30years-ab3 {display: block;position: absolute;width: 100%;z-index: 30;animation: ye3;animation-duration: 7s;animation-iteration-count: infinite;}
.about_30years-ab4 {display: block;position: absolute;width: 100%;z-index: 40;animation: ye4;animation-duration: 7s;animation-iteration-count: infinite;}
.about_30years-ab5 {display: block;position: absolute;width: 100%;z-index: 50;animation: ye5;animation-duration: 7s;animation-iteration-count: infinite;}


@keyframes ye1 {
	0%    {top: 0; left: 0; opacity: 0;}
	10%   {top: 0; left: 0; opacity: 1;}
	95%   {top: 0; left: 0; opacity: 1;}
	100%  {top: 0; left: 0; opacity: 0;}
}

@keyframes ye2 {
	0%    {top: 0; left: 0; opacity: 0;}
	10%   {top: 0; left: 0; opacity: 0;}
	20%   {top: 0; left: 0; opacity: 1;}
	95%   {top: 0; left: 0; opacity: 1;}
	100%  {top: 0; left: 0; opacity: 0;}
}

@keyframes ye3 {
	0%    {top: 0; left: 0; opacity: 0;}
	20%   {top: 0; left: 0; opacity: 0;}
	30%   {top: 0; left: 0; opacity: 1;}
	95%   {top: 0; left: 0; opacity: 1;}
	100%  {top: 0; left: 0; opacity: 0;}
}

@keyframes ye4 {
	0%    {top: -30px; left: 0; opacity: 0;}
	30%   {top: -30px; left: 0; opacity: 0;}
	40%   {top: 0; left: 0; opacity: 1;}
	95%   {top: 0; left: 0; opacity: 1;}
	100%  {top: 0; left: 0; opacity: 0;}
}

@keyframes ye5 {
	0%    {top: 30px; left: 0; opacity: 0;}
	40%   {top: 30px; left: 0; opacity: 0;}
	50%   {top: 0; left: 0; opacity: 1;}
	95%   {top: 0; left: 0; opacity: 1;}
	100%  {top: 0; left: 0; opacity: 0;}
}


.about-section-3 { padding-left: 5%; padding-right: 5%; padding-top: calc(20px + 2.5%);
background-image: url("/images/theme-b67/about3_bg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding-bottom: 2em;}

.about-section-3-content { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-bottom: 20px;}
.about-section-3-content > img:nth-of-type(1){ width: 15%;}
.about-section-3-content > img:nth-of-type(2){ width: 70%;}
.about-section-3-content > img:nth-of-type(3){ width: 15%;}

.about-section-4 {
background-image: url("/images/theme-b67/about3_bg2.png"), url("/images/theme-b67/about_bg3-r.jpg");
background-repeat: no-repeat, repeat-y;
background-position: left top, right top;
background-size: contain, 100%;
}
.about-section-4-content { padding: 2em 0; width: 50%; margin: 0 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.about-section-4-content > div:nth-of-type(1) { width: 90px;}
.about-section-4-content > div:nth-of-type(2) { width: calc(100% - 90px); padding-left: 20px;}

.knowbox .pic{border-top: 5px solid #014e85;}
.knowbox .info{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;padding: 32px 40px;background-color: #dddfe2;}
.knowbox .info .item{display: flex;justify-content: flex-start;align-items: center;font-size: 14px;width: 100%;line-height: 1.2;color: #2e3545;}
.knowbox .info .item img{display: block;width: 40px;margin: 0 8px 0 0;}

.blog-detail-text .good-group{display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;margin: 32px 0 8px 0;}
.blog-detail-text .good{width: 85px;margin-right: 24px;}
.blog-detail-text  .good_img{display: block;width: 100%;margin: 0;}
.blog-detail-text .good_title{color: #576b79;font-size: 20px;font-weight: 600;margin-bottom: 6px;white-space: nowrap;}

.block-knowledge-2_title{color: #576b79;font-size: 20px;padding-bottom: 10px;border-bottom: 5px solid #014e85;}

@media only screen and (max-width: 1365px) {
	
}
@media only screen and (max-width: 1279px) {
	#content { padding-top: 60px;}
	
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important;}
	.banner-slogon { text-align: center; top:60%;}
	
	
}


@media only screen and (max-width: 980px) {
	.service-list > a { width: calc(50% - 25px);}
	
	.services-list-section > div:nth-of-type(1) { display: none;}
	.services-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding: 0px 0 0 0px;}
	
	.services-detail-section > div { width: 100%;}
	.services-detail-section > div:nth-of-type(1) { padding-bottom: 25px;}
	
	.third-menu-2 > a { width: calc(33.33% - 26px);}
	
	.process-section-1, .process-section-2 { padding: 0 5% 2em 5%;}
	
	.process-2-content > div { width: 100%; margin-bottom: 25px;}
	.process-2-data { padding: 5px 20px 20px 20px;}
	
	.layout-66 > div:nth-of-type(1) { width: 100%; padding-bottom: 10px;}
	.layout-66 > div:nth-of-type(2) { width: 100%; padding-left: 0px;}
	
	.layout-50-b > div { width: 100%;}
	.layout-50-b > div:nth-of-type(1){ padding-bottom: 10px;}
	.layout-50-b > div:nth-of-type(2) { padding-left: 0;}
	.process-flow-2 > div > div:nth-of-type(2) { text-align: left; width: auto;}
	
	.about-section-4 {background-image: url("/images/theme-b67/about3_bg2-840.jpg");background-repeat: no-repeat;position: left top;background-size: cover;}
	.about-section-4-content { width: 100%; margin: 0 auto; padding-left: 15%; padding-right: 15%;}
}

@media only screen and (max-width: 768px) {
	.width-65-percentage { max-width: 100%;}
	
	.third-menu > a { width: calc(50% - 8px);}
	
	.swiper-next, .swiper-prev { width: 30px !important; height: 30px !important; }
	.swiper-next:after, .swiper-prev:after { width: 12px; height: 12px ;}
	.swiper-prev { left: -10px;}
	.swiper-next { right: -10px;}
	
	.btn-box-prev, .btn-box-next, .btn-box-back { width: 100%;}
	
	.process-1-content > div { width: 100%; margin-bottom: 25px;}
	
	.knowbox .info{grid-template-columns: 1fr;padding: 25px 20px;}
	.knowbox .info .item img{width: 35px;}
}
@media only screen and (max-width: 640px) {
	.h1-title-box { height: 120px;}
	
	.third-menu-2 > a { margin: 0 0 10px 0; width: 100%;}
	
	.layout-50 > div { width: 100%;}
	.layout-50 > div:nth-of-type(1) { padding-bottom: 10px;}

	.about-section-3-content { flex-direction: column;}
	.about-section-3-content > img:nth-of-type(1){ width: 20%;}
	.about-section-3-content > img:nth-of-type(2){ width: 100%;}
	.about-section-3-content > img:nth-of-type(3){ width: 20%;}
	
	.about-section-4-content { width: 100%; flex-direction: column; padding-left: 5%; padding-right: 5%;}
	.about-section-4-content > div:nth-of-type(1) { padding-bottom: 15px; width: 80px;}
	.about-section-4-content > div:nth-of-type(2) { width: 100%; padding-left: 0;}
	.about-section-4-content > div:nth-of-type(2) .title-type-1 { text-align: center;}
}
@media only screen and (max-width: 570px) {
	.banner-slogon { display: none;}
	
	.third-menu > a { width: calc(100% - 0px); margin-right: 0;}

}
@media only screen and (max-width: 414px) {
	.service-list > a { width: calc(100% - 25px);}
	
}
@media only screen and (max-width: 320px) {
	.area3_flex4-div2 {margin: 0.5em auto 0.5em 0;}
}
@media only screen and (max-width: 280px) {
	

}