@charset "utf-8";
@import "styles.css"; /* 문자 형식 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
body {
font-family: 'Noto Sans', sans-serif!important; letter-spacing: -0.5px; box-sizing: border-box;
}s
ol, ul, dl { list-style: none; }
/* jnp css */
/* skipNav */
#skipNavi { position: absolute; top: -100px; z-index: 1000; width: 100%}
#skipNavi li { float: left; width: 100%; position: absolute; top: 0; left: 0;}
#skipNavi a { display: block; overflow: hidden; text-align: center; color: #fff;}
#skipNavi a:focus, #skipNavi a:active { position: absolute; top: 100px; left: 0; height: auto; margin-bottom: 10px; padding: 10px; font-weight: bold; background: #000; color: #fff; width: 100%;}
/* common */
.blind { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden;}
.inner { margin: 0 auto; width: 1180px; max-width: 1180px; box-sizing: border-box;}
.inner-full { width: 100%; max-width: 100%;}
section{ clear:both; padding: 90px 0; box-sizing: border-box;}
body{}
#mainNav .logo{ width: 130px; height: auto; min-height: 37px; background-image: url(/images/jnp/jnp-logo-white.png); background-position: left center; background-repeat: no-repeat; background-size: cover;}
#mainNav.navbar-shrink .logo {background-image: url(/images/jnp/jnp-logo.png);}
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link { text-transform: uppercase;}
header.masthead h1, header.masthead .h1 { font-size: 5rem;}
/* header.masthead::before {content:''; background: linear-gradient(to bottom, rgba(0, 0, 0, .3) 40%, rgb(0 0 0 / 0%) 100%);} */
header.masthead { padding-bottom: calc(10rem - 4.5rem); height: 100vh; padding-top: 10rem; background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 3%, rgba(0, 0, 0, .1) 100%);
/* background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 15%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .9) 100%); */
/* background: linear-gradient(to bottom, rgba(8, 8, 8, .7) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, .1) 100%); */
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../images/jnp/video-bg.mp4"); */
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
border: 0px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff;
}
header.masthead > .bg-video { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; z-index: -1; opacity: 1; }
header.masthead > .bg-video > .bg-video__content { height: 100%; width: 100%; object-fit: cover; /*background-size: cover 와 비슷함. (HTML 요소 or 비디오와 작동)*/}
header.masthead .container .site-copy { word-wrap: break-word; word-break: auto-phrase;}
.about { background-image: url('../images/jnp/people.jpg');
background-size: cover; /* 이미지가 요소를 꽉 채우게 */
background-repeat: no-repeat; /* 이미지 반복 안함 */
background-position: center; /* 가운데 정렬 */}
/* point color*/
.color-primary {background-color:#c2d453!important}
.border-color-light-white {border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;}
/*section */
sectoin{padding: 0 12px; box-sizing: border-box;}
/* section 01 === sec-service*/
/* .sec-service{ clear: both; border: 2px solid red;}
.sec-service .ser-wrap { clear: both; border: 2px dashed green;}
.sec-service > .ser-wrap > .tit { clear:both;}
.sec-service > .ser-wrap > .items {clear:both;}
.sec-service > .ser-wrap > .items > .item { text-align: center; }
.sec-service > .ser-wrap > .items > .item > i { font-size: 60px; color: #407aba; }
.sec-service > .ser-wrap > .items > .item > h4 {color: #191f23; font-size: 24px; }
.sec-service > .ser-wrap > .items > .item > span { color:#5d666f; font-size: 20px; }
.sec-service > .ser-wrap > .items > .item > strong { color:#616a73; font-size: 22px; } */
.services { position: relative; /* ::before, ::after 위치 기준 */ clear: both; display: block; width: 100%; min-height: 400px; z-index: 1; overflow: hidden;}
.services::before { content: ''; position: absolute; top: 0; left: 0; width: 179px; /* 이미지 크기 조정 가능 */ height: 339px; background-image: url('/images/jnp/service_bg.png');
background-repeat: no-repeat; background-size: contain; background-position: top left; z-index: -1; pointer-events: none;}
.services::after { content: ''; position: absolute; bottom: 0; right: 0; width: 179px; height: 339px; background-image: url('/images/jnp/service_bg.png');
background-repeat: no-repeat; background-size: contain; background-position: top right; transform: rotate(180deg); z-index: -1; pointer-events: none;}
.services > .service-wrap { display: flex; flex-direction: column; text-align: center; }
.service-wrap > .head { border: 0px dashed red}
.service-wrap > .head > .tit { position: relative; font-size: 36px; text-align: center; padding: 0 0 16px 0; font-weight: 600; letter-spacing: 0px;}
.service-wrap > .head > .tit::after { content: ''; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: #1f78d5;}
.service-wrap > .head > .copy { display: inline-block; width: 50%; width: 50%; margin-top: 10px; font-size: 18px; letter-spacing: -1px; text-align:center;}
.service-wrap > .body { margin: 60px 0 0 0; }
.service-wrap > .body > .items { display: flex; gap: 10%; justify-content: space-between; }
.service-wrap > .body > .items > .item { flex: 1; display: flex; flex-direction: column; align-items: center;}
.service-wrap > .body > .items > .item i { margin:80px 0 46px 0; font-size: 78px; color:#6294cb;}
.service-wrap > .body > .items > .item .contxt { display: flex; flex-direction: column; text-align: center; align-items: center; }
.service-wrap > .body > .items > .item .contxt .tit { width: 50%; text-align:center; color:#0d1216;}
.service-wrap > .body > .items > .item .contxt span {color:#777; font-weight: 400; word-wrap: break-word; word-break: auto-phrase;}
.service-wrap > .body > .items > .item .contxt strong { margin-top: 4px; color:#555; font-weight: 600;}
/* section 02 === service swiper */
.ser-swiper{ display: block; padding:90px 30px 0px 30px; width: 100%; min-height: 400px; z-index: 1; overflow: hidden; background-color:#f4f4f4; }
.ser-swiper .scene__wrap { padding: 0px 70px;}
.ser-swiper .scene__wrap .scene__head{ /* position: absolute; top: 80px; left: 100px; z-index: 5; display: flex; flex-direction: column; */}
.ser-swiper .scene__wrap .scene__head .tit { position: relative; display: block; font-size: 40px; font-weight: 700; color: #111; letter-spacing: -1px; }
.ser-swiper .scene__wrap .scene__head .tit > strong { color:#447dba}
.ser-swiper .scene__wrap .scene__head .tit .small_copy { display: inline-block; font-size: 11px; font-weight: 500; color: #b5b5b5; letter-spacing: -0.5px; }
.ser-swiper .scene__wrap .scene__head .copy { display: block; font-size: 18px; letter-spacing: -1px; word-wrap: break-word; word-break: auto-phrase;}
.ser-swiper .scene__wrap .scene__body{ position: relative; padding: 0px; width: 100%; height: auto; }
.ser-swiper .scene__wrap .scene__body > .items { display: block; margin-bottom: 60px; width: 100%; /* height: 540px; */ box-sizing: border-box; background-color: transparent;}
.ser-swiper .scene__wrap .scene__body > .items .item { padding: 80px 0px 0px 0px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 { position: relative; display: flex; justify-content: space-evenly; gap: 0px; height: 500px;
z-index: 0; background-image: url("data:image/svg+xml;utf8,");
background-position: 0% 10%; background-repeat: no-repeat;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img { flex: 3; position: relative; display: block; width: 100%; height: 100%;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap { position: relative; height: inherit;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img { position: absolute; z-index: 1; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) { display: block; left: 80px; width: 440px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 170px; left: 56%; width: 240px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 124px; left: 3%; width: 100px;}
.ser-swiper .scene__wrap .scene__body > .items .item02 { position: relative; display: flex; justify-content: space-evenly; gap: 0px; /* height: 500px; */
z-index: 0; background-image: url("/images/jnp/scene02_imgbg.png"); background-position: 0% 10%; background-repeat: no-repeat; background-size: 60%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img { flex: 3; position: relative; display: block; width: 100%; height: 100%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap { position: relative; height: inherit;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img { position: absolute; z-index: 1; }
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(1) { display: block; left: 8%; width: 404px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(2) { top: 124px; left: 40%; width: 300px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(3) { top: 0%; left: 66%; width: 90px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item03 { position: relative; display: flex; justify-content: space-evenly; gap: 0px; /* height: 500px; */
z-index: 0; background-image: url("/images/jnp/scene03_imgbg.png"); background-position: 0% 10%; background-repeat: no-repeat; background-size: contain;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img { flex: 3; position: relative; display: block; width: 100%; height: 100%;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap { position: relative; height: inherit;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img { position: absolute; z-index: 1; }
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(1) { display: block; top: 20px; left: 10%; width: 380px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(2) { top: 60px; left: 54%; width: 180px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(3) { top: 160px; left: 34%; width: 160px; filter: drop-shadow(0 6px 6px rgba(15, 23, 42, 0.2));}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt {flex: 2; display: flex; flex-direction: column; height: fit-content; padding: 20px 0px; box-sizing: border-box;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p{ clear:both; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p strong{display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 120%;
margin-bottom: 10px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em{font-size: 24px; font-weight: 500; font-style: normal; letter-spacing: -0.5px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em span {display: inline-block; margin-left: 10px; padding: 3px 12px; background-color:#0666cb; color:#fff; font-size: 14px; font-weight: 600; border-radius: 4px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; padding-left: 0px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li { position: relative; padding-left: 28px; /* 체크 아이콘과 텍스트 간 간격 */ line-height: 1.4rem; display: flex; align-items: center; text-align: left; word-wrap: break-word; word-break: auto-phrase;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: url("data:image/svg+xml;utf8,") no-repeat center center;
background-size: contain;}
.ser-swiper .scene__wrap .scene__body > .scene-prev,
.ser-swiper .scene__wrap .scene__body > .scene-next { position: absolute; top: 10%; color:#fff; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 10;}
.ser-swiper .scene__wrap .scene__body > .scene-prev { margin-right: 10px; right: 4%; background-color: #d8d8d8;}
.ser-swiper .scene__wrap .scene__body > .scene-prev::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block;
width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,") no-repeat center center;
background-size: contain; color: #fff;}
.ser-swiper .scene__wrap .scene__body > .scene-next { right: 0%; margin-left: 10px; background-color: #0662c2; }
.ser-swiper .scene__wrap .scene__body > .scene-next::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block;
width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,") no-repeat center center;
background-size: contain; color: #fff;}
.swiper-scrollbar {display: none;}
.swiper-pagination { }
.ser-swiper .scene__wrap .pagination { margin-top: 20px;}
/* section 03 === system */
.system { position: relative; display: block; width: 100%; z-index: 1; overflow: hidden; background-color:#f9f9f9; padding-bottom: 120px;}
.system::after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: url("data:image/svg+xml;utf8,") no-repeat bottom center; background-size: cover;
z-index: -1;}
.system > .container { clear:both;}
.system .system-wrap { display: block; margin-bottom: 4rem; padding: 0 12px; /* background: url(/images/jnp/system_bg.png) no-repeat right bottom; */ background-size: contain; /* 또는 cover */}
.system .system-wrap > .head { padding: 0 14px; text-align: center; }
.system .system-wrap > .head .tit { margin-bottom: 20px; font-size: 36px; font-weight: 700; line-height: 3rem; letter-spacing: -1px;}
.system .system-wrap > .head .tit span {display: inline-block; margin-left: 10px; letter-spacing: -0.5px; }
.system .system-wrap > .head .copy { position: relative; font-size: 18px; letter-spacing: -0.5px;}
/* .system .system-wrap > .head .copy::after { content: ''; position: absolute; bottom: -10px; left: 0%; width: 50px; height: 3px; background: #6f6f6f;} */
.system .system-wrap > .body { display: flex; align-items: center; margin-top: 20px;}
.system .system-wrap > .body .items { flex: 4; display: flex; flex-wrap: wrap; margin: 0; padding: 0 0 0 0px; width: 100%; list-style: none;}
.system .system-wrap > .body .items .item { width: 50%; /* 한 줄에 2개 */ box-sizing: border-box; /* 패딩/보더 포함한 너비 계산 */ padding: 10px; /* 여백 줄 경우 */}
.system .system-wrap > .body .items .item > .part { display: flex; flex-direction: column;}
.system .system-wrap > .body .items .item > .part > div {display: flex; align-items: center;}
.system .system-wrap > .body .items .item > .part > div i { flex: 1; margin-right: 10px; color:#bcbcbc; font-size: 30px; }
.system .system-wrap > .body .items .item > .part > div span { flex: 7; display: flex; align-items: flex-start; margin-top: 16px; flex-direction: column; }
.system .system-wrap > .body .items .item > .part > div span strong { display: block; font-size: 20px; }
.system .system-wrap > .body .items .item > .part > div span em { font-size: 16px; font-style: normal; color: #005199; font-weight: 100;}
.system .system-wrap > .body .items .item > .part ul{ display: flex; padding: 10px 0 0 64px; flex-direction: column; gap: 5px; font-weight: 400; letter-spacing: -1px;}
.system .system-wrap > .body .items .item > .part ul li { flex: 1; position: relative; padding:0 0 0 14px; word-wrap: break-word; word-break: auto-phrase;}
.system .system-wrap > .body .items .item > .part ul li::before { content: ''; position: absolute; top: 9px; left: 0; width:5px; height: 5px; background-color:#555; border-radius: 50%;}
.system .system-wrap > .body .bg-wrap.video_pc { flex: 1; transform: scale(80%);}
.system .system-wrap > .body .bg-wrap.video_mobile { display:none;}
/* 배경이미지 컨테이너 */
.system .system-wrap > .body .bg-wrap .img-box {
position: relative;
width: 349px;
height: 710px;
background-image: url("/images/jnp/system_bg001.png");
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
overflow: hidden;
/* 투명 영역을 제외한 모양 기준 drop-shadow */
-webkit-filter: drop-shadow(1px 8px 5px rgba(0,0,0,0.18));
filter: drop-shadow(1px 8px 5px rgba(0,0,0,0.18));
}
/* 비디오를 배경 위에 올리기 */
.system .system-wrap > .body .bg-wrap .img-box .system-video {
position: absolute;
top: 92px;
left: 24px;
width: 300px;
height: 531px;
object-fit: fill;
/* 필요 시 z-index 추가 가능 */
/* z-index: 1; */
}
/* section 04 === history */
.history { position: relative; display: block; margin-top: -1px; padding: 30px; width: 100%; z-index: 1; overflow: hidden; background-color:#e2edf9; color:#555; box-sizing: border-box;}
.history > .container { clear:both;}
.history .history-wrap { display: block; padding: 0 12px; box-sizing: border-box;}
.history .history-wrap > .head { padding: 0 30px 20px 74px; box-sizing: border-box;}
.history .history-wrap > .head .tit { display: block; font-size: 24px; font-weight: 600; line-height: 2.4rem; color: #111; }
.history .history-wrap > .head .tit > span { font-size: 18px; letter-spacing: -1px;}
.history .history-wrap > .head .tit > strong { display: block; font-size: 36px; color:#1f388d; font-weight: 600; letter-spacing: -1.5px;}
.history .history-wrap > .body { display: flex; align-items: flex-end; position:relative; }
.history .history-wrap > .body .his-swiper { position: relative; margin-top: 30px; padding: 0px; width: 90%;}
.history .history-wrap > .body .his-swiper .swiper-wrapper {}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item { position: relative; padding: 0 12px 0 12px;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item::after { content: ''; position: absolute; top: 0; right: -15px; /* transform: translateX(-50%); */ width: 1px; height: 100%; background-color:#ddd; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > p { font-size: 30px; font-weight: 600; color:#425ecd; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul { clear:both; margin: 0px; padding: 0px; width: 100%; min-height: 170px; display: flex; padding: 10px 0 0 0px; flex-direction: column;
gap: 5px; font-weight: 400; letter-spacing: -1px; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li { position: relative; width: 100%; margin: 0px 0 10px 0; padding: 0 0 0 10px; line-height: 20px; box-sizing: border-box;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li::before { content: ''; position: absolute; top: 9px; left: 0; width:3px; height: 3px; background-color:#555; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li strong { display: inline; padding:0 4px 0 0px; font-size: 16px; color: rgb(33, 37, 41); font-weight: 400; word-wrap: break-word; word-break: auto-phrase;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li span { position: relative;display: inline; padding:0 5px 0 8px; font-size: 14px; color:#767676}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li span::before { content: ''; display: inline-block; margin: 0px 5px 0px 0px; width: 1px; height: 10px; background-color: #959595; transform: rotate(20deg);}
/* .history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li span::before { content:''; position: absolute; bottom: 3px; left: 0px; width: 1px; height: 10px; background-color:#959595; transform: rotate(20deg);} */
/* .history .history-wrap > .body .his-swiper .item .year{ font-size: 30px;}
.history .history-wrap > .body .his-swiper .item .year_li{ display: flex; }
.history .history-wrap > .body .his-swiper .item .year_li li { width: 33%; position: relative;}
.history .history-wrap > .body .his-swiper .item .year_li li strong { color:#fff; font-size:14px;} */
.history .history-wrap > .body > .his-prev,
.history .history-wrap > .body > .his-next { position: absolute; color:#fff; display: flex; justify-content: center;
align-items: center; top: 50%; transform: translateY(-50%); background: #000; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 10; }
.history .history-wrap > .body > .his-prev { left: 30px;}
.history .history-wrap > .body > .his-next { right: 30px;}
.history .history-wrap > .body > .his-prev > i,
.history .history-wrap > .body > .his-next > i { color:#fff; font-size: 12px; }
/* .history .history-wrap > .body > .his-prev,
.history .history-wrap > .body > .scene-next { position: absolute; top: 22%; right: 10px; color:#fff; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 10;}
.history .history-wrap > .body > .scene-prev { margin-right: 10px; left: 10px; background-color: #d8d8d8; border:2px solid yellow;}
.history .history-wrap > .body > .scene-prev::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block;
width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,") no-repeat center center;
background-size: contain; color: #fff;}
.history .history-wrap > .body > .scene-next { right: 10%; margin-left: 10px; background-color: #0662c2;}
.history .history-wrap > .body > .scene-next::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block;
width: 24px; height: 24px; background: url("data:image/svg+xml;utf8,") no-repeat center center;
background-size: contain; color: #fff;}
*/
/* section 05 === contact */
/* .contact { position: relative; display: block; padding: 4rem 0rem; width: 100%; z-index: 1; overflow: hidden; background-color:#212529; color:#fff;}
.contact > .container { clear:both;}
.contact .contact-wrap { display: block; padding: 0 12px;}
.contact .contact-wrap > .head { display: flex; flex-direction: column; align-items: center; text-align: center;padding: 0 30px; box-sizing: border-box;}
.contact .contact-wrap > .head .tit { position: relative; display: block; font-size: 36px; line-height: 2.8rem; color: #fff; letter-spacing: -1px;}
.contact .contact-wrap > .head .tit::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; max-width: 3.25rem; height: 3px; background: #1f78d5;}
.contact .contact-wrap > .head .copy{ margin: 1.5rem auto; color: #6c757d !important; font-size: 18px; letter-spacing: -.5px;}
.contact .contact-wrap > .body { display: flex; align-items: center; flex-direction: column;}
.contact .contact-wrap > .body i { margin: 24px 0 10px 0; font-size: 60px; }
.contact .contact-wrap > .body .email-link { color: #0056b3; text-decoration: underline; font-weight: 500; letter-spacing: 0px; margin-bottom: 0px; color: #f4623a;}
.contact .contact-wrap > .body .email-link:focus { outline: 2px dashed #333; outline-offset: 4px;} */
/* section 05 === partner */
.contact { position: relative; display: block; padding: 0rem; width: 100%; z-index: 1; overflow: hidden; background-color:#131a2e;}
.contact .partner-wrap { position: relative; display: block; padding: 4rem 0; overflow: hidden;}
.contact .partner-wrap::before { content: ""; position: absolute; inset: 0; background-image: url(/images/jnp/jnp-logo.png);
background-size: cover; background-repeat: no-repeat; background-position: left; filter: grayscale(100%); opacity: 0.1; pointer-events: none;}
.contact .partner-wrap .body { display: flex; align-items: center; text-align: right; gap: 50px; width: 100%; justify-content: flex-end; box-sizing: border-box;}
.contact .partner-wrap .body .tit { flex: 2; color: #fff; letter-spacing: -.5px; text-align: right;}
.contact .partner-wrap .body .tit strong{ display: block; }
.contact .partner-wrap .body .copy { flex: 3; display: flex; gap: 14px; margin: 1.5rem auto; color: #c3c3c3 !important; font-size: 14px; letter-spacing: -.5px;
text-align: left; flex-direction: column; align-items: flex-start;}
.contact .partner-wrap .body .copy > li > span { display: block; }
.contact .partner-wrap .body .email { display: block; }
.contact .partner-wrap .body .copy > li .email-link { margin-top: 6px;}
.contact .partner-wrap .body .copy > li .email-link i { margin-right: 8px; font-size: 20px; textd-decoration: none;}
.contact .partner-wrap .body .copy > li .email-link { display: flex; align-items: center; text-align: left; color: #0056b3; text-decoration: none; font-weight: 500; letter-spacing: 0px; margin-bottom: 0px; color: #f4623a;}
.contact .partner-wrap .body .copy > li .email-link strong:focus,
.contact .partner-wrap .body .copy > li .email-link strong:hover { text-decoration: underline;}
/* footer*/
.footer { display: flex; padding: 28px 0; color:#fff; background-color:#0a0b0f; border-top: 1px solid #2c2c2c;}
.footer .footer-wrap {}
.footer .footer-wrap .items { display: flex; flex-direction: column; align-items: center; justify-content: center; color:#767676; font-size: 15px; text-align:center; font-weight: 300 }
.footer .footer-wrap .items > .item { display: flex; gap: 10px; padding: 10px 0; flex-direction: row; align-items: baseline;}
.footer .footer-wrap .items > .item img { filter: grayscale(100%); opacity: 0.5; width: 90px; }
.footer .footer-wrap .items > .item strong { margin: 0 5px;}
.footer .footer-wrap .items > .item span { margin: 0 5px;}
/* footer lang=en*/
:lang(en) .contact .partner-wrap .body .tit { font-size: 1.4rem;}
:lang(en) .contact .partner-wrap .body .copy { font-size: 16px;}
:lang(en) .ser-swiper .scene__wrap .scene__body > .items .item { margin-top: 70px; padding: 0px 0px 0px 0px;}
/* 통합 에니메이션 */
.fade-img { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease forwards;}
.delay-0 { animation-delay: 0s;}
.delay-1 { animation-delay: 1s;}
.delay-2 { animation-delay: 2s;}
@keyframes fadeInUp { to {
opacity: 1;
transform: translateY(0);
}
}
/* .fade-img {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
} */
.fade-img.visible {
opacity: 1;
transform: translateY(0);
}
/* 통합 에니메이션 */
/* ********************************* media query ****************************************** */
/* bootstrap responsive web -- css min 아니구 max 수정 작업 */
/* 📱 모바일 작은 화면 (1400px 이하) 🖥️ 데스크탑 */
@media (max-width: 1400px) {
.ser-swiper .scene__wrap { padding: 0px 0px;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(3) { left: 68%;}
}
/* 📱 모바일 작은 화면 (1200px 이하) 🖥️ 데스크탑 */
@media (max-width: 1200px) {
.service-wrap > .head > .copy { width: 90%; }
/* .ser-swiper .scene__wrap .scene__body > .items { height: 800px; }
.ser-swiper .scene__wrap .scene__body > .items .item { flex-direction: column; height: auto;} */
.ser-swiper .scene__wrap .scene__body > .items .item .scene_img .scene_img_wrap { margin-left: -40px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) { left: 15%; width: 420px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 43%; left: 60%; width: 200px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 30%; left: 8%; width: 80px;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(3) { left: 80%;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt { padding: 0px 0px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p strong { font-size: 28px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em { font-size: 20px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul { margin-top: 10px; padding-left: 0px; gap: 6px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li { font-size: 15px; }
.ser-swiper .scene__wrap .scene__body > .scene-prev { margin-right: 20px;}
/* .system .system-wrap > .body { align-items: center;}
.system .system-wrap > .body .items { flex: 2;}
.system .system-wrap > .body .items .item { width: 100%;}
.system .system-wrap > .body .items .item > .part > div i {font-size: 40px;}
.system .system-wrap > .body .items .item > .part ul { padding: 10px 0 0 80px; } */
/* .system .system-wrap > .body .items { flex: 2; }
.system .system-wrap > .body .items .item { width: 100%;}
.system .system-wrap > .body .items .item > .part > div i { margin-bottom: -80px; margin-right: 40px;font-size: 60px; }
.system .system-wrap > .body .items .item > .part ul { padding: 10px 0 0 110px; } */
.system .system-wrap > .body { flex-direction: column-reverse; align-items: center;}
/* .system .system-wrap > .body .bg-wrap {text-align:center; }
.system .system-wrap > .body .bg-wrap .img-box { margin-bottom: 20px; height: 300px; text-align:center; overflow-y: hidden;}
.system .system-wrap > .body .bg-wrap .img-box img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; } */
/* .system .system-wrap > .body .bg-wrap .img-box { height: 380px;}
비디오를 배경 위에 올리기
.system .system-wrap > .body .bg-wrap .img-box .system-video { top: 90px; } */
.system .system-wrap > .body .bg-wrap.video_pc { display: none; flex: 1; }
.system .system-wrap > .body .bg-wrap.video_mobile { flex:1; display:block; transform: scale(80%);}
/* 배경이미지 컨테이너 */
.system .system-wrap > .body .bg-wrap .img-box {
position: relative; /* absolute 기준점 */
width: 710px;
height: 349px;
background-image: url("/images/jnp/system_bg_w.png");
background-size: 100%; /* 필요에 따라 contain 등으로 변경 */
background-position: top;
background-repeat: no-repeat;
-webkit-filter: drop-shadow(1px 8px 5px rgba(0,0,0,0.18));
filter: drop-shadow(-13px 0px 5px 1px rgba(0,0,0,0.9));
}
/* 비디오를 배경 위에 올리기 */
.system .system-wrap > .body .bg-wrap .img-box .system-video {
position: absolute;
top: 26px;
left: 88px;
width: 536px;
height: 300px;
object-fit: fill;
/* 필요 시 z-index 추가 가능 */
/* z-index: 1; */
}
}
@media (max-width: 1024px) {
:lang(en) .footer .footer-wrap .items > .item { flex-direction: column; }
}
/* 📱 모바일 작은 화면 (992px 이하) 태블릿 */
@media (max-width: 992px) {
.container-md, .container-sm, .container { width: 100%!important; max-width: initial!important;}
#mainNav .logo { background-image: url(/images/jnp/jnp-logo.png); }
header.masthead h1 { font-size: 3.5rem;}
.ser-swiper .scene__wrap .scene__head { left: 30px; }
.ser-swiper .scene__wrap .scene__body > .items { height: 700px; }
.ser-swiper .scene__wrap .scene__body > .items .item { flex-direction: column; align-items: center; margin: 0 auto; height: inherit; }
.ser-swiper .scene__wrap .scene__body { position: relative; padding-top: 0px; width: 100%; height: auto;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img { position: relative; width: 100%; display: block; width: 100%; height: 100%;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap { height: 100%; width: 100%;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) {left: 25%;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 50%; left: 60%; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 34%%; left: 19%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 { background-position: 0% 0%; background-size: contain;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(1) { left: 24%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(3) { left: 73%;}
.ser-swiper .scene__wrap .scene__body > .items .item03 { background-size: initial;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(1) { left: 24%;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(2) { left: 54%;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(3) { left: 39%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 { padding: 70px 0px 0px 0px; }
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img{width: 40%;}
/* .ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(3) {right: 16%; }
.ser-swiper .scene__wrap .scene__body > .items .item02 > .scene_img .scene_img_wrap img:nth-of-type(2){width: 40%;} */
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt { flex: none; margin: 0 auto; text-align: center;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p { margin-bottom: 10px; }
.ser-swiper .scene__wrap .scene__body > .scene-prev, .ser-swiper .scene__wrap .scene__body > .scene-next { top: 6%; width: 44px; height: 44px; }
.ser-swiper .scene__wrap .scene__body > .scene-prev { right: 14%; }
.ser-swiper .scene__wrap .scene__body > .scene-next { right: 10%; }
.ser-swiper [part="pagination"] { display: none!important;}
.history .history-wrap > .head {padding: 0 0px 20px 0px;}
.history .history-wrap > .body > .his-prev { left: 0px;}
.history .history-wrap > .body > .his-next { right: 0px;}
/* .system .system-wrap > .body .items { flex: 3;} */
/* .system .system-wrap > .body .items .item > .part > div span { flex: 5;}
.system .system-wrap > .body .items .item > .part ul {padding: 10px 0 0 120px;} */
.contact .partner-wrap .body { gap: 0px; margin: 0 auto; width: 80%; flex-direction: column; align-items: center;}
.contact .partner-wrap .body .tit { flex: none; margin-bottom: 20px}
.contact .partner-wrap .body .tit strong { display: inline-block; }
.contact .partner-wrap .body .copy { flex: none; margin: 0px; padding: 0px; text-align: center; flex-direction: column; align-items: center;}
.contact .partner-wrap .body .copy > li .email-link { align-items: center; justify-content: center;}
.contact .partner-wrap .body .copy > li .email-link strong { font-size: 16px;}
:lang(en) .ser-swiper .scene__wrap .scene__body > .items .item .scene_img .scene_img_wrap{ min-height: 380px;}
:lang(en) .ser-swiper .scene__wrap .scene__body > .items { min-height: 715px; }
:lang(en) .contact .partner-wrap .body .copy { font-size: 14px; }
}
/* 📱 모바일 작은 화면 (768px 이하) 태블릿 */
@media (max-width: 768px) {
.container-md, .container-sm, .container { width: 100%!important; max-width: initial!important;}
.ser-swiper .scene__wrap .scene__head .copy { width: 100%; }
/* .ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { right: 8% } */
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em span { padding: 1px 10px; font-size: 13px; }
/* .system .system-wrap > .head .tit {font-size: 24px; line-height: 2.2rem;}
.system .system-wrap > .body { margin-top: 20px} */
.system .system-wrap > .body .items { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; width: 66%;}
.system .system-wrap > .body .items .item { display: flex; justify-content: flex-start; width: 100%; }
.system .system-wrap > .body .items .item > .part { display: flex; flex-direction: column;}
.system .system-wrap > .body .items .item > .part > div i { margin-top: 20px; margin-right: 20px; font-size: 36px;}
.system .system-wrap > .body .items .item > .part ul { padding: 10px 0 0 0px; }
.service-wrap > .head > .copy { font-size: 20px;}
.service-wrap > .body { margin: 20px 0 0 0;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li { font-size: 16px;}
/* .ser-swiper .scene__wrap .scene__body > .scene-prev,
.ser-swiper .scene__wrap .scene__body > .scene-next { top: 22%; width: 30px; height: 30px;}
.ser-swiper .scene__wrap .scene__body > .scene-prev { right: 13%; } */
.system .system-wrap > .body .bg-wrap.video_mobile { transform: scale(70%);}
.history .history-wrap > .head .tit > strong { font-size: 30px; }
.contact .partner-wrap .body .tit { text-align: center;}
.footer .footer-wrap .items { text-align: left; padding: 0 30px;}
.footer .footer-wrap .items > .item { flex-direction: column; align-items: flex-start; width: 100%; font-size: 14px; }
.footer .footer-wrap .items strong { margin: 5px; }
.footer .footer-wrap .items span { margin: 5px; font-size: 13px;}
:lang(en) .system .system-wrap > .head .tit { font-size: 30px; line-height: 2.4rem; }
:lang(en) .ser-swiper .scene__wrap .scene__body > .items { min-height: 725px; }
}
/* 📱 모바일 작은 화면 (576px 이하) 모바일*/
@media (max-width: 576px) {
.container-md, .container-sm, .container { width: 100%; max-width: 540px;}
header.masthead { height: 400px; overflow: hidden;}
header.masthead h1 { font-size: 2.2rem;}
header.masthead > .bg-video { height: 400px; overflow: hidden;}
header.masthead .container .text-white-75.mb-5 { margin-bottom: 0!important;}
header.masthead .container .br-line{ display: none;}
.service-wrap > .head > .copy { font-size: 14px; width: 96%;}
.service-wrap > .body > .items { flex-direction: column; }
.service-wrap > .body > .items > .item { flex-direction: row; gap: 10px;}
.service-wrap > .body > .items > .item i { flex: 1; margin: 30px 0; font-size: 60px;}
.service-wrap > .body > .items > .item .contxt { flex: 2; align-items: flex-start; text-align: left;}
.service-wrap > .body > .items > .item .contxt .tit {text-align: left; }
.ser-swiper .scene__wrap .scene__head strong { line-height: 1.8rem;}
.ser-swiper .scene__wrap .scene__head .copy { width: 100%; font-size: 16px; letter-spacing: -1px; word-wrap: break-word; word-break: auto-phrase;}
.ser-swiper .scene__wrap .scene__body > .items { height: 640px; }
/* .ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) { width: 290px; left: 10%; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { width: 160px; top: 110px; right: 8%;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { width: 60px; top: 70px; left: 5%; } */
.ser-swiper .scene__wrap .scene__body > .items .item02 { height: auto; z-index: 0; background-position: 50% 0%; background-repeat: no-repeat; background-size: 100%;}
/* .ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(1) { width: 290px; left: 10%; }
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(2) { width: 200px; top: 95px; left: 40%;}
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(3) { width: 80px; top: 0px; left: 68%; right: 18%;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(1) { top: 0px; left: 40px; width: 350px}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(2) { left: 300px; width: 140px;}
.ser-swiper .scene__wrap .scene__body > .items .item03 > .scene_img .scene_img_wrap img:nth-of-type(3) { top: 140px; left: 180px; width: 140px;}
*/
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) { width: 320px}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 40%; left: 68%; width: 180px; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 30%; left: 16%; width: 70px}
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(1) { left: 14%; width: 324px}
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 100px; left: 43%; width: 260px; }
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 0%; left: 78%; width: 80px}
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(1) { left: 14%; width: 340px}
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 80px; left: 64%; width: 130px; }
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 140px; left: 48%; width: 120px}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt { /* margin-top: 40px; */ }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p { margin-left: 20px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p strong { font-size: 24px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em { font-size: 18px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em span { padding: 2px 8px; font-size: 12px; letter-spacing: 0.5px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul { margin-top: 0px; gap: 8px; padding: 0px; box-sizing: border-box;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li { font-size: 16px; line-height: 1.4rem; }
.ser-swiper .scene__wrap .scene__body > .scene-prev, .ser-swiper .scene__wrap .scene__body > .scene-next {
top: 6% !important;
width: 34px; height: 34px;}
.ser-swiper .scene__wrap .scene__body > .scene-prev { right: 4%; }
.ser-swiper .scene__wrap .scene__body > .scene-next { right: 0%; }
.system .system-wrap > .head .tit span { margin-left: 0px; letter-spacing: -1px;}
.system .system-wrap > .head .copy { font-size: 18px;}
.system .system-wrap > .body .bg-wrap .img-box img { margin: 0 auto; width: 90%;}
.system .system-wrap > .body .items { width: 80%; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt { margin-top: 0px;}
.system .system-wrap > .body .bg-wrap.video_mobile { transform: scale(60%);}
.history .history-wrap > .head .tit { font-size: 30px; line-height: 2rem;}
.history .history-wrap > .head .tit .br-line { display: none;}
.history .history-wrap > .body .his-swiper { margin-top: 0px; width: 85%;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > p { margin-bottom: 0rem!important;}
:lang(en) .ser-swiper .scene__wrap .scene__body > .items { height: auto;}
:lang(en) .ser-swiper .scene__wrap .scene__body > .items .item .scene_img .scene_img_wrap{ min-height: 300px;}
:lang(en) .system .system-wrap > .head .tit { font-size: 24px; line-height: 2.2rem;}
}
@media (max-width: 430px) {
section { padding: 70px 0; }
.service-wrap > .head > .tit { font-size: 34px;}
.service-wrap > .head > .copy { font-size: 14px; width: 94%; letter-spacing: -1px; word-wrap: break-word; word-break: auto-phrase;}
.service-wrap > .head > .copy br { display: none;}
.container-md, .container-sm, .container { width: 100%; max-width: 410px;}
.service-wrap > .body > .items > .item .contxt span { font-size: 14px;}
.service-wrap > .body > .items > .item .contxt strong { margin-top: 0px; font-size: 14px;}
.service-wrap > .body > .items > .item i { font-size: 50px}
.ser-swiper { padding: 70px 30px 0px 30px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt ul li { font-size: 14px;}
.ser-swiper .scene__wrap .scene__head .copy {font-size: 16px;}
.ser-swiper .scene__wrap .scene__head .tit { font-size: 34px;}
.ser-swiper .scene__wrap .scene__head .tit .small_copy { display: block;}
.ser-swiper .scene__wrap .scene__body > .items .item { padding: 70px 0px 0px 0px;}
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(1) { width: 74%; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 40%; left: 68%; width: 44%; }
.ser-swiper .scene__wrap .scene__body > .items .item01 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 26%; left: 16%; width: 16%; }
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(1) { left: 14%; width: 60%; }
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 60px; left: 50%; width: 46%}
.ser-swiper .scene__wrap .scene__body > .items .item02 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 0%; left: 76%; width: 20%; }
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(1) { top: 0px; left: 16%; width: 70%; }
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(2) { top: 40px; left: 64%; width: 30%; }
.ser-swiper .scene__wrap .scene__body > .items .item03 .scene_img .scene_img_wrap img:nth-of-type(3) { top: 90px; left: 48%; width: 28%; }
.ser-swiper .scene__wrap .scene__body > .scene-prev,
.ser-swiper .scene__wrap .scene__body > .scene-next { top: 6%; width: 30px; height: 30px; }
.ser-swiper .scene__wrap .scene__body > .scene-prev { right: 5%; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p { margin-left: 0px; margin-bottom: 20px; }
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p strong { font-size: 21px;}
.ser-swiper .scene__wrap .scene__body > .items .item .scene_txt p em { font-size: 14px; }
.system .system-wrap { margin-bottom: 0rem;}
.system .system-wrap > .head { padding: 0 0px;}
.system .system-wrap > .head .tit { font-size: 21px; line-height: 2rem;}
.system .system-wrap > .head .copy { font-size: 16px; word-wrap: break-word; word-break: auto-phrase;}
.system .system-wrap > .body { margin-top: 10px;}
.system .system-wrap > .body .bg-wrap .img-box img { margin: 0 auto; width: 80%;}
.system .system-wrap > .body .items { width: 80%; padding-left: 0px; margin-top: -60px;}
.system .system-wrap > .body .items .item { padding: 10px 0px;}
.system .system-wrap > .body .items .item > .part ul li { font-size: 14px;}
.system .system-wrap > .body .bg-wrap.video_mobile { margin-top: -60px; transform: scale(50%);}
.history .history-wrap > .head .tit { font-size: 22px; line-height: 2rem; }
.history .history-wrap > .head .tit > span { font-size: 15px; letter-spacing: -1px;}
.history .history-wrap > .head .tit > strong { font-size: 20px; }
.history .history-wrap > .body .his-swiper { width: 100%;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item { padding: 0 0px 0 0px;}
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > p { margin-bottom: 0rem!important; font-size: 22px; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul { min-height: auto;}
.history .history-wrap > .body > .his-prev,
.history .history-wrap > .body > .his-next { top: 8%; width: 24px; height: 24px;}
.history .history-wrap > .body > .his-prev { left: 82%; }
.history .history-wrap > .body .his-swiper .swiper-wrapper > .item > ul li strong {font-size: 14px;}
.contact .partner-wrap .body .tit,
.contact .partner-wrap .body .copy { text-align: left; }
.contact .partner-wrap .body .copy > li > span { display: inline;}
.contact .partner-wrap .body .copy > li .email-link { margin-top: 20px; }
:lang(en) .ser-swiper .scene__wrap .scene__body > .items .item .scene_img .scene_img_wrap{ min-height: 240px;}
:lang(en) .contact .partner-wrap .body .tit { font-size: 1.4rem;}
:lang(en) .history .history-wrap > .head .tit > strong { font-size: 20px!important; }
:lang(en) .system .system-wrap > .head .tit { font-size: 21px; line-height: 2.0rem; }
}
@media (max-width: 375px) {
.system .system-wrap > .body .bg-wrap.video_mobile { transform: scale(45%);}
:lang(en) .system .system-wrap > .head .tit { font-size: 20px; line-height: 1.8rem;}
}
@media (max-width: 344px) {
.system .system-wrap > .body .items { width: 90%;}
.system .system-wrap > .body .bg-wrap.video_mobile { transform: scale(40%);}
.history .history-wrap > .head { padding: 0 0px 0px 0px; }
.history .history-wrap > .body > .his-prev { left: 81%; }
.footer .footer-wrap .items { padding: 0 15px;}
}
/* .section-heading {
margin-bottom: 50px;
text-align: center;
}
.section-heading h1:after, .section-heading h2:after, .section-heading h3:after, .section-heading h4:after, .section-heading h5:after, .section-heading h6:after
Specificity: (0,1,2)
{
content: '';
display: block;
width: 100px;
height: 2px;
background: #09b850;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.feature-boxes-container {
counter-reset: count;
}
.mt-n1-9 {
margin-top: -1.9rem !important;
}
.feature-box-04 .feature-box-inner {
border: 1px solid rgba(0, 0, 0, 0.04);
background: #fff;
padding: 25px 30px;
transition: all 0.5s ease 0s;
box-shadow: 0 10px 30px 0 rgba(50, 50, 50, 0.1);
}
.feature-box-04 .feature-box-inner i {
color: #09b850;
}
.feature-box-04 i {
width: 100%;
text-align: right;
position: relative;
}
.display-16 {
font-size: 2.3rem;
}
.feature-box-04 h4 {
margin-bottom: 10px;
}
.feature-box-04 .sepratar {
width: 50px;
border: 1px solid #09b850;
margin-bottom: 20px;
}
.feature-box-04 p {
margin-bottom: 0;
}
.feature-box-04 i:before {
float: left;
}
.icon-layers:before {
content: "\e031";
}
.feature-box-04 i:after {
font-weight: 700;
font-size: 65px;
line-height: 0.6em;
color: rgba(0, 0, 0, 0.05);
counter-increment: count;
content: "0" counter(count);
float: right;
font-family: "Montserrat", sans-serif;
}
.feature-box-04 .feature-box-inner:hover {
background: #09b850;
}
*/
/* .ser-item{border: 1px solid rgba(0, 0, 0, 0.04);
background: #fff;
padding: 25px 30px;
transition: all 0.5s ease 0s;
box-shadow: 0 10px 30px 0 rgba(50, 50, 50, 0.1);}
.ser-item:hover {background: #09b850;} */