@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');



@font-face{ font-family: "PingFang TC"; font-weight:100; src: local("PingFang TC Ultralight") }

@font-face{ font-family: "PingFang TC"; font-weight:200; src: local("PingFang TC Thin") }

@font-face{ font-family: "PingFang TC"; font-weight:300; src: local("PingFang TC Light") }

@font-face{ font-family: "PingFang TC"; font-weight:400; src: local("PingFang TC Light") }

@font-face{ font-family: "PingFang TC"; font-weight:500; src: local("PingFang TC Regular") }

@font-face{ font-family: "PingFang TC"; font-weight:600; src: local("PingFang TC Medium") }

@font-face{ font-family: "PingFang TC"; font-weight:700; src: local("PingFang TC Semibold") }

@font-face{ font-family: "PingFang TC"; font-weight:800; src: local("PingFang TC Heavy") }



@font-face {

  font-family: 'Century Gothic';

  src: url('CenturyGothic.eot');

  src: local('Century Gothic'),

	   url('../font/GOTHIC/CenturyGothic.eot?#iefix') format('embedded-opentype'),

       url('../font/GOTHIC/CenturyGothic.woff2') format('woff2'),

       url('../font/GOTHIC/CenturyGothic.woff') format('woff'),

       url('../font/GOTHIC/CenturyGothic.ttf') format('truetype'),

       url('../font/GOTHIC/CenturyGothic.svg#CenturyGothic') format('svg');

  font-weight: normal;

  font-style: normal;

}



/* ===============  HTML5 display definitions  =============== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; height: 0; } 

[hidden] { display: none; }



/* ===============  Base  =============== */

html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;  } 

body { width:100%; height: 100%; margin: 0; overflow-x:hidden; position:relative; font-size: 100%; line-height: 1; font-family: 'Source Sans Pro', 'Century Gothic',  Arial, Helvetica , 'PingFang TC', 'Helvetica', '微軟正黑體' , 'Microsoft JhengHei', sans-serif ; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern';  -webkit-overflow-scrolling: touch; background: #000; }



*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } 

a{ color: inherit; text-decoration:none; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; }

a:active, a:hover { outline: 0; }

img { border: 0;}

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

dl, menu, ol, ul { margin: 0; }

ul{ list-style:none; list-style-image: none; }

table { border-collapse: collapse; border-spacing: 0; }

 

/* ===============  Forms  =============== */

form { margin: 0; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px;  }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;  }

button, input { line-height: normal; }

button, html input[type="button"], 

input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }

button[disabled], input[disabled] { cursor: default; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }

input[type="search"] { /*-webkit-appearance: textfield;*/  -webkit-appearance: none;  -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

/*去除input藍色框框*/

input,button,select,textarea{ outline:none; }

*:focus { outline: none; } 

input:focus, textarea:focus{ outline:none; }





/* ===============  Typography  =============== */

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

mark { background: #ff0; color: #000; } 

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }

q:before, q:after { content: ''; content: none; }

small { font-size: 75%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

hr{ height:1px; background: #333; border: none; margin-top: 2em; margin-bottom: 2em; } 



p{ line-height: 180%; margin: 1.5em 0;  } 

::selection { background: #222; color: #fff;}

::-moz-selection { background: #222; color: #fff; } 



/* ===============  Global  =============== */

.f60{ font-size: 3.75rem; }

.f36{ font-size: 2.25rem; }

.f34{ font-size: 2.125rem; }

.f33{ font-size: 2.0625rem; }

.f30{ font-size: 1.875rem; }

.f25{ font-size: 1.5625rem; }

.f24{ font-size: 1.5rem; }

.f22{ font-size: 1.375rem; }

.f20{ font-size: 1.25rem; }

.f18{ font-size: 1.125rem; }

.f17{ font-size: 1.0625rem; }

.f15{ font-size: .9375rem; }

.f14{ font-size: .875rem; }

.f13{ font-size: .8125rem; }

.f12{ font-size: .75rem; }

.f11{ font-size: .6875rem; }



h1,h2,h3,h4,h5,h6{ font-weight: inherit;   } 

.fontSTY1{ font-family: 'Century Gothic', Arial, Helvetica , 'PingFang TC', '微軟正黑體' , 'Microsoft JhengHei', sans-serif ; } 

.fontSTY2{ font-family:  Arial, Helvetica , 'PingFang TC', '微軟正黑體' , 'Microsoft JhengHei', sans-serif ; } 



.aaUnderlineHover:hover{ text-decoration: underline;  }

.txtCenter{ text-align: center; }

.txtRight{ text-align: right; }

.txtLeft{ text-align: left; }

.txtShadow{ text-shadow: 0 0 10px rgba(0,0,0,0.5); }

.edit{ line-height: 180%; } 

.edit img,

.imgFull img{ max-width: 100%; height:auto; vertical-align:top;  }



.R{ float:right; }

.clearfix:after{ content:''; clear: both; display:table;  }



.lineH{ line-height: 160%;  }

.atCenter{ margin-left: auto; margin-right: auto; }



.colorGrayAAA{ color: #aaa; }

.colorGray555{ color: #555; }

.colorGray666{ color: #666; }

.colorGray888{ color: #888; } 

.colorYellow{ color: #d29c00; }

.colorYellow2{ color: #ffd800; }

.colorRed{ color: #ff0000; }



.italic{ font-style: italic;  }



.overHide{ overflow: hidden;}





/* ===============  container  =============== */   

.container,

.containerS{ width: 90%; margin-left:auto; margin-right:auto; position: relative; } 

.container{ max-width: 1200px;  }

.containerS{ position: relative; max-width: 800px;  }  

.wrapper{ width: 90%; margin-left:auto; margin-right:auto;  }

.posREL{ position: relative; }

.wrapperH100{ position: relative; height: 100%; min-height: 560px; width:100%; max-width:100%; overflow:hidden;     }



 

/* ===============  header    =============== */

#header{ position: absolute; top: 0;left: 0;width: 100%;max-width: 100%; z-index: 990;display: block;}

#header:after{ content:''; display: block; clear: both; } 

#header.menuFixed{ position: fixed; background: rgba(0,0,0,.9); height: 51px; overflow: hidden; }



#h1LOGO{ display: inline-block; vertical-align:middle; margin-right:-4px; text-align: center; padding-top: 20px; } 

#h1LOGO img{ -webkit-transition: all .5s; transition: all .5s; display: block; -webkit-transform: translateZ(0); transform: translateZ(0); }

#h1LOGO:hover img{ -webkit-filter: brightness(1.3);   }

#h1LOGO span{ opacity: 0; visibility: hidden; overflow:hidden; width: 0px; height: 0px; display: inline-block;    }



#bnMenu{ position: absolute; top: 0; right:0; text-align: center; background: #000; padding: 25px 25px 18px 25px;  }

#bnMenu small{ color: #fff; display: block; margin-bottom: 5px; }

/*#bnMenu:hover { background: #f2e404; }*/

#bnMenu:hover small { color: #f2e404; }



#header.menuFixed #h1LOGO{ padding-top: 10px;  }

#header.menuFixed #h1LOGO img{ height: 36px;  }

#header.menuFixed #bnMenu{ padding: 10px 0px 4px 25px; background: none;   }

#header.menuFixed #bnMenu small{ margin-bottom: 0;    }



@media (max-width:400px){

	#h1LOGO img{ height: 36px;  }

	#bnMenu{  padding: 15px 15px 8px 15px;  }

	#bnMenu small{  margin-bottom: 0px; }

}

 

/* ===============  lightbox  =============== */  

.BOX{ position: relative; max-width: 800px; margin-left:auto; margin-right:auto;   }

.BOX_close{ display:block; position: fixed; top: 5%; right: 5%; z-index: 9999;   }  



.closeXX{ width: 50px; height: 50px; }

.closeXX span{ display:inline-block; position:relative; width: 50px; height:100%; margin: 0 auto;     }

.closeXX span:before, .closeXX span:after { cursor: pointer; border-radius: 1px; height: 1px; width: 100%; background: #000; display: block; content: ''; position: absolute; top:50%; pointer-events:none; -webkit-transition: all .5s; transition: all .5s;   } 

.closeXX span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg);   }

.closeXX span:after {  -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);    }

.BOX_close:hover .closeXX span::before{  -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);   }

.BOX_close:hover .closeXX span::after{   -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);  transform: rotate(45deg);  }



.menuContent{ padding: 1em 5%; }



/* ===============   menu  =============== */  

.hamburger { display: block; width: 36px; height: 25px; cursor: pointer; position: relative; 　 }

.hamburger span { height: 1px; width: 100%; display: block; top: 50%; background: #f2e404; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s;	} 

.hamburger span:before, .hamburger span:after { -webkit-transition: all 0.3s; transition: all 0.3s; content: ''; width: 100%; height: 100%; display: block; background: #f2e404; position: absolute; }

.hamburger span:before {  -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); }

.hamburger span:after { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); }

#bnMenu:hover span:before {  -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); }

#bnMenu:hover span:after{ -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); }

/*

#bnMenu:hover .hamburger span,

#bnMenu:hover .hamburger span:before,

#bnMenu:hover .hamburger span:after { background: #000; }

*/

 

.menuTIT{ font-style: italic; font-size: 3.75rem; letter-spacing: -.15em; color: #fff;  }

.menuTIT span{ display: inline-block; opacity: 0; font-weight: 800; }

.menuTIT span:nth-child(1), 

.menuTIT span:nth-child(3),

.menuTIT span:nth-child(5){ -webkit-transition: all 1s .1s; transition: all 1s .1s; -webkit-transform: translateY(-.6em); transform: translateY(-.6em); } 

.menuTIT span:nth-child(2),

.menuTIT span:nth-child(4){ -webkit-transition: all 1s .2s; transition: all 1s .2s; -webkit-transform: translateY(.6em); transform: translateY(.6em); } 

.menuContent.is-open .menuTIT span:nth-child(1), 

.menuContent.is-open .menuTIT span:nth-child(2),

.menuContent.is-open .menuTIT span:nth-child(3),

.menuContent.is-open .menuTIT span:nth-child(4),

.menuContent.is-open .menuTIT span:nth-child(5){ transform: none; opacity:1;  } 



#nav{ width: 100%; max-width: 500px; margin: 3em auto;   }

#nav li{ width: 49%; display: inline-block; padding: 1em 0; opacity: 0; transform: scale(.9); -webkit-transition:  all 1.2s; transition:  all 1.2s;  }

#nav li a{ font-size: 1.75rem; font-style: italic; font-weight: bold; display: inline-block; line-height: 1.5; position: relative; }

#nav li a:after{ content: ''; position: absolute; bottom:0; left: 0; width: 0; height: 2px; background: #000; opacity: 0; -webkit-transition: all .8s; transition: all .8s;    }

#nav li a:hover:after{ width:100%; opacity: 1;  }

#nav li:nth-child(1){ transition-delay: .3s;  }

#nav li:nth-child(2){ transition-delay: .4s;  }

#nav li:nth-child(3){ transition-delay: .5s;  }

#nav li:nth-child(4){ transition-delay: .8s;  }

.menuContent.is-open #nav li{ opacity: 1; -webkit-transform: none; transform: none;  }



.aaSocial2{ display: inline-block; vertical-align: middle;  width: 2.5em; height: 2.5em; line-height: 2.7em; border-radius: 50em; border: solid 1px rgba(0,0,0,.4);  margin-right: 10px;  }

.aaSocial2 i{ font-size: 1.4rem;  }

.aaSocial2.FB:hover{ background: #3b5998; border-color: #3b5998; color: #fff;  } 

.aaSocial2.YT:hover{ background: #b31217; border-color: #b31217; color: #fff; }

.aaLine2{ display: inline-block; vertical-align: middle; }

.aaLine2 img{ height: 28px;  -webkit-transition: all .5s; transition: all .5s;  }

.aaLine2:hover img{ -webkit-filter: brightness(0.9) contrast(130%); filter: brightness(0.9) contrast(130%);  }

.sociallinkss{ -webkit-transition: all 1s .5s; transition: all 1s .5s; opacity: 0; }

.menuContent.is-open .sociallinkss{ opacity: 1; }



@media (max-width:440px){

	#nav li a{ font-size: 1.4rem; }	

}

@media (max-width:360px){

	#nav li a{ font-size: 1.1rem; }	

	.menuTIT{  font-size: 3rem; }

}

 

/* ===============  INDEX  =============== */  

#IND1{ width: 100%; position: relative; background: #000;     } 



#heroIND{  }  

 

 

.aaScrolldown{ position: absolute; bottom:0; left:0; right:0; width:200px; height: 53px; margin: 0 auto; display:block; text-align: center; background: url(../img/arDown.png) no-repeat 0 bottom; -webkit-transition: all .5s; transition: all .5s; padding-top:10px;  }

.aaScrolldown i{ display: inline-block; background: #f19500; color: #fff; width: 1em; height: 1em; border-radius: 3px;  -webkit-animation-name: showInOut; animation-name: showInOut; 

	-webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } 

.aaScrolldown:hover{ -webkit-transform: scale(1.06); transform: scale(1.06); -webkit-transform-origin: center bottom; transform-origin: center bottom; }



@-webkit-keyframes showInOut {

  0%, 20%, 80%, 100%  {

    opacity: 1;

  }

  50% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

            transform: translate3d(0, 100%, 0);

  }

  51% {

    opacity: 0;

    -webkit-transform: translate3d(0, -60%, 0);

            transform: translate3d(0, -60%, 0);

  }

}



@keyframes showInOut {

  0%, 20%, 80%, 100%  {

    opacity: 1;

  }

  50% {

    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);

            transform: translate3d(0, 100%, 0);

  }

  51% {

    opacity: 0;

    -webkit-transform: translate3d(0, -60%, 0);

            transform: translate3d(0, -60%, 0);

  }

}





 

#IND2{ background: #ffd800;  padding: 50px 0 20px 0; position: relative; overflow: hidden; }

.titIND2{ text-align: center;  line-height: 1.5; padding: 3em 0;    }

.titIND2 h3{ color: #1c2835; font-weight: bold; font-size: 1.75rem; }



#IND2_img1{ position: absolute; display: inline-block; pointer-events: none; width:50%; text-align: right;}

#IND2_img1 img{  max-width: 100%;   }

#IND2_img1{ right: 0; top: 80px;  } 

@media (max-width:900px){

	#IND2_img1 {  max-width: 100%;   }

}



#pdtSlider{ padding: 2em 0;   }

.pdtSlider-li{ vertical-align: top; }

.pdtSlider-link{ display: block; width: 92%; max-width: 260px; margin: 0 auto;   }

.pdtSlider-img{ position: relative; background: #fff; }

.pdtSlider-img img{ display: block; max-width: 100%; }

.pdtSlider-txt{ line-height: 1.5; margin: 1em 0; }



.frameMask{ position: absolute; top:0; left: 0; width: 100%; height: 100%; opacity: 0; text-align: center; background: rgba(0,0,0,.95); color: #fff; -webkit-transition: all .6s;  transition: all .6s;  }

.frameMask:after { display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  } 

.frameMask small{  display: inline-block;  vertical-align: middle; max-width: 90%; letter-spacing: .3em; transition:all .5s .2s; -webkit-filter: blur(5px); font-family: Arial, sans-serif;   }

.pdtSlider-link:hover .frameMask small,

.pdtList:hover .frameMask small,

.newsList-aa:hover .frameMask small{ letter-spacing: 0;  -webkit-filter: none; }



.framsss{ position: absolute; top:0; left: 0; right:0; bottom:0;  width: 96%; width: calc( 100% - 10px); height: 96%; height: calc( 100% - 10px); margin: auto; -webkit-box-shadow: inset 0px 0px 0px 1px #3a3a3a; box-shadow: inset 0px 0px 0px 1px #3a3a3a;   }



.frame{ position:absolute;   -webkit-transition: all .6s;  transition: all .6s; background: #fbd902; }

.frame.Top{    top:0; right: 0; width: 20%; height: 1px;  }

.frame.Right{  top:0; right: 0; width: 1px; height: 10%;   -webkit-transition-delay: .2s;  }

.frame.Bottom{ bottom:0; left: 0; width: 10%; height: 1px;     }

.frame.Left{   bottom:0; left: 0; width: 1px; height: 20%;  -webkit-transition-delay: .2s;     }



.pdtSlider-link:hover .frameMask,

.pdtList:hover .frameMask,

.newsList-aa:hover .frameMask { opacity: 1;  }

.pdtSlider-link:hover .frame.Top,

.pdtList:hover .frame.Top,

.newsList-aa:hover .frame.Top{ width: 100%; }

.pdtSlider-link:hover .frame.Right,

.pdtList:hover .frame.Right,

.newsList-aa:hover .frame.Right{ height: 100%; }

.pdtSlider-link:hover .frame.Bottom,

.pdtList:hover .frame.Bottom,

.newsList-aa:hover .frame.Bottom{ width: 100%; }

.pdtSlider-link:hover .frame.Left,

.pdtList:hover .frame.Left,

.newsList-aa:hover .frame.Left{ height: 100%; }





#IND3{ background: url(../img/bgPaper.jpg) repeat 0 0; position: relative; overflow: hidden; padding-top: 100px; padding-bottom: 30px;  }

#canvas { position: absolute; top: -200px; left: -1px; width: 100.5%;  -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.indAB-L,

.indAB-R{ display: inline-block; width: 50%; margin-right: -4px; vertical-align: top; padding:1em 6%;   }

.indAB-L{ text-align: center; }

.indAB-L img{ max-width:100%; }

.indAB-R{ line-height: 1.5; }

.indAB-R strong{ color: #2e4363; font-size: 4.43rem; display: block;}

.indAB-R h3{ font-size: 1.875rem; }

.indAB-R h4{ font-size: 1.375rem; color: #2f3b4c; font-weight: 300; }

 

@media (max-width:960px){

	.indAB-R strong{ font-size: 3rem; }

	.indAB-R h3{ font-size: 1.5rem; }

	.indAB-R h4{ font-size: 1.2rem; }

}

@media (min-width:701px) and (max-width:800px){  

	.indAB-R{ padding-left: 0; }

}

@media (max-width:700px){  

	.indAB-L,

	.indAB-R{ width:100%; text-align: center; max-width: 500px; margin: 0 auto; display:  block; }

	.indAB-L img{ max-width:80%; }

}

@media (max-width:400px){ 

	.indAB-R h3,

	.indAB-R h4{ padding: 0 10%;  }

}

 



#IND4{ background: url(../img/bgOIL.jpg) no-repeat 0 0; padding: 300px 0 50px 0; text-align: center; position: relative; }

.titIND4{ line-height: 1.5; padding: 2em 0;  }

.titIND4 h3{ font-size: 1.75rem; }



#linksSlider{ padding: 2em 0 6em 0;   }

#linksSlider li{    }

.linksSlider-aa{ width: 84%; max-width: 224px; display: inline-block; border-radius: 50em; padding: 2px; 

background: #de9b00;

background: -moz-linear-gradient(top, #de9b00 0%, #ffdd35 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #de9b00), color-stop(100%, #ffdd35));

background: -webkit-linear-gradient(top, #de9b00 0%, #ffdd35 100%);

background: -o-linear-gradient(top, #de9b00 0%, #ffdd35 100%);

background: -ms-linear-gradient(top, #de9b00 0%, #ffdd35 100%);

background: linear-gradient(to bottom, #de9b00 0%, #ffdd35 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de9b00', endColorstr='#ffdd35', GradientType=0 );

}

.linksSlider-aa img{ width:100%; border-radius: 50em; display: block; transition: all .6s; }

.linksSlider-aa:hover img{  -webkit-filter: contrast(1.75) saturate(0); filter: contrast(1.75) saturate(0);   }



 

.aaGradi{ display: inline-block; padding: .5em 3em; border-radius: 50em; box-shadow: 0 2px 3px rgba(0,0,0,.8);

background: #fff;

background: -moz-linear-gradient(top, #efefef 0%, #ffffff 50%, #ededed 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #efefef), color-stop(50%, #ffffff), color-stop(100%, #ededed));

background: -webkit-linear-gradient(top, #efefef 0%, #ffffff 50%, #ededed 100%);

background: -o-linear-gradient(top, #efefef 0%, #ffffff 50%, #ededed 100%);

background: -ms-linear-gradient(top, #efefef 0%, #ffffff 50%, #ededed 100%);

background: linear-gradient(to bottom, #efefef 0%, #ffffff 50%, #ededed 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ededed', GradientType=0 );}



.aaGradi:hover{ background: #f2e404; }

 

/* =============== footer   =============== */ 

#aaTOP{ background: url(../img/arTOP.png) no-repeat center bottom; display: block; position: absolute; bottom:0; left:0; right:0; width: 200px; height: 50px; margin: 0 auto; text-align: center; color: #000; }

#aaTOP i{ display: block; background: #f19500; color: #fff; width: 1em; height: 1em; line-height: 1em; border-radius: 3px; margin:10px auto 5px auto; } 

#aaTOP b{ -webkit-transition: all .6s; transition: all .6s;  }

#aaTOP:hover b{ color:#f19500;  }

footer{ background: url(../img/bgFooter.jpg) no-repeat center bottom; padding: 1em 0 ; text-align: center;} 

/*.fooContact{ margin-bottom: 1em; } */

.fooContact li{ display: inline-block; padding: 1em; color: #555;  }

.iiOrange{ color: #d39d00; border: solid 2px #d39d00; display: inline-block; width: 2em; height: 2em; line-height: 1.8em;   text-align: center; border-radius: 50em; margin-right: .5em; }

footer a:hover{ text-decoration: underline; }

.aaSocial{ /*background: #444; color: #fff; width: 2em; height: 2em; line-height: 1.8em; border-radius: 4px;*/ display: inline-block; vertical-align: middle; font-size: 1.5rem; padding:.5em 0; margin-right: .5em; }
.aaSocial i{ display: inline-block; }
.aaSocial.FB:hover{ color: #3b5998; } 
.aaSocial.YT:hover{ color: #b31217; }
.aaSocial.TW:hover{ color: #1dcaff; }
.aaSocial.WB:hover{ color: #df2029; }
.aaSocial.WC:hover{ color: #7bb32e;}
.aaSocial.G:hover{ color: #DD4B39; }

.aaLine{ display: inline-block; vertical-align: middle; }
.aaLine img{ display: inline-block; height: 2em; vertical-align: top; -webkit-transition: all .5s; transition: all .5s;  }
.aaLine:hover img{ -webkit-filter: brightness(0.9) contrast(130%); filter: brightness(0.9) contrast(130%);  }

.people {

	width: 160px;

	height: 23px;

	color: #565656;

	border: thin solid #cecece;

	padding-left: 5px;

	padding-top: 3px;

	position: relative;

	margin-left: auto;

	margin-right: auto;

	margin-top: 30px;

}





/* ===============  subpage BG  =============== */   

#SUBPAGE{ padding: 200px 0; min-height: 800px; position: relative; color:#fff; }

.bgSubpage{}

.bgAB{ background:url(../img/bgAB.jpg) no-repeat center 0;  }

.bgNE{ background:url(../img/bgNE.jpg) no-repeat center 0;  }

@media (min-width:1800px){

	.bgSubpage{ background-size: 100% auto;  }

}

@media (max-width:460px) and (max-height:760px){

	#SUBPAGE{ padding-top: 150px; }

}





.tit1{ line-height: 1.3; padding: 2em 0; text-align: center;}

.tit1 h3{ font-size:  3.43rem; color: #ffd800; font-weight: bold; }

.tit1 h4{ color: #8b8a84; }



.fourLines{ margin-bottom: 5px; }

.fourLines span{ width: 1px; height: 19px; background: #ffdc19; display: inline-block; margin: 3px; }

.fourLines span:nth-child(1){}

.fourLines span:nth-child(2){ transform: translateY(-4px); }

.fourLines span:nth-child(3){ }

.fourLines span:nth-child(4){ transform: translateY(-4px); }



@media (max-width:520px){

	.tit1 h3{ font-size:  2rem; }

}





/* ===============  ABOUT  =============== */   

.editAB{  } 

.editAB h5{ font-size: 1.875rem; font-weight: bold; padding:1em 0; line-height: 1.4; }

@media (max-width:520px){

	.editAB h5{ font-size: 1.5rem; }

}

.pdtList{ width:100%; display: block; }

.pdtList-img{ position: relative; background: url(../img/bg-p1.jpg) repeat-x center 0; background-size: cover; }

.pdtList-img img{ display: block; max-width: 100%; margin:0 auto;   }

.pdtList-txt{ margin:  1em 0; text-align: left; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.4em; height: 2.9em; font-size: .937rem;  } 

 

/* grid */

.gridsssPDT{ padding: 2em 0; width: 100%;  }

.gridsssPDT:after { content: ''; display: block; clear: both; }

.gridsssPDT-gutter{ width: 2%; }

.gridsssPDT-item{ width: 23.5%;   }

@media (max-width:1100px){

	.gridsssPDT-item{ width: 32%; } 

}

@media (max-width: 800px){

	.gridsssPDT-item{  width: 49%;  }  

}

@media (max-width: 500px){

	.gridsssPDT-item{  width: 100%;  padding-bottom: 2em;   }  

	.pdtList{ max-width: 260px; margin:0 auto;}

}

/*

@media (min-width:800px){

	.newsList li:nth-child(8n+1){ -webkit-animation-delay: .2s; animation-delay: .2s; }

	.newsList li:nth-child(8n+2){ -webkit-animation-delay: .5s; animation-delay: .5s; }

	.newsList li:nth-child(8n+3){ -webkit-animation-delay: .1s; animation-delay: .1s; }

	.newsList li:nth-child(8n+4){ -webkit-animation-delay: .8s; animation-delay: .8s; }

	.newsList li:nth-child(8n+5){ -webkit-animation-delay: .3s; animation-delay: .3s; }

	.newsList li:nth-child(8n+6){ -webkit-animation-delay: .9s; animation-delay: .9s; }

	.newsList li:nth-child(8n+7){ -webkit-animation-delay: .7s; animation-delay: .7s; }

	.newsList li:nth-child(8n+8){ -webkit-animation-delay: .4s; animation-delay: .4s; }

}

*/

.pdtFilterList{ width: 100%; background: #000; box-shadow: 0 2px 5px rgba(0,0,0,.4); margin-bottom: 3em; text-align: center; }

.pdtFilterList li{ display: inline-block; padding: 0 1em; }

.pdtFilterList li a{ padding: 1.1em .3em; display: block; border-bottom: solid 1px rgba(0,0,0,0); }

.pdtFilterList li a:hover,

.pdtFilterList li.-on a{ color: #ffdc19; border-bottom: solid 1px #ffdc19; }

.pdtFilterList li a span{ font-size: .9375rem;}

@media (max-width:400px){

	.pdtFilterList li{ padding: 0 1%; }	

	.pdtFilterList li a span{ font-size: .75rem;}

}





/* ===============  NEWS  =============== */    

.pdtdet{ width: 100%; margin: 2em 0 3em 0;   }

.pdtdet:after{ content: ''; display: block; clear: both; }

.pdtdet-L,

.pdtdet-R{ width: 50%; float: left; padding-bottom: 2em;}

.pdtdet-R{ padding-right: 5%; padding-left: 5%; line-height: 1.5; }

@media(max-width:900px){

	.pdtdet-L,

	.pdtdet-R{ width: 100%; float: none;}

	.pdtdet-R{ padding-right: 0; padding-left: 0;  }

}



.pdtdetSlider{  } 

.pdtdetSlider-item{  text-align: center; padding:0 1em;  }

.pdtdetSlider-item img{ max-width: 100%; vertical-align: top; display: inline-block; }

.pdtdetSlider-bg{ 

background: #ebebeb; /*background: url(../img/bg-p2.jpg) no-repeat 0 0;*/ 

background: -moz-linear-gradient(top, #f5f5f5 0%, #ebebeb 36%, #ffffff 57%, #ebebeb 75%, #e7e7e7 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #f5f5f5), color-stop(36%, #ebebeb), color-stop(57%, #ffffff), color-stop(75%, #ebebeb), color-stop(100%, #e7e7e7));

background: -webkit-linear-gradient(top, #f5f5f5 0%, #ebebeb 36%, #ffffff 57%, #ebebeb 75%, #e7e7e7 100%);

background: -o-linear-gradient(top, #f5f5f5 0%, #ebebeb 36%, #ffffff 57%, #ebebeb 75%, #e7e7e7 100%);

background: -ms-linear-gradient(top, #f5f5f5 0%, #ebebeb 36%, #ffffff 57%, #ebebeb 75%, #e7e7e7 100%);

background: linear-gradient(to bottom, #f5f5f5 0%, #ebebeb 36%, #ffffff 57%, #ebebeb 75%, #e7e7e7 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e7e7e7', GradientType=0 );   }



.pagePrevNext{ text-align: right; line-height: 1.5; padding-top: 4em; padding-bottom: 1em;  }

.pagePrevNext a{ display: inline-block; }

.pagePrevNext a span{ padding: 0 .5em;   }

.pagePrevNext a span,

.pagePrevNext a i{ display: inline-block; vertical-align: middle; }

.pagePrevNext a:hover{color:#ffd800; }





.pdtdet-R h2{ color: #ffd800; font-weight: bold; font-size: 2rem; }

.pdtdet-R h6{ color: #666; font-size: .9375rem; margin: 1.2em 0;  }

.pdtdet-R ul{ font-size: .9375rem; line-height: 2em; padding-bottom: 1em;  }

.pdtdet-R ul > li{ padding-left: 1em; position: relative; }

.pdtdet-R ul > li:before{ content: ''; display: inline-block; width: 5px; height: 5px; background: #a1a1a1; border-radius:50em; position: absolute; top: .8em; left: 0; }



/* ===============  NEWS   =============== */    

.newsList{ width: 100%; }

.newsList:after{ content: ''; display: block; clear: both; }

.newsList li{ width: 32%; float: left; margin-bottom: 2em; }

.newsList li:nth-child(3n+2){ margin-right:2%; margin-left: 2%;  }

.newsList-aa{ display: block; background: #fff; padding-bottom: 30px;  }

.newsList-img{ position: relative; }

.newsList-img img{ width: 100%; display: block;}



.newsList-txt1{ 

background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 20%, #ffffff 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, #dfdfdf), color-stop(20%, #ffffff), color-stop(100%, #ffffff));

background: -webkit-linear-gradient(top, #dfdfdf 0%, #ffffff 20%, #ffffff 100%);

background: -o-linear-gradient(top, #dfdfdf 0%, #ffffff 20%, #ffffff 100%);

background: -ms-linear-gradient(top, #dfdfdf 0%, #ffffff 20%, #ffffff 100%);

background: linear-gradient(to bottom, #dfdfdf 0%, #ffffff 20%, #ffffff 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff', GradientType=0 ); }

.newsList-txt2{ color: #000; width:90%; margin: 0px auto 0 auto; position: relative; background: #fff; -webkit-transform: translateY(-20px); transform: translateY(-20px); text-align: left; padding: 20px 5%;  overflow: hidden;  height: 11em; } 

.newsList-txt2 time{ font-size: .8125rem; color: #666;   }

.newsList-txt2 h3{ font-size: 1.125rem; line-height: 1.5; margin-top: 10px;  overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height:3em; }

.newsList-txt2 p{ font-size: .8125rem; margin: 10px 0; color: #666; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height:1.5em; height:4.5em;    }



.mask{ position: absolute; top:0; left: 0; right:0; bottom:0; width:100%; height: 100%;  margin:auto; border:solid 1px #444; opacity: 0; text-align: center; background: rgba(0,0,0,.6); color: #fff; -webkit-transition: all .6s;  transition: all .6s; -webkit-backdrop-filter: saturate(180%) blur(10px);backdrop-filter: saturate(180%) blur(10px) }

.mask:after { display: inline-block; *zoom: 1; content: ''; height: 100%; vertical-align: middle;  } 

.mask small{  display: inline-block;  vertical-align: middle; max-width: 90%; letter-spacing: .5em; -webkit-transition:all .6s .2s; transition:all .6s .2s; -webkit-filter: blur(5px); font-family: Arial, sans-serif;   }

.newsList-aa:hover .mask{ opacity:1;  width: 97%; width: calc( 100% - 10px ); height: 96%; height: calc( 100% - 10px );  }

.newsList-aa:hover .mask small{ -webkit-filter: none; letter-spacing: 0; }



@media (min-width:800px){

	.newsList li:nth-child(3n+1){ -webkit-animation-delay: .3s; animation-delay: .3s; }

	.newsList li:nth-child(3n+2){ -webkit-animation-delay: .5s; animation-delay: .5s; }

	.newsList li:nth-child(3n+3){ -webkit-animation-delay: .7s; animation-delay: .7s; } 

}

@media (min-width:561px) and (max-width:900px){

	.newsList li{ width: 49%;   }

	.newsList li:nth-child(3n+2){ margin-right: 0; margin-left: 0;  }

	.newsList li:nth-child(2n+2){ margin-left: 2%; }

}

@media (max-width:560px){

	.newsList li{ width: 100%; max-width: 430px; margin-right: auto; margin-left: auto; float: none; display: block; } 

	.newsList li:nth-child(2n+2){ margin-left: auto; margin-right:auto; }

}







.newsWrapper{ width:80%; padding:1em 0; margin:0 auto; max-width: 800px; }

.newsWrapper time{}

.newsWrapper h3{ font-size: 1.5625rem; line-height: 1.4;  margin-top: 15px;  }

.pageNews{   }

.pageNews-prev,

.pageNews-next{ position: absolute; top: 50%; margin-top: -25px; display:block; width: 50px; height: 50px; padding:0; cursor:pointer;   border:none; outline:none; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;  background-color: transparent; transition: all .5s;    }

.pageNews-prev{ left: 0; background-image: url(../img/slick_L.png);  }

.pageNews-next{ right: 0;  background-image:  url(../img/slick_R.png) ;   } 

.pageNews-prev:hover,

.pageNews-next:hover{  -webkit-filter: brightness(0.6);  } 



@media (max-width:640px){

	.pageNews-prev,

	.pageNews-next{ width: 30px; height:30px; } 

}



 

  

 



/* ===============  contact  =============== */

.contactForm{ padding: 1em 6% 3em 6%; color: #000; margin-top: 40px; position: relative;

background: #ffd900;

background: -moz-linear-gradient(-45deg, #ffd900 0%, #ffaa00 100%);

background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffd900), color-stop(100%, #ffaa00));

background: -webkit-linear-gradient(-45deg, #ffd900 0%, #ffaa00 100%);

background: -o-linear-gradient(-45deg, #ffd900 0%, #ffaa00 100%);

background: -ms-linear-gradient(-45deg, #ffd900 0%, #ffaa00 100%);

background: linear-gradient(135deg, #ffd900 0%, #ffaa00 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd900', endColorstr='#ffaa00', GradientType=1 );   }



.flag{ position: absolute; display: inline-block; top:-115px; left:-20px; }

@media (max-width:800px){

	.flag{ top:-100px;  }

	.flag img{ height: 150px; }

}

@media (max-width:650px){

	.contactForm{  margin-top: 100px; padding-top: 2em;  }	

}



.fillform-col{ width: 100%; background: #fff; margin: 10px 0; border-radius: 5px; text-align: left;} 

.fillform-col:after{ content:''; clear:both; display:block; } 

.fillform-col label{ padding-left:1em; color: #666; display: inline-block; } 

.fillform-col input,

.fillform-col textarea{ width: 100%; padding: 12px 1em; display: block; -webkit-appearance: none; border: none; outline: none; border-radius: 0px; border-radius: 5px; background: none;}



@media (min-width: 521px){

	.fillform-col{ position:relative; padding-left: 110px; }

	.fillform-col label{ display: inline-block; vertical-align:middle; height: 1em;  position: absolute; top: 12px; left:0;  bottom:0;  line-height: 1; } 

}

@media (max-width: 521px){

	.fillform-col label{ padding-top: 1em;  } 

}



.fillform-col:hover input,

.fillform-col:hover textarea,

.fillform-col:hover label { color: #ffd500 !important; }

.fillform-col:hover { background: #000; box-shadow: 0 0 5px rgba(0,0,0,.5) }



.Vcode{ position: relative; }

.Vcode img{ position: absolute; right:10px; top:0; bottom:0; margin: auto 0; }

 

 

.bnSEND{ width: 100%; padding: 2em 0; }

.bnSEND a{ display: inline-block; padding: .8em 2em; background: #fff; border-radius: 5px; position: relative; z-index:1; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,.4) }

.bnSEND a:before{ content: ''; position: absolute; top: 0; left: -100%; width: 0%; height: 120%; display: inline-block;  z-index: -1; pointer-events: none; -webkit-transform: skewX(70deg) translateZ(0); transform: skewX(70deg) translateZ(0); -webkit-transition: width 1s, transform 1s; transition: width 1s, transform 1s; background: #000;  }

.bnSEND a span{ -webkit-transition: all .5s; transition: all .5s; }

.bnSEND a:hover span{ color: #ffdb00;  }

.bnSEND a:hover:before{ -webkit-transform: translateZ(0); transform: translateZ(0); width: 200%; left: 0; }

 



 

 

 

/* ==========================================================================

Waypoints

========================================================================== */

.hide, .wp1{ visibility: hidden;  }

.visible, .animated.fadeIn  { visibility: visible !important; }