* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: '微軟正黑體',Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	color: #333;
	background-repeat: repeat-x;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}
a {
	text-decoration: none;
	outline: none;
}
button{
	outline:none;
	cursor: pointer;
}
ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}


.content {
	margin: 0 auto;
	max-width: 1200px;
}

.col-3, .col-4, .col-6 {
	float: left;
	padding: 0 10px;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-6 {
	width: 50%;
}
.col-20 {
	width: 20%;
	float: left;
} 

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
.clearfix {
	clear: both;
}
.fill img {
	width: 100%;
}

.btn span {
	color: #fff;
	background-color: #3b79c5;
	border-radius: 5px;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
}
.btn span:hover {
	background-color: #ffba00;
}


/* header */

#lan {
	background: #f0f2f3;
}
#lan .content {
	background: url(../IMG/index/lan-bg.png) center center no-repeat;
}
#lan ul {
	float: right;
}
#lan ul li {
	display: inline-block;
	padding: 4px 8px;
}
#lan li a {
	color: #6e6e6e;
}
#lan a:hover {
	color: #3b79c5;
}

#branding {
	padding: 6px 0 4px;
}
#logo {
	float: left;
}
#logo img {
	width: 175px;
	height: auto;
}
#logo span {
	font-size: 15px;
	font-weight: bold;
	font-family: "Arial";
	color: #00075e;
}
#sns {
	float: right;
	padding-top: 15px;
}
#sns ul {
	margin:0;
	padding:0;
	list-style:none;
}
#sns li {
	margin:0;
	padding:0 10px;
	list-style:none;
	float:left;
}
#sns li img {
	height: 48px;
	display: block;
}
#sns li img:hover {
	opacity: .7;
}
#nav {
	background: #172887;
}
#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
#nav li {
	margin:0;
	list-style:none;
	float:left;
}
#nav .content>ul>li {
	padding: 10px 30px;
}
#nav .content>ul>li:last-child {
	padding: 10px 40px;
}
#nav li img {
	width: 32px;
	display: block;
	float: left;
	padding-top: 4px;
}
#nav .content>ul>li>a {
	color:#fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	padding: 0 20px;
}
#nav .content>ul>li:last-child>a {
	padding: 0;
}
#nav .content>ul>li>a:hover {
	color: #ffba00;
}

.dropdown-content {
  display: none;
  position: absolute;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  min-width: 260px;
  margin-top: 10px;
  left: 0;
}

#nav .dropdown-content a {
  color: #172887;
  background-color: #fff;
  padding: 0 10px;
  line-height: 2em;
  display: block;
  border-radius: 0;
  border: 0;
  font-size: 16px;
  font-weight: bold;

}
#nav .dropdown-content a {
	border-bottom: 1px solid #d5e5fa;
	line-height: 40px;
}

#nav .dropdown-content a:hover {
	background-color: #3b79c5;
	color: #fff;
}

#nav ul>li {
	position: relative;
}
#nav ul>li>a::after {
    content: "|";
    color: #fff;
    position: absolute;
    right: -3px;
}
#nav ul>li:first-child >a::before {
    content: "|";
    color: #fff;
    position: absolute;
    left: -3px;
}
#nav {
  display: flex;
}
 
#nav > li {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
}
#menu {
    display: none;
    float: left;
    padding: 0 10px;
    margin-left: 10px;
}
#bar {
	padding: 4px 0;
	width: 35px;
	margin: 0 auto;
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
	width: 35px;
	 height: 5px;
	 background-color: #172887;
	 margin: 6px 0;
	 transition: 0.4s;
}
.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}

/*  VISION  */
#vision img, #vision_phone img {
	display: block;
}
#vision_phone {
	display:none;
}

/* -- FOOTER -- */

#footer {
	margin-top: 20px;
	padding: 1px 10px;
	background-color: #676767;
	color: #fff;
	text-align: center;
	line-height: 20px;
}
#footer a {
	color: #fff;
}
#footer a:hover {
	color: #ffba00;
}


/*--------index content--------*/

#main_01 {
	background: #f7f7f7;
	padding-bottom: 40px;
}
.offer {
	overflow: hidden;
	padding: 40px 0;
}
.offer ul li {
	float: left;
}
.offer-l {
	width: 25%;
}
.offer-r  {
	width: 75%;
	border-left: 3px solid #ffba00;
}
.offer h2 {
	color: #000;
	text-align: right;
	margin: 0;
	padding: 0 28px 0 0;
	line-height: 1.5em;
}
.offer p {
	text-align: justify;
	padding-left: 20px;
	margin: 0;
	padding: 0 0 0 28px;
	line-height: 24px;
}

.service .col-3 {
	padding: 0 10px;
}
.service .box-cont {
	position: relative;
	padding: 20px;
	border: 4px solid #3b79c5;
	background: #fff;
	text-align: center;
	box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
	height: 320px;
}
.service .box-cont::after {
	content: "More";
	position: absolute;
	color: #3b79c5;
	font-size: 14px;
	font-weight: bold;
	right: 8px;
	bottom: 4px;
}
.service .box-cont img {
	width: 84px;

}
.service .box-cont h3 {
	color: #3b79c5;
	margin: 0;
	line-height: initial;
}
.service .box-cont p {
	text-align: justify;
	line-height: 24px;
	color: #333;
}
#main_02 {
	padding: 40px 0; 
}
#main_02 .ad, #main_02 .ad-phone  {
	padding: 10px;
}
#main_02 .ad .owl-theme, #main_02 .ad-phone .owl-theme {
	box-shadow: 0px 3px 12px rgba(0,0,0,0.4);
}
#main_02 .ad .owl-theme .owl-controls {
	margin-top: -35px;
	margin-right: 8px;
    text-align: right
}
.ad-phone {
	display: none;
}
.ad-phone .owl-theme .owl-controls {
	display: none;
}

.feature {
	display: flex;
    overflow: hidden;
}
.feature-img {
	float: left;
    display: block;
    position: relative;
    width: calc(55% - 115px);
}
.feature-img img {
	vertical-align: middle;
}
.feature-box {
	width: calc(50% + 115px);
    float: left;
    position: relative;
    background: url(../IMG/index/feature-02.jpg) repeat;
    display: block;
}
.feature-cont {
    max-width: 670px;
    margin: 0;
    z-index: 2;
    position: relative;
    padding: 36px 80px 0px 60px;
}

.feature-title {
	padding: 8px 8px 6px;
	background: #ffba00;
	color: #172887;
	font-weight: bold;
}
.feature-title span {
	font-size: 22px;
}
.feature-list {
	padding: 10px 20px;
	border: 2px solid #ffba00;
	color: #fff;
}
.feature-list ul {
	list-style-type: disc;
	padding-left: 20px;
}
.feature-list ul li {
	padding: 8px 0;
	line-height: 24px;
	font-size: 16px;
}
.feature-list ul li span {
	font-size: 18px;
	font-weight: bold;
}

#main_04 {
	padding: 20px 0;
}
#main_04 h3 {
	text-align: center;
	margin-bottom: 0;
}
#main_04 hr {
	width: 100px;
    height: 2px;
    background-color: #3b79c5;
    border: none;
}
#main_04 p {
	width: 75%;
	margin: 0 auto;
	text-align: justify;
}
#main_04 .gallery {
	padding: 30px 8px;
}
#main_04 .gallery .item {
	border: 1px solid #949494;
	padding: 0 10px;
}
#main_04 .galleryp .item img {
	display: block;
}
#main_04 .gallery .item span {
	color: #3b79c5;
	font-weight: bold;
}
#main_04 .gallery .owl-controls {
	display: none;
}
#main_04 .btn {
	text-align: center;
}


/*--------inner page content--------*/

#breadcrumb {
	background-color: #eee;
}
#breadcrumb ul {
	float: right;
	padding: 8px 0;
}
#breadcrumb ul li {
	display: inline;
	font-size: 18px;
}

#breadcrumb ul li+li:before {
	padding: 8px;
	color: #333;
	content: ">";
}

#breadcrumb ul li a {
  color: #333;
}

#breadcrumb ul li a:hover {
	color: #3b79c5;
}

.inner-page {
	margin-top: 40px;
}

.inner-left {
	width: 25%;
	float: left;
}
.inner-right {
	width: 75%;
	float: left;
	padding-left: 40px;
}

/*  --  left-sidemenu  --  */
.inner-left .sidemenu .block {
	border: 1px solid #cacaca;
	margin-bottom: 20px;
}
.list-title {
	font-size: 18px;
	font-weight: bold;
	padding: 8px 6px 8px 80px;
}
.list-title a {
	color: #313131;
}
.sidemenu>.block>a, .dropdown-btn {
  padding: 6px 10px;
  font-size: 16px;
  font-family: '微軟正黑體',Arial, Helvetica, sans-serif;
  line-height: 30px;
  color: #333;
  display: block;
  border: none;
  border-bottom: 1px solid #dedede;
  background: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.sidemenu .block .dropdown-container a {
	font-size: 16px;
	padding: 8px;
	line-height: 30px;
	color: #333;
	display: block;
	border-bottom: 1px solid #dedede;
}
.sidemenu .block>a:last-child , .sidemenu .block .dropdown-container a:last-child {
	border: none;
}
.list-title a:hover, .sidemenu .block>a:hover, .dropdown-btn:hover, .dropdown-container>a:hover {
  color: #3b79c5;
}
.dropdown-container {
  display: none;
  padding: 0 16px;
  border-bottom: 1px solid #dedede;
}
.dropdown-btn>span, .block>a>span {
	float: right;
}

#menu-01 {
	background: url(../IMG/images/sidemenu-01.png) no-repeat 3px center, url(../IMG/images/sidemenu-bg.jpg) no-repeat left center, #f5f2f2;
}
#menu-02 {
	background: url(../IMG/images/sidemenu-02.png) no-repeat 3px center, url(../IMG/images/sidemenu-bg.jpg) no-repeat left center, #f5f2f2;
}
#menu-03 {
	background: url(../IMG/images/sidemenu-03.png) no-repeat 3px center, url(../IMG/images/sidemenu-bg.jpg) no-repeat left center, #f5f2f2;
}
#menu-04 {
	background: url(../IMG/images/sidemenu-04.png) no-repeat 3px center, url(../IMG/images/sidemenu-bg.jpg) no-repeat left center, #f5f2f2;
}
#menu-05 {
	background: url(../IMG/images/sidemenu-05.png) no-repeat 3px center, url(../IMG/images/sidemenu-bg.jpg) no-repeat left center, #f5f2f2;
}
.guild {
	padding: 10px 16px;
	background: url(../IMG/images/guild-bg.png) no-repeat right bottom;
}
.guild span {
	font-size: 18px;
	font-weight: bold;
}
.guild p {
	text-align: justify;
	line-height: 24px;
	margin: 0.5em 0;
}
.sidemenu>.guild a {
	color: #3b79c5;
	padding: 0;
	font-weight: bold;
}

/*  --  right-content  --  */

.right-cont {
	padding: 0 16px;
}

.title h2 {
    position: relative;
    padding-bottom: 20px;
    letter-spacing: 0.3px;
    margin: 0 0 1em;
    border-bottom: 1px solid #ffba00;
}
.title h2::before {
	content: "";
    width: 55px;
    height: 3px;
    display: inline-block;
    background: #ffba00;
    position: absolute;
    bottom: 0;
}

.subtitle {
	border-left: 4px solid #ffba00;
	padding-left: 8px;
	line-height: initial;
}


.word h3, .word h4 {
	color: #3b79c5;
	margin-bottom: 0;
}

.word p {
	margin-top: 0;
	text-align: justify;
}
.word span {
	color: #3b79c5;
	font-weight: bold;
}

/*  --  menu-list  --  */
#about-list {
	display: none;
}
.menu-list .col-4, .menu-list .col-3 {
	padding: 0;
}
.d-title {
    padding: 4px 0;
    margin-bottom: 20px;
}
.d-title .mbox {
    background: #f7f7f7;
    border-radius: 5px;
    border: 4px solid #fff;
}
.d-txt > h5 {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 25px;
    margin: 0;
    background: url(../IMG/images/arrow.png) no-repeat 5px 15px;
    background-size: 8px 8px;
    border-bottom: 0;
}
.d-txt > h5 a {
	color: #333;
	font-size: 16px;
}
.d-txt > h5:after {
    content: "";
    display: block;
    clear: both;
}
.d-txt > h5 a:hover {
    color: #3b79c5;
}

/*  - partner -  */
.logo {
	margin: 40px -4px;
}
.logo .row .col-20 {
	padding: 4px;
}
.logo .row .col-20 img {
	display: block;
	border: 1px solid #cacaca;
}

/*  - about-1 -  */
.cer {
	margin: 40px 0 30px;
}
.cer .col-3 {
	text-align: center;
}
.cer .col-3 img {
	display: block;
}
.cer .col-3 span {
	color: #3b79c5;
	padding-right: 45px;
}

/*  - about-2 -  */
.equipment-photo {
	padding: 20px 0 40px;
}

/*  - about-ad -  */
.inner-right .right-cont .row {
	margin: 0 -10px;
}
.inner-right .ad {
	margin-top: 20px;
	margin-bottom: 20px;
}
.inner-right .ad .owl-theme {
	box-shadow: 0px 3px 12px rgba(0,0,0,0.4);
}
.inner-right .ad .owl-theme .owl-controls {
	margin-top: -30px;
	margin-right: 8px;
    text-align: right
}

/*  - about-3 -  */
.place .word {
	background: url(../IMG/images/about-03.png) no-repeat right bottom;
	background-size: 60%;
}
.place .word h3 {
	color: #333;
}
.place .word ul {
	padding: 10px 0;
}
.place .word ul li {
	padding: 8px 0;
}
.place .word ul li::before {
	content: '';
    display: inline-block;
    height: 22px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/place-icon.png);
    background-repeat: no-repeat;
    margin-right: 8px;
}

.timelinebox {
	padding-bottom: 10px;
}
.timelinebox .timeline-left {
	width: 30%;
	float: left;
}
.timelinebox .timeline-right {
	width: 70%;
	float: left;
}

.timeline {
  padding-left: 48px;
}
.timeline-item {
  padding: 8px 0 8px 20px;
  position: relative;
  border-left: 2px solid rgba(0, 0, 0, .3);
}

.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  top: 8px;
  display: block;
  font-weight: bold;
  font-size: 20px;
  color: #172887;
}
.timeline-item::after {
  width: 10px;
  height: 10px;
  display: block;
  top: 1em;
  position: absolute;
  left: -8px;
  border-radius: 10px;
  content: '';
  border: 2px solid rgba(0, 0, 0, .3);
  background: white;
}
.timelinebox .timeline .timeline-item:nth-child(even) {
	background: #f7f7f7;
}
.timelinebox .timeline .timeline-item:last-child {
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, 0)) 1 100%;
}
.timeline-item span {
	margin-left: 56px;
}

/*  - application -  */
#app-01, #app-02, #app-03, #app-04 {
	padding-bottom: 20px;
}
#app-01 .fill, #app-03 .fill {
	width: 70%;
	margin: 0 auto;
}
#app-02 .fill img {
	display: block;
}
#app-02 .img-block {
	position: relative;
	overflow: hidden;
	margin: 10px 0;
}
#app-02 .col-6 .text-block {
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(59,121,197,.9);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: right;
	width: 100%;
	padding: 4px 8px;
}
#app-04 .fill {
	width: 90%;
	margin: 0 auto;
}

/*  - product -  */
#pp_list {
	margin-bottom: 30px;
}
.pp-left {
	width: 25%;
	float: left;
}
.pp-left img {
	border: 1px solid #949494;
}
.pp-right {
	width: 75%;
	float: left;
	padding-left: 30px;
}

/*  --  pp-detail  --  */
.pp {
	width: 70%;
	float: left;
}
.pp ol {
	line-height: 30px;
	margin-left: -20px;
}
.pp ol li:nth-child(odd) {
	background: #f7f7f7;
}
.pp-img {
	float: left;
	width: 30%;
	padding-right: 2em;
	text-align: center;
}
.pp-img img {
	display: block;
	border: 1px solid #949494;
}
.pp-img h3 {
	color: #3b79c5;
}
.word.pp h4 {
	margin: 0;
}
.pdf-dl .dl-btn {
	text-align: right;
	padding-bottom: 8px;
}
.pdf-dl .dl-btn img {
	height: 35px;
	display: initial;
}


/*  --  tabs  --  */
.tab {
	padding-top: 20px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	background: #fff;
	width: 100%;
	margin: 0 auto;
	line-height: 1.5;
	font-weight: 300;
}
.tabs {
	display: table;
	position: relative;
	overflow: hidden;
	margin: 0;
	width: 100%;
}
.tabs li {
	float: left;
	line-height: 38px;
	overflow: hidden;
	padding: 0;
	position: relative;
}
.tabs a {
	background-color: #eff0f2;
	border-bottom: 1px solid #fff;
	color: #888;
	font-weight: 500;
	display: block;
	letter-spacing: 0;
	outline: none;
	padding: 0 20px;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	border-bottom: 2px solid #3b79c5;
}
.tabs_item {
	display: none;
	padding: 30px 0;
}
.tabs_item:first-child {
	display: block;
}
.current a {
	color: #fff;
	background: #3b79c5;
}

/* modal style */
.open-modal {
	text-align: center;
	margin-bottom: 15px;
}
.open-modal img {
	width: 200px;
	margin: 0 auto;
	border: 1px solid #949494;
	display: block;
	cursor: pointer;
}
.open-modal label {
	margin-top: 8px;
	font-size: 18px;
	font-weight: bold;
	color: #3b79c5;
	cursor: pointer;
}


/*  - contact -  */
.contact-left {
	width: 40%;
	float: left;
}
.contact-right {
	width: 60%;
	float: left;
	padding-left: 20px;
}

.office {
	margin-bottom: 20px;
}
.office .word h3 {
	margin-top: 0;
}

.contact-list ul {
	margin-bottom: 1em;
}
.contact-list ul li {
	line-height: 24px;
	padding: 4px 0;
}
.contact-list ul li a {
	color: #333;
	text-decoration: underline; 
}
.tel, .fax, .mail, .line, .skype, .sale, .qq, .wechat {
	position: relative;
    margin-left: 32px;
} 
.contact-list ul .tel::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-tel.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .fax::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-fax.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .mail::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-mail.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .line::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-line.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .skype::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-skype.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .sale::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-sale.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .qq::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-qq.png);
    background-repeat: no-repeat;
    left: -32px;
}
.contact-list ul .wechat::before {
	content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    background-size: 24px;
    background-image: url(../IMG/images/contact-wechat.png);
    background-repeat: no-repeat;
    left: -32px;
}

.form {
	margin: 0 auto;
	position: relative;
}
.form table {
	width: 100%;
	border-collapse: collapse;
}
.form table tr>th {
	border: 1px solid #b3c2c6;
	background: #dbe8ec;
}
.form table tr>td {
	border: 1px solid #b3c2c6;
}
.form table tr>td>input, .form table tr>td>textarea {
	width: 100%;
	padding: 5px 10px;
	border: none;
}
.code {
    background: #d8d8d8;
    font-family: Arial;
    font-style: italic;
    color: #777;
    font-size: 15px;
    border: 0;
    padding: 2px 10px;
    letter-spacing: 2px;
    font-weight: bold;
    float: left;
    width: 70px;
    line-height: 24px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    margin-left: 10px;
}
.sent {
	margin-top: 30px;
}
.sent ul {
	text-align: center;
}
.sent ul li {
	display: inline-block;
	padding: 0 30px;
}
#form_go {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    border: none;
    color: #fff;
    background: #999391;
    cursor: pointer;
}

/*--------------------RWD--------------------*/


/* Large devices (desktops) */
@media screen and (min-width: 1024px) and (max-width: 1200px) {
	.row {padding: 0 10px;}

	.offer-l {width: 20%;}
	.feature-list ul li {padding: 4px 0;}

	#breadcrumb ul {padding: 8px 20px;}
	.inner-left {display: none;}
	.inner-right { width: 100%; padding: 0 20px;}
}


/* Tablets*/
@media screen and (min-width: 769px) and (max-width: 1023px) {
	.row {padding: 0 10px;}

	.offer-r {width: 70%;}
	.service .box-cont img {width: 64px;}
	.service .box-cont h3 {font-size: 1.1em;}
	.service .box-cont p {font-size: 14px;}
	.feature {display: block;}
	.feature-box {background-size: cover;}
	.feature-img img, .feature-box {width: 100%;}
	.feature-img {width: 100%; height: 350px; overflow: hidden;}
	.feature-cont {max-width: 100%; padding: 36px 15% 48px 15%;}

	.pp-left {width: 50%; margin: 0 auto; float: initial;}
	.pp-right {width: 100%; padding-left: 0;}
	#breadcrumb ul {padding: 8px 20px;}
	.inner-left {display: none;}
	.inner-right { width: 100%; padding: 0 20px;}

	#about-list {display: block;}
	.contact-left { width: 100%;}
	.contact-right { width: 100%; padding: 0;}


}

/* Mobile */
@media screen and (max-width: 768px){
	.col-3 { width: 50%; }
	.col-6, .col-4 {width: 100%;}
	.col-6, .col-4 {padding: 10px }
	.row {padding: 0 10px;}

	#vision_phone{ display:block;}
	#vision {display: none;}

	.offer-l { width: 100%; float: initial;}
	.offer h2 {padding: 0; text-align: center;}
	.offer-r { width: 100%; float: initial; border: none; }
	.offer p {padding: 20px 40px 0; text-align: center;}
	.service .col-3 {padding: 10px;}
	.service .box-cont img {width: 64px;}
	.ad-phone {display: block;}
	#main_02 .ad {display: none;}
	.inner-right .ad {display: none;}
	.feature {display: block;}
	.feature-box {background-size: cover;}
	.feature-img img, .feature-box {width: 100%;}
	.feature-img {width: 100%; overflow: hidden;}
	.feature-cont {max-width: 100%; padding: 36px 60px 48px 60px;}
	#main_04 p {width: 90%;}

	#breadcrumb ul {padding: 8px 20px;}
	.inner-left {display: none;}
	.inner-right { width: 100%; padding: 0 20px;}
	.pp-img {width: 60%; margin:0 auto; float: initial; padding-right: 0;}
	.pp { width: 100%;}
	.tabs_item ul .col-4 {width: 33.33%;}
	.open-modal {margin-bottom: 0;}
	.open-modal img {width: 100%;}

	#about-list {display: block;}
	.logo .row .col-20 {width: 33.33%}
	.contact-left { width: 100%; }
	.contact-right { width: 100%; padding: 0;}
}
@media screen and (max-width: 600px){
	.place .word {background: transparent;}
	.timelinebox .timeline-right {width: 100%;}
	.place-img {display: block;}
	.timeline-left {display: none;}
	.timeline {padding-left: 16px;}
}
@media screen and (max-width: 520px){
	.tabs_item ul .col-4 {width: 50%;}
	.right-cont {padding: 0;}
}
@media screen and (max-width: 425px){
	.col-3 {width: 100%;}

	.service .box-cont {height: auto;}
	.service .box-cont img {width: 84px;}
	.feature-img {display: none;}
	.feature-cont {max-width: 100%; padding: 36px 36px 48px;}
	.open-modal label { font-size: 16px;}
	
	.logo .row .col-20 {width: 50%}
	#app-01 .fill, #app-03 .fill {width: 100%;}
	.cer .col-3 {width: 50%;}
}
@media screen and (max-width: 320px){
	.tabs_item ul .col-4 {width: 100%;}
}

/*reinforce*/

@media screen and (min-width: 769px) and (max-width: 950px){

}
@media screen and (max-width: 600px){
}
@media screen and (max-width: 500px){
}




/*---navigation RWD---*/
@media screen and (min-width: 1024px) and (max-width: 1200px) {
	#logo {padding: 0 10px;}
	#nav li {padding: 10px 0;}
	#nav .content>ul>li {padding: 10px 20px;}
	#nav .content>ul>li:last-child { padding: 10px 30px;}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	#branding {border-bottom: 8px solid #172887; }
	#logo {padding: 0 10px; margin-left: 10px;}
	#logo img {display: block;}
	#sns {padding-right: 10px; padding-top: 25px;}
	#menu {display: block;}
	#nav {display: none;}
	#nav ul>li {border-top: 1px solid #fff5;}
	#nav .content>ul>li {padding: 0;}
	#nav ul>li:first-child {border-top: none;}
	#nav li {width: 100%; text-align: center; padding: 0;}
	#nav .content>ul>li:last-child {display: none;}
	#nav ul>li:first-child >a::before {content: ''; color: transparent;}
	#nav ul>li>a::after {content: ''; color: transparent;}
	.dropdown-content {position: initial; box-shadow: none; z-index: 0; width: 100%;margin-top: 0;}
}

@media screen and (max-width: 950px) {
}

@media screen and (max-width: 767px) {
	#branding {border-bottom: 8px solid #172887; }
	#logo {padding: 0 10px; margin-left: 10px;}
	#logo img {display: block;}
	#sns {padding-right: 10px; padding-top: 25px;}
	#menu {display: block;}
	#nav {display: none;}
	#nav ul>li {border-top: 1px solid #fff5;}
	#nav .content>ul>li {padding: 0;}
	#nav ul>li:first-child {border-top: none;}
	#nav li {width: 100%; text-align: center; padding: 0;}
	#nav .content>ul>li:last-child {display: none;}
	#nav ul>li:first-child >a::before {content: ''; color: transparent;}
	#nav ul>li>a::after {content: ''; color: transparent;}
	.dropdown-content {position: initial; box-shadow: none; z-index: 0; width: 100%;margin-top: 0;}
}

@media screen and (max-width: 630px) {
	#logo {padding: 10px;}
	#logo span {display: none;}

}

@media screen and (max-width: 575px) {
	#logo {width: 100px; margin: 0 auto; float: initial;}
	#logo img {width: 100px;}
	#sns {padding-top: 10px;}
}

@media screen and (min-width: 375px) and (max-width: 575px) {
	#sns {width: 371px; margin: 0 auto; float: initial;}
}