@charset "utf-8";

/* TOP CSS */


/* --------------------------------------

Base settings

---------------------------------------*/
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


.iframe
{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.iframe iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body {
	-webkit-text-size-adjust: 100%;
}

img
{
	max-width:100%;
	height:auto;
}

.sp-slide img
{
	max-width:inherit;
}

.wrapper
{
	width:100%;
}

.box
{
	padding:0 4%;
	margin-bottom:28px;
}

.box .box
{
	padding:0;
	margin-bottom:10px;
}



.box-border
{
	padding:16px;
	margin-bottom:10px;
}

.col2,.col3
{
	width:100%;
	margin:0;
}

.col2 > .col,
.col3 > .col
{
	float:none;
	width:100%;
	margin-right:0;
}

.col3 .col img,
.col2 > .col img
{
	width:100%;
	height:auto;
}

.col5 .col
{
	vertical-align:top;}

.btn
{
	background:#fff;
	width:80%;
}




/* --------------------------------------

header

---------------------------------------*/



header .headline nav#lang,
header .logoline address,
header nav#gnav
{
	width:100%;
	float:none;
	display:none;
}



header .headline nav#lang
{
	clear:both;
	padding-top:6px;
	margin-top:4px;
	text-align:center;
	border-top:1px dashed #ddd;
}

header .headline nav#lang li
{
	display:inline-block;
	width:49%;
	text-align:center;
	line-height:30px;
}

header .headline nav#lang ul li:first-child:after
{
	position:absolute;
	right:0;
}

header .headline
{
	padding:8px 4%;
	margin:0;

}

header .logoline
{
	padding:10px 4%;
	margin:0;
position:relative;
}

header .headline h1
{
	width:100%;
	font-size:11px;
	float:none;
}


header .logoline #logo
{
	float:none;
	line-height:0;
	width:90%
}

header .logoline #logo img
{
	height:38px;
	width:auto;
}

header nav#gnav
{
	width:90%;
	margin:0 auto;
	border-bottom:1px dashed #ddd;
	margin-bottom:10px;
}

header nav#gnav ul li
{
	display:block;
}

header nav#gnav ul li a
{
	width:50%;
	float:left;
}


header nav#gnav ul li:after,
header nav#gnav ul li:first-child:before
{
	display:none;
}

/* ------------ hamburger ------------ */


header #toggle
{
    position:absolute;
    width:20px!important;
    top:6px;
    right:4vw;
    display:block;
    height: 45px;
}

.menu-trigger,
.menu-trigger span {
    display: block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    position: relative;
    width: 100%;
    height: 100%;
}
.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #038bbc;
    border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
    top: 16px;
}
.menu-trigger span:nth-of-type(2) {
    top: 22px;
}
.menu-trigger span:nth-of-type(3) {
    top: 28px;
}

/* custom */

.menu-trigger::after {
    position: absolute;
    left: 0;
    bottom: -22px;
    /*content: 'MENU';*/
    display: block;
    width: 100%;
    color: #038bbc;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    transition: all .4s;
}
.menu-trigger.active::after {
    /*content: 'CLOSE';*/
    bottom: -22px;
}
.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}


/* --------------------------------------

bg-lightblue

---------------------------------------*/


.bg-lightblue
{
	padding:0;
	background:none;
	overflow:hidden;
	clear:both;
}

.bg-lightblue .sp-bottom-thumbnails
{
	padding:10px 0;
	margin-top:0;
	
}


.bg-lightblue .sp-slide
{
	line-height:0;}

.bg-lightblue .sp-slide img
{
	height:auto!important;
	width:100%!important;
}

.bg-lightblue .col2 .col4 .col
{
	line-height:0;
	margin-bottom:10px;
}

.bg-lightblue .col.bg-white h2
{
	margin-bottom:10px;
	background-size:contain;
}


.bg-lightblue .col2 aside.col.bg-white
{
	background:#eaf9fd;
	padding:20px 4%;
	clear:both;
}


.bg-lightblue .col4
{
	padding:0 4%;
}

.bg-lightblue .col.bg-white ul
{
	margin-bottom:10px;}

.bg-lightblue .col.bg-white ul li a
{
	background:#fff;
	border:none;
	padding:10px 4%;
	margin-bottom:8px;
}

.sub .bg-lightblue
{
	background:#038bbc;
	font-size:11px;
	padding-right:4%;
	padding-left:4%;

}

.sub .bg-lightblue .breadcrumbs,
.sub .bg-lightblue .breadcrumbs a
{
	color:#fff;}



/* --------------------------------------

main

---------------------------------------*/

#main
{
	padding-top:20px;
}

#main .commonalert
{
	line-height:1.8;
}
#main .commonalert .alignleft,
#main .commonalert .alignright
{
	float:none;
	width:100%;
	position:relative;
}

#main .commonalert .alignleft
{
	text-align:center;
	transform:none;
	padding-bottom:10px;
	border-bottom:3px solid #f8f8f8;
	margin-bottom:10px;

}


#main .commonalert .alignright
{
	margin:0;
}

#main .commonalert .alignright br
{
	display:none;
}
#main .commonalert .alignright:before
{
	display:none;}
	
	
#main .commonalert .alignright a
{
	display:inline-block;
}


#main .commonalert.offical
{
	background-image:none;
}

#main .commonalert.offical .btn-orange
{
	width:100%;
}


#main .commonalert.offical .alignleft
{
	border-color:#1486e3;
}

#main h2
{
	font-size:20px;
	text-align:left;
	padding-bottom:20px;
	margin-bottom:10px;
}

#main .col2.label .col a
{
	padding-left:24px;
	line-height:80px;
	font-size:16px;
	margin-bottom:10px;
}

#main .col2.label .col a .fa
{
	left:4px;
	font-size:16px;
}


#main .col2.label .col a.out:after,
#main .col2.label .col a.in:after
{
	height:93px;
	background-size:contain;
	background-repeat:no-repeat;
}

#main .col2.label .col strong
{
	font-size:24px;
	padding-right:4px;
}


.sub #main
{
	padding-top:20px;
}


/* --------------------------------------

contents

---------------------------------------*/

.sub #main #contents
{
	float:none;
	width:100%;
}

.sub #main #contents h1
{
	width:92%;
	margin:0 auto 20px;
	padding-bottom:30px;
}

.sub #main #contents h1 strong
{
	font-size:24px;
	display:block;
	vertical-align:middle;
	position:relative;
	padding-right:16px;
	font-weight:bold;
}

/*.sub #main #contents h1 strong:after
{
	content:"/";
	display:inline-block;
	color:#038bbc;
	font-size:11px;
	line-height:1.5;
	position:absolute;
	padding:0px 6px;
	top: 50%;
	-webkit-transform: translateY(-50%); 
	transform: translateY(-50%);
	line-height:1.5;
}*/

.sub #main #contents h2
{
	font-size:18px;
	line-height:1.5;
}



.sub #main #contents h3
{
	padding-top:10px;
	padding-bottom:20px;
	margin-bottom:10px;
}

.sub #main #contents #box-ceo .alignleft
{
	width:150px;
	padding:0;
	margin-bottom:0;
	line-height:0;
}

.sub #main #contents #box-ceo .alignleft img
{
	width:100%;
	height:auto;
}


.sub #main #contents #box-ceo .alignright
{
	float:none;
	width:100%;
	margin:0;
}


.sub #main #contents #message .alignleft,
.sub #main #contents #message .alignright
{
	float:none;
}

.sub #main #contents #message .alignleft img
{
	width:100%;
	height:auto;
}


.sub #main #contents dl.list dt
{
	width:15%;
	padding:8px 0;
}

.sub #main #contents dl.list dd
{
	width:85%;
	padding:8px 0 8px 10px;
}

.sub #main #contents table.tbl1,
.sub #main #contents table.tbl1 tbody,
.sub #main #contents table.tbl1 tr,
.sub #main #contents table.tbl1 th,
.sub #main #contents table.tbl1 td
{
	display:block;
	width:100%;
	border:none;
}

.sub.case #main #contents .pickup,
.sub.case #main #contents article
{
	padding:0px 4%;
}

.sub.case #main #contents .col3 .col .detail
{
	height:auto;
}


.sub.case #main #contents .bg-bk
{
	padding:14px 4%}

.sub.case #main #contents .pickup .bg-bk
{
	position:relative;
}

.sub.case #main #contents .pickup .bg-bk .caselogo.alignleft
{
	width:100%;
	height:100px;
	float:none;
	margin-bottom:10px;
}

.sub.case #main #contents .bg-bk .caselogo.alignleft
{
	float:none;
	width:100%;
	margin-bottom:10px;
}

.sub.case #main #contents .bg-bk .alignright
{
	width:100%;}

.sub.case #main #contents .pickup .bg-bk .alignright
{
	width:100%;
	float:none;
	margin:0;
}

.sub.case #main #contents .bg-bk .cat a, .sub.case #main #contents .bg-bk ul.tag li a
{
	padding:0 4px;
	margin-right:2px;
}

.sub.case #main #contents .bg-bk h2
{
	font-size:20px;}


.sub.news #main #contents, .sub.case #main #contents
{
	padding-bottom:30px;}

.sub #main #contents .box ul.qa li a
{
	padding-right:30px;}

.sub #main #contents .box ul.qa li > .bg-gray
{
	padding:14px 4%;}

.sub #main #contents .col3.tab
{
	padding:0 4% 20px;
	margin-left:1%;
}

.sub #main #contents .col3.tab .col
{
	width:32%;
	float:left;
	font-size:11px;
	text-align:center;
	margin-right:1%;
	line-height:1.5
}

.sub #main #contents .col3.tab.blue .col a,
.sub #main #contents .col3.tab.out .col a,
.sub #main #contents .col3.tab.in .col a
{
	padding:8px 0%;
}

.sub #main #contents .col3.tab .col .fa
{
	display:none;
}

.sub #main #contents h2:before
{
	height:calc(100% - 36px);
	top: 50%;
	-webkit-transform: translateY(-50%); 
	transform: translateY(-50%);
}

.sub #main #contents h2 .label,
.sub #main #contents .label
{
	position:relative;
	right:auto;
}


.sub #main #contents .box-border h4 br
{
	display:none;
}

.sub #main #contents .box-border-b .alignleft
{
	width:100%;
	float:none;
}

.sub #main #contents .box-border-b .alignleft img
{
	width:100%;
	height:auto;
	}

.sub #main #contents .commonalert
{
	width:92%;
	margin: 0 auto 20px;
}

.sub #main #contents .right20
{
	margin-right:8px;}

.sub #main #contents .bg-gray
{
	padding:14px;
}

.sub #main #contents table.tbl2
{
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-all;
}

.sub #main #contents table.tbl2 .bg-gray,
.sub #main #contents table.tbl2 th,
.sub #main #contents table.tbl2 td
{
	padding:inherit;
	
}

.sub.news #main #contents article .entrybody
{
	padding:20px 4%;}

.sub.news #main #contents article header.bg-gray
{
	padding:20px;
}
.sub.news #main #contents article header.bg-gray .opt
{
	padding-bottom:10px;
}

.sub.news #main #contents article header.bg-gray h1
{
	font-size:20px;}


.sub #main #contents h2 span.small
{
	padding:0;
	display:block;
}

.sub #main #contents .bg-gray h4
{
	padding-bottom:10px;
	margin-bottom:10px;
}


.sub #main #contents .bg-dot
{
	padding:8px;}

.sub #main #contents #products-other .alignleft
{
	float:none;
	width:100%;
}

.sub #main #contents #products-other .alignleft img
{
	width:100%;
	height:auto;
}

.sub #main #contents #products-other .alignright
{
	width:100%;
	float:none;
	margin:0;
}

.sub #main #contents .alignright
{
	width:100%;
}

.sub #main #contents .box-border-b .detail
{
	position:relative;
	left:0;
	top:auto;
	transform:none;
	padding-top:10px;
}

.sub #main #contents .box-border-b .detail h4
{
	font-size:18px;
}


.sub #main #contents ul li ul.cir
{
	padding-left:40px;}
	
.sub.sitemap #main #contents ul li ul.cir li
{
	border-bottom:0;
}

/* --------------------------------------

side

---------------------------------------*/


.sub #main #side
{
	float:none;
	width:100%;
	display:none;
}

.sub #main #side img
{
	width:	100%;
	height:auto;
}


/* --------------------------------------

footer

---------------------------------------*/

footer
{
	padding-top:30px;
}

footer .headline
{
	padding:20px;}

footer .headline dl a
{
	color:#fff;
}

footer .headline .alignleft,
footer .headline .alignright
{
	float:none;
	width:100%;	
	padding:0;
}


footer .headline dl
{
	width:48%;
	text-align:center;
	margin:0 1%;
}

footer .headline dl dt,
footer .headline dl dd
{
	width:100%;}

footer .headline dl dd
{
	border:1px solid #fff;
	margin-top:-2px;
	padding-right:0;
	font-size:18px;
}

footer .headline .gray
{
	text-align:center;
	display:block;
	line-height:34px;
}

footer nav#fnav ul
{
	width:100%;
	margin:0;
}

footer nav#fnav ul li
{
	float:none;
	width:100%;
}

footer nav#fnav ul li
{
	background:none;
	padding:0;
	margin:0;
}

footer nav#fnav ul li a
{
	display:block;
	line-height:50px;
	padding: 0 4%;
	margin:0;
	border-bottom:1px solid #ddd;
	font-size:14px;
}

footer nav#fnav ul li a .fa
{
	font-size:16px;
}

footer nav#fnav ul li:last-child a
{
	border:none;
}

footer nav#fnav
{
	padding:0;}