@charset "utf-8";
/* CSS Document */
/* *******************************************************
 * filename : sub.css
 * description : 서브페이지 레이아웃 CSS
 * date : 2020-08-06
******************************************************** */
body, html, *{}
.m_only{display:none}
input,select,textarea{font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none}
select::-ms-expand{display:none}
input[type="text"]::-ms-clear{display:none}
label{cursor:pointer}
input[type="checkbox"],input[type="radio"]{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;border:0;padding:0}
input[type="checkbox"] + label:before,input[type="radio"] + label:before{content:"";display:inline-block;width:20px;height:20px;background:url("../../img/blt_checkbox.png") 0 0 / 20px auto no-repeat;vertical-align:-5px;padding-right:8px; box-sizing:content-box;}
input[type="checkbox"]:checked + label:before{background-image:url("../../img/blt_checkbox_on.png")}
input[type="radio"] + label:before{background-image:url("../../img/blt_radio.png")}
input[type="radio"]:checked + label:before{background-image:url("../../img/blt_radio_on.png")}
input[type="text"],input[type="password"]{width:100%;height:48px;line-height:46px;background-color:transparent;border:1px solid #e5e4e4;padding:0 10px}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#aeaeae !important} /* for IE */
input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:#aeaeae} /* for Edge */
input::placeholder,textarea::placeholder{color:#aeaeae} /* for chrome */
select{width:100%;height:48px;line-height:46px;background:transparent url("../../img/icon_drop_open.png") no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;background-size:24px auto;border:1px solid #e5e4e4;padding:0 34px 0 10px}
textarea{width:100%;background-color:transparent;border:1px solid #e5e4e4;resize:none;padding:10px}
/*============================================================
footer
=============================================================*/
.footer{ position:relative; width:100%;}
.footer-wrap{ position:relative;}
/*============================================================
contents
=============================================================*/
h1, h2, h3, h4, h5, h6{ display:block}
.sub_contents{position: relative;/*max-width: 1600px;*/margin: 0 auto;padding: 92px 0 200px; box-sizing: border-box;}
.sub_area{ max-width:1400px; position:relative; box-sizing:border-box; margin:0 auto;}
.page-title {font-size: 50px;line-height: 55px;font-weight: 600; position:relative;padding-right: 15px; display:inline-block;}
.page-title:after {content: '';position: absolute;top: 0;right: 0;display: block;width: 8px;height: 8px;border-radius: 50%;background-color: #1681d3;}
.page-sub-copy {font-size: 18px; line-height: 24px;color: #888;transition-delay: .15s;}
.page-title + .page-sub-copy {margin-top: 22px;}
#artiBox{ margin-top:4%; position:relative;}
.contents .sub_titBox { text-align:center;}
.contents .sub_titBox.left{ text-align:left;}
.contents .sub_titBox h3{font-size: 36px;padding-bottom: 20px;}
.contents .sub_titBox h4 {font-size: 28px;color: #222; overflow:hidden;}
.contents .sub_titBox p{ color:#444; font-size:20px; overflow:hidden;}
#middleArea .sub_tit { text-align:center;}
#middleArea .sub_tit h3{font-size: 40px; margin-bottom: 10px; font-weight:600; line-height: 1.8;}
#middleArea .sub_tit h4{font-size: 24px;color: #222;padding-bottom: 20px; font-weight:normal}
#middleArea .sub_tit p{ font-size:18px; color:#444;}
.contents{ position:relative; margin:0 auto;}
#header .gnb > ul > li > a.gnb-active{color: #1681d3!important;}


.location { height:46px; text-align:right; background:#1681d3; }
.location ul { padding-top:9px; }
.location li { display:inline-block; position:relative; padding-left:30px; color:#fff}
.location li:first-child { padding:0; }
.location li a.home { width:18px; height:16px; vertical-align:middle; background:url(../../img/ic_location.png) no-repeat; }
.location li a { display:inline-block; font-size:14px; color:#626262; text-decoration:none; vertical-align:middle; }
.location li:before { content:""; display:block; position:absolute; left:11px; top:6px; width:5px; height:16px; background:url(../../img/ic_location.png) no-repeat -40px 0; }
.location li:first-child:before { display:none; }
/*============================================================
about
=============================================================*/

.about_top{text-align: center;background-color: #F7F7F7; padding:80px 0;}
.artic_inner h4{ font-size:26px;font-weight:600; display:block; text-align:center;}
.about ul.icon_Li{overflow:hidden;width:100%;position: relative;max-width: 1160px;margin: 0 auto;}
.about ul.icon_Li li{float:left;width: calc(33.333% - 17px);background-color:#fff;margin: 50px 10px 0 10px;}
.about ul.icon_Li li > div{ padding: 60px 20px; box-sizing:border-box; width:100%; overflow:hidden;}
.about ul.icon_Li li:nth-child(1){margin-left:0}
.about ul.icon_Li li:nth-child(3n){margin-right:0}
/*.about ul.icon_Li li span{display:block;width:140px;height:140px; margin:0 auto 40px}*/
.about ul.icon_Li li > div .img{position:relative; width:100%;text-align:center;-webkit-transition: background 0.5s ease-out;-moz-transition:background 0.5s ease-out;-o-transition: background 0.5s ease-out;transition: background 0.5s ease-out; margin-bottom:30px}
.about ul.icon_Li li > div .img p{width: 118px;display: flex;-webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;transition:ease-in-out .3s; margin:0 auto;}
.about ul.icon_Li li > div .img p:nth-of-type(2){ height: 0; overflow: hidden; -webkit-transition: height 1s ease-out; -moz-transition: height 1s ease-out; -o-transition: height 1s ease-out; transition: height 1s ease-out;}
.about ul.icon_Li li > div .img p >img{width: 100%; top: 0}
.about ul.icon_Li li > div .img p:nth-of-type(2) > img{position: absolute; left: 0;}
.about .about_top.active ul.icon_Li li > div .img p:nth-of-type(2)	{transition-delay: 1s; height:122.41px;} 
/*
.about ul.icon_Li li > div .img i{height: 72px;width: 72px;line-height: 36px; border-color: rgba(255,255,255,0);border-width: 15px;border-style: solid; background-color: rgba(255,255,255,0); box-sizing: content-box; border-radius: 50%; display:inline-block; position:relative; top:-12px}
.about ul.icon_Li li > div:hover .img i{ background-color:transparent!important;}
.about ul.icon_Li li > div .img:hover i:after{-webkit-transform: scale(.93);transform: scale(.93);pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: inherit;content: '';-webkit-box-sizing: content-box;box-sizing: content-box;top: 0;left: 0;padding: 0;z-index: -1;-webkit-box-shadow: 0 0 0 2px rgba(255,255,255,.1);box-shadow: 0 0 0 2px rgba(255,255,255,.1);opacity: 0;-webkit-transform: scale(.9);transform: scale(.9);display: inline-block;-webkit-animation: fusionSonarEffect 1.3s ease-out 75ms;animation: fusionSonarEffect 1.3s ease-out 75ms;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #258ffb, 0 0 0 10px rgba(255,255,255,0.5);-moz-box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #258ffb, 0 0 0 10px rgba(255,255,255,0.5);box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #258ffb, 0 0 0 10px rgba(255,255,255,0.5);}
@-webkit-keyframes fusionSonarEffect {
0% {
opacity:.3
}
40% {
opacity:.5
}
100% {
-webkit-transform:scale(1.5);
opacity:0
}
}
@keyframes fusionSonarEffect {
0% {
opacity:.3
}
40% {
opacity:.5
}
100% {
-webkit-transform:scale(1.5);
transform:scale(1.5);
opacity:0
}
}
*/

/*어바웃 아이콘*/
.about ul.icon_Li li > div .ico-animation{ width: 100px;height: 100px; margin: 0 auto 25px; }
.about ul.icon_Li li > div .ico-animation > div{width:100%; height:100%;}
.about ul.icon_Li li > div .ico-animation > div > svg{width:100%; height:100%;}


.about ul.icon_Li  li strong{display:block;font-weight:bold; text-align:center; font-size:19px}
.about .company_info{ margin-top:7%; width:100%; position:relative;}
.company_info:after{ content:""; display:block; position:absolute; left:0; bottom:-5%; width:100%; background:#f7f7f7; z-index:-1; height:50%; opacity:0.6;background-size: 75%;}
.skew_tit{margin: 0 auto;font-size:35px;color: #1681d3; position:relative; font-weight:600}
.skew_tit:before{width: 0;height: 10px; background-color:#1681d3; display: block; content: "";margin: 0 0 20px 4px;-webkit-transform: skew(-40deg, 0deg);-moz-transform: skew(-40deg, 0deg); -ms-transform: skew(-40deg, 0deg);-o-transform: skew(-40deg, 0deg);transform: skew(-40deg, 0deg);-webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;-ms-transition: width 1s ease;}
.skew_tit.active:before{width: 35px;}
.about .company_info .company_info_wrap{margin:50px auto 0;position: relative;padding: 0 0 50px;}
.about .company_info .company_info_wrap .con_l{float: left;color: #000;}
.about .company_info .company_info_wrap .con_l p.tit{ font-size: 50px; line-height: 60px; font-weight:600;}
.about .company_info .company_info_wrap .con_l p.txt{font-size: 20px; line-height:30px; padding: 15px 0 0;font-weight: 500; margin-top:10px}
.about .company_info .company_info_wrap .con_r{width: 55%;float: right;padding: 140px 0 0;}
.about .company_info .company_info_wrap .con_r ul { display:block; width:100%; margin-top:17%;}
.about .company_info .company_info_wrap .con_r ul li{ display:inline-block; width:24%; text-align:center;}
.about .company_info .company_info_wrap .con_r ul li .icon{ margin-bottom:20px}
.about .company_info .company_info_wrap .con_r ul li em{font-size: 60px;line-height: 1;font-weight: 600;display: block;margin-bottom: 20px;}
.about .company_info .company_info_wrap .con_r ul li p{ font-size:20px; color: #1681d3;}
.about .company_info .company_info_wrap .con_r dl{padding: 0 0 40px;; display:inline-block; width:24%; text-align:center;}
.about .company_info .company_info_wrap .vision_bg{width:63%;height:450px;background-image: url(../../img/about_bg02.jpg);position: absolute; left: -22%;top:25%;-ms-background-position-x: 100%; background-position-x:100%;-ms-background-position-y:100%;background-position-y: 100%;background-repeat: no-repeat;}
.about .company_info .company_info_wrap .vision_bg:after{width: 100%;height: 100%; left: 0; background-color: #fff;display: block;content: "";position: absolute; -webkit-transition: transform 2.5s ease; -moz-transition: transform 2.5s ease;  -o-transition: transform 2.5s ease;-ms-transition: transform 2.5s ease;}
.about .company_info.active .vision_bg:after{-webkit-transform: translate(-100%, 0); -moz-transform: translate(-100%, 0);-ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0);transform: translate(-100%, 0);}

.team_box{ margin-top:150px}
.team_list{ margin-top:100px; position:relative;}
.team_list > div{ float:left;}
.team_list > div.greeting_box{width: 33%; padding-left: 3%; }
.team_list > div.greeting_box h1{ margin-bottom:50px}
.team_list > div.greeting_box > p{ font-size:18px;}
.team_list > div.team_member{width:55%; float:right}
.team_list h3{font-size: 36px;padding-bottom: 20px;}
.team_list h3 p{ font-size:17px; color:#444; line-height:1.4}
.team_list ul.template_a{width:100%;border-top:1px solid #000}
.team_list .template_a li{border-bottom:1px solid rgba(0,0,0,.2);padding:30px 0} 
.team_list .template_a li:after{ clear:both; height:0; content:""; display:block; visibility:hidden}
.team_list .template_a li img{float:left;background: #ddd; width:auto; height:235px; margin-right:5%}
.team_list .template_a li strong{display:block;font-size:20px;}
.team_list .template_a li p{overflow:hidden;font-size:15px; width: 60%;}
.team_list .template_a li p > span{display:block; margin:5px 0; color:#1681d3}
.team_list ul.template_b{width:100%;border-top:1px solid #000;border-bottom:1px solid #AEAEAE;margin-top:60px}
.team_list .template_b li{position:relative;font-size:14px;text-align:left;background-color:#fff;border-bottom:1px solid #E5E4E4;padding:30px 0 30px 400px}
.team_list .template_b li strong{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:360px;height:100%;text-align:center;background-color:#F5F6F6}
.team_list .template_b li p:before{content:"·";display:inline-block;padding-right:10px;vertical-align:2px}
.team_list .template_b li p span{display:block;color:#AEAEAE;padding:0 0 10px 14px}
.team_list .template_b li p:last-child span{padding-bottom:0}

/*===SUB LAOUT :: SERVICE*/
.service .sec01{ width:100%; }
.service .sec01 h4{ font-weight:bold; margin-bottom:-45px; position:relative; z-index:1; font-size: 62px;color: #0a6fb6;}
.service .sec01 .container_outer{ position:relative; background:#f7f7f7;}
.service .sec01 .container_outer:after{content: "";position: absolute; right: -50%; bottom: 0; height: 100%;width: 100%;background: #f7f7f7; z-index:-1}
.service .sec01 .container_outer .box{ padding:65px 0;}
.service .sec01 .container_outer .box p{ font-size:20px; font-size:25px; color:#222; padding-left:2% }
.service .sec02{padding: 100px 0;position: relative;}
.service .sec02 > div > div{ float:left;box-sizing:border-box; width:68%; }
.service .sec02 div.sub_title2{width: 32%;}
.service .sec02 div.sub_title2 h4 p{font-size:24px; font-weight:600; color:#222; line-height:1.4;; letter-spacing:-0.6px}
.service .sec02 div.sub_title2 h4 p span{  display:block; font-size:18px; color:#444; margin-top:10px; font-weight:400}
.service .sec02 > div > div ul{overflow:hidden}
.service .sec02 > div > div.con_r ul{ width:100%; margin-left:40px; text-align:right}
.service .sec02 > div > div.con_r ul li{width:33%; display:inline-block;}
.service .sec02 > div > div.con_r ul li em{font-size:55px;line-height:1; display:block; text-align:center; font-weight:bold;}
.service .sec02 > div > div.con_r ul li em:after{content:"%";display:inline-block;font-size:30px}
.service .sec02 > div > div.con_r ul li p{ font-size:16px; color:#444; font-weight:normal; line-height:1.3; text-align:center; margin-top:15px;}
.service .sec02 > div > div.con_r ul li p span{ display:block; font-size:15px; color:#666; color:#0a6fb6; margin-top:5px}
.service .sec03 {background-color:#F7F7F7}
.service .sec03 .scrolling{overflow:hidden}
.service .sec03 .scrolling .scroll_nav{height:3100px;padding-top:80px} /* 앱 추가될 시 height 조정할 것 */
.service .sec03 .scrolling .scroll_nav.on{position:fixed;top:144px;left:calc(50% - 560px)}
.service .sec03 .scrolling .scroll_nav h3{ font-size:41px; font-weight:700; line-height:1.1; margin-bottom:15px}
.service .sec03 .scrolling .scroll_nav p{ font-size:18px}
.service .sec03 .scrolling .scroll_nav ul{padding:56px 0 64px}
.service .sec03 .scrolling .scroll_nav li+li{padding-top:20px}
.service .sec03 .scrolling .scroll_nav li a{color:#AEAEAE;font-weight:bold; font-size:18px}
.service .sec03 .scrolling .scroll_nav li a span{padding-right:20px}
.service .sec03 .scrolling .scroll_nav li a.on{color:#222}
.service .sec03 .scrolling .scroll_nav li a.on span{color:#1254FF}
.service .sec03 .scrolling .scroll_wrap{position:absolute;top:80px;right:0}
.service .sec03 .scrolling .scroll_wrap .start{position:absolute;top:265px;background-color:pink}
.service .sec03 .scrolling figure{width:560px;height:560px}
.service .sec03 .scrolling figure img{font-size:0}
.service .sec03 .scrolling figure video{overflow:hidden;width:100%;height:360px}
.service .sec03 .scrolling figure .motion_img{overflow:hidden;display:block;width:100%; background: rgba(6,146,250,0.8); position:relative;}
.service .sec03 .scrolling figure .motion_img span{display:block;}
.service .sec03 .scrolling figure .motion_img span img{ width:100%; height:auto;}
.service .sec03 .scrolling figure .motion_img span.talk{ position:absolute; left:50%; top:50%; z-index:1;}
.service .sec03 .scrolling figure .motion_img span.talk1, .service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk3{ left:auto; right:0;}
.service .sec03 .scrolling figure .motion_img span.talk2, .service .sec03 .scrolling figure .motion_img span.talk4{ left:0}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk1{margin-right: 50px;margin-top: -110px;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk2{margin-left: 68px; margin-top: -77px;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk3{margin-top: -20px;margin-right: 50px;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk4{margin-left: 70px; margin-top: 2px;}

.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1{margin-top: -110px;margin-left: 15px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2{margin-top: -110px;margin-left: -190px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_3{margin-top: -170px;margin-left: -5px;}

.service .sec03 .scrolling figure #motion_scroll_3 span.talk { left:0; top:0;}
.service .sec03 .scrolling figure #motion_scroll_3 span.talk img{ width:100%;}

.service .sec03 .scrolling figure #motion_scroll_4 span.talk { left:0; top:0;}
.service .sec03 .scrolling figure #motion_scroll_4 span.talk img{ width:100%;}

.service .sec03 .scrolling figure #motion_scroll_5 span.talk { left:0; top:0;}
.service .sec03 .scrolling figure #motion_scroll_5 span.talk img{ width:100%;}

.service .sec03 .scrolling figure strong{display:block;font-size:24px;line-height:1;padding:40px 0 20px}
.service .sec03 .scrolling figure+figure{margin-top:120px}
.service .sec04{position: relative;padding-top:80px;background-image: -webkit-gradient(linear,left bottom,left top,from(#f2f5f8),to(#fff)); background-image: linear-gradient(to top,#f2f5f8,#fff);}
.service .sec04 .text_area { text-align:center;}
/* .service .sec04 .text_area:before{background-position: -126px -762px;background-repeat: no-repeat;width: 92px;height: 110px;display: block;margin: 0 auto 36px;opacity: 0;-webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);-webkit-transition: opacity .8s ease .3s,-webkit-transform .8s ease .15s; transition: opacity .8s ease .3s,-webkit-transform .8s ease .15s; transition: opacity .8s ease .3s,transform .8s ease .15s;transition: opacity .8s ease .3s,transform .8s ease .15s,-webkit-transform .8s ease .15s;content: '';  background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../../img/sp_svg_clova.png); background-image: linear-gradient(transparent,transparent),url(../../img/sp_svg_clova.png); background-size: 1690px 880px;background-repeat: no-repeat;} */
.service .sec04 .text_area:before{background-position: center; background-repeat: no-repeat; width: 150px; height: 150px; display: block; margin: 0 auto 36px; opacity: 0; -webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);-webkit-transition: opacity .8s ease .3s,-webkit-transform .8s ease .15s; transition: opacity .8s ease .3s,-webkit-transform .8s ease .15s; transition: opacity .8s ease .3s,transform .8s ease .15s; transition: opacity .8s ease .3s,transform .8s ease .15s,-webkit-transform .8s ease .15s;content: '';  background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../../img/sp_svg_clova.png); background-image: linear-gradient(transparent,transparent),url(../../img/sp_svg_clova.png); background-size: 200%; background-repeat: no-repeat;}
.service .sec04.active .text_area:before{opacity: 1; -webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.service .sec04.active .text_area .title{display: block;font-size: 48px;line-height: 60px;letter-spacing: -1px;}
.service .sec04.active .text_area .desc{margin-top: 16px;font-size: 19px; line-height: 34px; color: #222; letter-spacing: -.5px;}
.service .sec04 .contents_area{overflow: hidden;position: relative;height: 710px;}
.service .sec04 .contents_area .device_box{background-position: 0 0;background-repeat: no-repeat;width: 504px;height: 687px;position: absolute;display: block;bottom: 0;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); -webkit-transition: all .6s cubic-bezier(.25,.1,.25,1) .5s;transition: all .6s cubic-bezier(.25,.1,.25,1) .5s; background-image: url(../../img/assistant2.png);background-size: 1012px 1006px;}
.service .sec04 .contents_area .device_box [class^=text] {display: block; font-size:23px; color:#fff; margin-bottom:20px; padding-left:20px}
.service .sec04 .contents_area .device_box [class^=text] br.none{ display:none}
.service .sec04 .contents_area .device_box .text[aria-hidden=true] {display: none;}
.service .sec04 .contents_area .card_wrap{position: absolute;top: 18px;left: 50%;bottom: 0; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);width: 2122px;padding-top:115px;overflow: hidden;/* width: 100vw; */transition-property: transform, opaciy;}
.service .sec04 .contents_area .card_wrap:before{display: block;position: absolute;left: 0;bottom: 0;width: 180px;height: 714px;z-index: 10;background-image: -webkit-gradient(linear,right top,left top,from(rgba(242,245,248,0)),to(#f2f5f8));background-image: linear-gradient(to left,rgba(242,245,248,0) 0,#f2f5f8 100%);content: '';}
.service .sec04 .contents_area .card_wrap:after {display: block; position: absolute;right: 0;bottom: 0;width: 180px;height: 714px;z-index: 10;background-image: -webkit-gradient(linear,left top,right top,from(rgba(242,245,248,0)),to(#f2f5f8)); background-image: linear-gradient(to right,rgba(242,245,248,0) 0,#f2f5f8 100%);content: '';}
.service .sec04 .contents_area .card_wrap .card_list { font-size: 0;white-space: nowrap;}
.service .sec04 .contents_area .card_wrap .card_list .swiper-wrapper { display: block; overflow-x: unset;}
.service .sec04 .contents_area .card_wrap .card_list .card_item {display: inline-block;position: relative;overflow: hidden;vertical-align: middle;width: 436px;margin-left: 96px;-webkit-box-sizing: border-box;box-sizing: border-box;opacity: .5;margin-left: 0;margin-right: 0;}
.service .sec04 .contents_area .card_wrap .card_list .card_item img {width: 100%; height: auto;-webkit-box-shadow: 0 2px 20px 0 rgba(0,0,0,.08);box-shadow: 0 2px 20px 0 rgba(0,0,0,.08);}
.service .sec04 .contents_area .card_wrap .card_list .card_item.swiper-slide-active {opacity: 1;}
.service .sec04 .guide_area{position: relative; overflow: hidden; background-color: #edeff5; height: 180px; margin-top:70px}
.service .sec04 .guide_area .guide_list{position: absolute; top: 0;  left: 50%;overflow: hidden;width: 2122px;padding: 60px 0; font-size: 0; text-align: center;white-space: nowrap;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%); transform: translateX(-50%); transition-property: transform, opaciy;padding: 0;}
.service .sec04 .guide_area .guide_list:before{position: absolute;top: 0;left: 0;bottom: 0; width: 180px; z-index: 10;background-image: -webkit-gradient(linear,right top,left top,from(rgba(237,239,245,0)),to(#edeff5));background-image: linear-gradient(to left,rgba(237,239,245,0) 0,#edeff5 100%);content: '';}
.service .sec04 .guide_area .guide_list:after{position: absolute;top: 0;right: 0;bottom: 0;width: 180px;z-index: 10;background-image: -webkit-gradient(linear,left top,right top,from(rgba(237,239,245,0)),to(#edeff5)); background-image: linear-gradient(to right,rgba(237,239,245,0) 0,#edeff5 100%);content: '';}
.service .sec04 * { transition-delay: 0ms !important;}
.service .sec04 .guide_area .guide_list .guide_item{ display: inline-block;background-color: #fff; border-radius: 38px; -webkit-box-shadow: 0 0 10px 0 rgba(121,121,126,.08), 0 1px 6px 0 rgba(121,121,126,.15);box-shadow: 0 0 10px 0 rgba(121,121,126,.08), 0 1px 6px 0 rgba(121,121,126,.15);color: rgba(0,0,0,.6);    margin-left: 0;margin-right: 0;width: auto; position:relative;}
.service .sec04 .guide_area .guide_list .guide_item .guide_link{display: block;padding: 20px 32px; font-size: 17px;font-weight: 700; line-height: 20px;}
.service .sec04 .guide_area .guide_list .guide_item:after{content: '';position: absolute;  top: 0;left: 13%;width: 0;height: 0; border: 15px solid transparent; border-bottom-color: #fff;border-top: 0; border-left: 0;margin-top: -14px; opacity:0;}
.assistant .guide_item[aria-selected=true]{background-color:#0a6fb6!important;}
.assistant .guide_item[aria-selected=true] a{color: #fff!important;}
.assistant .guide_item[aria-selected=true]:after{border-bottom-color:#0a6fb6!important; opacity:1!important}

/*===SUB LAOUT :: CONTACT US*/
.contact_Box{ position:relative; width:100%; margin-top:5%}
.contact_Box .sub_area > section{ float:left; width:50%;}
.contact_Box .sub_area > section > article{ width:100%; position:relative;}
.contact_Box .sub_area > section > article.contact_inner h3{font-size: 36px;padding-bottom: 20px; color:#202020}
.contact_Box .sub_area > section > article.contact_inner p{font-size: 16px;color: #444;}
.contact_Box .sub_area > section .contact_ani{ width:100%; position:relative;}
.contact_Box .sub_area > section .img_box{ position:relative; box-sizing:border-box; width:100%; height:100%; text-align:center; padding-top: 60%;}
.contact_Box .sub_area > section .img_box > div.obj_img{position:absolute; left:0; top:0; width:100%;}
.contact_Box .sub_area > section .img_box > div.obj_img.img1{transform: translate(0%, 25%);}
.contact_Box .sub_area > section .img_box > div.obj_img.img2{ z-index:2;transform: translate(-2%, 65%);}
.contact_Box .sub_area > section .img_box > div.obj_img.img3{ z-index:1}
.contact_Box .sub_area > section .img_box > div.obj_img > img{ position:relative;}
.contact_Box .sub_area > section > article.inquiry_inner dl dt{line-height:1;font-weight:bold;color:#000;margin-bottom:12px; font-size:18px}
.contact_Box .sub_area > section > article.inquiry_inner dl dd{margin-bottom:26px}
.contact_Box .sub_area > section > article.inquiry_inner dl dd:last-child{margin-bottom:0}
.contact_Box .sub_area > section > article.inquiry_inner dl dd textarea{overflow-y:auto;height:110px}
.contact_Box .sub_area > section > article.inquiry_inner dl dd.right{text-align:right}
.contact_Box .sub_area > section > article.inquiry_inner dl dd.agree label{color:#444}
.contact_Box .sub_area > section > article.inquiry_inner dl dd.agree span{display:block;font-size:12px;color:#aeaeae;padding-top:5px}
.add_bx{position:relative; padding: 90px 0; margin-top:80px; /*background: url(../../img/bg_related_contact.png) left 5% no-repeat #f4f4f4;*/
background: #f4f4f4 url(../../img/bg_related_product.png) no-repeat center;}
/*.add_bx:before{width: 200vw;position: absolute;left: 0; top: 0; height: 100%;content: ""; display: block; z-index: -1; left: -50%;}*/
.add_bx h5{display: block;font-size: 24px; font-weight: bold;color: #101010;margin-bottom: 20px;}
.add_bx > div > div{float: left;width: 50%; height:320px}
.add_bx > div > div:last-child{float:right; text-align:right}
.add_bx > div > div:last-child:before{content: "";float: left;display: inline-block; width: 1px;height:100%;background-color: rgba(0,0,0,.15);}
.add_bx > div > div dl{ color:#333}
.add_bx > div > div dl dt{position: relative;display: block;line-height: 24px;font-size:17px;font-weight: bold;color: #202020;margin-bottom:3px}
.add_bx > div > div dl dd{ font-size:16px; opacity:0.8; margin-bottom:10px}

/*===SUB LAOUT :: NOTICE ====*/
.board_visual{ width:100%;height:685px; background:url(../../img/board_visual.png) no-repeat center;padding: 50px 0 134px;}
.board_visual .contents {display: flex; flex-direction: column; justify-content: center;height: 100%; color: #fff;}
.board_visual .contents h2, .board_visual .contents p {transform: translateY(50px);opacity: 0; text-align:center;}
.board_visual .contents h2 { font-size:40px;}
.board_visual .contents p {color: rgba(255,255,255,.8); padding-top: 40px;}
.board_visual .contents p i {display: block;line-height: 1; padding-bottom: 20px;transition-delay: .3s;}
.animate {transform: translateY(0) !important;opacity: 1 !important; transition: all .5s;}
/*============================================================
media screen 
=============================================================*/
@media screen and (max-width:1620px) {
.sub_area{ padding-left:30px; padding-right:30px}	
.sub_area{ max-width:100%;}
.wide-images {width:1600px; margin-left:-800px;}
/*===SUB LAOUT :: SERVICE*/
.service .sec03 .scrolling .scroll_wrap{ right:30px}
}
@media screen and (max-width:1400px) {
.contact_Box .sub_area > section .img_box > div.obj_img.img1 > img{ width:65%;}	
.contact_Box .sub_area > section .img_box > div.obj_img.img2 > img{ width:26%;}	
.contact_Box .sub_area > section .img_box > div.obj_img.img3 > img{ width:26%;}	
}
@media screen and (max-width:1280px) {
/*===SUB LAOUT :: ABOUT US*/	
.about ul.icon_Li li > div .img p{ width:90px;}
.about ul.icon_Li li strong{ font-size:16px}	
.about .company_info .company_info_wrap .con_r ul li em{ font-size:45px}
.team_box{margin-top: 120px; }
.about .company_info .company_info_wrap{ margin-top:30px}
.about .company_info .company_info_wrap .con_l p.tit{font-size: 45px;line-height: 55px;}
/*===SUB LAOUT :: SERVICE*/	
.service .sec01 h4{ font-size:50px}
.service .sec01 .container_outer .box p{ font-size:20px}
.service .sec02 div.sub_title2 h4 p{ font-size:22px}
.service .sec02 > div > div.con_r ul li em{ font-size:48px}
.service .sec02 > div > div.con_r ul li p{ font-size:14px}
/*
.company-info{ padding:5% 0;min-height: 565px;}
.wide-images{ height:70%}
*/
}
@media screen and (max-width:1180px) {
.about .company_info .company_info_wrap .vision_bg{height: 400px; top: 32%;}
/*===SUB LAOUT :: SERVICE*/	
.service .sec02{ padding:60px 0}	
.service .sec02 > div > div	{ float:none;}
.service .sec02 div.sub_title2{ width:60%; margin-bottom: 50px;}
.service .sec02 > div > div.con_r{ width:100%;}
.service .sec02 > div > div.con_r ul { text-align:center; margin:0}
.service .sec03 .scrolling .scroll_nav h3{ font-size:35px}
.service .sec03 .scrolling .scroll_nav p{ font-size:15px}
.service .sec03 .scrolling .scroll_nav li+li{padding-top: 10px;}
.service .sec03 .scrolling .scroll_nav li a{ font-size:16px}
.service .sec05 .info_txt ol li{ min-height:230px}
.service .sec05 .info_txt ol li .text_box .item_text{ margin-top:5px}
}

@media screen and (max-width:1024px) {
.sub_contents{ padding: 45px 0 150px;}	
.sub_area{ padding:0 20px}
.page-title{ font-size:36px;line-height: 40px;}
.page-sub-copy{ font-size:15px}
.page-title + .page-sub-copy{ margin-top:10px;}
.artic_inner h4{ font-size:20px}

/*===SUB LAOUT :: ABOUT US*/
.about_top{padding: 50px 0;}
.company_info:after{ height:55%; bottom:0;}
.about .company_info .company_info_wrap > div{ float:none!important; width:100%!important;}
.about .company_info .company_info_wrap .vision_bg{ width:100%; left:-18%;height: 40%; top:20%;background-size: 100% auto;}
.about .company_info .company_info_wrap .con_r ul{ margin-top:30%;}
.about ul.icon_Li li > div .ico-animation{ width:70px; height:70px; margin-bottom:10px}
.team_box{ margin-top:50px}
.team_list{ margin-top:65px}
.team_list > div.greeting_box{ padding-left:0; width:40%}
.team_list > div.greeting_box h3{font-size:27px;}
.team_list > div.greeting_box p{ font-size:15px}
.team_list .template_a li img{ height:180px}
.team_list .template_a li strong{ font-size:18px}
.team_list .template_a li p{ font-size:13px}
.contents .sub_titBox h4{ font-size:24px}
.contents .sub_titBox p{ font-size:17px}
.about ul.icon_Li li > div{ padding:40px 20px}
.about ul.icon_Li li strong{ font-size:14px;}
.skew_tit{ font-size: 30px;}
.team_list > div.greeting_box h1{ margin-bottom:30px}
.about .company_info .company_info_wrap{ margin-top:30px}
.about .company_info .company_info_wrap .con_l p.tit{font-size: 35px; line-height: 1.2;}
/*
.wide-images { height: 65%;}
*/
.company-info h3{ font-size:32px}
.company-info-table{margin-top:20px;}
.company-info-table > tbody > tr > th,.company-info-table > tbody > tr > td{padding:15px 0; font-size: 14px;}


/*===SUB LAYOUT :: SERVICE*/	
.service .sec03 .scrolling .scroll_nav{ height:500px}
.service .sec03 .scrolling figure{ width:450px; height:450px;}
.service .sec03 .scrolling figure strong{ font-size:20px; padding:20px 0;}
.service .sec03 .scrolling figure+figure{ margin-top: 80px;}
.service .sec03 .scrolling figure #motion_scroll_1 .talk { width:45%; display:inline-block;}
.service .sec03 .scrolling figure #motion_scroll_1 .talk >img{ width:100%; height:auto;}
.service .sec03 .scrolling figure .motion_img span.talk img{width:75%}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk1{margin-right:8%}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk2{margin-left: 7.5%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk3{margin-right: 5%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk4{margin-left: 9.2%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk1 {margin-top: -90px;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk2 {margin-top: -66px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1{margin-top: -97px;margin-left: 5px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_3{margin-top: -135px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2 {margin-top: -90px;margin-left: -150px;}
.service .sec04{ padding-top:80px}
.service .sec04 .text_area:before{background-position: -93px -632px;width: 75px;height: 93px; background-size: 1327px 730px;}
.service .sec04.active .text_area .title{ font-size:40px;}
.service .sec04 .contents_area{ margin-top:50px; height:680px}
.service .sec05{ margin-top:45px}
.service .sec05 .info_txt ol li{ width:100%; margin-right:0;min-height: auto;}


.contact_Box .sub_area > section{ float:none; width:100%;}
.contact_Box .sub_area > section .contact_inner > div{ float:left; width:55%;}
.contact_Box .sub_area > section .contact_inner > div.contact_ani{ width:45%;}
.contact_Box .sub_area > section .img_box{ padding-top:55%}
.contact_Box .sub_area > section:last-child{ margin-top:5%}
.contact_Box .sub_area > section > article.contact_inner h3{ font-size:25px; padding-bottom:10px}
.contact_Box .sub_area > section > article.contact_inner p { font-size:14px}
}
@media screen and (max-width:980px) {
.service .sec01 h4{font-size: 40px; margin-bottom:-25px;}
.service .sec01 .container_outer .box p{ font-size:17px}
/*===SUB LAOUT :: SERVICE*/	
.service .sec02 div.sub_title2{ width:80%}
}
@media screen and (max-width:925px) {
/*===SUB LAOUT :: SERVICE*/		
.service .sec03 .scrolling .scroll_nav h3{ font-size:30px; font-weight:900}
.service .sec03 .scrolling .scroll_nav p{ font-size:13px}
.service .sec03 .scrolling figure{width:400px; height:400px} 
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk1 {margin-top: -20%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk2 { margin-top: -13%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk3{ margin-top: -2%;}
.service .sec03 .scrolling figure #motion_scroll_1 span.talk.talk4{margin-top: 3%;}
} 
@media screen and (max-width:800px) {
#middleArea .sub_tit h3{ font-size:30px; margin-bottom:0;}
#middleArea .sub_tit p{ font-size:15px}
/*===SUB LAOUT :: ABOUT US*/
.company_info:after{}
.about .company_info .company_info_wrap .vision_bg{}	
.about ul.icon_Li li > div{ padding:30px 5px;}
.skew_tit{ font-size:25px}
.skew_tit:before{ height:6px; margin-bottom:10px}
.team_list > div.greeting_box h1{ margin-bottom:20px}
.about .company_info .company_info_wrap{ margin-top:20px}
.about .company_info .company_info_wrap .con_l p.tit{ font-size:30px}
.about .company_info .company_info_wrap .con_l p.txt{font-size: 17px; line-height: 23px;padding: 10px 0 0;margin-top: 10px;}
.about .company_info .company_info_wrap .con_r ul li .icon img{ height:50px; width:auto;}
.about .company_info .company_info_wrap .con_r ul li em{ font-size:30px; margin-bottom:10px}
.about .company_info .company_info_wrap .con_r ul li p{ font-size:15px}
.team_list{ margin-top:40px}
.team_list > div{ float:none; width:100%!important;}
.team_list > div.greeting_box{margin-bottom:35px}

/*===SUB LAOUT :: SERVICE*/
.service .sec01 h4{font-size:35px;;}
.service .sec01 .container_outer .box{ padding:50px 0}
.service .sec01 .container_outer .box p{ font-size:16px;}
.service .sec02 > div > div.con_r ul li em{ font-size:38px}
.service .sec02 > div > div.con_r ul li+li{vertical-align: top;}
.service .sec03 .scrolling .scroll_nav{ padding-top:60px}
.service .sec03 .scrolling .scroll_wrap{ top:60px}
.service .sec03 .scrolling .scroll_nav{ height:420px}
.service .sec03 .scrolling figure{ width:350px; height:350px}
.service .sec03 .scrolling figure strong{ font-size:18px; padding-bottom:10px}
.service .sec03 .scrolling figure p{ font-size:13px; letter-spacing:-0.1px;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1{ margin-top: -72px;margin-left: 8px;}
.service .sec04.active .text_area .title{ font-size:32px}
.service .sec04 .contents_area{ height:620px}
.service .sec04.active .text_area .desc{ margin-top:0; font-size:17px}
.service .sec04 .contents_area .device_box{background-size: 803px 905px;height: 610px;width:400px;}
.service .sec04 .contents_area .card_wrap .card_list .card_item{ width:350px}
.service .sec04 .contents_area .device_box [class^=text]{ font-size:23px}
.service .sec04 .guide_area{ height:130px; margin-top:40px}
.service .sec04 .guide_area .guide_list{ top: -22px;}
.service .sec04 .guide_area .guide_list .guide_item .guide_link{ padding: 14px 32px;font-size: 15px;}


/*===SUB LAOUT :: CONTACT US*/
.add_bx{ padding: 40px 0; background-image:none; }	
.add_bx > div > div{ float:none; width:100%; height:auto;}	
.add_bx > div> div:last-child{ border-top:1px solid rgba(0,0,0,.15); padding-top:5%}
.add_bx > div> div:last-child:before{ display:none}
.add_bx > div> div:last-child iframe{ width:100%!important}
.add_bx > div > div dl dt, .add_bx > div > div dl dd{ display:inline-block; width:auto;}
.add_bx > div > div dl dt{ padding-right:4%;}
.add_bx > div > div dl:nth-of-type(1){ width:100%; display:block;}
.add_bx > div > div dl:nth-of-type(2),.add_bx > div > div dl:nth-of-type(3){ display:inline-block; width:35%;}
}
@media screen and (max-width:768px) {
.company-info{ min-height:auto; padding: 10% 15px;}
.wide-images{height:100%;}
.company-info .wide-images .visual{ background-color:#f6f6f6;background-size: 55%;}
.company-info-work{width:100%; position:relative; margin-top: 25px;top: 0;}	
.company-info-table{width:100%;}
.company-info-table > tbody > tr > th{width:20%; font-weight:bold; color:#222}
.company-info-table > tbody > tr > th, .company-info-table > tbody > tr > td{ padding:10px 0}
.about ul.icon_Li li > div{max-height: 205px;}
.about ul.icon_Li li{ min-height:182px;}
/*===SUB LAOUT :: SERVICE*/
.service .sec02 > div > div.con_r ul li{ width:100%; display:table; padding:15px 0;min-height: 100px;}
.service .sec02 > div > div.con_r ul li em, .service .sec02 > div > div.con_r ul li p{ display:table-cell; vertical-align:middle; text-align:left; }
.service .sec03 .scrolling .scroll_nav ul{ display:none}
.service .sec03 .scrolling .scroll_nav br{display:none}
.service .sec03 .scrolling .scroll_nav p{ font-size:16px}
.service .sec03 .scrolling figure{ width:100%; height:auto; display:table;}
.service .sec03 .scrolling figure>span,  .service .sec03 .scrolling figure .text{ display:table-cell; vertical-align:top; width: 40%;padding-left:30px;}
.service .sec03 .scrolling figure strong{ padding-top:0;line-height: 1.5;}
.service .sec04 .contents_area .device_box [class^=text] br.none{ display:block;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_3 {margin-top: -28%; margin-left: 2%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1 {margin-left: 5%;margin-top: -17%;}
.service ution .sec02 > div > div.con_r ul li em{ width:30%; position:relative;}
.service .sec02 > div > div.con_r ul li em:after{ font-size:25px}
.service .sec02 > div > div.con_r ul li em:before{ content:""; display:block; width:1px; height:40px; position:absolute; right:0; top:50%; margin-top:-20px; background:#ddd}
.service .sec02 > div > div.con_r ul li p{width:70%; font-size: 16px;box-sizing: border-box;padding-left: 30px;}
.service .sec02 > div > div.con_r ul li p br{ display:none}
.service .sec03 .scrolling{ padding-bottom:60px}
.service .sec03 .scrolling .scroll_wrap{position: initial;width: 100%;}
.service .sec03 .scrolling .scroll_nav{ height:auto; width:100%; margin-bottom:45px}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2 {margin-top: -20%;margin-left: -33%;}
}
@media screen and (max-width:675px) {
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_3 {margin-left: -2%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1 {margin-left: 2%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2 {margin-top: -22%;margin-left: -36%;}
}
@media screen and (max-width:640px) {
.location { height:40px;}
.location ul {font-size:13px}
.location li{ padding-left:25px}
.location li a.home { background-size: auto 13px;}
.location li:before {left: 7px;top: 2px;}
.location li:first-child:before { display:none; }	
    
.page-title{ font-size:30px; padding-right:10px}	
.page-title:after{ width:5px; height:5px}
.artic_inner h4{ font-size:18px}	
#artiBox{ margin-top:8%;}
#middleArea .sub_tit p br{display:none}
/*===SUB LAOUT :: ABOUT US*/
.about_top .txtline .txt-ani br{ display:none}	
.contents .sub_titBox h4{font-size: 20px;height: auto;margin-bottom: 10px;}
.about ul.icon_Li li{width: calc(33.333% - 7px);margin: 50px 5px 0 10px; }
.about ul.icon_Li li span{ margin-bottom:20px}
.about ul.icon_Li li strong{ font-size:13px}
.skew_tit{ font-size:19px}
.about .company_info .company_info_wrap .con_l p.txt{ font-size:14px; line-height:1.4}
.about .company_info .company_info_wrap .con_l p.tit{ font-size:25px}
.about .company_info .company_info_wrap .con_r ul li .icon img{ height:40px;}
.about .company_info .company_info_wrap .con_r ul li em{ font-size:25px}
.team_list h3{ padding-bottom:10px}
.team_list > div.greeting_box p > br{ display:none}
.team_list > div.greeting_box p
.about ul.icon_Li li span{ width:70px; height:70px; margin-bottom:20px}
.about ul.icon_Li li strong{word-break:break-word}
.company-info-table > tbody > tr > th{ width:25%}
.contact_Box .sub_area > section .contact_inner > div{ float:none; width:100%;}
.contact_Box .sub_area > section .contact_inner > div.contact_ani{ width:100%;}

/*===SUB LAOUT :: SERVICE*/
.service .sec01 h4{font-size:27px;;}
.service .sec01 .container_outer .box{ padding:50px 0}
.service .sec02 div.sub_title2{ width:100%;}
.service .sec01 .container_outer .box p{ font-size:13px;}
.service .sec02 > div > div.con_r ul li em{ font-size:28px}

.service .sec03 .scrolling .scroll_nav{padding-top: 40px;}
.service .sec03 .scrolling .scroll_nav h3{ font-size:22px}
.service .sec03 .scrolling .scroll_nav p{ font-size:15px}
.service .sec03 .scrolling figure+figure{ margin-top:60px}
.service .sec03 .scrolling figure>span, .service .sec03 .scrolling figure .text{ width:100%; display:block; padding-left:0}
.service .sec03 .scrolling figure .text{ margin-top:25px}
.service .sec03 .scrolling figure #motion_scroll_3 span.talk{ width:100%;}
.service .sec03 .scrolling figure .motion_img span.talk img{width: 85%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2 { margin-top: -19%; margin-left: -28%;}

.service .sec04{ padding:65px 0 0;}
.service .sec04 .text_area { text-align:center; padding:0 15px}
.service .sec04 .text_area:before{ background-image:url(../../img/assistant_m.png); background-size: 374px 537px;     background-position: -291px -91px;background-repeat: no-repeat; width: 59px;height: 70px;display: block;margin: 0 auto 20px; content: ''; background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent)),url(../../img/assistant_m.png);background-image: linear-gradient(transparent,transparent),url(../../img/assistant_m.png);}
.service .sec04.active .text_area:before{opacity: 1; -webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.service .sec04.active .text_area .title{font-size:28px;line-height:38px;}
.service .sec04.active .text_area .desc{margin-top:14px;font-size: 15px; line-height:25px; color: #222; letter-spacing: -.4px;}
.service .sec04 .contents_area{height:390px; margin-top:40px}
.service .sec04 .contents_area .device_box{transform: none; background-image:url(../../img/assistant2_m.png);-webkit-background-size: 795px 560px;background-size: 795px 560px;background-repeat: no-repeat;background-position: -539px 0;background-repeat: no-repeat;width: 256px;height: 506px;position: relative; margin: 0 auto;padding: 0 1px; -webkit-box-sizing: border-box;box-sizing: border-box; left:0;padding-top: 8%;}
.service .sec04 .contents_area .device_box:after{ background:url(../../img/assistant2.png) no-repeat; content:""; display:block; position:absolute; left:0; bottom:0; height:45px; width:100%;    background-position: 40.7% 73%;background-size: 746px;}
.service .sec04 .contents_area .card_wrap:after, .service .sec04 .contents_area .card_wrap:before{ display:none}
.service .sec04 .contents_area .card_wrap{ position:relative; padding:0; height:100%; transform:none; width:100%; box-sizing:border-box; left:0; transform:none}
.service .sec04 .contents_area .card_wrap .card_list .card_item{width:90%;}
.service .sec04 .contents_area .device_box [class^=text]{ font-size:16px;}
.service .sec04 .guide_area .guide_list .guide_item .guide_link{padding: 8px 20px; font-size: 12px;}
.service .sec04 .guide_area{ height:100px; margin-top:25px}
.service .sec04 .guide_area .guide_list{ top: -30px;}
}
@media screen and (max-width:550px) {
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_3{margin-left: 0%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1{margin-left: 3%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2 {margin-left: -33%;}	
}
@media screen and (max-width:520px) {
.add_bx{background-size: 27%;}	
.about ul.icon_Li li {min-height: 145px;}
.about ul.icon_Li li > div .img p{ width:65px;}
.about ul.icon_Li li > div{ padding:18px 5px}
.about ul.icon_Li li > div .ico-animation{ width:50px; height:50px}
/*===SUB LAOUT :: SERVICE*/
.service .sec02{padding: 40px 0;}
.service .sec02 div.sub_title2 h4 p{ font-size:22px}
.service .sec02 div.sub_title2 h4 p span{ font-size:15px}
.service .sec02 > div > div.con_r ul li em:after{ font-size:18px}
.service .sec05 .info_txt ol li .list_inner {padding: 15px;}
.service .sec05 .info_txt ol li .text_box strong{ font-size:15px;}
.service .sec05 .info_txt ol li .text_box .item_text{ font-size:12px;line-height: 1.5;}
.service .sec03 .scrolling figure .motion_img span.talk img{width: 75%;}

}
@media screen and (max-width:480px) {
.m_only{display:block;}
.sub_contents{padding: 25px 0 110px;}	
.page-sub-copy,.contents .sub_titBox p,#middleArea .sub_tit p {font-size: 13px;line-height: 1.4;}
.contents .sub_titBox h4{ font-size:17px}
#middleArea .sub_tit h3{ font-size:25px}
.about ul.icon_Li li {min-height: 128px;}
/*===SUB LAOUT :: ABOUT US*/
.skew_tit{ font-size:17px}
.about .company_info .company_info_wrap .con_l p.txt{font-size: 13px;line-height: 1.4; margin-top:0;}
.about .company_info .company_info_wrap .con_l p.txt br{display:none}
.about .company_info .company_info_wrap .con_l p.tit{ font-size:20px}
.about .company_info .company_info_wrap .con_l p.tit br{display:none}
.about .company_info .company_info_wrap .con_r ul li em{ font-size:18px}
.about .company_info .company_info_wrap .con_r ul li p{ font-size:13px}
.about_top{ padding:35px 0;}
.about ul.icon_Li li span{ width:80px; height:80px}
.about ul.icon_Li li{margin: 30px 5px 10px;}
.about ul.icon_Li li > div {max-height: 155px;}
.about ul.icon_Li li > div .img{margin-bottom: 15px;}
.about ul.icon_Li li strong{ font-size:11px; line-height: 1.2;}
.about .company_info{margin-top: 10%;}
.about .company_info .company_info_wrap .con_r ul{ margin-top:32%}
.about .company_info .company_info_wrap .vision_bg{ top:21%}
.team_box{margin-top: 40px; }
.team_list > div.greeting_box h3{ font-size:30px}
.team_list .template_a li img{ float:none; width:65%; height:auto;}
.team_list .template_a li p{ width:100%;}
.team_list .template_a li strong{ margin-top:32px}

/*===SUB LAOUT :: SERVICE*/
.service .sec01 h4{font-size: 25px;margin-bottom: -40px;line-height: 1.2;}
.service .sec01 .container_outer .box p{ padding-left:5%;}
.service .sec02 div.sub_title2 h4 p{ font-size:18px}
.service .sec02 div.sub_title2 h4 p span{ font-size:13px}
.service .sec02 > div > div.con_r ul li em{ font-size:26px}
.service .sec02 > div > div.con_r ul li em:after, .service .sec02 > div > div.con_r ul li p, .service .sec02 > div > div.con_r ul li p span{ font-size:13px;}
.service .sec04{ padding-top:65px}
.service .sec04.active .text_area .title{ font-size:23px}
.service .sec03 .scrolling figure .motion_img span.talk img {width: 56%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_2{margin-left: -32%;}
.service .sec03 .scrolling figure #motion_scroll_2 span.talk.talk2_1{margin-left: 3%;}

.service .sec05 .info_txt ol li .list_inner{ display:block;}
.service .sec05 .info_txt ol li .list_inner > div{ display:block; width:100%;}
.service .sec05 .info_txt ol li .list_inner > div.img{ padding-right:0; text-align:center; border-bottom:1px solid #ddd;padding-bottom: 10px;margin-bottom: 10px;}
.service .sec05 .info_txt ol li .list_inner > div.img > img{ height:auto; width:auto; border:0;}
.service .sec05 .info_txt ol li .text_box{ padding:15px 0}

.contact_Box{ margin-top:10%}
.contact_Box .sub_area > section > article.inquiry_inner dl dt{ font-size:14px}
.contact_Box .sub_area > section > article.inquiry_inner dl dd{ margin-bottom:15px}
.contact_Box .sub_area > section > article.inquiry_inner dl dd input{ height:38px;line-height: 38px;font-size: 12px;}
.add_bx h5{ font-size:20px}
.add_bx > div> div dl dt{ font-size:14px}
.add_bx > div> div dl dd{ font-size:12px}
.add_bx > div> div:last-child iframe{height:240px!important}
}
@media screen and (max-width:320px) {
.company-info-table > tbody > tr > th{ width:40%;}	
}