@charset "utf-8";

*{
	background-repeat:no-repeat;
	line-height:140%;
	font-family: 'Microsoft JhengHei',STHeiti, pmingliu, Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	outline: none
}

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}/* Non count border size */

.mincho{font-family:Georgia, "Times New Roman", Times, "serif"}


a {text-decoration:none; overflow:hidden; color:#333}
a:hover {opacity:.8}

img {border: none; line-height:0; vertical-align:bottom;max-width: 100%}
img[data-echo]{ 
	min-width:50px; 
	min-height:50px; 
	background-image:url(../images/common/preloader-30-w.gif); 
	background-position:center center;
	border:solid 1px #ddd;
	border-radius:5px
}
img[data-echo].loaded{background-image:none}


.clear{clear:both; height:0; line-height:0; font-size:0}

.space10 {height: 10px}
.space20 {height: 20px}
.space30 {height: 30px}
.space40 {height: 40px}
.space100 {height: 100px}

.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt40{margin-top:40px}
.mt50{margin-top:50px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.ml10{margin-left:5px}
.ml10{margin-left:10px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml40{margin-left:40px}
.ml50{margin-left:50px}

.mr10{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right:40px}
.mr50{margin-right:50px}

.font10{font-size:10px}
.font12{font-size:12px}
.font14{font-size:14px}

.bold{font-weight:bold}

.txt-left{text-align:left}
.txt-center{text-align:center}
.txt-right{text-align:right}

.red{color:#C00}

.left {float:left}
.center{float:left}
.right {float:right}

p{line-height:160%}

li{list-style: none;}

.alpha{
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}

.alpha:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.75;
	opacity:0.75;
}

.transition-01{ 
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.transition-02{ 
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.transition-03{ 
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}


.bd-01{background: linear-gradient(transparent 60%, rgba(252,238,33,.6) 0%); font-weight: bold}
.bd-02{background: linear-gradient(transparent 60%, rgba(228,0,3,.4) 0%); font-weight: bold}
.bd-03{background: linear-gradient(transparent 60%, rgba(0,65,219,0.50)  0%); font-weight: bold}


.r-corner{-webkit-border-radius: 100%;-moz-border-radius:100%;border-radius:100%;}

.cursor{cursor:pointer; cursor:hand}

th,td{text-align:left}

input[type="text"]:focus {outline: 0;}
button:focus {outline: 0;-webkit-appearance: none;border-radius: 0;}

#pagetop {
	position: fixed;
	bottom: 30px;
	right:30px;
	z-index:9999;
	color:#fff;
	width: 40px; 
	height: 40px;
	text-align: center;
	display: none
}

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

#pagetop {bottom:50px; right:10px}

}


.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }
.clearfix{zoom:1}/** for IE7 **/

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.link a{color:#0071b5}
.link a:hover{color:#ffb700}

#window-size{position: fixed; bottom:10px; left: 10px; width: 200px; background-color: #fff; font-size: 16px; font-weight: bold; z-index: 9999; text-align: center;padding: 10px; display: none}

#ie-notice{background-color: #fff; padding: 10px; text-align: center; font-size: 16px; font-weight: bold; color:red}

/** ***********************************************

Common Style

*********************************************** **/



.cols-2{font-size:0;}
.cols-2 .col{font-size:14px; display: inline-block; vertical-align: top; width :50%}

.cols-3{font-size:0;}
.cols-3 .col{font-size:14px; display: inline-block; vertical-align: top; width :33.33333%; width : -webkit-calc((100%) / 3) ; width : calc((100%) / 3)}

.cols-4{font-size:0;}
.cols-4 .col{font-size:14px; display: inline-block; vertical-align: top; width :25%}

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

.cols-2 .col{width :100%}
.cols-3 .col{width :100%}
.cols-4 .col{width :100%}

}

.tr{display:table;table-layout: fixed;border-collapse: collapse;width: 100%}
.td{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;}
.th{display: table-cell; vertical-align:top;word-wrap: break-word;overflow: hidden; word-break: break-all;font-weight:bold}

.reset{ font-size:0; letter-spacing:.5}
.reset li{font-size:14px; letter-spacing:normal}

.full{width:100%; height:auto}

.hr-list{letter-spacing: -0.5em}
.hr-list li{display:inline-block; vertical-align:top;letter-spacing: normal}

.table-style-01{width:100%}
.table-style-01 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-01 th{padding:10px; text-align:right;}
.table-style-01 td{padding:10px;}


.table-style-02{width:100%;background-color:#ccc}
.table-style-02 table{width:100%;border-collapse:separate;border-spacing:1px;}
.table-style-02 th{text-align:right; padding:8px 10px; vertical-align:top; white-space:nowrap;background:#eee}
.table-style-02 td{ padding:8px 10px; background-color:#fff}

.bt-blue a{color:#fff; display:block; padding:15px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border-bottom:solid 3px #069}
.bt-blue a:hover{background-color:#CCC;border-bottom:none; margin-top:11px!important}

.bt-blue-02 a{color:#fff; display:block; padding:10px 10px; text-align:center; background-color:#269FE0;-webkit-border-radius: 4px;-moz-border-radius:4px;border-radius:4px}
.bt-blue-02 a:hover{background-color:#CCC}

.bt-orange a{color:#fff; display:block; padding:15px 10px; text-align:center; background:#F90;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px; border:solid 1px #fff;
	background: -moz-linear-gradient(top ,#F90, #F60);
    background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
    background: linear-gradient(to bottom, #F90, #F60);
}
.bt-orange a:hover{background:#F60}

body{-webkit-text-size-adjust: 100%}
.inner{width:100%; max-width: 1200px; margin:0 auto; position:relative; padding: 0 10px}


/**  Slick Base **/

.slick{overflow: hidden; width: 100%; position: relative;}
.slick li.slick-slide{display: inline-block; vertical-align: middle}
.slick li.slick-slide img{width: 100%; height: auto}
.slick-arrow{position: absolute; top:50%; font-size: 50px; margin-top: -50px; z-index: 2}
.slick-prev{left:10px}
.slick-next{right:10px}

.slick-dots{text-align: center; position: absolute; bottom:0px; left: 0 ;width: 100%}
.slick-dots li{display: inline-block; width: 10px; height: 10px; margin: 0 5px; background-color: #ddd; border-radius: 100%; text-indent: -9999px}
.slick-dots li.slick-active{background-color:#0071bc}



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

.slick-arrow{display: none!important}

}





/** ***********************************************

Header

*********************************************** **/

#top #header{position: absolute; top:0; left: 0; width: 100%; z-index: 3}
#header{padding-bottom: 30px}
#header .block-1{background-color: #000; padding: 5px; color:#fff}
#header .block-1 .inner{padding: 0}
#header .block-1 .col-1{width: 70%; color:#eddf21;  font-size: 12px}
#header .block-1 .col-2{width: 30%; text-align: right; font-size: 12px}

#header .block-1 .col-1 i{display: inline-block}
#header .block-1 .col-1 p{display: inline-block;  padding-left: 5px}
#header .block-1 .col-1 div{height: auto!important}
#header .block-1 .col-1 a{color:#eddf21}

#header .block-1 .col-2 li{display: inline-block}
#header .block-1 .col-2 li a{color:#fff}
#header .block-1 .col-2 li.item-1{border-right:solid 1px #333; padding-right:10px}
#header .block-1 .col-2 li.item-1 i{margin-right: 5px;font-size: 14px; color:#b90c0c}
#header .block-1 .col-2 li.item-2{padding-left:9px; letter-spacing: 1px; position: relative}
#header .block-1 .col-2 li.item-2 i{margin-left: 5px}

#header .block-1 .col-2 li.item-2 .sub{position: absolute; top:20px; right: 0px; z-index: 99999; background-color: #000; display: none}
#header .block-1 .col-2 li.item-2 .sub li{display: block; width: 100%}
#header .block-1 .col-2 li.item-2 .sub a{display: block; background-color:#fff; padding: 5px 20px; color:#333; width: 100%; margin-bottom: 1px}


#header .block-2{padding-bottom: 50px
background:rgba(90,201,152,1.00) ; 
background: -webkit-linear-gradient(rgba(250,250,250,.5), rgba(250,250,250,0) );
background: linear-gradient(rgba(250,250,250,.5), rgba(250,250,250,0) );
}

#header h1{padding-top: 20px; font-size: 30px; padding-left: 10px}
#header h1 a{color:#000}

#header .block-2 .col-1{position: relative;width:100%}
#header .block-2 .col-1 p.p1{position: absolute; top:5px; left: 10px; font-size: 12px}
#header .block-2 .col-1 p.p2{position: absolute; top:70px; left: 22px; font-size: 10px; letter-spacing: 1px}
#header .block-2 .col-1 p.p3{position: absolute; top:70px; left: 200px; font-size: 10px; letter-spacing: 1px}
#header .block-2 .col-2{position: relative}
#header .block-2 .col-2 ul{position: absolute; top:26px; right:10px; background-color:rgba(163,213,237,1); padding: 10px 20px; border-radius: 100px}
#header .block-2 .col-2 li{display: inline-block; font-weight: bold}
#header .block-2 .col-2 li.item-1{border-right:solid 1px #333; padding-right:10px}
#header .block-2 .col-2 li.item-2{padding-left:9px}

.pc{display: none!important}

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

#header .block-1 .col-1{width: 65%}
#header .block-1 .col-2{width: 35%}
#header h1{font-size: 24px}

}


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

#header{position: inherit; top:0; left: 0; padding-bottom: 30px}

#header .block-1 .col-1{display: none}
#header .block-1 .col-2{width:100%; padding-top: 3px}

}

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

#header h1{font-size: 16px; padding-left: 0}

#header .block-2 .col-1 p.p1{font-size: 10px; left: 0}
#header .block-2 .col-1 p.p2{top:60px; left:5px}
#header .block-2 .col-1 p.p3{top:60px; left: 140px}

}


#slider {position:relative; text-align: center}
#slick-1 .slick-arrow{color:#eee}

#slider .info{background-color: rgba(0,0,0,.7); max-width: 450px; height: auto; padding: 20px; position: absolute; bottom:10px; right:10px}
#slider .info .p1{font-size: 24px; font-weight: bold; color:#eddf21}
#slider .info .p2{font-size: 16px;color:#fff}


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

#slider .info{max-width: 380px; padding: 15px; }
#slider .info .p1{font-size: 20px; font-weight: bold; color:#eddf21}
#slider .info .p2{font-size: 14px;color:#fff}
.slick-dots{text-align: left; left: 20px}

}


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

#slick-1{padding-top: 100px}
#slick-1 li.slick-slide img{width: 100%!important; height: auto; max-width: inherit; margin: 0 auto; display: block}
.slick-dots{text-align: center; left: 0px}
#slider .info{background-color: rgba(0,0,0,1); max-width: 100%; height: auto; padding: 20px; position: inherit; bottom:0; right:0}
#slider .info .p1{font-size: 18px; font-weight: bold; color:#eddf21}
#slider .info .p2{font-size: 12px;color:#fff}

}


/** ***********************************************

Global Menu

*********************************************** **/

#g-navi{background-color: #0071b5; padding: 15px; text-align: center;}
#g-navi li{display: inline-block; font-size: 18px; position: relative; border-right:solid 1px #fff}
#g-navi li:first-child{border-left:solid 1px #fff}
#g-navi li a{font-weight: bold; color:#fff; font-size: 18px; padding: 0 40px;letter-spacing: 2px }
#g-navi li a:hover{opacity: .8}
#g-navi li span{position: absolute; background-color: rgba(0,0,0,.8); displa:block; width: 280px; padding: 15px 20px; color:#fff; font-size: 14px; top:-90px; left: -50%;display: none; border-radius: 3px}
#g-navi li:hover span{display: block}
.sp{display: none!important}
#g-navi li.menu-1{position: relative}
#g-navi .sub{position: absolute; top:35px; left: 0;background-color: #fff; z-index: 999;width: 100%;box-shadow: 2px 2px 2px #666; display: none}
#g-navi .sub li{display: block}
#g-navi .sub li a{color:#0071b5;font-size: 14px; padding: 10px!important; border-bottom:solid 1px #eee;  display: block; position: relative;}
#g-navi .sub li a i{position: absolute; top:50%; right:5px; margin-top: -7px}


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

#g-navi li a{font-size: 16px}

}

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

.sp{display: inherit!important}
#g-navi{display: none}



#g-navi.active{display:block; position: fixed; top:0 ;left: 0; width: 80%; height: 100%; z-index: 99999; overflow-y: auto; padding: 0}
#g-navi > ul >li{display: block; border:none}
#g-navi li:first-child{border-left:none}
#g-navi > ul >li >a{font-weight: bold; padding: 15px 25px; text-align: left; display: block; border-left:none;border-bottom:1px solid #fff; }
#g-navi li:hover span{display: none}



#bt-nav{position:fixed; top:40px; right:10px;background-color: #0071b5;text-align: center; width: 40px; height: 34px; padding-top:8px; border-radius: 2px; z-index: 99999}
#bt-nav .item-01{border-top:solid 2px #fff;width:25px; display:block; margin: 0 auto}
#bt-nav .item-02{border-top:solid 2px #fff;width:25px; display:block; margin: 6px auto 0}
#bt-nav .item-03{border-top:solid 2px #fff;width:25px; display:block; margin: 6px auto 0}
#bt-nav:after{content:"MENU"; font-size: 10px;color:#0071b5;display: block; margin-top: 5px}


#bt-nav.active .item-01{
	-moz-transform: rotate(-40deg);
	-webkit-transform: rotate(-40deg);
	-o-transform: rotate(-40deg);
	-ms-transform: rotate(-40deg);
	transform: rotate(-40deg);
	transform-origin:right;margin-right:10px;
}

#bt-nav.active .item-02{width:0}

#bt-nav.active .item-03{
	-moz-transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	-ms-transform: rotate(40deg);
	transform: rotate(40deg);
	transform-origin:right;
	margin-right:10px;
}

.bg-layer{position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); z-index:999}


#g-navi li.menu-1{position: relative}
#g-navi .sub{position: inherit; top:0; left: 0;background-color: #fff; z-index: 999;width: 100%;box-shadow: 0px 0px 0px #666; display: none}
#g-navi .sub li{display: block}
#g-navi .sub li a{color:#0071b5;font-size: 14px; padding: 10px!important; border-bottom:solid 1px #eee;  display: block; position: relative;text-align: left}
#g-navi .sub li a i{position: absolute; top:50%; right:5px; margin-top: -7px}


}




/** ***********************************************

TOP Main

*********************************************** **/

.sec-common{min-height: 300px; padding: 30px 0}
h2.title{background-color: rgba(0,113,180,1.00); color:#fff;font-size: 30px ;font-weight: bold; text-align: center; padding: 10px; letter-spacing: 2px; margin-bottom: 20px}

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

.sec-common{min-height: 300px; padding: 30px 0}
h2.title{font-size: 20px ; padding: 10px; letter-spacing: 1px; margin-bottom: 10px}
}



#sec-01 .p1{font-size: 24px;font-weight: bold; text-align: center}
#sec-01 .p2{font-size: 24px; margin-bottom: 20px}
#sec-01 .p3{font-size: 24px; font-weight: bold; color:#de1c24; border:solid 3px #de1c24; padding: 10px; max-width:400px; margin: 0 auto}

#sec-01 .col{padding: 40px; position: relative}
#sec-01 .wrap-img{position: relative}
#sec-01 .wrap-img span{background-color: rgba(0,0,0,.8); color:#fff; font-size: 20px; font-weight: bold; text-align: center; padding: 10px;width: 100%; display: block;bottom:0;left:0; position: absolute}
#sec-01 .wrap-img i{font-size:14px; font-style: normal}
#sec-01 .col-2::before{content:""; display: block;background-image: url(../images/en/arrow-1.png);position: absolute; top:50%; left: -35px; width: 80px; height: 100%; background-size: 150px; background-repeat: no-repeat}
#sec-01 .col-3::before{content:""; display: block;background-image: url(../images/en/arrow-2.png);position: absolute; top:-40px; left: 25%; width: 50%; height: 75px; background-position: bottom; background-size: auto 150px; background-repeat: no-repeat}
#sec-01 .col-3,
#sec-01 .col-4{padding-bottom: 0}
#sec-01 .arrow{text-align: center;position: relative}
#sec-01 .arrow img{max-width: 600px}


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

#sec-01 .p1{font-size: 14px;font-weight: bold; text-align: center}
#sec-01 .p2{font-size: 14px; margin-bottom: 10px}
#sec-01 .p3{font-size: 14px; font-weight: bold; color:#de1c24; border:solid 3px #de1c24; padding: 10px; max-width:400px; margin: 0 auto}

#sec-01 .col{padding: 20px}
#sec-01 .wrap-img span{font-size: 12px}
#sec-01 .wrap-img i{font-size:12px; display: block}
#sec-01 .col-2::before{display: none;}
#sec-01 .col-3::before{display: none}
#sec-01 .arrow img{display: none}

}



#sec-02 .wrap-map{padding: 20px; text-align: right; font-size: 12px}

#sec-02 .cols-3 .col{padding: 10px}
#sec-02 .cols-3 .title{font-size: 18px; font-weight:bold; margin-bottom: 10px; margin-top: 5px}
#sec-02 .cols-3 .desc{font-size: 16px}

#sec-02 .bt{max-width: 400px; padding: 10px; display: block; font-size: 24px; color:#fff; background-color: rgba(0,113,180,1.00); text-align: center; margin: 50px auto; font-weight: bold; letter-spacing: 2px; position: relative}

#sec-02 .fa-caret-right{position: absolute; right:5px; top:50%; margin-top: -12px}

#sec-02 .wrap-info{background-color:rgba(247,247,210,1.00); max-width: 950px; margin: 0 auto}
#sec-02 .wrap-info h3{background-color: rgba(97,55,20,1.00); font-size: 24px; font-weight: bold; color:#fff; text-align: center; padding: 10px}
#sec-02 .wrap-info ul{padding: 40px 0px; text-align: center}
#sec-02 .wrap-info li{background-color: rgba(97,55,20,1.00); padding: 5px 10px; border-radius: 100px;color:#fff; display: inline-block; font-size: 20px; font-weight: bold; margin: 10px; text-align: center; min-width: 300px}

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

#sec-02 .wrap-map{padding: 20px 0; font-size: 10px}
#sec-02 .wrap-info h3{font-size:16px}
#sec-02 .wrap-info ul{padding: 20px 0px}
#sec-02 .wrap-info li{padding: 8px; display: block; font-size: 14px;margin: 8px 10px; }


}




#sec-03 .inner{max-width: 900px}
#sec-03 .p1{font-weight: bold; font-size: 30px; margin-bottom: 20px}
#sec-03 .p2{font-weight: bold; font-size: 18px; margin-bottom: 10px}
#sec-03 .p3{font-weight: bold; font-size: 18px; margin-bottom: 50px}
#sec-03 .wrap-img{text-align: right; font-size: 12px}
#sec-03 .p4{font-weight: bold; font-size: 24px;text-align: center; margin: 50px 0 30px}

#sec-03 .wrap-bus{background-color: rgba(33,173,115,1.00); padding:20px;}
#sec-03 .wrap-bus .col-1{width: 40%; text-align: right; padding: 0 20px; vertical-align: middle}
#sec-03 .wrap-bus .col-1 img{max-width: 200px}
#sec-03 .wrap-bus .col-2{width: 60%; text-align: center; vertical-align: middle}

#sec-03 .contact{font-size: 20px; font-weight: bold; color:#fff}
#sec-03 .tel{font-size: 40px; font-weight: bold; color:#fff; letter-spacing: 2px; margin-bottom: 10px}
#sec-03 .bt{display: block; background-color: rgba(234,90,35,1.00); color:#fff; font-size: 20px; text-align: center; padding: 10px; font-size: 20px; max-width: 350px; margin: 0 auto}
#sec-03 .block-2 {margin-top: 50px}
#sec-03 .block-2 .col{padding: 0 10px; text-align: center}
#sec-03 .block-2 iframe{width: 100%; height: 400px}
#sec-03 .p5{font-weight: bold; font-size: 18px;text-align: center; margin-bottom: 5px}
#sec-03 .p6{font-weight: bold; font-size: 14px;text-align: left; margin-top: 5px}
#sec-03 .mapcode{text-align: left;padding-top: 5px}
#sec-03 .mapcode img{height: 18px; width: auto; vertical-align: middle; margin-right: 10px}

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

#sec-03 .p1{font-size: 16px; margin-bottom: 20px}
#sec-03 .p2{font-weight: bold; font-size: 14px; margin-bottom: 10px}
#sec-03 .p3{font-weight: bold; font-size: 14px; margin-bottom: 20px}
#sec-03 .wrap-img{text-align: right; font-size: 10px}
#sec-03 .p4{font-weight: bold; font-size: 16px;text-align: center; margin: 20px 0 10px}

#sec-03 .wrap-bus{padding:20px;}
#sec-03 .wrap-bus .col-1{width: 100%; text-align: center; padding: 10px}
#sec-03 .wrap-bus .col-1 img{max-width: 140px}
#sec-03 .wrap-bus .col-2{width: 100%}

#sec-03 .contact{font-size: 20px}
#sec-03 .tel{font-size: 20px;letter-spacing: 1px}
#sec-03 .bt{font-size: 16px}



#sec-03 .block-2 {margin-top: 50px}
#sec-03 .block-2 .col{padding: 10px; text-align: center}
#sec-03 .block-2 iframe{width: 100%; height: 300px}


#sec-03 .p5{font-size: 16px}
#sec-03 .p6{font-size: 14px}

}







#sec-04.sec-common{padding-bottom: 0!important}
#sec-04 .wrap-contact{margin: 50px auto 0; max-width: 800px; background-color: #eee; text-align: center; padding: 30px}
#sec-04 .p1{font-weight: bold; font-size: 30px; margin-bottom: 10px}
#sec-04 .p2{font-weight: bold; font-size: 30px}

#sec-04 .cols-4{padding: 50px 0 0}




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


#sec-04 .wrap-contact{margin: 30px auto 0;padding: 20px}
#sec-04 .p1{font-weight: bold; font-size: 16px; margin-bottom: 10px}
#sec-04 .p2{font-weight: bold; font-size: 16px}

#sec-04 .cols-4{padding: 50px 0 0}
#sec-04 .cols-4 .col{width: 25%!important}
}





#footer{background-image:url(../images/common/bg-footer.jpg); background-position: center; background-size: cover; text-align: center; color:#fff; padding-bottom: 60px}
#footer a{color:#fff}
#footer h4{font-size: 18px; font-weight:bold; margin-bottom: 20px}
#footer p{font-size: 14px; margin-bottom: 5px}
#footer p.p2{font-size: 12px}

#footer .cols-2{padding-top: 40px}
#footer .col-1{ width: 30%; text-align: left; border-right:solid 1px #fff}
#footer .col-2{width: 60%; padding: 20px 30px 0}
#fnavi{text-align: left}
#fnavi li{display: inline-block; margin: 0 10px; margin-bottom: 10px}
#fnavi li:before{content: "・ "}
#copyright{font-size: 12px; margin-top: 40px; display: block; text-align: center; letter-spacing: 1px}


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

#footer .col-1{ width: 40%;text-align: center;}
#footer .col-2{padding-top: 0}
}

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

#footer .col-2{display: none}
#footer .col-1{ width: 100%;  border-right:none}
#footer h4{font-size: 18px; padding-top:40px}

}


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

#footer{padding-bottom: 30px}
#footer .cols-2{padding-top: 20px}
#footer h4{font-size: 16px; padding-top:20px}

}