@media screen and (max-width: 1680px){ .content-whitebg { padding:0px; } } html, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, div1 { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } ol, ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle } q, blockquote { quotes: none } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none } article, aside, details, figcaption, figure, hgroup, main, menu, nav, section, summary { display: block } #album-header, #schedule-header, #explore-filter, #explore-rel .rel-area, #album-ov, #album-detail, #copyright .copyright-wrap, #itinerary-header, #itinerary-navi .navi-wrap, #itinerary-content, #itinerary-day, #itinerary-remark, #schedule-ov, #explore-ov, #blog-header, #blog-ov, #blog-detail, #news-wrap, #shortcut, #index-info { width: 100%; padding-top: 50px; overflow: hidden } @media (min-width: 700px) { #album-header, #schedule-header, #explore-filter, #explore-rel .rel-area, #album-ov, #album-detail, #copyright .copyright-wrap, #itinerary-header, #itinerary-navi .navi-wrap, #itinerary-content, #itinerary-day, #itinerary-remark, #schedule-ov, #explore-ov, #blog-header, #blog-ov, #blog-detail, #news-wrap, #shortcut, #index-info { padding-top: 60px; /*margin: 0 auto*/ min-width: 600px; max-width: 600px; padding-top: 100px } } @media (min-width: 1100px) { #album-header, #schedule-header, #explore-filter, #explore-rel .rel-area, #album-ov, #album-detail, #copyright .copyright-wrap, #itinerary-header, #itinerary-navi .navi-wrap, #itinerary-content, #itinerary-day, #itinerary-remark, #schedule-ov, #explore-ov, #blog-header, #blog-ov, #blog-detail, #news-wrap, #shortcut, #index-info { width: 85%; min-width: 900px; max-width: 900px; padding-top: 100px } } @media (min-width: 1450px) { #album-header, #schedule-header, #explore-filter, #explore-rel .rel-area, #album-ov, #album-detail, , #copyright .copyright-wrap, #itinerary-header, #itinerary-navi .navi-wrap, #itinerary-content, #itinerary-day, #itinerary-remark, #schedule-ov, #explore-ov, #blog-header, #blog-ov, #blog-detail, #news-wrap, #shortcut, #index-info { width: 75%; max-width: 900px } } #news-update a.more, #other-country a.more { font-size: 0.875rem; height: 30px; line-height: 30px; float: none; padding: 0 0 0 40px; margin: 15px auto; overflow: hidden; width: 120px; border-radius: 5px; text-align: center; color: #999; background: url("../img/icon/more.svg") no-repeat 5px 0 } @media (min-width: 700px) { #news-update a.more, #other-country a.more { position: absolute; right: 6%; top: 0; margin: 0; height: 24px; line-height: 24px; background-position: 5px -3px } } @media (min-width: 1100px) { #news-update a.more, #other-country a.more { width: 1px; height: 24px; line-height: 24px; vertical-align: top; -moz-transition: color 0.3s ease, width 0.3s ease; -o-transition: color 0.3s ease, width 0.3s ease; -webkit-transition: color 0.3s ease, width 0.3s ease; transition: color 0.3s ease, width 0.3s ease } #news-update a.more:hover, #other-country a.more:hover { background-color: #999; color: #fff; border-color: #999; background-position: 5px -33px; width: 120px } } #album-header, #schedule-header, #explore-filter { height: 180px } #album-header h2, #schedule-header h2, #explore-filter h2 { text-align: center; font-weight: 100; font-size: 2rem; color: #efefef; margin-top: 70px } @media (min-width: 1100px) { #album-header, #schedule-header, #explore-filter { height: 55px; background: none } #album-header h2, #schedule-header h2, #explore-filter h2 { display: none; margin-bottom: 0 } } #schedule-header #schedule-header .contact-content .left span input, .contact-content .left span select, .contact-content .left span textarea { display: inline-block; vertical-align: top; word-spacing: 0; height: 40px; line-height: 40px; border: 1px solid #fff; min-width: 150px; padding: 0 10px; border-radius: 5px; background: none; margin: 0; font-size: 1.125rem; font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0.3))); background: -moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3)); background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3)) } #schedule-header .contact-content .left span input.l, .contact-content .left span select.l, .contact-content .left span textarea.l { width: 100% } select.select-l, .contact-content .left span input.select-l, .contact-content .left span select.select-l, .contact-content .left span textarea.select-l { width: 100% } @media (min-width: 1100px) { .contact-content .left span input, .contact-content .left span select, .contact-content .left span textarea { font-size: 0.875rem; font-weight: normal; height: 33px; line-height: 31px; border: 1px solid #fff } } #btn-filter { display: block; width: 50px; height: 50px; overflow: hidden; position: absolute; right: 0; top: 0; text-indent: -9999px; background-color: transparent; z-index: 1200; cursor: pointer } #btn-filter:after { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 625px auto; background-position: -428.5px -53.5px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; display: inline-block; position: absolute; right: 1px; top: 1px } @media (min-width: 700px) { #btn-filter { width: 100px; text-indent: 0; font-size: 0.875rem; line-height: 60px; height: 60px; color: #999 } #btn-filter:after { right: 1px; top: 6px } } @media (min-width: 1100px) { #btn-filter { position: static; width: 125px; float: right; text-indent: 0; line-height: 35px; height: 35px; border-radius: 5px; padding: 0 0 0 15px; color: #fff; font-size: 1rem; opacity: 0.8; background-color: rgba(0, 0, 0, 0.5); margin-top: 20px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #btn-filter:after { position: static; display: inline-block; margin-top: -7px } #btn-filter:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.9) } } #itinerary-content>.explore>a, #explore-ov a { display: block; width: 100%; margin-bottom: 20px; overflow: hidden } #itinerary-content>.explore>a>img, #explore-ov a>img { display: block; width: 88%; height: auto; margin: 0 auto } @media (min-width: 700px) { #itinerary-content>.explore>a>img, #explore-ov a>img { width: 100%; height: auto } } @media (min-width: 1100px) { #itinerary-content>.explore>a, #explore-ov a { margin-bottom: 0; position: relative; float: left; height: 240px } #itinerary-content>.explore>a *, #explore-ov a * { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #itinerary-content>.explore>a>img, #explore-ov a>img { width: auto; height: auto; min-height: 100%; min-width: 100%; -moz-transition: -moz-transform 0.8s ease; -o-transition: -o-transform 0.8s ease; -webkit-transition: -webkit-transform 0.8s ease; transition: transform 0.8s ease } #itinerary-content>.explore>a:hover>img, #explore-ov a:hover>img { -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } } @media (min-width: 1450px) { #itinerary-content>.explore>a, #explore-ov a { height: 300px } } #explore-rel .rel-area>.rel-article blockquote, #itinerary-content .random-article .pop-slide blockquote { color: #333; font-style: italic; padding: 15px 0 0 0; } #explore-rel .rel-area>.rel-article blockquote::after, #itinerary-content .random-article .pop-slide blockquote::after { content: ",,"; display: block; overflow: hidden; width: 100%; font-size: 80px; height: 80px; margin-top: -20px; font-style: normal; font-weight: normal; color: #ccc; text-align: right; } #explore-rel { background: url("../img/explore/bg-rel.png"); min-height: 50px; border-bottom: 1px solid #DADADA; padding-bottom: 30px } #explore-rel .rel-area { padding-top: 0 } #explore-rel .rel-area .rel-schedule { width: 88%; padding: 0 6%; margin: 30px 0 0 0; padding-bottom: 30px; overflow: hidden; float: left } #explore-rel .rel-area .rel-schedule h3 { line-height: 48px; height: 48px } #explore-rel .rel-area .rel-schedule h3:before { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 1000px auto; background-position: 0px 0px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; display: inline-block; margin-right: 10px; padding-top: 0; margin-top: 0 } #explore-rel .rel-area .rel-schedule a { display: block; border-bottom: 1px dotted #aaa; overflow: hidden; padding: 5px 0; width: 100% } #explore-rel .rel-area .rel-schedule a span { display: block; overflow: hidden; float: left; font-weight: 300; width: 200px; font-size: 1rem; color: #333 } #explore-rel .rel-area .rel-schedule a h4 { display: block; overflow: hidden; float: left; font-size: 1rem; font-weight: normal; color: #333 } #explore-rel .rel-area>.rel-article { width: 88%; padding: 0 6%; float: left; overflow: hidden } #explore-rel .rel-area>.rel-article h3 { line-height: 48px; height: 48px } #explore-rel .rel-area>.rel-article h3:before { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 1000px auto; background-position: -100px 0px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; display: inline-block; margin-right: 10px } @media (min-width: 1100px) { #explore-rel .rel-area .rel-schedule { width: 46%; padding: 0 } #explore-rel .rel-area .rel-schedule a:hover * { color: #2697D8 } #explore-rel .rel-area .rel-article { width: 46%; padding: 0; margin: 30px 0 0 8% } } @media (min-width: 1100px) { } #itinerary-content>.rel-article>h3, #itinerary-content>.rel-album>h3 { text-align: center; display: block; overflow: hidden; padding-bottom: 20px } #itinerary-content>.rel-article>h3 span, #itinerary-content>.rel-album>h3 span { font-size: 1.375rem; display: none } @media (min-width: 1100px) { #itinerary-content>.rel-article>h3, #itinerary-content>.rel-album>h3 { float: left; width: 16%; margin: 0; min-height: 220px; color: #fff; font-size: 30px; line-height: 1.3em; text-align: left } #itinerary-content>.rel-article>h3>span, #itinerary-content>.rel-album>h3>span { display: block; font-weight: normal; font-size: 14px; line-height: 1.2em; opacity: 0.6; margin-top: 20px } } #explore-content .more-tag a, #blog-detail article header .infobar .tags a { display: inline-block; border: 1px solid #2389C7; border-radius: 5px; margin: 0 5px 5px 5px; padding: 0 10px; height: 28px; line-height: 28px; font-size: 1rem } @media (min-width: 1100px) { #explore-content .more-tag a:hover, #blog-detail article header .infobar .tags a:hover { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #2389C7; color: #fff } } #schedule-header .filter, #explore-filter .filter { overflow: hidden; width: 88%; padding: 0 6%; height: 100vh; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, rgba(0, 0, 0, 0.85))); background: -moz-linear-gradient(#000000, rgba(0, 0, 0, 0.85)); background: -webkit-linear-gradient(#000000, rgba(0, 0, 0, 0.85)); background: linear-gradient(#000000, rgba(0, 0, 0, 0.85)); position: fixed; z-index: 9990; top: 0; left: 0; -moz-transform: translateY(100vh); -ms-transform: translateY(100vh); -webkit-transform: translateY(100vh); transform: translateY(100vh); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-overflow-scrolling: touch; -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease } #schedule-header .show.filter, #explore-filter .show.filter { overflow-y: auto; -moz-transform: translateY(0vh); -ms-transform: translateY(0vh); -webkit-transform: translateY(0vh); transform: translateY(0vh); -moz-transform: scaleY(100vh); -ms-transform: scaleY(100vh); -webkit-transform: scaleY(100vh); transform: scaleY(100vh) } #schedule-header .filter .filter-close, #explore-filter .filter .filter-close { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 750px auto; background-position: -594px -69px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; cursor: pointer; position: absolute; cursor: pointer; right: 0; top: 0 } @media (min-width: 700px) { #schedule-header .filter .filter-close, #explore-filter .filter .filter-close { right: 4.5% } } @media (min-width: 1100px) { #schedule-header .filter, #explore-filter .filter { width: 40%; padding: 0 30%; padding-top: 15vh } #schedule-header .filter .filter-close, #explore-filter .filter .filter-close { right: 6% } } @media (min-width: 1450px) { #schedule-header .filter, #explore-filter .filter { width: 30%; padding: 0 35% } } #blog-header .blog-search { height: 0; overflow: hidden; width: 100%; position: fixed; top: 50px; -moz-transition: height 0.3s; -o-transition: height 0.3s; -webkit-transition: height 0.3s; transition: height 0.3s } #blog-header .show.blog-search { height: 40px; background-color: #2389C7 } #blog-header .blog-search * { display: block; float: left; height: 40px; line-height: 40px; font-weight: normal; background: none; border-radius: 0 } #blog-header .blog-search form { width: 100%; border-radius: 0; background-color: #2389C7 } #blog-header .blog-search form input { display: block; width: 100%; padding: 0 5%; font-size: 1.125rem; background-color: transparent; border: none; outline: none; color: #FFF; border-radius: 0; -moz-appearance: none; -webkit-appearance: none } #blog-header .blog-search form a { display: none } @media (min-width: 700px) { #blog-header .blog-search { top: 60px } } @media (min-width: 1100px) { #blog-header .blog-search { position: absolute; right: 0; top: 0; height: 40px; width: 300px } #blog-header .blog-search form { text-align: right; background-color: transparent } #blog-header .blog-search form input { display: inline-block; width: 70%; padding: 0 5%; font-size: 1.125rem; background-color: rgba(0, 0, 0, 0.3); color: #aaa; float: right } #blog-header .blog-search form input:focus { background-color: rgba(0, 0, 0, 0.8); color: #fff } #blog-header .blog-search form a { display: block; float: right; width: 20%; background-image: url("../img/icon/icon-search@2x.png"); background-size: 40px auto; background-position: center -80px; background-color: rgba(0, 0, 0, 0.8); background-repeat: no-repeat; text-indent: 9999px; overflow: hidden } #blog-header .blog-search form a:hover { background-color: rgba(255, 255, 255, 0.8); background-position: center 0 } } #album-header.detail { background-color: #555 } #album-header.detail h2 { color: #fff } #album-ov { padding-top: 20px; padding-bottom: 60px } .cover { overflow: hidden; width: 44%; height: 45vw; margin: 0 0 4vw 2%; position: relative; float: left } .cover:nth-of-type(2n+1) { margin: 0 2% 4vw 4% } .cover::before { display: block; content: ""; height: 1px; background-color: rgba(255, 255, 255, 0.3); width: 90%; margin: 0 0 2px 5%; float: left } .cover .img { text-align: center; width: 100%; height: 100%; overflow: hidden; padding-bottom: 2px } .cover .img::before { display: inline-block; content: ""; height: 1px; background-color: rgba(255, 255, 255, 0.3); width: 96%; margin: 0 0 2px 2%; float: left } .cover .img img { display: inline-block; height: 100%; width: auto } .cover>.content { width: 92%; padding: 0 4% 2%; overflow: hidden; position: absolute; left: 0; bottom: 0; color: #fff; background: url("../img/album/bg-album.png") repeat-x left top; background-size: 1px 140% } .cover>.content h3 { display: block; padding: 20px 0 3px 0; font-size: 1rem; line-height: 1.25rem; font-weight: normal } .cover>.content span { display: none; } @media (min-width: 480px) { .cover { width: 30%; height: 30vw; margin: 0 1% 4vw 1%; position: relative; float: left } .cover:nth-of-type(2n+1) { margin: 0 1% 4vw 1% } .cover:nth-of-type(3n+1) { margin: 0 1% 4vw 3% } .cover:nth-of-type(3n+2) { margin: 0 1% 4vw 1% } .cover>.content h3 { padding: 20px 0 6px 0; font-size: 1.125rem; line-height: 1.3rem } .cover>.content span { display: inline-block; width: auto; padding: 0 10px; border: 1px solid #555; background-color: rgba(0, 0, 0, 0.5); font-size: 0.8rem; line-height: 22px; height: 22px; border-radius: 5px; margin-bottom: 5px; font-weight: 300 } } @media (min-width: 768px) { .cover { width: 22%; height: 22vw; margin: 0 1% 3vw 1%; position: relative; float: left } .cover:nth-of-type(2n+1) { margin: 0 1% 3vw 1% } .cover:nth-of-type(3n+1) { margin: 0 1% 3vw 1% } .cover:nth-of-type(3n+2) { margin: 0 1% 3vw 1% } .cover:nth-of-type(4n+1) { margin: 0 1% 3vw 3% } .cover:nth-of-type(4n+2) { margin: 0 1% 3vw 1% } .cover:nth-of-type(4n+3) { margin: 0 1% 3vw 1% } } @media (min-width: 1100px) { .cover { width: 18.4%; height: 15vw; margin: 0 1% 2vw 1% } .cover:nth-of-type(2n+1), .cover:nth-of-type(3n+1), .cover:nth-of-type(3n+2), .cover:nth-of-type(4n+1), .cover:nth-of-type(4n+2), .cover:nth-of-type(4n+3) { margin: 0 1% 2vw 1% } .cover:nth-of-type(5n+1) { margin: 0 1% 2vw 0 } .cover:nth-of-type(5n+2), .cover:nth-of-type(5n+3), .cover:nth-of-type(5n+4) { margin: 0 1% 2vw 1% } .cover:nth-of-type(5n+5) { margin: 0 0 2vw 1% } .cover .img img { -moz-transition: -moz-transform 2.5s ease; -o-transition: -o-transform 2.5s ease; -webkit-transition: -webkit-transform 2.5s ease; transition: transform 2.5s ease } .cover:hover .img img { -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -webkit-transform: translateX(-100px); transform: translateX(-100px) } } @media (min-width: 1450px) { .cover { width: 15%; height: 12vw; margin: 0 1% 1vw 1% } .cover:nth-of-type(2n+1), .cover:nth-of-type(3n+1), .cover:nth-of-type(3n+2), .cover:nth-of-type(4n+1), .cover:nth-of-type(4n+2), .cover:nth-of-type(4n+3), .cover:nth-of-type(5n+1), .cover:nth-of-type(5n+2), .cover:nth-of-type(5n+3), .cover:nth-of-type(5n+4), .cover:nth-of-type(5n+5) { margin: 0 1% 1vw 1% } .cover:nth-of-type(6n+1) { margin: 0 1% 1vw 0 } .cover:nth-of-type(6n+6) { margin: 0 0 1vw 1% } } .album-detail-header { min-height: 30vh; background-color: #ccc; background-size: cover; background-position: center center } @media (min-width: 700px) { .album-detail-header { min-height: 40vh } } @media (min-width: 1100px) { .album-detail-header { margin-bottom: 30px } } html.fixed { overflow-y: hidden; height: 100% } img { -ms-interpolation-mode: bicubic } .btn-bottom { width: 100%; float: left; overflow: hidden; padding-bottom: 50px } .btn-bottom a { display: block; width: 100%; height: 2.5rem; line-height: 2.5rem; background-color: #2389C7; color: #fff; border-radius: 5px; margin: 0 auto; text-align: center } div1, p { font-size: 1rem; font-weight: normal; line-height: 1.4rem; margin-top: 3px; margin-bottom: 20px; letter-spacing:0.2rem } h2, h3, h4, h5, h6 { } h2 { font-size: 1.625rem; font-weight: bold; line-height: 1.8rem } h3 { font-size: 1.375rem; font-weight: bold } h4 { font-size: 1.125rem; font-weight: bold; margin-top: 3px; margin-bottom: 3px; } .colorh4 h4{ color: #4F97BA; margin-top: 10px; margin-bottom: 10px; } h5 { font-size: 1.125rem; font-weight: bold } blockquote, blockquote>p { font-size: 1.125rem; font-weight: bold; line-height: 1.6rem; margin-bottom: 20px; } #page { width: 100%; overflow: hidden; position: absolute } #header { display: block; width: 100%; height: 50px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0.6))); background: -moz-linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)); background: -webkit-linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)); background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)); overflow: hidden; position: absolute; z-index: 1010; -webkit-transform: translateZ(0); top: 0px; left: 0px } #header-wrap { padding-top: 0 } #mobile-btn { height: 50px; width: 50px; position: absolute; top: 0; left: 0; cursor: pointer } #mobile-btn:before { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 1000px auto; background-position: -900px -100px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; margin: 1px 0 0 1px } h1 { display: block; margin: 9px auto; overflow: hidden; width: 170px; height: 32px } h1>a { display: block; width: 100%; height: 100%; text-align: center; background-image: url("../img/layout/sunnyhouse@2x.png"); background-position: center center; background-repeat: no-repeat; background-size: auto 32px; text-indent: -9999px } #desktop-meun { display: none } .edit-area strong { font-weight: bold } } .company-info ul li { display: block; width: 100%; overflow: hidden; color: #333; font-size: 0.875rem; line-height: 1.6rem; text-align: center } .company-info ul li.logo { text-indent: -9999px; background: url("../img/layout/footer-sunnyhouse-gray.png") no-repeat left top; width: 200px; height: 60px; background-size: 100% auto; padding-bottom: 10px; margin: 10px auto } .sitemap>ul { display: none } .sitemap .contact-info { width: 88%; padding: 0 6%; float: left; color: #333; text-align: center } .sitemap .contact-info span { display: inline-block; width: 100%; height: 36px; line-height: 36px; text-align: center; vertical-align: middle; opacity: 0.7 } .sitemap .contact-info span:before { content: ''; display: inline-block; vertical-align: middle; overflow: hidden; background: url("../img/icon/social-bk@2x.svg") no-repeat left 0; background-size: auto 36px; width: 36px; height: 36px; background-position: -380px 0 } .sitemap .contact-info .tel { text-align: center; font-size: 2rem; line-height: 2rem; color: #000; margin-top: 5px } #copyright { width: 100% } #copyright .copyright-wrap { padding-top: 0 } #copyright .copyright-wrap>* { color: #333; opacity: 0.9; font-size: 0.75rem } .social { margin: 20px auto; padding-left: 0 } .social li { display: inline-block; width: 36px; height: 36px; margin: 0 } .social li a { display: block; width: 100%; height: 100%; background: url("../img/icon/social-bk@2x.svg") no-repeat left 0; background-size: auto 36px; text-indent: -9999px; opacity: 0.6; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; -webkit-transition: opacity 0.25s; transition: opacity 0.25s } .social li a.email { background-position: 0 0 } .social li a.forum { background-position: -75px 0 } .social li a.flickr { background-position: -150px 0 } .social li a.facebook { background-position: -225px 0 } .social li a.youtube { background-position: -300px 0 } .social li a:hover { opacity: 1 } .pagination { overflow: hidden; margin: 30px auto; padding: 0; text-align: center } .pagination a { display: inline-block; padding: 0 15px; height: 40px; line-height: 40px; vertical-align: top; color: #333; overflow: hidden; transition: all 0.3s ease } .pagination a:hover, .pagination a:active, .pagination a:focus { color: #fff; background-color: #1173AE } .pagination a span { font-size: 1.25em; display: inline-block; height: 40px; line-height: 40px } .pagination .unavailable, .pagination .unavailable:hover, .pagination .unavailable:active, .pagination .unavailable:focus { cursor: default; border: none; padding: 10px 0; color: #666; background-color: transparent } .pagination .pre { border-right: 1px solid #333; border-radius: 5px 0 0 5px } .pagination .next { border-left: 1px solid #333; border-radius: 0 5px 5px 0 } .pagination a.current { color: #FFF; cursor: default } .jump-menus { display: inline-block; height: 40px; vertical-align: top; line-height: 40px; font-size: 1rem; padding: 0 25px 0 0 } .jump-menus select { font-size: 1.125rem; font-weight: bold; padding: 0 15px; outline: none; border: none; line-height: 40px; height: 40px; margin: 0; display: inline-block; background: none } .jump-menus select:hover, .jump-menus select:active, .jump-menus select:focus { border-color: #AAA } @media (min-width: 700px) { #mobile-btn { height: 60px; width: 60px; background-size: 32px auto } #mobile-btn:before { margin: 6px 0 0 6px } h1 { margin: 12px auto; width: 192px; height: 36px } h1>a { background-size: auto 36px } #header { height: 60px } .btn-bottom a { width: 200px; margin-top: 20px } .company-info { float: left; width: 20%; min-width: 260px } .company-info ul>li { text-align: left } .company-info ul>li.logo { margin: 0 0 10px 0 } .sitemap { width: auto; float: right; margin-right: 6% } .sitemap>ul { float: left; margin: 0 60px 0 0 } .sitemap>ul>li { display: block; width: 100%; text-align: left; margin-bottom: 6px } .sitemap>ul>li>a { color: #333; font-size: 0.875rem; opacity: 0.8 } .sitemap>ul>li>a:hover { opacity: 1 } .sitemap .contact-info { width: auto; float: left } sitemap .contact-info span { text-align: left } .sitemap .contact-info .tel { text-align: left; min-width: 200px } #copyright { padding: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC43NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.6)), color-stop(100%, rgba(255, 255, 255, 0.75))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.75) 100%); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.75) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.75) 100%) } #copyright .copyright-wrap { width: 88%; padding: 0 6% } #copyright .copyright-wrap * { font-size: 0.875rem; display: inline-block; text-align: center; padding: 5px 5px } .social { margin: 20px 0 0 0; padding-left: 0; float: left } } @media (min-width: 1100px) { #mobile-btn { display: none } input, textarea { } p { font-size: 1rem; /*font-weight: bold;*/ line-height: 1.6rem; letter-spacing:0.2rem } p.small { font-size: 0.875rem; line-height: 1.4rem } h2, h3, h4, h5, h6 { } h2 { font-size: 2.2rem; line-height: 2.5rem } h3 { font-size: 1.5rem } h4 { font-size: 1.25rem } h5 { font-size: 1.25rem } blockquote, blockquote>p { font-size: 1.625rem; line-height: 2.2rem } .btn-bottom a { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } .btn-bottom a:hover { background-color: #3A9FDC; width: 240px } .smooth-bg * { -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; -webkit-transition: background 0.3s ease; transition: background 0.3s ease } #header { height: 101px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0))); background: -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)) } h1 { margin: 27px 0; float: left; width: 235px; height: 45px } h1>a { background-size: auto 45px } h2 { } #desktop-meun { display: block; overflow: hidden } #desktop-meun>ul { display: block; float: right; overflow: hidden; margin: 0; padding: 0 } #desktop-meun>ul>li { height: 100%; padding: 0; float: left; margin: 0 0 0 50px } #desktop-meun>ul>li>a { display: block; color: #FFF; height: 100%; line-height: 100px; font-size: 1.125rem; opacity: 0.8 } #desktop-meun>ul>li>a:hover { opacity: 1 } #desktop-meun>ul>li>a.current { font-size: 1.25rem; font-weight: bold; opacity: 1 } #desktop-meun>ul>li>a.current:after { content: ''; display: block; width: 100%; height: 1px; background-color: #fff; margin: -25px 0 0 0 } #desktop-meun>ul>li.icon { width: 35px; margin: 0 0 0 6px } #desktop-meun>ul>li.icon a { text-indent: -9999px; background-image: url("../img/icon/icon-social@2x.png"); background-repeat: no-repeat; background-size: 30px auto; opacity: 0.8; height: 30px; margin: 35px 0 0 0 } #desktop-meun>ul>li.icon a:hover { opacity: 1 } #desktop-meun>ul>li.icon.contact { margin: 0 0 0 60px } #desktop-meun>ul>li.icon.contact a { background-position: center 0 } #desktop-meun>ul>li.icon.facebook a { background-position: center -50px } #desktop-meun>ul>li.icon.english a { background-position: center -100px } .company-info { padding: 0 } .sitemap { margin-right: 0 } .sitemap ul { display: inline-block } .sitemap .contact-info { width: auto; padding: 0 } .copyright-wrap { width: 86%; padding: 8px 7%; min-width: 960px; max-width: 1280px } } @media (min-width: 1450px) { #copyright .copyright-wrap { width: 80%; padding: 8px 10%; max-width: 1480px } } #itinerary-header { text-align: center } #itinerary-header * { display: block; text-align: center; width: 88%; overflow: hidden; margin: 0 auto } #itinerary-header>h2 { line-height: 1.2em; color: #fff; margin: 20px auto 20px auto; text-shadow: 1px 1px 5px #333 } #itinerary-header>h3 { font-size: 1.125rem; line-height: 1.4rem; color: #eee; text-shadow: 1px 1px 5px #333; letter-spacing: 0; font-weight: normal; font-style: italic; margin-bottom: 30px } #itinerary-navi { position: absolute; width: 100% } #itinerary-navi.fixed { position: fixed; top: 0; z-index: 5000 } #itinerary-navi .navi-wrap { -webkit-overflow-scrolling: touch; padding-top: 0; background-color: transparent; height: 50px; background: rgba(0, 0, 0, 0.8); text-align: center; overflow-x: auto } #itinerary-navi .navi-wrap .btn-wrap { width: 500px; text-align: left } #itinerary-navi .navi-wrap .btn-wrap>a { display: inline-block; text-align: left; line-height: 50px; overflow: hidden; padding: 0 8px; color: #CCC } #itinerary-navi .navi-wrap .btn-wrap>a.gotop { display: none } #itinerary-navi .navi-wrap .btn-wrap>a.current { color: #000; font-weight: bold; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0.6))); background: -moz-linear-gradient(#ffffff, rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(#ffffff, rgba(255, 255, 255, 0.6)); background: linear-gradient(#ffffff, rgba(255, 255, 255, 0.6)) } #country { width: 100%; padding-top: 50px } #country a { width: 100%; height: 70vw; display: block; overflow: hidden; float: left; position: relative; margin: 0; background-size: cover } #country a h2 { display: block; width: 100%; text-align: center; font-size: 1.5rem; height: 7rem; line-height: 9.5rem; color: #fff; position: absolute; bottom: 0; left: 0; font-weight: normal; text-shadow: 1px 1px 2px #333; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7))); background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)) } @media (min-width: 700px) { #country { padding-top: 60px } #country a { width: 33.33%; height: 43vh } } @media (min-width: 1100px) { #country { padding-top: 100px } #country a { width: 33.3% } #country a h2 { font-size: 1.75rem; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #country a:hover h2 { font-size: 3rem; height: 100%; line-height: 43vh; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.8))); background: -moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)); background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)); background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)) } } #itinerary-content { background-color: #fff; padding-top: 0; margin-top: 50px } #itinerary-content span.anchor { float: left; width: 100%; height: 0; overflow: hidden } #itinerary-content .theme-title { width: 100%; height: 66vh; min-height: 240px; position: relative; float: left } @media (min-width: 700px) { #itinerary-content .theme-title { min-height: 260px } } @media (min-width: 1100px) { } @media (min-width: 1450px) { } #itinerary-content #choose-tag { overflow: hidden; width: 100% } #itinerary-content #choose-tag li { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0 1px 0; margin-bottom: 1px; float: left; height: 50px } #itinerary-content #choose-tag li:nth-of-type(2n+1) { padding: 0 0 1px 0; margin-bottom: 1px } #itinerary-content #choose-tag li>a { display: block; width: 100%; height: 100%; color: #fff; text-align: center; line-height: 50px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiNDA4ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmNzJhZCIgc3RvcC1vcGFjaXR5PSIwLjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0b408e), color-stop(100%, rgba(15, 114, 173, 0.8))); background: -moz-linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)); background: -webkit-linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)); background: linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)) } #itinerary-content #choose-tag.two>li, #itinerary-content #choose-tag.three>li, #itinerary-content #choose-tag.four>li, #itinerary-content #choose-tag.five>li, #itinerary-content #choose-tag.six>li, #itinerary-content #choose-tag.seven>li, #itinerary-content #choose-tag.eight>li, #itinerary-content #choose-tag.night>li { width: 100%; border-radius: 30px } #itinerary-content>.overview { background-color: #FFF; min-height: 150px; padding-bottom: 30px; overflow: hidden; text-align: center } #itinerary-content>.overview .ov-header { display: block; overflow: hidden } #itinerary-content>.overview .ov-header h2 { display: block; overflow: hidden; width: 88%; margin: 50px auto 10px auto; font-weight: bold; text-align: center } #itinerary-content>.overview .ov-header p { display: block; overflow: hidden; margin: 0 auto 50px auto; width: 88%; text-align: center } #itinerary-content>.overview ol { display: block; overflow: hidden; margin: 0 auto; width: 88%; counter-reset: chapter 0 } #itinerary-content>.overview ol li { display: block; line-height: normal; overflow: hidden; float: left; width: 85%; padding: 10px 5% 10px 15%; border-bottom: 1px solid #DBDBDB; position: relative; min-height: 50px; text-align: left } #itinerary-content>.overview ol li:before { display: block; position: absolute; left: 0; top: 3px; font-size: 42px; font-weight: 300; color: #585857; counter-increment: chapter; content: counter(chapter) "."; margin-right: 20px; height: 100% } #itinerary-content>.overview ol li:nth-of-type(2n) { padding: 10px 0 10px 15% } #itinerary-content>.overview ol li a { display: inline-block } #itinerary-content>.overview .price { display: inline-block; margin: 25px auto 0 auto; font-size: 1.125rem; font-style: italic; border-bottom: 1px dotted #666 } #itinerary-content>.overview .step { display: block; overflow: hidden; margin: 0 auto; width: 88% } #itinerary-content>.overview .step li { display: block; line-height: normal; overflow: hidden; float: left; width: 100%; position: relative; min-height: 50px; padding: 2vw 0 1vw 0 } #itinerary-content>.overview .step li>img { display: block; position: absolute; width: 16%; height: auto } #itinerary-content>.overview .step li span, #itinerary-content>.overview .step li h3, #itinerary-content>.overview .step li p { margin-left: 25%; width: 75%; margin-bottom: 1vw } #itinerary-content>.overview .step li span { display: block; color: #666; font-size: 1.25rem; font-style: italic } #itinerary-content>.overview .step li p { color: #333 } #itinerary-content>.explore { overflow: hidden; width: 100% } #itinerary-content>.explore>a { color: #333 } #itinerary-content>.explore>a>img { width: 100% } #itinerary-content>.more { overflow: hidden; width: 100%; background: url("../img/itinerary/bg-rel-explore.png") repeat } #itinerary-content>.more>a { text-align: center; font-size: 1.125rem; max-width: 260px; padding: 10px; border-radius: 5px; margin: 0 auto 30px auto; box-sizing: border-box; color: #fff; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiNDA4ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBmNzJhZCIgc3RvcC1vcGFjaXR5PSIwLjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0b408e), color-stop(100%, rgba(15, 114, 173, 0.8))); background: -moz-linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)); background: -webkit-linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)); background: linear-gradient(#0b408e, rgba(15, 114, 173, 0.8)) } #itinerary-content>.more>#slide-more ul { display: block; width: 100%; overflow: hidden; margin: 10px auto; padding: 10px 0 } #itinerary-content>.more>#slide-more ul>li { display: block; width: 88%; margin: 2px 6%; text-align: center } #itinerary-content>.more>#slide-more ul>li.title { font-weight: bold; border-bottom: 1px dotted #ccc; padding-bottom: 10px; margin-bottom: 10px; font-size: 1.125rem } #itinerary-content>.more>#slide-more ul>li.title a { color: #fff } #itinerary-content>.more>#slide-more ul>li a { color: #ccc } #itinerary-content>.choose { display: none } #itinerary-content .random-article { background: url("../img/itinerary/bg-day.png") repeat; padding: 30px 0 } #itinerary-content .random-article .pop-slide { width: 70%; margin: 0 auto } #itinerary-content .random-article .pop-slide blockquote { display: block; overflow: hidden } #itinerary-content>.rel-article { overflow: hidden; width: 100%; padding: 30px 0; background-color: #E7E7E7 } #itinerary-content>.rel-article>h3:before { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 1000px auto; background-position: -100px 0px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; text-align: center; display: inline-block; vertical-align: middle } #itinerary-content>.intro { background-color: #EEE; min-height: 700px } #itinerary-content .keynote { display: block; overflow: hidden; list-style: none; width: 100%; padding: 15px 0% } #itinerary-content .keynote li { display: block; width: 100%; min-height: 17vw; margin: 0 0 2% 0; padding: 15px 0; float: left; position: relative; border-bottom: 1px dotted #ccc } #itinerary-content .keynote li:nth-last-of-type(1) { border: none } #itinerary-content .keynote li * { display: block; margin: 0 0 0 30% } #itinerary-content .keynote li img { display: inline-block; width: 45%; max-width: 180px; height: auto; position: absolute; left: 0; top: 0; margin: 0 0 0 -5% } #itinerary-content .keynote li h5 { font-weight: bold; color: #000; text-align: left; margin-bottom: 5px } #itinerary-content .keynote li h5:after { display: none; content: ""; width: 100%; height: 1px; /*background-color: #ccc;*/ margin: 15px 0 } #itinerary-content .keynote li p { color: #444; line-height: 1.2rem } #itinerary-content>.rel-album { background-image: url("../img/itinerary/bg-rel-album.png"); padding: 30px 0 0 0; overflow: hidden; width: 100% } #itinerary-content>.rel-album>h3 { color: #fff } #itinerary-content>.rel-album>h3:before { content: ""; display: block; background-image: url("../img/icon/layout-icon.svg"); background-repeat: no-repeat; background-size: 1000px auto; background-position: -200px -100px; width: 48px; height: 48px; overflow: hidden; vertical-align: top; text-indent: -9999px; text-align: center; display: inline-block; vertical-align: middle } #itinerary-content>.rel-album #slide-album { padding-bottom: 30px } #itinerary-day { padding-top: 0; background: url("../img/itinerary/bg-day.png") repeat } #itinerary-day::before { content: ""; display: block; width: 100%; height: 10px; background: url("../img/itinerary/day-inner-shadow.png") no-repeat center top } #itinerary-day>.day-wrap { width: 100%; padding: 0; overflow: hidden; margin: 30px auto 1px auto } #itinerary-day>.day-wrap::after { content: ""; display: block; float: left; width: 100%; height: 30px; background: url("../img/itinerary/wrap-after.png") no-repeat center top; border-top: 1px solid rgba(231, 231, 231, 0.7); margin-bottom: 0 } #itinerary-day>.day-wrap>.day-count { display: block; overflow: hidden; float: left; width: 135px; min-height: 150px; font-size: 120px; line-height: 120px; text-align: center; font-weight: 100; font-style: italic; color: #333; letter-spacing: -15px; margin-left: -15px } #itinerary-day>.day-wrap>.day-count>em { display: block; font-weight: 300; color: #666; font-size: 21px; height: 38px; line-height: 38px; border-bottom: 1px solid #fff; padding: 0 0 1px 0; letter-spacing: 0; margin: 0 0 0 15px; text-shadow: 1px 1px 1px #fff } #itinerary-day>.day-wrap>.day-count>em::after { content: ""; display: block; width: 100%; height: 1px; overflow: hidden; background-color: #C9C9C9 } #itinerary-day>.day-wrap>.day-content { width: 88%; margin-left: 6%; float: left } #itinerary-day>.day-wrap>.day-content * { display: block; overflow: hidden; text-align: justify } #itinerary-day>.day-wrap>.day-content>blockquote { color: #555; font-size: 1rem; line-height: 1.4rem; } #itinerary-day>.day-wrap>.day-content>h3 { margin: 15px 0; color: #000; font-weight: bold } #itinerary-day>.day-wrap>.day-content>.explore { color: #555; padding: 5px 0; margin: 5px 0 0 0; background-color: #fff; -moz-box-shadow: #eee 0 0 7px; -webkit-box-shadow: #eee 0 0 7px; box-shadow: #eee 0 0 7px } #itinerary-day>.day-wrap>.day-content>.explore a { width: 92%; margin: 0 0 0 4%; padding: 15px 0; float: left; position: relative; overflow: hidden; border-bottom: 1px dotted #ccc; min-height: 50px } #itinerary-day>.day-wrap>.day-content>.explore a img { width: 40%; height: auto; position: absolute; left: 0 } #itinerary-day>.day-wrap>.day-content>.explore a h4 { font-weight: bold; margin: 0 0 0 45%; } #itinerary-day>.day-wrap>.day-content>.explore a h5 { margin: 5px 0 0 45%; color: #666 } #itinerary-day>.day-wrap>.day-content>.explore a p { margin: 5px 0 0 45%; color: #666; display: none } #itinerary-remark { background-color: #fff; padding-top: 50px } @media (min-width: 700px) { #itinerary-content #choose-tag li { padding: 0 0 0 1px; float: left; overflow: hidden; height: 50px } #itinerary-content #choose-tag li:nth-of-type(2n+1) { padding: 0 0 0 1px } #itinerary-content #choose-tag li:first-child { padding: 0 } #itinerary-content #choose-tag.two>li { width: 50%; border-radius: 0 } #itinerary-content #choose-tag.three>li { width: 33.33%; border-radius: 0 } #itinerary-content #choose-tag.four>li { width: 25%; border-radius: 0 } #itinerary-content #choose-tag.five>li { width: 20%; border-radius: 0 } #itinerary-content #choose-tag.six { height: 101px } #itinerary-content #choose-tag.six>li { width: 33.3%; border-radius: 0 } #itinerary-content #choose-tag.seven { height: 101px } #itinerary-content #choose-tag.seven>li { width: 25%; border-radius: 0 } #itinerary-content #choose-tag.seven>li:nth-of-type(5), #itinerary-content #choose-tag.seven>li:nth-of-type(6), #itinerary-content #choose-tag.seven>li:nth-of-type(7) { width: 33.3% } #itinerary-content #choose-tag.seven>li:nth-of-type(5) { padding-left: 0 } #itinerary-content #choose-tag.eight { height: 101px } #itinerary-content #choose-tag.eight>li { width: 25%; border-radius: 0 } #itinerary-content #choose-tag.eight>li:nth-of-type(5) { padding-left: 0 } #itinerary-content #choose-tag.nine { height: 101px } #itinerary-content #choose-tag.nine>li { width: 20%; border-radius: 0 } #itinerary-content #choose-tag.nine>li:nth-of-type(6), #itinerary-content #choose-tag.nine>li:nth-of-type(7), #itinerary-content #choose-tag.nine>li:nth-of-type(8), #itinerary-content #choose-tag.nine>li:nth-of-type(9) { width: 25% } #itinerary-content #choose-tag.nine>li:nth-of-type(6) { padding-left: 0 } #itinerary-content #choose-tag.ten { height: 101px } #itinerary-content #choose-tag.ten>li { width: 20%; border-radius: 0 } #itinerary-content #choose-tag.ten>li:nth-of-type(6) { padding-left: 0 } #itinerary-content>.overview { background-color: #eee; min-height: 150px; padding-bottom: 60px } #itinerary-content>.overview .ov-header h2 { width: 82% } #itinerary-content>.overview .ov-header p { width: 82% } #itinerary-content>.overview ol { width: 82% } #itinerary-content>.overview ol li { display: block; width: 42%; padding: 10px 0 10px 5%; float: left } #itinerary-content>.overview ol li:nth-of-type(2n) { float: right; margin-left: 6%; padding: 10px 0 10px 5% } #itinerary-content>.overview .step { width: 82% } #itinerary-content>.overview .step>li { width: 46%; min-height: auto; padding: 0 0 50px } #itinerary-content>.overview .step>li:nth-of-type(2n) { margin-left: 8% } #itinerary-content>.overview .step>li>img { width: 20% } #itinerary-content>.overview .step>li span, #itinerary-content>.overview .step>li h3, #itinerary-content>.overview .step>li p { margin-left: 30%; width: 70%; margin-bottom: 5px } #itinerary-content>.explore>a { width: 50%; margin-bottom: 20px; float: left; height: 47vw } } @media (min-width: 700px) and (min-width: 840px) { #itinerary-content>.explore>a { width: 33.33%; height: 35vw } } @media (min-width: 700px) { #itinerary-content>.more>ul { width: 33.3%; margin: 0; float: left; margin: 10px 0; border: none } #itinerary-content>.more>ul>li { text-align: center } #itinerary-content .keynote li { width: 47%; min-height: 200px; border: none } #itinerary-content .keynote li:nth-of-type(2n) { margin-left: 6% } #itinerary-content .keynote li * { display: block; margin: 0 0 0 30% } #itinerary-navi .navi-wrap { height: 50px } #itinerary-navi .navi-wrap .btn-wrap { width: 100%; text-align: center; overflow: hidden } #itinerary-navi .navi-wrap .btn-wrap>a { line-height: 50px; padding: 0 20px; min-width: 80px; overflow: hidden; text-align: center } #itinerary-day>.day-wrap { width: 88% } #itinerary-day>.day-wrap>.day-content { width: 72%; margin-left: 0; float: right; min-height: 220px } #itinerary-day>.day-wrap>.day-content>.explore { padding: 10px 0; margin: 30px 0 0 0 } #itinerary-day>.day-wrap>.day-content>.explore a p { display: block } } @media (min-width: 1100px) { #itinerary-header { background-color: transparent; padding: 120px 0 70px 0 } #itinerary-navi .navi-wrap { height: 50px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, rgba(0, 0, 0, 0.6))); background: -moz-linear-gradient(#000000, rgba(0, 0, 0, 0.6)); background: -webkit-linear-gradient(#000000, rgba(0, 0, 0, 0.6)); background: linear-gradient(#000000, rgba(0, 0, 0, 0.6)); overflow: hidden } #itinerary-navi .navi-wrap .btn-wrap>a { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #itinerary-navi .navi-wrap .btn-wrap>a:hover { color: #FFF } #itinerary-content { background-color: #fff; margin-top: 50px } #itinerary-content.ov { background-color: transparent } #itinerary-content #choose-tag { height: 70px } #itinerary-content #choose-tag li { height: 70px } #itinerary-content #choose-tag li>a { line-height: 60px; height: 60px; overflow: hidden; margin-top: 10px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #itinerary-content #choose-tag li>a * { -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #itinerary-content #choose-tag li>a span { line-height: 60px; height: 60px; display: inline-block; margin: 0; padding: 0; overflow: hidden } #itinerary-content #choose-tag li>a strong { display: inline-block; margin: 0; padding: 0; overflow: hidden; height: 60px; line-height: 60px; font-size: 2rem; font-weight: 300; letter-spacing: -1px; font-style: italic; margin: 0 2px 0 0 } #itinerary-content #choose-tag li>a:hover { background-color: rgba(0, 0, 0, 0.9); margin-top: 0; line-height: 70px; height: 70px; opacity: 0.85 } #itinerary-content #choose-tag li>a:hover span { line-height: 70px; height: 70px } #itinerary-content #choose-tag li>a:hover strong { height: 70px; line-height: 70px } #itinerary-content #choose-tag.six, #itinerary-content #choose-tag.seven, #itinerary-content #choose-tag.eight, #itinerary-content #choose-tag.nine, #itinerary-content #choose-tag.ten { height: 101px } #itinerary-content #choose-tag.six>li, #itinerary-content #choose-tag.seven>li, #itinerary-content #choose-tag.eight>li, #itinerary-content #choose-tag.nine>li, #itinerary-content #choose-tag.ten>li { height: 50px } #itinerary-content #choose-tag.six>li a, #itinerary-content #choose-tag.seven>li a, #itinerary-content #choose-tag.eight>li a, #itinerary-content #choose-tag.nine>li a, #itinerary-content #choose-tag.ten>li a { margin-top: 0; height: 50px; line-height: 50px } #itinerary-content #choose-tag.six>li a span, #itinerary-content #choose-tag.seven>li a span, #itinerary-content #choose-tag.eight>li a span, #itinerary-content #choose-tag.nine>li a span, #itinerary-content #choose-tag.ten>li a span { line-height: 50px; height: 50px } #itinerary-content #choose-tag.six>li a strong, #itinerary-content #choose-tag.seven>li a strong, #itinerary-content #choose-tag.eight>li a strong, #itinerary-content #choose-tag.nine>li a strong, #itinerary-content #choose-tag.ten>li a strong { height: 50px; line-height: 50px } #itinerary-content #choose-tag.six>li a:hover, #itinerary-content #choose-tag.seven>li a:hover, #itinerary-content #choose-tag.eight>li a:hover, #itinerary-content #choose-tag.nine>li a:hover, #itinerary-content #choose-tag.ten>li a:hover { line-height: 50px; height: 50px } #itinerary-content #choose-tag.six>li a:hover span, #itinerary-content #choose-tag.seven>li a:hover span, #itinerary-content #choose-tag.eight>li a:hover span, #itinerary-content #choose-tag.nine>li a:hover span, #itinerary-content #choose-tag.ten>li a:hover span { line-height: 50px; height: 50px } #itinerary-content #choose-tag.six>li a:hover strong, #itinerary-content #choose-tag.seven>li a:hover strong, #itinerary-content #choose-tag.eight>li a:hover strong, #itinerary-content #choose-tag.nine>li a:hover strong, #itinerary-content #choose-tag.ten>li a:hover strong { height: 50px; line-height: 50px } #itinerary-content>.overview { background-color: #eee; min-height: 150px; padding-bottom: 60px } #itinerary-content>.overview .ov-header h2 { width: 80% } #itinerary-content>.overview .ov-header p { width: 80% } #itinerary-content>.overview ol { width: 80% } #itinerary-content>.overview .step { width: 80% } #itinerary-content>.explore>a { width: 33.3%; margin-bottom: 0; height: 240px } #itinerary-content>.explore>a:nth-of-type(3n) { width: 33.4% } #itinerary-content>.more { width: 88%; padding: 20px 6%; background-color: #4F4F4F } #itinerary-content>.more>ul { width: 20%; overflow: hidden; float: left; margin: 20px 0 } #itinerary-content>.more>ul>li { text-align: left } #itinerary-content>.more>ul>li a { color: #DDDDDD } #itinerary-content>.more>ul>li a:hover { color: #fff } #itinerary-content>.more>ul>li.title>a { color: #999999 } #itinerary-content>.more>ul>li.title>a:hover { color: #fff } #itinerary-content>.choose { display: block; background-image: url("../img/itinerary/bg-choose.jpg"); width: 100%; overflow: hidden; min-height: 480px; background-size: cover; position: relative } #itinerary-content>.choose>h3 { line-height: 2.2em; color: #fff; text-align: center; margin: 50px auto 20px auto } #itinerary-content>.choose>.itinerary-wrap { width: 86%; text-align: center; overflow: hidden; height: auto; padding-bottom: 30px; margin: 0 auto 80px } #itinerary-content>.choose .customized { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC42Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0.6))); background: -moz-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)); background: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)); background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)); width: 100%; text-align: center; color: #000; line-height: 3.5rem; height: 3.5rem; font-size: 1.25rem; position: absolute; bottom: 0 } #itinerary-content>.choose .customized strong { font-weight: bold; font-size: 1.5rem; margin: 0 20px } #itinerary-content .random-article { border-radius: 0 0 10px 10px; margin-bottom: 50px } #itinerary-content>.rel-article { width: 88%; overflow: hidden; padding: 50px 6%; background: #fff } #itinerary-content>.rel-article>h3 { color: #000 } #itinerary-content>.rel-article>h3>span { color: #000 } #itinerary-content>.rel-article>h3:before { display: block } #itinerary-content>.rel-article #slide-article { width: 83%; float: right } #itinerary-content .keynote { padding: 10px 0% 50px; width: 100%; background-color: #fff } #itinerary-content .keynote li { width: 30%; margin: 0 0 0 5%; min-height: 200px; padding-bottom: 20px; position: static; text-align: center } #itinerary-content .keynote li:nth-of-type(2n) { margin: 0 0 0 5% } #itinerary-content .keynote li:nth-of-type(3n+1) { margin: 0 0 0 0 } #itinerary-content .keynote li * { display: block; margin: 0 auto } #itinerary-content .keynote li img { max-width: 200px; width: 200px; height: auto; position: static; margin: 0 auto } #itinerary-content .keynote li h5 { font-weight: bold; color: #333; text-align: center } #itinerary-content .keynote li h5:after { display: block; width: 30px; margin: 15px auto } #itinerary-content .keynote li p { line-height: 1.4rem; letter-spacing: 0 } #itinerary-content>.rel-album { width: 88.1%; overflow: hidden; padding: 50px 6% 0 6% } #itinerary-content>.rel-album>h3:before { display: block } #itinerary-content>.rel-album #slide-album { width: 82%; float: right } #itinerary-content>.rel-album #slide-album .cover { width: 23.25%; max-height: 220px } #itinerary-content>.rel-album #slide-album .cover:nth-of-type(4), #itinerary-content>.rel-album #slide-album .cover:nth-of-type(8) { margin: 0 0 2vw 1% } #itinerary-content>.rel-album #slide-album .cover:nth-of-type(6), #itinerary-content>.rel-album #slide-album .cover:nth-of-type(7) { margin: 0 1% 2vw 1% } #itinerary-content>.rel-album #slide-album .cover:nth-of-type(5) { margin: 0 1% 2vw 0 } #itinerary-day>.day-wrap { width: 88% } #itinerary-day>.day-wrap>.day-content { width: 82%; float: right } #itinerary-day>.day-wrap>.day-content * { display: block; overflow: hidden } #itinerary-day>.day-wrap>.day-content>blockquote { color: #444; font-size: 1.125rem; line-height: 1.6rem; font-weight: normal } #itinerary-day>.day-wrap>.day-content>h3 { margin: 15px 0; color: #000; font-weight: bold } #itinerary-day>.day-wrap>.day-content>.explore { color: #666666; padding: 20px 0; margin: 30px 0 0 0; background-color: #fff; -moz-box-shadow: #eee 0 0 7px; -webkit-box-shadow: #eee 0 0 7px; box-shadow: #eee 0 0 7px } #itinerary-day>.day-wrap>.day-content>.explore a { width: 28%; margin: 0 0 0 4%; padding-bottom: 15px; float: left; position: static; border: none } #itinerary-day>.day-wrap>.day-content>.explore a img { width: 100%; height: auto; position: static } #itinerary-day>.day-wrap>.day-content>.explore a h4 { font-weight: bold; margin: 5px 0 0 0 } #itinerary-day>.day-wrap>.day-content>.explore a h5 { margin: 5px 0 0 0; color: #666 } #itinerary-day>.day-wrap>.day-content>.explore a p { margin: 5px 0 0 0; color: #666 } } @media (min-width: 1450px) { #itinerary-content>.rel-album #slide-album { width: 79.8% } #itinerary-content>.rel-album #slide-album .cover { width: 23%; max-height: 240px } #itinerary-content>.rel-article #slide-article { width: 81% } #itinerary-content>.overview { background-color: #eee; min-height: 150px; padding-bottom: 60px } #itinerary-content>.overview .ov-header h2 { width: 80% } #itinerary-content>.overview .ov-header p { width: 80% } #itinerary-content>.overview .step>li { width: 45% } #itinerary-content>.overview .step>li:nth-of-type(2n) { margin-left: 10% } #itinerary-content>.overview .step>li>img { width: 20% } #itinerary-content>.overview .step>li span, #itinerary-content>.overview .step>li h3, #itinerary-content>.overview .step>li p { margin-left: 27%; width: 73%; margin-bottom: 5px } #itinerary-content>.explore>a { height: 300px } #itinerary-day>.day-wrap>.day-content { width: 79.5% } #itinerary-day>.day-wrap>.day-content blockquote { font-size: 1.25rem; line-height: 1.8rem } #itinerary-day>.day-wrap>.day-content h3 { font-size: 1.875rem; line-height: 2.2rem } } @media (min-width: 1100px) { #schedule-header #btn-filter { display: none } } @media (min-width: 1100px) { #schedule-header .filter { position: static; height: 60px; padding: 0; margin: 0; background: none; display: block; opacity: 1; width: 100%; min-width: 600px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1) } } #schedule-ov { background-color: #ddd; padding-top: 0 } #schedule-ov ul { display: block; overflow: hidden; width: 88%; padding: 5px 6% 8px 6%; position: relative; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background: -moz-linear-gradient(#ffffff, #eeeeee); background: -webkit-linear-gradient(#ffffff, #eeeeee); background: linear-gradient(#ffffff, #eeeeee); float: left; position: relative } #schedule-ov ul.field-name { display: none } #schedule-ov ul li { display: block; overflow: hidden; float: left; color: #333 } #schedule-ov ul li:nth-of-type(1), #schedule-ov ul li:nth-of-type(2) { display: inline-block; width: auto; font-weight: 300; font-size: 0.875rem } #schedule-ov ul li:nth-of-type(2)::before { content: ' > '; margin: 0 10px } #schedule-ov ul li:nth-of-type(4) { width: 100% } #schedule-ov ul li:nth-of-type(5) { width: 100% } #schedule-ov ul li:nth-of-type(5) a { box-sizing: border-box; height: 26px; border: 1px solid #2389C7; color: #2389C7; line-height: 26px; border-radius: 5px; padding: 0 10px; width: 100%; text-align: center } #schedule-ov ul li:nth-of-type(3) { width: 100%; padding: 0; float: none; font-weight: bold; color: #000; font-size: 1rem } #schedule-ov ul li:nth-of-type(3) a { padding: 0 0 5px 0; vertical-align: middle } #schedule-ov ul li:nth-of-type(3) span { display: inline-block; border-radius: 4px; overflow: hidden; vertical-align: middle; height: 24px; margin: -3px 0 0 10px } #schedule-ov ul li:nth-of-type(3) span img { display: inline-block; height: 100%; width: auto } #schedule-ov ul li>a { display: block; overflow: hidden; height: 100%; float: left; width: 100%; color: #333 } @media (min-width: 960px) { #schedule-ov { background-color: transparent } #schedule-ov ul { padding: 10px 6% } #schedule-ov ul li { line-height: 37px } #schedule-ov ul li:nth-of-type(5) { position: static; height: auto } #schedule-ov ul li:nth-of-type(5) a { height: 31px; line-height: 31px; width: 100%; background-color: rgba(255, 255, 255, 0.2) } #schedule-ov ul li:nth-of-type(1), #schedule-ov ul li:nth-of-type(2) { width: 12%; font-size: 1rem } #schedule-ov ul li:nth-of-type(2)::before { content: none } #schedule-ov ul li:nth-of-type(3) { width: 54%; float: left; padding: 0 } #schedule-ov ul li:nth-of-type(3) a { padding: 0 } #schedule-ov ul li:nth-of-type(4) { position: static; width: 10%; font-size: 0.875rem } #schedule-ov ul li:nth-of-type(5) { position: static; width: 12%; font-size: 0.875rem } } @media (min-width: 1100px) { #schedule-ov { padding-top: 20px; margin-bottom: 50px; border-radius: 0 0 10px 10px } #schedule-ov.anchor { padding-top: 0; margin-bottom: 0; border-radius: 0 } #schedule-ov ul { background-image: url("../img/schedule/bg-schedule.png"); background-repeat: repeat-x; background-position: left 0; background-color: transparent } #schedule-ov ul, #schedule-ov ul * { -moz-transition: color 0.1s; -o-transition: color 0.1s; -webkit-transition: color 0.1s; transition: color 0.1s } #schedule-ov ul.field-name { display: block; height: 30px; padding-top: 0; padding-bottom: 0; background-position: left 0 } #schedule-ov ul.field-name li { font-size: 0.875rem; line-height: 30px; height: 30px; padding-top: 0; padding-bottom: 0; font-weight: normal } #schedule-ov ul:hover { background-position: left -120px } #schedule-ov ul:hover li, #schedule-ov ul:hover * { color: #fff } #schedule-ov ul:hover li:nth-of-type(1), #schedule-ov ul:hover li:nth-of-type(2) { color: #fff } #schedule-ov ul:hover li:nth-of-type(5) a { border: 1px solid #2389C7; background-color: #2389C7; color: #fff } } #explore-filter .filter .filter-area { width: 45%; float: left; overflow: hidden } #explore-filter .filter .filter-category { width: 45%; float: left; margin-left: 10%; overflow: hidden } #explore-filter .filter .filter-area .field-name, #explore-filter .filter .filter-category .field-name { display: block; width: 100%; font-size: 1.25rem; color: #999 } #explore-ov { background-color: #fff; padding-top: 2vw; background-image: url("../img/itinerary/bg-day.png") } #explore-ov.blur { -webkit-filter: blur(10px); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease } #explore-ov a { height: 50vw; margin-bottom: 2vw; position: relative; background-size: cover; background-position: center center } #explore-ov a img { width: 96%; height: auto } #explore-header { background: url("../img/explore/header.png"); text-align: center; padding: 55px 0 4px 0; background-size: auto 100% } #explore-header>h2 { display: block; overflow: hidden; color: #000 } #explore-header>span { display: block; overflow: hidden; color: #585857; font-weight: 300; font-size: 0.8125rem; line-height: 1rem } #explore-gallery { width: 100%; overflow: hidden } #explore-gallery a { display: block } #explore-gallery figure { display: none } #explore-content { background: url("../img/itinerary/bg-day.png"); border-bottom: 1px solid #DADADA; min-height: 200px } #explore-content .content-wrap { width: 88%; padding: 0 6%; padding-top: 15px; padding-bottom: 30px } #explore-content .more-tag { text-align: center } @media (min-width: 700px) { #explore-header { padding: 65px 0 4px 0 } #explore-ov a { height: auto; margin: 0 1% 1% 0; height: 18vw; float: left; width: 32% } #explore-ov a:nth-of-type(3n+1) { margin: 0 1% 1% 1% } #explore-ov a img { min-width: 100%; height: auto } } @media (min-width: 1100px) { #explore-filter { background-image: none } #explore-filter .filter .filter-area { width: 45%; float: left; overflow: hidden } #explore-filter .filter .filter-category { width: 45%; float: left; margin-left: 10%; overflow: hidden } #explore-filter .filter .filter-area .field-name, #explore-filter .filter .filter-category .field-name { display: block; width: 100%; font-size: 1.25rem; color: #999 } #explore-ov { background-color: transparent; background-image: none; padding-top: 20px } #explore-ov a { height: 220px; float: left } #explore-ov a:nth-of-type(6n+1) { width: 28%; margin: 0 0 1% 0 } #explore-ov a:nth-of-type(6n+2) { width: 28%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(6n+3) { width: 42%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(6n+3)>img { width: 100%; height: auto } #explore-ov a:nth-of-type(6n+4) { width: 36%; margin: 0 0 1% 0 } #explore-ov a:nth-of-type(6n+4)>img { width: 100%; height: auto } #explore-ov a:nth-of-type(6n+5) { width: 36%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(6n+5)>img { width: 100%; height: auto } #explore-ov a:nth-of-type(6n+6) { width: 26%; margin: 0 0 1% 1% } #explore-ov a img { min-height: auto; min-width: auto; height: 100%; width: auto } #explore-header { padding: 110px 0 10px 0 } #explore-header>h2 { line-height: 2.2rem } #explore-header>span { color: #585857; line-height: 1rem } #explore-gallery { display: none; overflow: hidden } #explore-gallery figure { text-align: left } #explore-content .content-wrap { width: 60%; margin: 0 auto; padding-top: 40px } #explore-content .content-wrap>p { margin: 20px 0; font-size: 1.375rem; line-height: 2rem } } @media (min-width: 1450px) { #explore-ov a { height: 260px } #explore-ov a:nth-of-type(6n+3)>img { width: auto; height: 100% } #explore-ov a:nth-of-type(6n+4)>img { width: auto; height: 100% } #explore-ov a:nth-of-type(6n+5)>img { width: auto; height: 100% } #explore-ov a:nth-of-type(8n+1) { width: 30%; margin: 0 0 1% 0 } } @media (min-width: 1450px) and (min-width: 1700px) { #explore-ov a:nth-of-type(8n+1)>img { width: 100%; height: auto } } @media (min-width: 1450px) { #explore-ov a:nth-of-type(8n+2) { width: 20%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+3) { width: 25%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+4) { width: 22%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+5) { width: 20%; margin: 0 0 1% 0 } #explore-ov a:nth-of-type(8n+6) { width: 25%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+7) { width: 22%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+8) { width: 30%; margin: 0 0 1% 1% } #explore-ov a:nth-of-type(8n+8)>img { min-height: auto; width: 100%; height: auto } #explore-content .content-wrap { width: 50% } } #blog-header { padding-top: 0; position: relative } #blog-header #btn-s { display: none } #blog-header .blog-nav { width: 100%; display: block; float: left; overflow: scroll; overflow-y: hidden; background-color: rgba(0, 0, 0, 0.6); margin-top: 50px; -webkit-overflow-scrolling: touch } #blog-ov { padding-top: 0 } #blog-ov a { display: block; background: #fff; overflow: hidden; width: 100%; margin: 0; position: relative; border-bottom: 1px solid #ddd; opacity: 0 } #blog-ov a * { display: block; float: left } @media (min-width: 768px) { #blog-ov a { width: 96%; margin: 0 2% 4% 2% } } #blog-ov a .img { background-size: cover; background-position: center center; width: 25%; height: 30vw; overflow: hidden; float: left } #blog-ov a .img img { display: none } @media (min-width: 481px) { #blog-ov a .img { width: 100%; height: auto; min-height: auto; background: none } #blog-ov a .img img { display: block; width: 100%; height: auto } } #blog-ov a .content { width: 65%; overflow: hidden; height: 30vw; float: left; padding: 0 5% } #blog-ov a .content h2, #blog-ov a .content h3 { font-size: 1.0625rem; line-height: 1.25rem; width: 100%; margin-top: 5px; font-weight: bold } #blog-ov a .content span { display: block; width: 100%; font-size: 0.75rem; line-height: 1rem; color: #999; margin: 0 } #blog-ov a .content p { width: 100%; color: #333; line-height: 1rem; font-size: 0.875rem; height: 3rem; overflow: hidden } @media (min-width: 481px) { #blog-ov a .content { width: 84%; height: auto; padding: 5px 6% 12px 8% } #blog-ov a .content h2, #blog-ov a .content h3 { font-size: 1.25rem } #blog-ov a .content p { margin-top: 5px; line-height: 1.4rem; font-size: 1rem; height: auto } } @media (min-width: 700px) { #blog-ov a .content p { margin-top: 10px; line-height: 1.25rem; font-size: 0.875rem; height: auto } } #blog-detail { padding-top: 0; margin: 0 auto } #blog-detail article { display: block; width: 88%; padding: 4% 6%; background-color: #fff; overflow: hidden; float: left } #blog-detail article a { display: inline-block } #blog-detail article header { overflow: hidden; float: left; width: 100%; border-bottom: 1px solid #EBEBEB; padding-bottom: 15px } #blog-detail article header h2 { font-size: 1.75rem } #blog-detail article header .infobar { padding: 20px 0 } #blog-detail article header .infobar>a, #blog-detail article header .infobar span { height: 30px; line-height: 30px; display: block; overflow: hidden; float: left } #blog-detail article header .infobar span { margin: 0 15px } #blog-detail article header .infobar .tags { float: left; width: 100%; overflow: hidden } #blog-detail article header .infobar .tags a:first-child { margin: 0 5px 0 0 } #blog-detail article blockquote { display: block; width: 100%; border-bottom: 1px solid #EBEBEB; margin-bottom: 20px; padding-top: 15px; position: relative; overflow: hidden; min-height: 120px; float: left } #blog-detail article blockquote>img { display: block; width: 120px; border-radius: 60px; height: auto; margin: 0 auto } #blog-detail article blockquote span { display: block; width: 100%; padding: 0; margin: 5px auto 0 5px; text-align: center } #blog-detail article blockquote p { display: block; width: 100%; padding: 10px 0; margin: 0 auto; color: #555; font-size: 1.75rem; letter-spacing: 1px; line-height: 2.2rem } #blog-detail article blockquote p:before { content: ''; width: 50px; background-image: url("../img/blog/bg-blockquote.png"); background-position: center 3px; background-size: 30px auto; height: 30px; background-repeat: no-repeat; display: block; margin: 0 auto; overflow: hidden } #blog-detail article p { display: block; float: left; width: 100%; font-size: 1.25rem; line-height: 2rem; margin-bottom: 30px } #blog-detail article p img { display: block; width: 100%; height: auto } #blog-detail article>img { display: block; width: 100%; height: auto } #blog-detail aside { display: block; width: 100%; float: left; background-color: #fff; background: url("../img/explore/bg-rel.png") } @media (min-width: 700px) { #blog-header .blog-nav { margin-top: 60px } #blog-detail article header h2 { font-size: 2.25rem; line-height: 2.6rem } #blog-detail article blockquote { padding-bottom: 10px } #blog-detail article blockquote>img { width: 120px; border-radius: 60px; height: auto; position: absolute; left: 2% } #blog-detail article blockquote span { width: 73%; padding: 0 0 0 27%; float: right; text-align: left; margin: 0 } #blog-detail article blockquote p { width: 73%; padding: 10px 0 0 27%; text-align: left; float: right } #blog-detail article blockquote p:before { background-position: left 3px; background-size: 30px auto; min-height: 80px; margin: 0; float: left } #blog-detail article p.half img { display: block; float: left; width: 48%; float: left } #blog-detail article p.half img:nth-of-type(2n) { margin-left: 4% } } } @media (min-width: 1100px) { #blog-header { margin-top: 100px; margin-bottom: 20px } #blog-header #btn-s { display: none } #blog-header .blog-nav { padding-top: 0; margin-top: 0; overflow: hidden; background-color: transparent; width: 70% } #blog-header .blog-nav a { padding: 0 20px; border-radius: 5px } #blog-header .blog-nav a.current { border-radius: 0 0 5px 5px } #blog-header .blog-nav a:hover { color: #fff; background-color: rgba(0, 0, 0, 0.5) } #blog-header .blog-search { float: right } #blog-ov { margin-bottom: 30px } #blog-detail { margin: 0 auto 50px auto } #blog-detail article { width: 62%; padding: 3% 5%; min-height: 70vh } #blog-detail article header { display: block; overflow: hidden; margin-bottom: 20px } #blog-detail article header .infobar { height: 30px } #blog-detail article header .infobar>a, #blog-detail article header .infobar span { height: 30px; line-height: 30px } #blog-detail article header .infobar .tags { width: auto } #blog-detail article p { margin-bottom: 30px } #blog-detail aside { width: 25%; float: right; background-image: none; background-color: transparent } } @media (min-width: 1450px) { #blog-detail article blockquote { min-height: 150px } #blog-detail article blockquote>img { width: 130px; border-radius: 65px; left: 5% } #blog-detail article blockquote span { width: 72%; padding: 0 0 0 28% } #blog-detail article blockquote p { width: 72%; padding: 10px 0 0 28% } } #contact-wrap { width: 100%; padding-top: 50px; margin: 0 auto } #contact-wrap header { display: block; width: 100%; min-height: 84px; line-height: 84px; text-align: center; color: #fff } #contact-wrap header h2 { display: inline-block; vertical-align: middle } .contact-content { width: 88%; padding: 0 6%; min-height: 100px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QzZGNkMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d3dcd1), color-stop(100%, #ffffff)); background: -moz-linear-gradient(#d3dcd1, #ffffff); background: -webkit-linear-gradient(#d3dcd1, #ffffff); background: linear-gradient(#d3dcd1, #ffffff); overflow: hidden } .contact-content.success { text-align: center } .contact-content.success p { text-align: center; font-size: 1.125rem; line-height: 2rem } .contact-content .left { width: 100%; float: left; overflow: hidden } .contact-content .left span { display: block; min-height: 33px; line-height: 33px; float: left; vertical-align: middle; width: 100%; font-size: 0.9375rem } .contact-content .left span:nth-of-type(2) { width: 100%; margin-bottom: 10px; padding-bottom: 15px; border-bottom: 1px dotted #ccc } .contact-content .left span.bold { font-size: 1rem; font-weight: bold; line-height: 1.25em; vertical-align: top } .contact-content .left span input { border-color: #CCC; width: 100% } .contact-content .left span select { border-color: #CCC; background: url("../img/schedule/bg-select.png") no-repeat right center; background-size: auto 100% } .contact-content .left span select::-ms-expand { display: none } .contact-content .left span textarea { border-color: #CCC; min-height: 100px; padding-top: 10px; padding-bottom: 10px; width: 90%; font-size: 0.875rem; line-height: 1.125rem } .contact-content .left span input[type="radio"] { display: none } .contact-content .left span input[type="radio"]+label { background: none; color: #666; cursor: pointer; margin-right: 30px } .contact-content .left span input[type="radio"]+label:before { content: ''; display: inline-block; width: 18px; height: 18px; background: url("../img/contact/radio@2x.png") no-repeat center top; background-size: 100% auto; vertical-align: middle; margin: 0 5px 0 0 } .contact-content .left span input[type="radio"]:checked+label { background: none; border: none; color: #333 } .contact-content .left span input[type="radio"]:checked+label:before { background-position: 0 -100px } .contact-content .right { width: 100%; float: left; overflow: hidden; font-size: 0.875rem; color: #333; padding-bottom: 20px } .contact-content .cont-info { border-top: 1px solid #ccc; margin-top: 20px; padding-top: 20px } .contact-content .cont-info strong { font-size: 1.25rem } @media (min-width: 700px) { #contact-wrap { padding-top: 60px } .contact-content { width: 100%; padding: 0; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjg1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.85)), color-stop(100%, #ffffff)); background: -moz-linear-gradient(rgba(255, 255, 255, 0.85), #ffffff); background: -webkit-linear-gradient(rgba(255, 255, 255, 0.85), #ffffff); background: linear-gradient(rgba(255, 255, 255, 0.85), #ffffff) } .contact-content .left { width: 57%; padding: 5% 0 0 7% } .contact-content .left span { width: 25%; margin-bottom: 10px } .contact-content .left span:nth-of-type(2) { width: 75%; margin-bottom: 10px; padding-bottom: 0; border-bottom: none } .contact-content .left span input { width: 50% } .contact-content .left span input[type="radio"] { display: none } .contact-content .left span input[type="radio"]+label { background: none; color: #666; cursor: pointer; margin-right: 0 } .contact-content .left span input[type="radio"]+label:before { margin: 0 5px 0 15px } .contact-content .right { width: 27%; padding: 5% 0 0 2%; text-align: right } } @media (min-width: 1100px) { #contact-wrap { margin: 50px auto; max-width: 860px } #contact-wrap header { background: url("../img/contact/contact-header.png") no-repeat center top; text-align: center; border-radius: 8px 8px 0 0 } #contact-wrap header h2 { font-size: 1.75rem; font-weight: normal } .contact-content { border-radius: 0 0 8px 8px } } @media (min-width: 1450px) { #contact-wrap { margin: 100px auto } } #news-wrap a { display: inline-block; width: 100%; float: left; color: #333; margin: 0 0 2vw 0; padding-bottom: 15px } #news-wrap a img { display: inline-block; width: 100%; height: auto } #news-wrap a .text-info { display: block; padding: 0 6%; width: 88% } #news-wrap a .text-info h2 { font-size: 1.25rem; line-height: 1.5rem; margin-bottom: 5px; } #news-wrap a .text-info span { font-size: 0.8125rem; color: #666; letter-spacing: 1px; font-weight: 300 } #news-wrap a .text-info p { font-size: 0.875rem; line-height: 1.2rem } @media (min-width: 700px) { #news-wrap a { width: 30.3%; margin: 0 1.5% 2vw 1.5%; overflow: hidden; height: 40vw } #news-wrap a .text-info { padding: 0; width: 100% } } @media (min-width: 860px) { #news-wrap a { width: 30.3%; margin: 0 1.5% 2vw 1.5%; overflow: hidden; height: 34vw } } @media (min-width: 1100px) { #news-wrap a { width: 23%; margin: 0 0% 3vw 2.33%; border-bottom: 1px solid #ddd; height: 27vw } #news-wrap a:nth-of-type(4n+1) { margin: 0 0% 2vw 0 } #news-wrap a .text-info { padding: 0; width: 90% } } @media (min-width: 1450px) { #news-wrap a { width: 19%; margin: 0 0 2vw 1.25%; height: 20vw } #news-wrap a:nth-of-type(4n+1) { margin: 0 0% 2vw 1.25% } #news-wrap a:nth-of-type(5n+1) { margin: 0 0 2vw 0 } } #blog-detail.news { padding-top: 50px } @media (min-width: 1100px) { #blog-detail.news { padding-top: 60px } } @media (min-width: 1100px) { #blog-detail.news { padding-top: 100px } } .rel-file a { display: block; width: 100%; padding: 10px 0; border-bottom: 1px dotted #999 } @-webkit-keyframes justified-gallery-show-caption-animation { from { opacity: 0 } to { opacity: 0.7 } } @-moz-keyframes justified-gallery-show-caption-animation { from { opacity: 0 } to { opacity: 0.7 } } @-o-keyframes justified-gallery-show-caption-animation { from { opacity: 0 } to { opacity: 0.7 } } @keyframes justified-gallery-show-caption-animation { from { opacity: 0 } to { opacity: 0.7 } } @-webkit-keyframes justified-gallery-show-entry-animation { from { opacity: 0 } to { opacity: 1.0 } } @-moz-keyframes justified-gallery-show-entry-animation { from { opacity: 0 } to { opacity: 1.0 } } @-o-keyframes justified-gallery-show-entry-animation { from { opacity: 0 } to { opacity: 1.0 } } @keyframes justified-gallery-show-entry-animation { from { opacity: 0 } to { opacity: 1.0 } } .justified-gallery { width: 100%; position: relative; overflow: hidden } .justified-gallery>a>img, .justified-gallery>a>a>img { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; border: none } .justified-gallery>a>.caption { display: none; position: absolute; bottom: 0; padding: 5px; background-color: #000000; left: 0; right: 0; margin: 0; color: white; font-size: 12px; font-weight: 300; } .justified-gallery>a>.caption.caption-visible { display: initial; opacity: 0.7; filter: "alpha(opacity=70)"; -webkit-animation: justified-gallery-show-caption-animation 500ms 0 ease; -moz-animation: justified-gallery-show-caption-animation 500ms 0 ease; -ms-animation: justified-gallery-show-caption-animation 500ms 0 ease } .justified-gallery>.entry-visible { opacity: 1.0; filter: alpha(opacity=100); -webkit-animation: justified-gallery-show-entry-animation 500ms 0 ease; -moz-animation: justified-gallery-show-entry-animation 500ms 0 ease; -ms-animation: justified-gallery-show-entry-animation 500ms 0 ease } .justified-gallery>.spinner { position: absolute; bottom: 0; margin-left: -24px; padding: 10px 0 10px 0; left: 50%; opacity: initial; filter: initial; overflow: initial } .justified-gallery>.spinner>span { display: inline-block; opacity: 0; filter: alpha(opacity=0); width: 8px; height: 8px; margin: 0 4px 0 4px; background-color: #000; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px } #page.index { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(100%, #ffffff)); background: -moz-linear-gradient(#e0e0e0, #ffffff); background: -webkit-linear-gradient(#e0e0e0, #ffffff); background: linear-gradient(#e0e0e0, #ffffff) } #banner { width: 100%; background-color: #333; overflow: hidden; padding-top: 50px; min-height: 56vh } #banner a { position: relative; overflow: hidden; min-height: 56vh; background-size: cover; background-position: top center } #banner a>img { display: none } #banner h2 { display: none; position: absolute; left: 12%; top: 36%; margin: 0; width: auto } #banner .title { position: absolute; left: 15%; bottom: 10%; width: 70%; overflow: hidden } #banner .title img { display: block; width: 100%; height: auto } @media (min-width: 700px) { #banner { padding-top: 60px; min-height: 60vh } #banner a { min-height: 60vh } #banner .title { right: auto; left: 25%; bottom: 15%; width: 50%; text-align: center } } @media (min-width: 900px) { #banner .title { right: auto; left: 30%; bottom: 10%; width: 40% } } @media (min-width: 1100px) { #banner { padding-top: 0; margin-top: 0; min-height: 80vh } #banner a { min-height: 80vh } #banner .title { top: 25%; width: 22% } #banner .title.style-1 { left: 16% } #banner .title.style-2 { left: 39% } #banner .title.style-3 { left: 62% } #banner .title.style-4 { top: 31%; left: 16% } #banner .title.style-5 { top: 31%; left: 39% } #banner .title.style-6 { top: 31%; left: 62% } #banner .title.style-7 { top: auto; left: 16%; bottom: 8% } #banner .title.style-8 { top: auto; left: 39%; bottom: 8% } #banner .title.style-9 { top: auto; left: 62%; bottom: 8% } } @media (min-width: 1450px) { #banner { min-height: 88vh } #banner a { min-height: 88vh } } #shortcut { padding: 0; overflow: hidden } #shortcut a { display: block; overflow: hidden; width: 100%; float: left; position: relative; padding: 0; margin: 0 } #shortcut a img { display: block; width: 100%; height: auto } #shortcut a h3 { display: none } @media (min-width: 700px) { #shortcut a { width: 50% } } @media (min-width: 800px) { #shortcut a { width: 33.33% } #shortcut a:nth-of-type(4) { display: none } } @media (min-width: 1100px) { #shortcut a { width: 24.6%; margin: 5px 0 0 0.4vw } #shortcut a:first-child { margin: 5px 0 0 0 } #shortcut a:nth-of-type(4) { display: block } } #index-info { padding-top: 30px; padding-bottom: 30px } @media (min-width: 1100px) { } #news-update { position: relative } #news-update a { width: 100%; padding: 5px 0; border-bottom: 1px dotted #ccc } #news-update a.more { border: none; border-bottom: 1px solid #ccc } #news-update a:nth-last-of-type(2) { margin-bottom: 15px } #news-update a span { width: 100px; display: inline-block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 300; letter-spacing: 1px } #news-update a h5 { display: inline-block; width: auto; font-size: 1rem; font-weight: normal; color: #666; line-height: 1.25rem } @media (min-width: 1100px) { #news-update a { width: 90% } #news-update a.more { right: 10% } } #other-country { position: relative } #other-country a { width: 40vw; height: 40vw; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; position: relative; border: 1px solid #E7E7E7; margin: 20px 2vw 0 0; background-color: #fff; float: left } #other-country a:nth-of-type(2n) { margin: 20px 0 0 1vw } #other-country a.more { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; border: none; border-bottom: 1px solid #ccc } #other-country a:nth-last-of-type(2) { margin-bottom: 15px } #other-country a h5 { display: block; position: absolute; width: 100%; background-color: rgba(255, 255, 255, 0.8); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0.7))); background: -moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); background: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); font-size: 0.9375rem; line-height: 2rem; text-align: center; height: 15vw; margin: 64% 0 0 0; color: #000 } #other-country a img { display: block; width: 34vw; height: 34vw; border-radius: 50%; margin: 3vw 0 0 3vw; box-shadow: 0 0 10px #ccc } @media (min-width: 700px) { #other-country a { width: 20vw; height: 20vw; margin: 20px 2vw 0 0 } #other-country a:nth-of-type(2), #other-country a:nth-of-type(3), #other-country a:nth-of-type(2n) { margin: 20px 2vw 0 0 } #other-country a:nth-of-type(4) { margin: 20px 0 0 0 } #other-country a:nth-last-of-type(2) { margin-bottom: 0 } #other-country a img { width: 16vw; height: 16vw; margin: 2vw 0 0 2vw } } @media (min-width: 1100px) { #other-country a { width: 12vw; height: 12vw; margin: 20px 2vw 0 0 } #other-country a:nth-of-type(2), #other-country a:nth-of-type(3), #other-country a:nth-of-type(2n) { margin: 20px 2vw 0 0 } #other-country a:nth-of-type(4) { display: none } #other-country a.more { right: 0 } #other-country a img { width: 10vw; height: 10vw; margin: 0.9vw 0 0 1vw } } @media (min-width: 1450px) { #other-country a { width: 9vw; height: 9vw; margin: 20px 0.8vw 0 0 } #other-country a:nth-of-type(2), #other-country a:nth-of-type(3), #other-country a:nth-of-type(2n) { margin: 20px 0.8vw 0 0 } #other-country a:nth-of-type(4) { margin: 20px 0 0 0; display: block } #other-country a img { width: 7.4vw; height: 7.4vw; margin: 0.75vw 0 0 0.8vw } } .slick-dots { position: absolute; z-index: 999; bottom: 0; left: 0; width: 100%; text-align: center; height: 30px } .slick-dots li { display: inline-block; overflow: hidden; opacity: 0.5 } .slick-dots li button { display: inline-block; background: none; outline: none; border: none; padding: 0; margin: 2px 8px; width: 8px; height: 8px; border-radius: 4px; background-color: #fff; text-indent: -9999px; overflow: hidden; cursor: pointer } .slick-dots li.slick-active { opacity: 1 } .slick-dots li.slick-active button { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 6px } .about { float: left; width: 100%; background-color: #fff } .about article { display: block; overflow: hidden } .square { display: block; font-size: 1.6rem; line-height: 1em; box-sizing: border-box; padding: 20px } .article { width: 88%; margin: 30px auto 20px auto; overflow: hidden } .article p { display: block; margin-bottom: 1em } .right-width { width: 100% } .founder header { display: block; overflow: hidden; padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid #464646 } .founder header h1 { display: block; font-size: 1.5rem; width: 100%; height: auto; line-height: 1.25em; margin: 0 0 0.25em 0; font-weight: bold; float: left } .founder header p { display: block; width: 100%; font-size: 1.25rem; margin: 0 0 0.5em 0; float: left; color: #525252 } .founder .wrap-right { float: left } .founder .founder-info { width: 100%; max-width: 400px; float: right; margin: 0; overflow: hidden } .founder .founder-info .square { width: 50%; height: 42vw; float: left; border: 1px solid #535353; color: #666; max-height: 190px } .founder .founder-info img { display: block; width: 50%; height: auto; float: left } .founder .founder-info strong { font-size: 1.25em; font-weight: bold } .founder .founder-info .lee { display: block; box-sizing: border-box; width: 100%; padding: 20px 0 0 0; text-align: right; overflow: hidden; float: right } .block-story { background-size: cover; background-repeat: no-repeat; background-position: center top; height: 70vw; max-height: 240px } .block-story blockquote { display: block; float: right; overflow: hidden; margin-top: 3vh } .block-story blockquote h2 { font-size: 1.5rem; margin: 0 0 0.25em 0; line-height: 1.25em } .block-story blockquote p { font-size: 1.125rem; font-weight: normal; opacity: 0.8; } .block-story .square { display: none } .story { display: block; padding-bottom: 50px } .story .features-sunnyhouse { width: 100% } .story .features-sunnyhouse li { display: block; box-sizing: border-box; margin-bottom: 1vh; padding-bottom: 1vh; border-bottom: 1px dotted #666; padding-left: 50px; float: left; width: 100%; background: url("../img/about/icon-about.png") no-repeat left 0; background-size: 40px auto } .story .features-sunnyhouse li:nth-of-type(2) { background-position: left -60px } .story .features-sunnyhouse li:nth-of-type(3) { background-position: left -120px; margin-right: 0 } .story .features-sunnyhouse li strong { font-weight: bold; font-size: 1.125rem } .story .features-sunnyhouse li p { margin: 0 } @media (min-width: 720px) { .article { width: 80% } .story .features-sunnyhouse { width: 100% } .story .features-sunnyhouse li { width: 33.33%; border: none } } @media (min-width: 1000px) { .square { font-size: 2.8em; width: 240px; height: 240px; padding: 30px } .article { width: 90%; margin: 60px auto 20px auto } .article p { margin-bottom: 2em } .right-width { width: 64% } .founder header h1 { font-size: 2rem } .founder .wrap-right { float: right } .founder .founder-info { width: 240px; float: left } .founder .founder-info .square { border-bottom: none; width: 240px; height: 240px; max-height: 240px } .founder .founder-info img { width: 100% } .founder .founder-info strong { font-size: 1.25em; font-weight: bold } .founder .founder-info .lee { width: 100%; padding: 30px; text-align: left } .block-story { max-height: 400px; height: 40vh } .block-story blockquote { margin-top: 10vh } .block-story blockquote h2 { font-size: 2rem } .block-story blockquote p { font-size: 1.25rem } .block-story .square { display: block; color: #fff; border: 1px solid #fff; margin-top: 5vh } .story { display: block; padding-bottom: 50px } .story .features-sunnyhouse { width: 60%; min-width: 720px; margin: 0 auto } .story .features-sunnyhouse li { display: block; box-sizing: border-box; padding-left: 50px; float: left; width: 26%; margin-right: 11%; background: url("../img/about/icon-about.png") no-repeat left 0; background-size: 40px auto } .story .features-sunnyhouse li:nth-of-type(2) { background-position: left -60px } .story .features-sunnyhouse li:nth-of-type(3) { background-position: left -120px; margin-right: 0 } .story .features-sunnyhouse li strong { font-weight: bold; font-size: 1.125rem } .story .features-sunnyhouse li p { margin: 0 } } @media (min-width: 1100px) { .article { max-width: 1200px } } @media (min-width: 1200px) { .right-width { width: 70% } } @media (min-width: 1450px) { .right-width { width: 70% } } #mobile-meun { display: block; width: 270px; overflow: hidden; overflow-y: auto; position: absolute; min-height: 100vh; -webkit-overflow-scrolling: touch; top: 0; margin: 0; z-index: 999; background-color: #333; -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; -moz-transform: translateX(-270px); -ms-transform: translateX(-270px); -webkit-transform: translateX(-270px); transform: translateX(-270px) } #mobile-meun ul { display: block; overflow: hidden; width: 100% } #mobile-meun ul li { display: block; overflow: hidden; width: 100%; float: left; height: 55px; padding: 0; border-bottom: 1px solid #444 } #mobile-meun ul li a { display: block; overflow: hidden; width: 80%; height: 100%; padding: 0 10%; line-height: 55px; font-size: 1.125rem; color: #fff; } #mobile-meun ul li.menu-more { border-bottom: none; padding: 0; margin: 0; height: 45px; background-color: #333 } #mobile-meun ul li.menu-more a span { display: inline-block; line-height: 45px; height: 45px; font-size: 1rem; color: #ccc; vertical-align: top } #mobile-meun ul li.menu-more a:before { content: ""; display: inline-block; height: 45px; width: 45px; background: url("../img/icon/social-bk@2x.svg") no-repeat left center; background-size: auto 36px; margin-right: 10px } #mobile-meun ul li.album a:before { background-position: -525px center } #mobile-meun ul li.news { margin-top: 15px } #mobile-meun ul li.news a:before { background-position: -450px center } #mobile-meun ul li.contact a:before { background-position: -600px center } #mobile-meun.open { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); overflow-y: scroll } #page { -moz-transition: -moz-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease } #page.push-to-right { -moz-transform: translateX(270px); -ms-transform: translateX(270px); -webkit-transform: translateX(270px); transform: translateX(270px) } .closemenu { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; bottom: 0; z-index: 998; overflow: hidden } .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; left: 0; top: 0; display: block } .slick-track:before, .slick-track:after { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { float: left; height: 100%; min-height: 1px; display: none } [dir="rtl"] .slick-slide { float: right } .slick-slide img { display: block; width: 100%; height: auto } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-prev { display: block; position: absolute; width: 60px; height: 60px; left: 50px; top: 50%; outline: none; background: transparent; border: none; background: url("../img/default-skin/arrow.svg") no-repeat center top; margin: -30px 0 0 0; cursor: pointer; -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; text-indent: -9999px; overflow: hidden } .slick-next { display: block; position: absolute; width: 60px; height: 60px; right: 50px; top: 50%; outline: none; background: transparent; border: none; background: url("../img/default-skin/arrow.svg") no-repeat center -100px; margin: -30px 0 0 0; cursor: pointer; -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s; text-indent: -9999px; overflow: hidden } .slick-prev:hover, .slick-next:hover { background-color: rgba(0, 0, 0, 0.5); width: 80px; height: 80px; margin: -40px 0 0 0 } .slick-prev:hover { background-position: center 10px; left: 40px } .slick-next:hover { background-position: center -90px; right: 40px }