@charset "utf-8";

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased;}

img{
  max-width: 100%;
  height: auto;
  width /***/:auto; /*IE8*/
  border: 0;
  vertical-align: middle;
}

.eventTop li a div.image img{
	max-width: 700px;
}

a {color: #333;}
.main a {text-decoration: underline;}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button#select_schedule,
button#select_schedule_shop,
button#select_schedule_release,
button#select_schedule_shop_release {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 2px 8px 4px;
    border-radius: 4px;
}

.entry-title span.tag {margin-right: 10px; color: #191919; padding: 2px 4px; background-color: rgba(255, 255, 255, .8); border-radius: 2px; font-size: .9em;}

.wrap {width: 90%; overflow: hidden; max-width: 1024px; margin: 0 auto;}
#main {background: none; height: auto; width: 100%; padding-top: 20px; margin: 0 auto;}
#main h1 {font-size: 17px; font-weight: normal; margin: 0 .5em 2em; line-height: 1; color: #333;}
#main section {margin-bottom: 20px;}
#main section ul {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 0;
}
.ua-ie-8 #main li,
.ua-ie-9 #main li {display: inline-block; letter-spacing: normal; margin: 0 5px 10px 0; vertical-align: top;}

.content-title, .events-title {margin-bottom: 5px; font-size: 1em; font-weight: bold; font-weight: normal;}

#main section#intro {margin: 40px 0;}
#intro h1 {display: inline-block; width: 500px; margin-right: 40px; vertical-align: middle;}
#intro p {display: inline-block; line-height: 2; font-weight: bold; text-align: left;}
#intro .wrap {width: 840px; margin: 60px auto; text-align: center; float: none;}

#main #intro #shopList {width: 100%; max-width: 840px; list-style: none;}
#main #intro #shopList li {width: 25%; height: auto; text-align: center; padding: 2%;}
#main #intro #shopList p {line-height: 1.4; font-size: 14px; position: relative; padding-left: 15px; margin: 20px 0;}
#main #intro #shopList p:after {
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -6px -5px 0 0;
  border-top: solid 3px #999;
  border-right: solid 3px #999;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}
#main #intro #shopList a {opacity: 0.8;}
#main #intro #shopList a:hover {opacity: 1;}
#shopList img {border-radius: 50%;}


/*open muji TOP*/
#intro .shopDetail,#openmujiInfo .shopDetail {
    border-bottom: 1px solid #DEDEDE;
    width: 100%;
    padding: 16px 0;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}
#intro .shopDetailwrap,#openmujiInfo .shopDetailwrap {
    max-width: 1024px;
    margin: 0 auto;
    width: 90%;
    display: flex;
box-sizing: border-box;
justify-content: space-between;
align-items: baseline;
}
#intro .shopDetail .shopDetailwrap h1,#openmujiInfo .shopDetail .shopDetailwrap h1 {width: 50%; margin: 0; font-weight: bold;}
#intro .shopBtn,#openmujiInfo .shopBtn {text-align: right; display: inline-block;}
#intro .shopBtn a,#openmujiInfo .shopBtn a {
font-weight: 500;
border-radius: 2px;
border: 1px solid #ddd;
padding: 8px 15px;
font-size: 13px;
vertical-align: middle;
}
#intro #S032,#openmujiInfo #S032 {line-height: 1.4; margin-left: 6px; display: inline-block; width: 130px; text-align: left;}
.shopLocation {display: inline-block;}
/*maintenance TOP*/

#content .maintenance {overflow: hidden;}
#content .maintenance dl {margin: 20px 0;}
#content .maintenance dt {display: inline-block; float: none; font-weight: 600; margin-bottom: 5px;}
#content .maintenance dd {margin: 0; font-size: 12px;}
.ua-ie-8 #main #intro #shopList li,
.ua-ie-9 #main #intro #shopList li {width: 20%;}

@media screen and (max-width : 768px){
  article section {width: 100%;}
  #main #intro h1 {width: 100%; margin: 0 auto; display: inherit;}
  #intro .wrap {width: 65%;}
  #intro p {font-size: 14px; margin-top: 20px;}
  #main #intro #shopList {width: 90%; margin-top: 20px;}
  #main #intro #shopList p {font-size: 11px; margin-top: 10px; font-weight: nomal;}
  #main #intro .shopDetail .shopDetailwrap h1,#feature .shopDetail .shopDetailwrap h1 {width: 20%; margin: 0 0 24px;}
}

#schedule {margin-top: 40px;}
#schedule h1,
#feature h1 {display: inline-block; font-weight: bold; font-size: 18px; margin: 0 0 10px 0;}
#schedule h2 {display: inline-block; font-weight: bold; font-size: 14px; margin: 0;}
#schedule p.year {display: inline-block; font-weight: bold; margin: 0 0 2em 20px; line-height: 1; font-size: 17px;}
#schedule table {width: 100%; font-size: 14px; margin: 10px 0 40px;}
#schedule th {text-align: center; width: 10%; padding: 15px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
#schedule td {padding: 10px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}

#feature #currentEvent {font-size: 14px; margin: 40px 0;}
#feature #currentEvent div {padding-bottom: 15px; border-bottom: 1px solid #fff;}
#feature #currentEvent div:last-child {border: 0; padding-bottom: 0;}

#schedule td div,
#feature #currentEvent div {position: relative;}
#schedule .finish td {position: relative; background: none;}
#schedule td div + div {margin-top: 20px;}
#schedule td a,
#feature #currentEvent a {display: inline-block; word-wrap: break-word; overflow-wrap: break-word;}
#schedule td a .title {text-decoration: underline; display: inline-block; margin: 0 10px 5px 0; position: relative; padding-top: 27px; width: 75%;}
#feature #currentEvent a .title,
#feature #nearFuture a .title {text-decoration: underline; display: inline-block; margin: 0 10px 5px 0; position: relative; padding-top: 0; width: 46%;}
#schedule td a .title:hover,
#feature #currentEvent a .title:hover {color: #000;}

@media screen and (max-width : 767px){
  #schedule td,
  #feature #currentEvent div {margin: 0; position: relative;}
  #schedule th {font-size: 13px; max-width: 8%; padding: 5px;}
  #feature #currentEvent div:last-child {margin-left: 0;}
  #schedule h1 {display: block; margin: 0 0 10px 0;}
  #feature #currentEvent {margin-top: 20px;}
  #schedule td a .title,
  #feature #currentEvent a .title,
  #feature #nearFuture a .title,
  #schedule .finish td a .title {margin: 5px 10px 0 0; width: 100%;}
}

#schedule .finish {background: #f1f1f1;}
#schedule .finish td a {padding-top: 28px; color: #999;}
#schedule .recruitment td a {padding-top: 28px;}
#schedule .finish .endDate {color: #999;}
#schedule .status {font-size: 12px; display: block; padding: 2px 5px; border-radius: 2px; margin-right: 10px; position: absolute; top: 0; left: 0;}
#schedule .finish .status {color: #fff; background-color: #333;}
#schedule .talkevent,
#schedule .exhibition,
#schedule .workshop {font-size: 12px; padding: 3px 6px; background-color: #ddd; border-radius: 2px; margin-right: 10px; display: inline-block;}
#schedule img,
#feature img {width: 20%; height: auto; margin-right: 2%; float: left;}
#feature #currentEvent img,
#feature #nearFuture img {width: 50%;}

#schedule .recruitment td a {padding-top: 28px;}
#schedule .recruitment .status {position: absolute; top: 0; left: 0; font-size: 12px; padding: 2px 6px; border-radius: 2px; margin-right: 10px; display: inline-block; color: #333; background-color: #f5eedd}
#schedule .eventType {font-size: 12px; padding: 3px 6px; background-color: #ddd; border-radius: 2px; margin-right: 10px; display: inline-block;}

#schedule td a .title:before,
#feature #currentEvent a .title:before,
#feature #nearFuture a .title:before {position: absolute; left: 0; top: 0; border-radius: 2px; font-size: 11px; padding: 1px 3px; background-color: #fff;}
#schedule td .canal a .title:before {content: "キャナルシティ博多"; border: 1px solid #afafaf;}
#schedule td .tokyo a .title:before {content: "有楽町"; border: 1px solid #afafaf;}
#schedule td .meitetsu a .title:before {content: "名古屋名鉄百貨店"; border: 1px solid #afafaf;}
#schedule td .grandfront a .title:before {content: "グランフロント大阪"; border: 1px solid #afafaf;}

#schedule td .sendailoft a .title:before {content: "仙台ロフト"; border: 1px solid #afafaf;}
#schedule td .hiroshimaparco a .title:before {content: "広島パルコ"; border: 1px solid #afafaf;}
#schedule td .aeonmallkyoto a .title:before {content: "イオンモールKYOTO"; border: 1px solid #afafaf;}
#schedule td .okayamalotz a .title:before {content: "岡山ロッツ"; border: 1px solid #afafaf;}
#schedule td .maruikichijoji a .title:before {content: "丸井祥瑞寺店"; border: 1px solid #afafaf;}
#schedule td .abenoharukas a .title:before {content: "近鉄あべのハルカス"; border: 1px solid #afafaf;}
#schedule td .share-star-hakodate a .title:before {content: "シエスタハコダテ"; border: 1px solid #afafaf;}
#schedule td .aeonmall-matsumoto a .title:before {content: "イオンモール松本"; border: 1px solid #afafaf;}

#schedule td .shanghai755 a.title:before {content:"上�；；；；；；；春�755旗舰店";border:1px solid #afafaf;}
#schedule td .shenyeshangchen a.title:before {content:"深圳深业上城旗舰店";border:1px solid #afafaf;}
#schedule td .nanjingfraser a.title:before {content:"南京东方福莱德";border:1px solid #afafaf;}
#schedule td .hangzhoucc a.title:before {content:"杭州工联CC";border:1px solid #afafaf;}

#schedule .endDate,
#feature .endDate {
    font-weight: bold;
    margin-bottom: 5px;
    display: inline-block;
}

@media screen and (max-width : 767px){
  #schedule td div:after {
    display: block;
    position: absolute;
    bottom: 3%;
    right: 0;
    width: 7px;
    height: 7px;
    margin: -5px -5px 0 0;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
  }
  #schedule img,
  #feature img {margin-right: 0; width: 100%;}
  #feature #currentEvent,
  #feature #nearFuture {padding-top: 20px;}
  #feature #currentEvent img,
  #feature #nearFuture img {width: 100%; margin-right: 0;}
  #openmujiInfo {padding: 40px 10px 20px 10px;}
}

.col2 {margin-right: -2%; letter-spacing: -.40em;}
.col2 li {display: inline-block; letter-spacing: normal; margin: 0 4% 40px 0; vertical-align: top; width: 48%;}
.col2 li:nth-child(2n) {margin-right: 0;}
.col2 figure img {width: 100%; height: auto; float: none;}
.col2 figure {margin: 0;}

@media screen and (max-width : 767px){
  .col2 {display: block; width: 100%;}
}

#shopInfo {margin: 80px 0; font-size: 13px;}
#shopInfo img {width: 50%; float: left; margin-right: 20px;}
#shopInfo dl {overflow: hidden;}
#shopInfo dd {margin: 0 0 5px 0;}
#shopInfo dt {color: #999;}
#shopInfo a {float: right; display: inline-block; font-size: 13px; padding: 5px 30px 5px 10px; border: 1px solid #ddd; position: relative;}
#shopInfo a:after {
  display: block;
  position: absolute;
  bottom: 11px;
  right: 18px;
  width: 7px;
  height: 7px;
  margin: -5px -5px 0 0;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

@media screen and (max-width : 767px){
  #shopInfo .col2 li {display: block; width: 100%; margin-bottom: 20px;}
  #shopInfo .col2 li img {width: 100%; float: none;}
  #shopInfo .col2 li dd {margin-left: 0;}
  #shopInfo a {margin-top: -45px;}
  #shopInfo aside a {margin-top: -0;}
}

.select-wrap,.select-wrap-shop{
  vertical-align: middle;
  position:relative;
  overflow:hidden;
  display:inline-block;
  min-width:120px;
  min-width:6em;
  border:1px solid #ddd;
}
.select-wrap select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:relative;
  z-index:2;
  display:block;
  margin:0;
  padding: 3px 35px 3px 5px;
  background:transparent;
  border:0;
  outline:none;
}
.select-wrap-shop select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 6px 30px 6px 14px;
    line-height: 1.4;
    background: transparent;
    border: 0;
    outline: none;
}
.entypo-down-open-shop:before {
  position: absolute;
    bottom: 13px;
    right: 18px;
    width: 7px;
    height: 7px;
    margin: -5px -5px 0 0;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    content: "";
}
.entypo-down-open-mini:before{
  position: absolute;
    bottom: 11px;
    right: 18px;
    width: 7px;
    height: 7px;
    margin: -5px -5px 0 0;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    content: "";
}

aside {border: 1px solid #eee; padding: 30px; box-sizing: border-box; border-radius: 8px; margin-top: 30px; margin-bottom: 40px;}
aside.wrap {margin-bottom: 80px; max-width: 700px;}
#main aside h1 {font-weight: bold;}

aside.atelier {text-align: center; font-size: 11px; color: #666; border: none;}
aside.atelier a {text-decoration: underline;}
#main aside.atelier h1 {font-weight: normal; font-size: 12px;}

@media screen and (max-width : 767px){
  #main aside h1 {margin: 0 0 2em 0; line-height: 1.5;}
  aside {padding: 20px;}
}



/*single page*/

dl.detail {line-height: 1.2; margin: 0 0 40px 0; font-size: 13px;}
.detail dt {float: left; font-weight: bold;}
.detail dd {margin-bottom: 5px; margin-left: 90px; line-height: 1.4; padding: 0;}

#main .shopName {font-size: 22px; margin: 20px 0 0; font-weight: bold;}


#openmujiInfo {margin: 40px auto 0; padding-top: 40px;}
#openmujiInfo.shop {margin: 0 auto; padding-top: 0; border: 0;}

#openmujiInfo h3 {font-size: 15px; font-weight: bold; margin: 30px 0 0;}
#openmujiInfo ul {list-style: none; padding: 0; margin: 0;}
#openmujiInfo dl {line-height: 1.4; margin: 15px 0; font-size: 13px;}
#openmujiInfo dt {float: left; font-weight: bold;}
#openmujiInfo dd {margin-bottom: 3px; margin-left: 70px;}
#openmujiInfo .info {width: 45%; float: left; margin-right: 5%;}
#openmujiInfo .info.local {width: 50%; margin: 60px auto; text-align: center; float: none;}
#openmujiInfo.local .info {float: none; margin: 0 auto;}
#openmujiInfo .shopImg {width: 50%;}
#openmujiInfo.local {margin-bottom: 60px;}

@media screen and (max-width : 767px){
  #main .shopName {font-size: 16px;}
  #openmujiInfo .info {width: 80%; float: none; margin: 0 auto;}
  #openmujiInfo .shopImg {width: 100%; float: none; margin: 0 auto;}
  #openmujiInfo h3 {margin-top: 20px; padding: 0 2%;}
  #openmujiInfo .info.local {width: 80%;}
  #openmujiInfo ul.threePanels {padding: 0 2%;}
}
#openmujiInfo a:hover {text-decoration: none;}
figure {margin: 0;}
figure:after,
nav:after,
.wrap:after {
 content: "";
 display: block;
 clear: both;
}
#openmujiInfo ul.threePanels {
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
margin-bottom: 15px;
}
.ua-ie-8 #openmujiInfo ul,
.ua-ie-9 #openmujiInfo ul {margin-right: -20px; letter-spacing: -.40em; margin-top: 20px;}
.ua-ie-8 #openmujiInfo li,
.ua-ie-9 #openmujiInfo li {display: inline-block; letter-spacing: normal; margin: 0 20px 10px 0; vertical-align: top;}
#openmujiInfo ul li {margin-bottom: 20px; position: relative; box-sizing: border-box; margin: 20px 2% 0 0;}
#openmujiInfo .threePanels li {width: 32%; height: auto;}
#openmujiInfo ul li:nth-child(3n) {margin-right: 0;}
ul.threePanels a,
.shopInfo a {color: #666;}
#openmujiInfo .shopInfo:after {bottom: 12px;}
#openmujiInfo aside {max-width: 700px; margin: 40px auto;}

@media screen and (max-width : 767px){
  #openmujiInfo .threePanels li {width: 49%;}
  #openmujiInfo ul li:nth-child(3n) {margin-right: 2%;}
  #openmujiInfo ul li:nth-child(2n) {margin-right: 0;}
  #intro .shopDetailwrap,#openmujiInfo .shopDetailwrap {
      max-width: 1024px;
      margin: 0 auto;
      width: 90%;
      display: inline-block;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: baseline;
  }
  .entypo-down-open-shop:before {position: absolute; bottom: 15px;}

  #intro .shopBtn,#openmujiInfo .shopBtn {width: 60%; text-align: right; display: inline-block;}
  #intro .shopDetail,#openmujiInfo .shopDetail {
  border-bottom: 1px solid #DEDEDE;
  width: 100%;
  padding: 16px 0;
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  }
  #intro #S032, #openmujiInfo #S032 {width: 120px; display: inline-block;}
  .select-wrap-shop {width: 100%;}
  #intro .shopBtn a,#openmujiInfo .shopBtn a {padding: 10px 15px;}
  #main #intro .shopDetail .shopDetailwrap h1,#openmujiInfo .shopDetail .shopDetailwrap h1 {width: 44%; margin: 0 0 10px 0; font-weight: bold; display: inline-block;}
  .select-wrap-shop select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  margin: 0;
  padding: 8px 15px;
  background: transparent;
  border: 0;
  outline: none;
  }
}

#openmujiInfo .title {line-height: 1.4;}
#openmujiInfo .shopInfo {
  float: right;
  display: inline-block;
  font-size: 13px;
  padding: 5px 30px 5px 10px;
  border: 1px solid #ddd;
  position: relative;
  margin: -45px 0 20px 0;
 }
#openmujiInfo.shop .shopInfo {margin: 0 0 20px 0;}
#openmujiInfo .shopInfo:after {
  display: block;
  position: absolute;
  bottom: 9px;
  right: 18px;
  width: 7px;
  height: 7px;
  margin: -5px -5px 0 0;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

#openmujiInfo.shop nav {margin-bottom: 20px; font-size: 13px;}
#openmujiInfo.shop nav ul {float: right;}
#openmujiInfo.shop nav ul li {border-right: 1px solid #ddd; padding: 2px 20px 2px 0; margin-right: 20px;}
#openmujiInfo.shop nav ul li:nth-child(3n) {margin-right: 20px;}
#openmujiInfo.shop nav ul li:nth-child(2n) {margin-right: 20px;}
#openmujiInfo.shop nav ul li:last-child {margin-right: 0; padding-right: 0; border: 0;}
#openmujiInfo.shop nav ul li.current a,
#openmujiInfo.shop nav a:hover {opacity: .6;}

#map_canvas {height: 300px;}
.backLink {text-align: center; font-size: 13px; margin: 0 0 40px; clear: both;}


@media screen and (max-width: 413px){
#content .maintenance dl {padding: 0 10px;}
}

@media screen and (max-width: 499px){
    #content .maintenance dl {padding: 0 10px;}
    #openmujiInfo {padding: 40px 0 20px;}
    #intro .shopDetailwrap,#openmujiInfo .shopDetailwrap {
        max-width: 1024px;
        margin: 0 auto 20px;
        width: 90%;
        display: inline-block;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: baseline;
    }
    #intro .shopBtn,#openmujiInfo .shopBtn {width: 100%; text-align: left; overflow: hidden;}
    #intro .shopDetail,#openmujiInfo .shopDetail {
    border-bottom: 1px solid #DEDEDE;
    width: 100%;
    padding: 16px 0;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    }
    .select-wrap-shop {width: 100%;}
    .shopLocation {width: 100%;}
    #intro .shopBtn a,#openmujiInfo .shopBtn a {padding: 10px 15px;}
    #intro #S032,#openmujiInfo #S032 {margin: 18px 0 10px; display: inline-block;}
    #main #intro .shopDetail .shopDetailwrap h1,#openmujiInfo .shopDetail .shopDetailwrap h1 {width: 100%; margin-bottom: 20px;}
    .select-wrap-shop select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
    width: 100%;
    display: block;
    margin: 0;
    padding: 8px 15px;
    background: transparent;
    border: 0;
    outline: none;
    }
    .entypo-down-open-shop:before {bottom: 14px;}
    }


/* 2017/4/10追加　メンテナンス体现用*/
#maintenance {
	max-width: 980px;
	margin: 0 auto 10px;
	background-color: #DCDCDC;
	padding: 10px;
}

#maintenance .maintenance-title {
	color: black;
	font-size: 17px;
}

#maintenance-schedule {
	margin: 10px 0px;
	/*list-style:none;*/
}

#maintenance-schedule span {
	font-size: 14px;
}

#maintenance-schedule .maintenance-top {
	color: black;
}

/* 2017/4/20 add send button */
button {cursor:pointer;}
.button_wait {cursor:wait;}

/* 2017/11/21 add lecturer style */
.lecturer_borderbox {margin-bottom: 40px; padding: 15px 14px; border: 1px solid #dddddd; border-radius:7px;}
.lecturer_borderbox h3 {font-size: 18px; font-weight: bold; margin-bottom: 10px;}
.lecturer_borderbox h4 {font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.lecturer_borderbox h5 {font-size: 14px; font-weight: bold; margin-bottom: 10px;}

.lecturer_borderbox ul.event {margin: 0 -20px 0 0; line-height: 1.6;}
.lecturer_borderbox ul.event li {margin: 0 20px 0 0; vertical-align: top; letter-spacing: normal; display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;}
.lecturer_borderbox ul.event li.img {width: 140px;}
.lecturer_borderbox ul.event .img+li.summary {width: 100%; max-width: 780px;}
.lecturer_borderbox ul.event span.speaker {display: block; font-weight: bold; margin-bottom: 0.5em; font-size: 13px;}
.lecturer_borderbox ul.event span.intro {font-size: 13px; margin-bottom: 10px; display: block;}

div.photo ul.img {margin: 0 -10px 0 0;}
div.photo ul.img li {margin: 0 10px 20px 0; vertical-align: top; letter-spacing: normal; width: 482px; display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;}

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

.lecturer_borderbox {width: 90%; margin: 0 auto;}
.lecturer_borderbox ul.event {width: 100%; padding-left: 0;}
.lecturer_borderbox ul.event li {display: block;}
.lecturer_borderbox ul.event li.img {width: 100%;}
.lecturer_borderbox ul.event li.summary {width: 100%;}
.lecturer_borderbox ul.event li {margin: 0 20px 10px 0;}

div.photo ul.img {padding-left: 0;}
div.photo ul.img li {width: 100%;}
div.photo ul.img li img {width: 100%;}
div.photo {width: 90%; margin: 20px auto;}

}

/* 2017/12/27 add privilege style */
.mainFreeInner h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.mainFreeInner ul.privilege {margin: 0 -10px 30px 0; font-size: 13px;}
.mainFreeInner ul.privilege li {
display: -moz-inline-box; /* Firefox2 */
display: inline-block;
*display: inline; *zoom: 1; /* IE6, IE7 */
margin: 0 10px 20px 0; vertical-align: top; letter-spacing: normal; width: 234px; padding: 10px 10px 10px 10px;}

.mainFreeInner ul.privilege li img {text-align: center;}
.mainFreeInner span.article {display: block; line-height: 1.6; margin-top: 10px;}
.mainFreeInner span.article_ttl {display: block; font-weight: bold; font-size: 112%; margin-top: 5px;}
.mainFreeInner span.notes {display: block; margin-top: 10px;}

.mainFreeInner .sticky {
	background-color: #f5f2e9;
}

.mainFreeInner .privilegeIcon {
	position: relative;
	display: inline-block;
	padding: 3px 10px;
	width: auto;
	color: #FFFFFF;
	text-align: center;
	background: #bbbbbb;
	z-index: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
	margin-top: 10px;
}

.mainFreeInner .privilegeIcon:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #bbbbbb transparent transparent transparent;
}

@media screen and (max-width: 576px) {
	.mainFreeInner {width: 90%; margin: 0 auto;}
	.mainFreeInner ul.privilege {margin: 10px auto; width: 100%;}
	.mainFreeInner ul.privilege li {width: 100%;}
}
<!--耗时1769394432.8443秒-->