@charset "utf-8";
#header { background: rgba(0, 0, 0, .5) }
/****************************** footer *********************************/
.footer { position: relative; width: 100%; background: #41475d; height: auto !important }
.footer .ft_area { position: relative; width: 1560px; margin: 0 auto; padding: 60px 0; display: flex; justify-content: center; align-items: flex-start; transition: all 0.2s ease-out; flex-direction: column; gap: 30px }
/******************************** notice ***************************************/
#subArea-wrap.notice { }
/******************************** email-collcet ***************************************/
#subArea-wrap.email-collect { }
/*****************************************************/
#subArea-wrap { width: 100%; min-height: 600px; background: #040c1f }
#subArea-wrap .subArea .contents-area { width: 100%; padding: 6vw 0; min-height: 400px; }
#subArea-wrap .subArea .contents { width: 82%; margin: 0 auto }
#subArea-wrap .spotArea { width: 100%; }
#subArea-wrap .spotArea { opacity: 0; transition: opacity .5s ease; animation: fade-in 1s ease forwards; }
#subArea-wrap .spotArea .spot { width: 1560px; height: 20vw; max-height: 450px; min-height: 200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
#subArea-wrap .spotArea .spot .txt { width: 1280px; margin: 0 auto 14px; text-shadow: 0 0 10px rgba(255, 255, 255, .6); transition: .2s ease-in-out; }
#subArea-wrap .spotArea .spot .txt h1 { font-size: 48px; padding: 0px 0 40px; line-height: 150%; letter-spacing: 2px; }
#subArea-wrap .spotArea .spot .txt p { font-size: 24px; line-height: 160% }
#subArea-wrap .subArea { width: 100%; margin: 0 auto; position: relative; top: 0; background: #040c1f; }
#subArea-wrap .subArea .tab-menu { margin: 0 auto; width: 100%; position: static; top: 110px; z-index: 1; min-height: 76px }
#subArea-wrap .subArea .tab-menu ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #533e38; column-gap: 30px; }
#subArea-wrap .subArea .tab-menu li { }
#subArea-wrap .subArea .tab-menu li a { display: block; color: rgba(252, 224, 195, .8); padding: 28px 10px; position: relative; font-size: clamp(15px, 2.5vw, 22px); }
#subArea-wrap .subArea .tab-menu li a.on { color: #fce0c3 }
#subArea-wrap .subArea .tab-menu li a:hover { color: #fce0c3 }
#subArea-wrap .subArea .tab-menu li a em { display: block; position: relative; }
#subArea-wrap .subArea .tab-menu li a:after { transition: .2s ease-in-out; }
#subArea-wrap .subArea .tab-menu li a:after { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; content: ''; background-color: #dabfa6; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1); transition: transform .3s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s cubic-bezier(.165, .84, .44, 1); }
#subArea-wrap .subArea .tab-menu li:hover > a:after { -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scaleX(1); transform: scaleX(1); }
#subArea-wrap .subArea .tab-menu li.this > a::after { opacity: 1; transform: translateX(0px); transition: all .2s; -webkit-transition: all .2s; }
/******************************** company ***************************************/
.company { }
.company .spotArea { width: 100%; }
.company .spotArea { background: #040c1f url("../images/common/spotArea_about_bg.png") left center repeat-x; }
.company .spotArea .spot > h2 { color: #fff; font-size: clamp(42px, 5vw, 80px); padding-top: 5vw; transition: .1s ease-in-out; text-shadow: 0 0 10px rgba(0, 0, 0, .2) }
.company .spotArea .spot .txt { text-align: center; color: #fff }
.company .contents-area .contents { }
.company .contents-area .contents > h3 { display: flex; justify-content: center; flex-direction: column; margin: 40px 0; background: #74574f; padding: 60px 30px; text-align: center; color: #fce0c3; line-height: 140%; }
.company .contents-area .contents > h3 span { display: block; font-size: clamp(16px, 2vw, 20px); margin-bottom: 10px }
.company .contents-area .contents > h3 em { font-size: clamp(34px, 4.5vw, 60px); line-height: 110%; }
.company .contents-area .contents > p { color: #fce0c3; line-height: 150%; font-size: clamp(18px, 2vw, 22px);  }
.company .contents-area .contents > h4 { margin: 60px 0; font-size: clamp(46px, 5vw, 80px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 100%; }
.company .contents-area .contents > h4 em { color: #accbf9 }
.company .contents-area .contents > ul { display: flex; justify-content: center; align-items: center; gap: 30px; margin: 90px 0; flex-wrap: wrap; }
.company .contents-area .contents > ul li { width: 30% }
.company .contents-area .contents > ul li img { width: 100% }
/******************************** about ***************************************/
.company.about .contents-area .contents > h4 { }
/******************************** business ***************************************/
.company.business .contents-area .contents > h4 { }
.company.business .contents-area .contents > h4 > img { width: auto }
.company.business .contents-area .contents > ul { display: flex; gap: 30px; margin: 90px 0; flex-wrap: wrap; }
.company.business .contents-area .contents > ul li { width: 48%; }
.company.business .contents-area .contents > ul li img { width: 100% }
/******************************** teams ***************************************/
.company.teams .contents-area .contents > section.team_list { display: flex; flex-wrap: wrap; gap: 40px 60px; align-items: flex-start; margin: 80px 0 }
.company.teams .contents-area .contents > section.team_list > div { width: 47%; flex-grow: 1 }
.company.teams .contents-area .contents > section.team_list > div > article { display: flex; gap: 30px; align-items: flex-end; margin-bottom: 40px; justify-content: flex-end; }
.company.teams .contents-area .contents > section.team_list > div > article > dl { line-height: 140%; width: 100%; }
.company.teams .contents-area .contents > section.team_list > div > article > dl dt { font-size: clamp(32px, 4vw, 50px); padding: 0 0 40px 0; color: #fff; background: url("../images/common/pic_teams_bar.png") left bottom repeat-x; margin-bottom: 20px; line-height: 100%; }
.company.teams .contents-area .contents > section.team_list > div > article > dl dd { line-height: 140%; font-size: clamp(14px, 2.5vw, 16px); color: #c5dbfb; }
.company.teams .contents-area .contents > section.team_list > div > article > dl dd:nth-child(2) { color: #fff; }
.company.teams .contents-area .contents > section.team_list > div > article > img { width: 37%; object-fit: contain; }
.company.teams .contents-area .contents > section.team_list > div > ol { background: #04629b; padding: 20px 40px; color: #fff; font-size: clamp(14px, 2.5vw, 16px); line-height: 140%; min-height: 112px; display: flex; flex-direction: column; justify-content: center; }
.company.teams .contents-area .contents > section.team_list > div > ol li { position: relative; list-style: disc; }
.company.teams .contents-area .contents > section.team_list > div > ol li::marker {
 color: #041c45;
}
.company.teams .contents-area .contents > section.team_list > div:nth-child(even) > article > dl dt { text-align: right }
.company.teams .contents-area .contents > section.team_list > div:nth-child(even) > article > dl dd { text-align: right }
.company.teams .contents-area .contents > section.team_list > div:nth-child(odd) > article { flex-direction: row-reverse; }
/******************************** contact  ***************************************/
.company.contact #subArea-wrap .subArea { background: #02050e; }
.company.contact .contents-area { background: url("../images/common/pic_contact_bg.png") center top / 100% no-repeat; background-size: contain; }
.company.contact .contents-area .contents > section { margin: 14vw 0 8vw 39vw; }
.company.contact .contents-area .contents > section > h4 { padding: 0 0 40px 0; color: #fff; background: url("../images/common/pic_contact_bar.png") left bottom repeat-x; margin-bottom: 20px; line-height: 140%; display: flex; flex-direction: column; }
.company.contact .contents-area .contents > section > h4 span { font-size: clamp(32px, 4vw, 50px); color: #accbf9; line-height: 100%; display: block; padding: 10px 0 }
.company.contact .contents-area .contents > section > h4 em { font-size: clamp(20px, 2.5vw, 40px); color: #fff; line-height: 140%; }
.company.contact .contents-area .contents > section > ul { }
.company.contact .contents-area .contents > section > ul li { display: flex; flex-direction: column; line-height: 140%; font-size: clamp(18px, 2vw, 24px); margin-bottom: 20px }
.company.contact .contents-area .contents > section > ul li span { color: #accbf9; line-height: 100%; display: block; padding: 4px 0 }
.company.contact .contents-area .contents > section > ul li em { color: #fce0c3; line-height: 140%; display: block; padding: 4px 0 }
/******************************** technology  ***************************************/
.tech #subArea-wrap .subArea { background: #040c1f; }
.tech .spotArea { background: #040c1f url("../images/common/spotArea_tech_bg.png") center top repeat-x; }
.tech .spotArea .spot > h2 { color: #fff; font-size: clamp(42px, 5vw, 80px); padding-top: 5vw; transition: .1s ease-in-out; text-shadow: 0 0 10px rgba(0, 0, 0, .2) }
.tech #subArea-wrap .subArea .tab-menu ul { background: #1a1939; }
.tech #subArea-wrap .subArea .tab-menu li a { display: block; color: rgba(255, 255, 255, .8); padding: 28px 10px; position: relative; font-size: clamp(15px, 2.5vw, 22px); }
.tech #subArea-wrap .subArea .tab-menu li a:hover { color: #fff; }
.tech #subArea-wrap .subArea .tab-menu li a:after { background-color: #fff; }
.tech .contents-area .contents > h3 { display: flex; justify-content: center; flex-direction: column; margin: 40px 0; background: #1a1939; padding: 60px 30px; text-align: center; color: #fff; line-height: 140%; }
.tech .contents-area .contents > h3 span { display: block; font-size: clamp(16px, 2vw, 20px); margin-bottom: 10px }
.tech .contents-area .contents > h3 em { font-size: clamp(34px, 4.5vw, 60px); line-height: 120%; }
.tech .contents-area section { }
.tech .contents-area section.tech_list { }
.tech .contents-area section.tech_list ul { display: flex; flex-direction: column; margin-top: 8vw }
.tech .contents-area section.tech_list ul li { margin-bottom: 12vw }
.tech .contents-area section.tech_list ul li > div { width: 50% }
.tech .contents-area section.tech_list ul li > div > img { width: 100% }
.tech .contents-area section.tech_list ul li > img { width: 100% }
.tech .contents-area section.tech_list ul li:first-child { display: flex; align-items: flex-end }
.tech .contents-area p.stitle { line-height: 140%; margin-bottom: 3.4vw; }
.tech .contents-area p.stitle > span { display: inline-block; line-height: 100%; color: #fff; font-size: clamp(34px, 6vw, 80px); background: url(../images/common/pic_tech_bar01.png) left bottom no-repeat; padding: 0 0 0 12px; margin-bottom: 2.2vw; }
.tech .contents-area p.stitle > em { display: block; line-height: 120%; color: #fff; font-size: clamp(26px, 4.5vw, 60px); padding-left: 12px }
.tech .contents-area p.stitle > i { margin-top: 10px; display: block; line-height: 120%; color: #fff; font-size: clamp(18px, 2.5vw, 36px); padding-left: 12px }
.tech .contents-area .tech_list ul li > div:first-child p.stitle > span { background-size: 100%; padding: 0 7vw 0 12px; }
.tech .contents-area .tech_list ul li:nth-child(2) p.stitle > span { background-size: 79%; }
.tech .contents-area .tech_list ul li:nth-child(3) p.stitle > span { background-size: 68%; }
.tech .contents-area .tech_list ul li:nth-child(4) p.stitle > span { background-size: 90%; }
/************************************/
.tech .contents-area section.tech_list.list02 ul li:first-child { align-items: center; flex-direction: column; justify-content: flex-start; }
.tech .contents-area section.tech_list.list02 ul li > p.stitle { width: 82%; margin: 0 auto; }
.tech .contents-area .tech_list.list02 ul li:nth-child(1) p.stitle > span { background-size: 71%; }
.tech .contents-area .tech_list.list02 ul li:nth-child(2) p.stitle > span { background-size: 68%; }
.tech .contents-area section.tech_list.list02 ul li > article { width: 100%; background: #392219; padding: 5vw 0; margin: 3vw 0 0; display: flex; justify-content: center; align-items: center; }
.tech .contents-area section.tech_list.list02 ul li:nth-child(2) > article { background: #1a1939; }
.tech .contents-area section.tech_list.list02 ul li > article > div { width: 82%; margin: 0 auto; display: flex; justify-content: center; }
.tech .contents-area section.tech_list.list02 ul li:nth-child(2) > article > div > img { width: 90% }
.tech .contents-area section.tech_list.list02 ul li:nth-child(1) > article > div { width: 42%; }
.tech .contents-area section.tech_list.list02 ul li:nth-child(1) > article > div > img { width: 100% }
.tech .contents-area section.tech_list.list02 ul li:nth-child(1) > article > div > img:last-child { position: relative; z-index: 1; margin-left: -6%; }
/******************************** news ***************************************/
body.news { }
body.news #sub_wrapper { background: #fff }
body.news #subArea-wrap { background: #fff }
body.news #subArea-wrap .subArea { background: #fff }
body.news .spotArea { width: 100%; }
body.news .spotArea { background: #040c1f url("../images/common/spotArea_news_bg.png") center top repeat-x; }
body.news #subArea-wrap .subArea .tab-menu { background: #6f98c4; }
body.news #subArea-wrap .subArea .tab-menu ul { background: #6f98c4; }
body.news #subArea-wrap .subArea .tab-menu li a { color: #fff }
body.news #subArea-wrap .subArea .tab-menu li { color: #fff }
body.news .spotArea .spot > h2 { color: #fff; font-size: clamp(42px, 5vw, 80px); padding-top: 5vw; transition: .1s ease-in-out; text-shadow: 0 0 10px rgba(0, 0, 0, .2) }
body.news .spotArea .spot .txt { text-align: center; color: #fff }
body.news .contents-area .contents { }
body.news .contents-area .contents > ul { display: flex; gap: 0; margin: 0; flex-wrap: wrap; flex-direction: column; }
body.news ul.news_list { display: flex; gap: 0; margin: 0; flex-wrap: wrap; flex-direction: column; }
body.news ul.news_list > li { display: flex; }
body.news ul.news_list > li > dl { width: 50%; display: flex; flex-direction: column; padding: 50px 50px; text-align: right; }
body.news ul.news_list > li > dl dt { }
body.news ul.news_list > li > dl dt p { }
body.news ul.news_list > li > dl dd { color: #6f98c4; }
body.news ul.news_list > li > dl dd:nth-child(2) { }
body.news ul.news_list > li > dl dd:nth-child(2) p { padding: 20px 0 0 20px; background: url("../images/common/pic_news_bg.png") right top no-repeat; background-size: 60px 6px; word-break: keep-all; font-size: clamp(17px, 2vw, 20px); line-height: 140%; }
body.news ul.news_list > li > dl dd:last-child { margin-top: auto; }
body.news ul.news_list > li > figure { width: 50% }
body.news ul.news_list > li > figure img { width: 100%; height: 100%; }
body.news ul.news_list > li:nth-child(even) { display: flex; flex-direction: row-reverse; }
body.news ul.news_list > li:nth-child(even) > dl { width: 50%; display: flex; flex-direction: column; padding: 50px 50px; text-align: left; }
body.news ul.news_list > li:nth-child(even) > dl dd:nth-child(2) p { padding: 20px 0 0 0px; background: url(../images/common/pic_news_bg.png) left top no-repeat; }
#bo_gall .bo_tit { display: block; line-height: 100%; font-size: clamp(24px, 3vw, 30px); margin-bottom: 20px; color: #1d417d; overflow: hidden; width: 99%; white-space: nowrap; text-overflow: ellipsis; position: relative; }
#bo_v_title .bo_v_tit { display: block; font-size: 1.5em; margin: 5px 0 0; word-break: break-all; line-height: 140%; }