@charset "UTF-8";
/* CSS Document */
ul.classLink li.rolldown{
  position: relative;
}
ul.classLink li.rolldown span{
  display: block;
  padding: 0 50px;
  position: relative;
  line-height: 55px;
  cursor: pointer;
  z-index:20;
  background: #fff;
}
ul.classLink li.rolldown span::after{
  content: "";
  background: url(../images/arrow.jpg) no-repeat left center;
  display: inline-block;
  width: 30px;
  height: 55px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;

}
ul.classLink li.rolldown span:before {
  content: "";
  width: 0%;
  height: 3px;
  background:#41c1eb;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transition:0.6s;
}
ul.classLink li.rolldown:hover span:before {
  width: 100%;
}
ul.classLink li.rolldown span:hover{
  box-shadow: -1px -2px 6px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

ul.classLink li.rolldown dd{
  z-index:10;
  position: absolute;
  background: #fff;
  width: 100%;
  top: 100%;
  left: 0;
  opacity: 0;
  transform:translate(0,-100%);
  transition: opacity 0.6s 0s, transform 0.6s 0.3s;
}
ul.classLink li.rolldown:hover dd{
  box-shadow: -1px -2px 6px rgba(0, 0, 0, 0.1);
  opacity: 1;
  transform:translate(0,0%);
  transition: opacity 0.6s 0.3s, transform 0.6s 0s;

}
ul.classLink li.rolldown dd a{
  display: block;
  padding:15px 10px;
  text-align: center;
}
ul.classLink li.rolldown dd a:hover{
  color:#fff;
  background: #33bce9;
}


.fablist dd{
  padding:70px 0;
  background:#fff;
}
.fablist dd:nth-child(odd){
  background:#f8f8f8;
}
.fablist dd h4{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: normal;
}
.fablist dd h4 strong, .fablist dd h4 em{
  font-weight: normal;
  color:#5a5a5a;
}
.fablist dd h4 strong b, .fablist dd h4 em b{
  color:#000;
  display: inline-block;
  padding-right: 3px;
}
.contentBox .articleins .locationicon{

        top: 20px;

}
.thislogo{
  width: 140px;
  height: 140px;
  position: absolute;
  top: -40px;
  left: 40px;
  transform:translate(0,-100%);
  border-radius: 99em;
  overflow: hidden;
}
.thislogo img{
  width: 100%;
  display: block;
}
.contentBox .articleins {
    width: 100%;
    background: #fff;
    margin: 50px auto 0 auto;
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0,0);
}
.contentBox .articleins .insImg .closelink {
    opacity: 0;
}
.bannertitle .wrap::before{
  content: "";
  display: block;
  width: 200px;
  height: 80px;
  background:url(../images/logo.png) no-repeat;
  margin:0 auto;

}
.bannertitle .wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bannertitle h2::before {
    left: 50%;
    transform:translate(-50%,0);
}
.bannertitle p{
  text-align:center;
}
.bannertitle p strong{
  display: block;
  font-size: 18px;
  font-weight: 550;
  padding-bottom: 15px;
}
.facList{
margin:0 -13px;

}
.facList li{
  float: left;
  width:16.666%;
}

.facList .item{
margin:13px;

}
.facList .item .Img {

  position: relative;
  overflow: hidden;
  border:1px solid #ebebeb;
}

.facList .item .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.facList .Txt {
  margin: 15px 0;
  padding: 0 20px 0 0;
  position: relative;
  height: 19px;
}
.facList .Txt::after {
  content: ">";
  font-size: 14px;
  color:#cacaca;
  display: inline-block;
  width: 20px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  font-family: 'Nanum Myeongjo', serif;
}
.facList .Txt em{
  font-size: 14px;
  color:#5f5f5f;
  border-right: 1px solid #c6c6c6;
  display: inline-block;
  padding-right: 10px;
}
.facList .Txt a {
  display: inline-block;
  padding-left: 10px;
  color: #000;
}
.facList .Txt a:hover {
  color: #00abe4;
}

.cateandlink{
  border-top: 1px solid #f2f2f2;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cateandlink .bluebtn {
    padding: 0px 0;
}
/******內頁******/

.ins .breadinsbox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.ins .breadinsbox .bread {
    padding-bottom:0px;
}
.ins .gobacklink{
  position: relative;
  display: flex;
  align-items: center;
  color:#7b7a7a;
  font-size: 14px;
}
.ins .gobacklink::before{
  content: "";
  width: 20px;
  height: 15px;
  display: block;
  background: url(../images/arrow02.png);
  margin-right: 6px;
}
.ins .gobacklink:hover::before{
  background: url(../images/arrow03.png);
  animation: gobacklinkmove 600ms infinite ease-in-out;
}
@keyframes gobacklinkmove {
    0% {transform: translate(0,0);}
    50% {transform: translate(-5px,0);}
    100% {transform: translate(0,0);}
}


.side_album li img{
  width: 100%;
  display: block;
}

.insImg .pagenav {
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% + 80px);
}
.insImg .pagenav a:first-child::before{
  display: none;
}
.insImg .pagenav a:hover {
    border:1px solid #00abe4!important;
    color:#fff!important;
    background: #00abe4;
}
.insTxt {
  padding:70px 50px;
  background:#fff;
  position: relative;
}
.insTxt .articleTitle{
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;

}
.insTxt .articleTitle::after{
  content: "";
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 1px solid #cccccc;
  z-index: 10;
}
.insTxt .articleTitle strong{
  font-size: 20px;
  display: inline-block;
  padding:0 20px;
  background:#fff;
  position: relative;
  z-index: 20;
}
.insTxt .infoarea{
  border-top:1px solid #e5e5e5;
  margin-top: 30px;
  padding-top: 30px;
  font-size: 14px;
}
.articleins .insImg {
    position: relative;
}




@media (max-width: 1160px){

.facList li{
  width:20%;
}

}

@media (max-width: 900px){

.facList li{
  width:25%;
}

}

@media (max-width: 767px){

.facList li{
  width:33.33%;
}

}


@media (max-width: 640px){
  .bannertitle p {
    display: none;
}
}



@media (max-width: 520px){
.facList li{
  width:50%;
}
}