@charset "UTF-8";
.container{ padding-left:20px; padding-right:20px;}
.gird_box .item{ width:50%;}
.gird_box .item:nth-child(2n+3){ clear:both;}

.foot_newsletter .input_box{ margin-top:0}
.input_box .form-control,.foot_newsletter .input_box .btn{ font-size:1rem;}
.foot_mid{ padding:2rem 0;}

.flex-direction-nav a, #carousel-glory .carousel-control,.solution_btm .carousel-control{ width:40px; height:40px; background-size:20px;}
.flexslider-full{ padding-bottom:0}

.solution_mid{ padding-top:4.5rem;  padding-bottom:5rem;}
.solution_btm{ padding-top:20px;}
.solution_mid .col-md-6 + .col-md-6{ margin-top:40px;}
.solution_btm h2{ padding-left: 20px; line-height: 40px; margin-bottom: 15px }
.solution_btm .flex-direction-nav .flex-prev,.solution_btm .carousel-control.left{ right:40px;}
.solution_btm .pc_list{ margin-left:-5px; margin-right:-5px;}
.solution_btm .pc_list>*{ padding: 0 5px; }
.solution_btm .pc_list.case_list a{ margin-bottom:10px;}
.solution_btm h4{ padding-right:100px; line-height:20px; display:table-cell; height:40px; vertical-align:middle;}

.prod_top{ margin-bottom:3rem;}
.prod_feature li{ margin-bottom:2rem; padding-left:4rem; background-size:2rem; background-position:1rem .25rem; padding-top:.5rem;}
.prod_feature ul{ margin:0;}
.prod_detail{ padding:4.5rem 0 2rem;}
.prod_detail h3{ margin-bottom:2rem;}
.prod_feature h2{ margin:0 0 2rem;}
.prod_top .tab-content{ padding-bottom:.5rem;}

#contact .info_item{ width:100%;}
.c_info{ min-height:0;}
.c_item{ padding-top:2rem; min-height: auto}
.c_link { margin-top:1rem;}
.c_link a .icon{ border-color:#000;}
.c_link a{ color:#000;}
.c_link a .icon_tel{background-image:url(../images/icon/icon_tel.svg);}
.c_link a .icon_mail{background-image:url(../images/icon/icon_mail.svg);}
.c_link a .icon_map{background-image:url(../images/icon/icon_map.svg);}
.support_list.type2 .item{ margin-bottom:1.6rem;}
.support_list.type2 .item{ min-height:0;}

.ww_map #map{ height:450px;}
#worldwide #com『{margin-right:0  !important;}
#worldwide .ww_box #comPic{ display:none;}
.ww_box{ width:240px;}

.epaper_tab li a{ padding:0 1rem;	}
.modal-content{ padding:20px;}
.modal-footer{ padding:0;}
.modal-body{ padding:0;}

.about-nav{ height:5rem; overflow:hidden;}
.about-nav li a{ line-height:5rem; font-size:1.2rem; padding:0 15px;}
.about-nav.list_carousel li{ padding:0;}
.about_brand,.about_history{ margin-top:-2.5rem;}

.about-nav{ padding:0 35px;}
.about-nav .prev, .about-nav .next{ width:30px;}
.about-nav .prev:before, .about-nav .next:before{ border-top-width:4px; border-bottom-width:4px; margin-top:-4px; }
.about-nav .prev:before{ border-right-width:8px; left:12px;}
.about-nav .next:before{ border-left-width:8px; right:12px;}
.about_value .value_pc{ width:100%; height:56vw; position:relative;}
.about_value .item{ min-height:0; width:100%; margin:0; padding:1rem 0;}
.about_value .flex-control-nav{ width:100%; left:0; bottom:1.5rem;	}
.about_value .img-responsive{ margin:2rem auto 1.5rem;}
.brand_area1 .video_btn a:after,.brand_area2 li h4:after{ width:30px;}
.about-nav .active {   box-shadow: inset 0 -4px 0 #000;}
#about_menu{ display:none;}
.about_oran_1 .oranizetion_content .text{ padding-left:0;}
.about_oran_1 .data .box{ height:16rem; padding:10% 0;}
.about_oran_2 h3{ margin-bottom:30px;}
.about_oran_2 h4:after{ display:none;}
.about_oran_2 h4{ margin-bottom:10px;}
.about_oran_2 .title{ margin-top:30px;}

.about_head .head_btn a{ margin-top:0;}
.about_head .row{ margin:2px -1px 0;}
.about_head .row>*{ padding-left:1px; padding-right:1px;}
.about_head .head .box{ height:auto}
.about_head .head_btn a{ box-shadow:none; background:rgba(0,0,0,.9); color:#fff; height:14rem; padding-top:4rem;}
.about_head .head_btn a:before{ border-top-color:#fff;}

.about_technology{ padding:30px 0 40px;}
.about_gray .box{ position:relative; width:100%; left:auto; top:auto; margin-bottom:3rem;}
.about_gray .gallery{ padding:0;}
.about_gray .flex-control-nav{ text-align:center; padding:0;}

.search_list li{ padding:2rem 0;}
.search_list h4{ margin-bottom:5px;}



@media screen and (min-width: 768px) and (max-width: 991px) {
header{ position:relative; top:auto; left:auto;}
#product_sub, #product_i, #news_i, #epaper, #epaper_sub, #epaper_i, #epaper_login, #epaper_reg, #epaper_app, #about{ padding-top:0}
.headline h1, .headline h2{ line-height:5rem; font-size:2rem;}
.foot_social,.foot_newsletter{ width:50%;}
.btm_contact{ padding:4rem 0;}
#prod_list li{ margin-bottom:3rem;}
.breadcrumb{ margin-bottom:3rem;}

#product_sub .intro .col-md-offset-9{ width:40%; margin-left:60%}
.download_box{ width:600px;}
#epaper_sub .e_highlight .text{ padding:2rem;}
.e_form .row>.col-30,.e_form .row>.col-70{ width:50%; float:left;}

.brand_banner .head{ padding-left:24rem;}
.brand_banner a{ width:18rem; height:18rem;}
.brand_banner .head .icon{ margin-left:7.5rem;}
.brand_banner .head .icon:before{ width:4rem; height:4rem; margin-bottom:.5rem;} 
.brand_banner h1{ font-size:4rem;    margin-top: -2rem;}
.historyCont .inBox2{ width:600px;}
.about_culture .head{ width:80%;}
.about_head .head h1 br{ display:none;}
.about_research{ margin-top:-4rem; padding-top:10rem;}
.about_research .container{ padding-right:20px;}
}


@media screen and (max-width: 767px) {	
h1,h2,h3,h4,h5,h6{ line-height:150%;}
h4, .h4, h5, .h5, h6, .h6{ margin-bottom:5px;}
.headline h1, .headline h2{ font-size:1.5rem; min-width:70%; line-height:60px; border-left-width:20px; padding-right:10px; padding-left:1rem;}
header{ padding-bottom:10px;}
.foot_social{ margin-bottom:20px;}
.foot_social .social_icon{ padding:0;}
.foot_newsletter h4{ font-size:14px;}
.foot_newsletter .input_box .form-control{ line-height: 3rem; height:  3rem; }
.foot_newsletter .input_box .btn{ line-height: 3rem; width: 8rem; }
.breadcrumb,#product .sliderbtn, #solution .sliderbtn, #solution_i .sliderbtn{ display:none;}
.sub_banner{ margin-bottom:30px;}
#support .btm_solution, #support_i .btm_solution{ border: none;; }
.btm_contact .btn,.sliderbtn,.btm_contact .btn{width:2.5rem; height:2.5rem;}
.btm_contact{background-image: url(../images/bg/btm_contact2.jpg); font-size:1.15rem;}
.btm_contact .title{ font-size:20px;}
.form_line> .col-sm-4 + .col-sm-4{ margin-top:10px;}
.modal-header{ padding-left:0; padding-right:0;}
.flex-control-paging li{ margin:0 5px;}
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active{ background:#000;}

article, #prod_list li a,.prod_top,.video_list h4,#support_i .intro h1 small,.download_list h4,.download_list .info,.download_box .download_list h4,.faq_section .panel-heading a,.faq_section .panel-body,.epaper_tab li a,.modal-body .listtext p,#about,.about_value h3 small,.historyCont .txtH,.about_oran_1 .data .box,.about_oran_2 .panel-heading a{ font-size:1rem;}
/*font 24*/
#solution .intro .title,#epaper_i .title,.about_culture h4,.about_head .head h1,.about_gray .head h4,.about_glory .head h4,.about_history h1{ font-size:1.9rem;}
/*font 21*/
#epaper_app h2,#epaper .intro h1, #epaper_sub .intro h1,#epaper_app h2,.brand_area2 li h4,.about_value h3,.about_culture .highlight{font-size:1.75rem;}
/*font 18*/
#product .intro .title,#news_i .intro h1,#support .intro,#support_i .intro h1,.download_box h3,.modal-header h3,.historyCont .txtH .dateH,.about_head .head_btn a,.about_technology h3,.about_research h3,.search_list h4{ font-size:1.5rem;}
/*font 16*/
#solution #prod_list h2, #solution_i .intro h3,.solution_mid h2,.solution_btm h2,.solution_btm h4,#product_sub .intro h1,#product_i .intro h1,.prod_detail h3,.c_info h4,.news_highlight h4,#news .intro h3,.news_area .video_area h3, .news_area .gallery_area h3,.support_list h4,#worldwide .com_name,#worldwide .intro,.e_highlight h4,.quarter_list h4,#epaper_i .intro .title,#epaper_sub .e_highlight h4,.modal-body h4,.brand_area1 .video_btn ,.brandHistory .txtxam,.about_oran_2 h4,.about_culture h3,.about_technology h4,.about_gray .head h3,.about_glory .head h3,.about_glory .flexslider-full h4,.brand_banner .head{ font-size:1.3rem;}
/*font 14*/
.brand_area1 .box h4,.brand_area2 li,.e_form .control-label,.about_oran_2 .title,.faq_section h4,#epaper .intro .e_quarter, #epaper_i .intro .e_quarter,.quarter_list li,.about_head .head h1 small,.about_glory .text_style1,.brandHistory .txtx{ font-size:14px;}
/*font 13*/
.about_culture .head,.news_highlight .type,#worldwide .com_title,.about_gray .box,.about_gray .head,.about_research{ font-size:13px;}

#prod_list li{ margin-bottom:40px;}
#solution #prod_list h2{ margin-bottom:10px;}
#solution #prod_list li p{ height:auto; margin-bottom:15px;}
#solution_i .headline h1{ font-size:18px; font-weight:normal; padding-top:15px; padding-bottom:20px; line-height:110%;}

#product_sub .intro h1{ margin:20px 0 25px;}
#product_i .intro .col-sm-6 + .col-sm-6{ margin-top:1rem}
#product_i .intro h1{ margin:2rem 0 1.5rem;text-align: center;}
#product_i .btn-area a{ margin:0 .4rem 1.5rem;}
#product_i .btn-area:after{ display:none;}
#product_i .btn-area span{ float:none; text-align:center; margin-bottom:2rem; padding:0;}
#product_i .btn-area span font{ display:block; line-height:105%; opacity: 1; width: 80px; margin-left: -40px;}
#product_i .nav a{ line-height:29px; width:110px; font-size:11px;}
.icon_360{ width:41px; height:29px;}
.video_list h4{ margin-bottom:3rem;}
.prod_detail{ padding-bottom:0;}
.prod_map li button{ width:20px; height:20px;margin:-10px 0 0 -10px;	}
.prod_map li button:before {    left: 5px;    right: 5px;}
.prod_map li button:after{ top:5px; bottom:5px;}
.prod_map .dropdown-menu{ margin:0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding-top: 60px;}
.prod_map li .dropdown-menu button{position: absolute;top: 10px; right: 10px; font-size: 20px;margin: 0;    background: none;    width: 40px;    height: 40px;    transform: rotate(45deg);}

.prod_map .dropdown-menu .img-responsive{ float:none; margin-left:auto;}
.prod_map .dropdown-menu h4{ text-align:center;}


#contact .group{ margin-bottom:15px;}

#news .nav{ margin-bottom:30px;}
#news .nav li{ width:50%;}
#news .nav a{ border-left-width:1.66rem; font-weight:normal; line-height:3rem; font-size:1rem; padding-left:1rem;}
.news_highlight>*{ padding-bottom:1.5rem;}
.news_highlight .type{ margin-bottom:0;}
.news_highlight h4{ margin-top:.5rem;}
#news_category1 li{ margin-bottom:20px; }
#news_i .btn-area:after{ display:none;}
#news_i .intro{ position:relative; padding-top:7rem;;}
#news_i .btn-area{ position:absolute; top:0; right:0;}
#news_i .intro .back{ position:absolute; top:4rem; right:0;}
#news_i .intro h1{ margin-bottom:.5rem;}
.news_area .gallery_area{ margin:0 -20px;}
.news_area .gallery_area .box{ padding:20px;}
.news_area img{max-width: 100%;}

.support_list>div>.img-responsive{ display:none;}
.support_list h4{ margin-bottom:.5rem;}
.support_list .item{ margin-bottom:30px; padding:1.3rem;}
.support_list.type3 li{ width:100%;}
.btm_solution{ margin-bottom:2px;}
#support .support_btm p, #support_i .support_btm p{ margin-top:0}
#support .support_btm .btm_solution>*, #support_i .support_btm .btm_solution>*{ margin-left:0;}
#support .support_btm>*, #support_i .support_btm>*{  text-align:center; }
#support .support_btm .btn, #support_i .support_btm .btn{ margin-left:auto; margin-right:auto; width:2.5rem; height:2.5rem;}

#support_i .intro h1{ margin-top:30px;}
#support_i .intro h1 small{ margin-bottom:.5rem}
#support_i .intro .search, .support_faq .search{width:100%; }
.download_list img{ width:30px; right:0; top:50%; margin-top:-15px;}
.download_list .info{ line-height:20px; top:auto; right:auto; margin-top:0; position: relative;} 
.download_list li a{ line-height:150%; padding:15px 40px 15px 15px;; }
.download_box{ padding:20px 15px 0;}
#support_i .form_line{ margin-top:0;	}
.faq_section .panel-heading a{ padding:20px 50px 20px 20px;}
.faq_section .panel-heading a img{ right:10px; width:30px;}
.faq_section .panel-body{ padding-right:20px;}
.faq_section h4{ font-weight:normal; margin-bottom:15px; }

#worldwide #com{ margin:0;}
#worldwide .ww_list .ww_info{ padding-bottom:320px; }
#worldwide .ww_list .ww_info #comPic{ float:none; margin:0; position:absolute; width:100%; left:0; bottom:50px; text-align:center; margin:0;max-width:none}
#worldwide #comPic img{ width:245px;}
#worldwide .intro{ margin:20px 0 15px;}
.ww_list .ww_info{ margin-bottom:3rem;}
.ww_list button{ right:50%; margin-right:-1.25rem;}
.epaper_tab li{ width:100%; padding:0 20px; margin:0;}
.epaper_tab li a{ padding:20px 0; text-align:center; line-height:150%}
.epaper_tab li.active a{ box-shadow:inset 0 -5px 0 #000}
#epaper .intro h1, #epaper_sub .intro h1, #epaper_i .intro .title{ padding-right:0; }
#epaper .intro h1, #epaper_sub .intro h1{ margin-bottom:0;}
#epaper .intro .e_quarter, #epaper_i .intro .e_quarter{ position:relative; right:auto; }
#epaper .e_highlight .photo{ position:relative;}
.e_highlight{ padding:0; margin:0 -20px;}
.e_highlight h4{ padding-bottom:1rem;}
.e_highlight h4 strong{ margin-bottom:1rem;}
.e_highlight h4:after{ width:30px;}
.quarter_list .item ul{ margin-bottom:3.5rem;}
.quarter_list h4{ padding-bottom:1rem; min-height:0;}
.quarter_list li:before{ border-left-width:8px; border-top-width:4px; border-bottom-width:4px;}
#epaper_i .intro{ margin-bottom:0;	}
#epaper_i .intro .title{ margin-bottom:0;}
#epaper_i .btn-area{ text-align:left;}
#epaper_sub .e_highlight{ margin-top:1rem;}
#epaper_sub .e_highlight .text{ position:relative; width:100%;}
#epaper_sub .e_highlight h4 strong{ font-size:20px; margin-bottom:1rem;}
.epaper_list li:nth-child(2n+3){ clear:both;}
#epaper_app .e_form .input_txt{ margin-top:10px;}
.e_form .form-group{ margin-bottom:15px;}
.e_form .row>.col-70{ margin-top:10px;}
.e_form .radio-inline, .e_form .checkbox-inline{ display:block;}
.e_form .radio-inline+.radio-inline, .e_form .checkbox-inline+.checkbox-inline{ margin-left:0; margin-top:5px;}
.e_form .control-label{margin-bottom:5px;}

.about_history h1:after,.about_oranizetion .side_menu h3:after,.about_head .head h1:after,.about_research h3:after,.about_technology h3:after{ margin-top:1rem;}
.about_history h1 small,.about_oranizetion .side_menu h3 small{ margin-bottom:.5rem;}
.about_glory .head h4, .about_gray .head h4{ margin-top:5px;}
.about_gray { padding:40px 0 0;}
.about_gray .box{ padding:20px; margin-bottom:0;}
.about_gray .gallery{ margin:0 -20px;}
.about_gray .head{ margin-bottom:2rem; padding:0 10px;}
.about_culture .highlight,#about h1,#about h2,#about h3,#about h4{ line-height:120%;}

.brand_area1{ padding:0 0 3rem;;}
.brand_area1 .box h4{ margin-bottom:5px;}
.brand_area1 .box{ margin:-30px 0 20px; padding:30px 20px; position:relative; z-index:9; }
.brand_area2 li h4:after{ margin-top:1rem;}
.brand_area2 li h4{ margin-bottom:1rem;}
.about_value h3 small{ margin-bottom:.5rem}
.about_value .value_pc{ height:88vw;}
.about_value .item{ padding-left:20px; padding-right:20px;}
.about_value h3:after{ margin:1rem auto;}
.historyCont .txtH .dateH:after{ margin:1rem 0;}
.brandHistory .txtx2{ font-size:30px;}
.about_history{ background-attachment:fixed; padding-top:6rem;}

.about_oranizetion{ padding-top:3rem;}
.about_oran_1{ margin-bottom:2rem;}
.about_oran_1 .oranizetion_content .text{ margin-bottom:2rem;}
.about_oran_1 .data .box{  margin:0 auto 30px; width:240px; height:200px; line-height:15px; padding:30px 0 0;}
.about_oran_1 .data .box strong{ font-size:4.5rem; line-height:75px; margin-bottom:10px}
#about .about_oran_2 h4{ line-height:5rem; margin-bottom:0}
.about_oran_2 .title,.about_oran_2 .panel-heading a{ padding:15px 0}

.about_culture{ padding:30px 0 20px;}
.about_culture .head{ width:100%; margin-bottom:3rem;}
.about_culture h4{ margin:10px 0 20px;}
.about_culture .highlight{ width:100%;}
.about_culture .culture_pc{ margin-top:30px;}
.about_culture .head{ line-height:1.25rem}
.about_culture .head p:before, .about_culture .head p:after,.about_gray .head p:before, .about_gray .head p:after{    font-size: 4.5rem; padding:0 .5rem;    line-height: 1rem; height:0;margin: 1rem 0 0 -1rem;    padding: 0 .5rem;}
.about_culture .head p:after, .about_gray .head p:after{ margin:0;}
.about_culture .highlight{ margin-bottom:1rem;}

.about_head{ min-height:0; background-size:750px; padding-top:300px; }
.about_head .container{ padding:0;}
.about_head .row>.col-sm-6{ float:left; width:50%;}
.about_head .head h1:after{ width:30px;}
.about_head .head_btn a{ padding-left:10px; padding-right:10px;}
.about_head .head_btn a:before{ bottom:30px;}

.about_technology .tech-item{ margin-bottom:2rem;}
.about_technology h4{ margin-bottom:5px;}
.about_technology img{ margin-bottom:1rem;}
.about_glory .head h4,.about_gray .head h4{ margin:10px 0 20px; line-height:120%;}

.about_research{ background:none; margin-top:20px; padding-top:0; line-height:1.5rem; padding-bottom:3rem;}
.about_research .container{ padding-right:20px;}
.about_research .btn{ margin-top:1rem;}
.about_glory{ padding:3rem 0 0;}
.about_glory .flexslider-full,#carousel-glory .item{ padding:0 20px;}
.about_glory .flexslider-full h4,#carousel-glory h4{ margin:20px 0;}
.about_glory .flex-direction-nav a,#carousel-glory .carousel-control{ top:25vw; width:30px; height:30px; background-size:18px; margin-top:-15px;}
.about_glory .flex-direction-nav .flex-next,#carousel-glory .carousel-control.right{ right:-15px;}
.about_glory .flex-direction-nav .flex-prev,#carousel-glory .carousel-control.left{ left:-15px;}
.brandHistory .txtx:before{ top:.2rem;}

.brand_area2{ padding-bottom:1rem;}
.brand_banner .head{ padding-left:16rem;}
.brand_banner a{  width:14rem; height:14rem;}
.brand_banner h1{ font-size:2.4rem;    left: -17rem;    margin-top: -1.2rem;}
.brand_banner .head .icon{ margin-left:4rem; top:25%;}
.brand_banner .head .icon:before{ width:4rem; height:4rem; margin-bottom:1rem;} 
.about_value .item{ padding-bottom:4rem;}
#page_information .fs_300{font-size:10rem;}
}
@media screen and (min-width: 481px) and (max-width: 767px) {	
header{ padding-bottom:5px; position: relative; top: auto; left: auto; }
.headline h1, .headline h2{ min-width:45%; }
.btm_contact,#support .support_btm>*, #support_i .support_btm>*{ padding:4rem 0}
.download_box{ width:400px;}
.historyCont .inBox2{ width:400px;}
.fancybox-next{    right: -70px;}
.fancybox-prev{ left:-70px;}
}
@media (max-width: 480px){
.btm_contact,#support .support_btm>*, #support_i .support_btm>*{ height:60vw; padding:12vw 0 0;}
.fancybox-nav span{ width:30px; height:30px; margin-top:-15px;}
.fancybox-next{    right: -35px;}
.fancybox-prev{ left:-35px;}
.fancybox-next span{ right:0;}
.fancybox-prev span{ left:0;}
.foot_social a{ font-size:50px}
#contact .nav-tabs li{ width:100%;}
#contact .nav-tabs li+li{ margin-top:10px;}
.download_box{ width:340px;}
.download_box .download_list li a{ padding-right:110px; padding-left:5px;}
.historyCont .close{ top:-45px; right:0}
.historyCont .inBox2{ width:280px;}
.historyCont .imgH,.historyCont .txtH{ width:100%;}
.historyCont .txtH{ padding:20px 0 0;}
.c_link a{ width: 30%; }
.about-nav li a{ line-height:5rem; padding:0 5px; font-size:1rem;}
.brand_banner .head{ position:relative; padding:6rem 0 5rem;height: 137.91vw;}
.brand_banner a{ position:relative; width:16rem; height:16rem; top:auto; left:auto; margin-bottom:3rem;}
.brand_banner h1{ font-size:3.2rem;    left: -16rem;    margin-top: -2rem;}
.brand_banner .head .icon{ margin-left:5.5rem; top:35%;}
.brand_banner .head .icon:before{ width:5rem; height:5rem; margin-bottom:1rem;} 
.brand_banner .head h2{ margin:2rem 20px 20px; font-size:2rem;}
.brand_banner .head h2:after{ margin-top:10px;}
.brand_banner .head p{ margin:0 20px;}
.about_brand .video_area:before, .about_brand .video_area:after{position: absolute; content: ''; display: block; width: 100%; height: 4px; z-index: 4; background: #fff; left: 0; }
.about_brand .video_area:before{ top: 0; }
.about_brand .video_area:after{ bottom: 0; }
.about_brand .video_area{ position: absolute; width: 100vw; height: 138.71vw; left:0; top: 0; }
.brand_area1 .box{ margin-top:-80px;}
}
/*
color
#061a26
rgba(6,26,38,.8)
#595757
#313131
#779cb0
#92b4af
#d9b86e
#da8f57

font-size
30	2.5rem
24	2rem
16	1.3rem
14	1.16rem

line-height:150%
*/