#menu-area { border-bottom: 0 none; } #container { position: relative; width: 100%; margin: 0; padding: 0; } #content { position: relative; display: block; float: none; width: 100%; margin: 0; padding: 0; } #content h3, #content h4, #content h5 { font-weight: 600; margin: 0; padding: 0; } #content .section { position: relative; } #content .section .area { position: relative; width: 1200px; margin: 0 auto; } #content .section .area .division { position: relative; float: left; } #performance-area { margin-bottom: 30px; padding: 25px 0; background: #afe8e4 url(/images/common/pattern-bg.svg) 0 0 repeat; } #performance-area .area ul.visual li { position: relative; } #performance-area .area ul.visual li img.visual-img { position: relative; z-index: 1; } #performance-area .area ul.visual li div.text { position: absolute; top: 75px; left: 75px; z-index: 2; } #performance-area .area ul.visual li div.text h3 { color: #fff; font-size: 250%; margin-bottom: 20px; } #performance-area .area ul.visual li div.text h3 span { display: block; font-size: 40%; letter-spacing: -.5px; } #performance-area .area ul.visual li div.text p { color: #fff; font-size: 120%; font-weight: 300; text-align: left; } #performance-area .area ul.visual li div.text p span { display: block; text-align: left; } #performance-area .area ul.visual li div.text a.more-btn { display: inline-block; color: #fff; font-size: 80%; font-weight: 600; margin-top: 30px; padding: 10px 30px; background-color: #17c71a; border-radius: 25px; -webkit-border-radius: 25px; } #performance-area .area ul.visual li div.text a.more-btn:hover { color: #fff; background-color: #00ace1; } #performance-area .bx-wrapper, #performance-area .bx-wrapper .bx-viewport { z-index: 1; } #performance-area .bx-wrapper .bx-controls { margin: 0; padding: 0; } #performance-area .bx-wrapper .bx-controls-auto { position: relative; width: 35px; height: 35px; margin: -156px 0 0 0; z-index: 10; } #performance-area .bx-wrapper .bx-controls-auto .bx-controls-auto-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #performance-area .bx-wrapper .bx-controls-auto .bx-controls-auto-item a { width: 35px; width: 35px; background-color: rgba(0,0,0,.6); border-radius: 50%; -webkit-border-radius: 50%; } #performance-area .bx-wrapper .bx-controls-auto .bx-start { text-indent: -9999em; width: 100%; height: 100%; } #performance-area .bx-wrapper .bx-controls-auto .bx-stop { text-indent: -9999em; width: 100%; height: 100%; } #performance-area .bx-wrapper .bx-controls-direction a { top: 45%; height: 66px; background-size: 15px; } #performance-area .bx-wrapper .bx-controls-direction .bx-prev { left: 0; background: rgba(0,0,0,.8) url(/images/common/prev-w-icon.svg) 50% 50% no-repeat; } #performance-area .bx-wrapper .bx-controls-direction .bx-next { right: 0; background: rgba(0,0,0,.8) url(/images/common/next-w-icon.svg) 50% 50% no-repeat; } #performance-area .bx-wrapper .bx-pager { position: relative; color: #fff; font-size: 80%; font-weight: 300; line-height: 40px; margin: -156px 0 0 1px; padding: 10px; border-radius: 25px; -webkit-border-radius: 25px; /*background-color: rgba(0,0,0,.6);*/ z-index: 2; } #performance-area .bx-wrapper .bx-controls a:hover { background-color: #ff6600; } #performance-area .bx-wrapper .bx-pager a { background-color: #fff; border-color: #fff; box-shadow: 0 0 8px #333; } #performance-area .bx-wrapper .bx-pager a:hover, #performance-area .bx-wrapper .bx-pager a.active { background-color: #f3511e; border-color: #f3511e; } #performance-area .yc-about { position: relative; overflow: hidden; width: 1089px; margin: -100px auto 0 auto; background-color: #fff; box-shadow: 0 1px 3px #5f5f5f; z-index: 10; } #performance-area .yc-about ul li { width: 363px; height: 200px; } #performance-area .yc-about ul li a { position: relative; width: 100%; height: 100%; padding: 36px 40px; } #performance-area .yc-about ul li a, #performance-area .yc-about ul li a span { display: block; text-align: left; } #performance-area .yc-about ul li a:before { content: ''; display: block; position: absolute; top: 70px; right: 33px; width: 65px; height: 75px; background-position: 0 0; background-repeat: no-repeat; transition: .3s ease; -webkit-transition: .3s ease; } #performance-area .yc-about ul li.first a:before { background-image: url(/images/open.content/english/main/history-icon.svg); } #performance-area .yc-about ul li.second a:before { background-image: url(/images/open.content/english/main/symbol-icon.svg); } #performance-area .yc-about ul li.third a:before { background-image: url(/images/open.content/english/main/map-icon.svg); } #performance-area .yc-about ul li a:hover:before { transform: scale(1.15); -webkit-transform: scale(1.15); } #performance-area .yc-about ul li a span.title { font-weight: 600; margin-bottom: 25px; } #performance-area .yc-about ul li.first a span.title { color: #FF6600; } #performance-area .yc-about ul li.second a span.title { color: #0FB93B; } #performance-area .yc-about ul li.third a span.title { color: #21B7EF; } #performance-area .yc-about ul li a span.contents { color: #777; font-size: 90%; font-weight: 300; width: 80%; margin-bottom: 30px; } #performance-area .yc-about ul li a span.arrow, #popuplar-area .area ul li a span.arrow { width: 28px; height: 8px; background: url(/images/common/arrow02-g.svg) 0 0 no-repeat; transition: .3s ease; -webkit-transition: .3s ease; } #performance-area .yc-about ul li a:hover span.arrow, #popuplar-area .area ul li a:hover span.arrow { transform: translateX(10px); } #performance-area .yc-about ul li.first a:hover, #performance-area .yc-about ul li.first a:focus { background-color: #fff3e4; } #performance-area .yc-about ul li.second a:hover, #performance-area .yc-about ul li.second a:focus { background-color: #d9ffd2; } #performance-area .yc-about ul li.third a:hover, #performance-area .yc-about ul li.third a:focus { background-color: #e2f7ff; } #performance-area .yc-about ul:after { clear: both; display: block; content: ''; } #popuplar-area .area ul li { overflow: hidden; } #popuplar-area .area ul li.first, #popuplar-area .area ul li.second { width: 319px; height: 256px; margin-right: 17px; } #popuplar-area .area ul li.third { width: 528px; height: 256px; } #popuplar-area .area ul li a, #popuplar-area .area ul li span, #popuplar-area .area ul li span.title strong { display: block; text-align: left; } #popuplar-area { margin-bottom: 50px; } #popuplar-area .area ul li a { position: relative; color: #161616; width: 100%; height: 100%; padding: 30px; } #popuplar-area .area ul li a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 319px; height: 256px; transition: .2s ease; -webkit-transition: .2s ease; z-index: 1; } #popuplar-area .area ul li.third a:before { width: 528px; height: 256px; } #popuplar-area .area ul li.first a:before { background: url(/images/open.content/english/main/festival-bg.jpg) 0 0 no-repeat; } #popuplar-area .area ul li.second a:before { background: url(/images/open.content/english/main/special-products-bg.jpg) 0 0 no-repeat; } #popuplar-area .area ul li.third a:before { background: url(/images/open.content/english/main/mayor-bg.jpg) 0 0 no-repeat; } #popuplar-area .area ul li a span.title { position: relative; font-size: 80%; z-index: 2; } #popuplar-area .area ul li a span.title strong { font-size: 120%; } #popuplar-area .area ul li a span.title span.sub { margin-top: 10px; } #popuplar-area .area ul li a span.arrow { position: absolute; bottom: 30px; left: 30px; z-index: 2; } #popuplar-area .area ul li.second a { color: #fff; } #popuplar-area .area ul li.second span.arrow { background: url(/images/common/arrow02-w.svg) 0 0 no-repeat; } #popuplar-area .area ul li.third a span.title { position: absolute; top: 45px; left: 48px; width: 40%; margin: 0; padding: 0; } #popuplar-area .area ul li a:hover:before, #popuplar-area .area ul li a:focus:before { transform: scale(1.05); } #direct-link { overflow: hidden; padding: 50px 0; background-color: #eaecfa; } #direct-link .area { } #direct-link .area ul li { float: left; width: 182px; margin: 0 10px; } #direct-link .area ul li:first-child { margin-left: 0; } #direct-link .area ul li:last-child { margin-right: 0; } #direct-link .area ul li a { display: block; font-size: 85%; text-align: center; } #direct-link .area ul li a:before { content: ''; display: block; text-align: center; width: 114px; height: 114px; margin: 0 auto 5px auto; background-position: 50% 50%; background-repeat: no-repeat; border-radius: 50%; -webkit-border-radius: 50%; transition: .3s ease; -webkit-transition: .3s ease; } #direct-link .area ul li.general-facts a:before { background-image: url(/images/open.content/english/main/general-facts.svg); } #direct-link .area ul li.tour-course a:before { background-image: url(/images/open.content/english/main/tour-course.svg); } #direct-link .area ul li.weather a:before { background-image: url(/images/open.content/english/main/weather.svg); } #direct-link .area ul li.visa a:before { background-image: url(/images/open.content/english/main/visa.svg); } #direct-link .area ul li.exchange-rate a:before { background-image: url(/images/open.content/english/main/exchange-rate.svg); } #direct-link .area ul li.call-1330 a:before { background-image: url(/images/open.content/english/main/call-1330.svg); } #direct-link .area ul li a:hover:before { background-color: #fff; transform: scale(1.05); -webkit-transform: scale(1.05); } #sightseeing { overflow: hidden; padding: 80px 0; background-color: #fbf9e4; } #sightseeing ul li { position: relative; float: left; width: 600px; height: 300px; } #sightseeing ul li img.title-img, #sightseeing ul li dl { display: inline-block; vertical-align: top; overflow: hidden; width: 50%; height: 100%; } #sightseeing ul li dl { padding: 30px; background-color: #fff; background-position: 90% 90%; background-repeat: no-repeat; } #sightseeing ul li.cultural-heritage dl { background-image: url(/images/open.content/english/main/cultural-heritage-bg.png); } #sightseeing ul li.tourist-attractions dl { background-image: url(/images/open.content/english/main/tourist-attractions-bg.png); } #sightseeing ul li.leisure-sports dl { background-image: url(/images/open.content/english/main/leisure-sports-bg.png); } #sightseeing ul li.tour-course dl { background-image: url(/images/open.content/english/main/tour-course-bg.png); } #sightseeing ul li:before { content: ''; display: block; position: absolute; top: 23px; left: 45%; width: 60px; height: 40px; border-radius: 25px; background-color: #fff; z-index: 2; } #sightseeing ul li dl dt { font-weight: 600; } #sightseeing ul li dl dd { margin-top: 5px; } #sightseeing ul li dl dd a { position: relative; display: inline-block; font-size: 90%; text-align: left; padding-left: 12px; } #sightseeing ul li dl dd a:before { content: ''; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background-color: #f44381; } #popuplar-area .area ul:after, #direct-link .area ul:after, #sightseeing .area ul:after { clear: both; display: block; content: ''; }