@charset "utf-8";
#mainVisual {position:relative; overflow:hidden}
#mainVisual ul.imgList {position:relative; width:1000%}
#mainVisual ul.imgList:after {clear:both; display:block; content:''}
#mainVisual ul.imgList li {position:relative; float:left; height:820px; background-size:cover !important}


#mainVisual ul.imgList li.item1 {background:url(../../img/main_visual1.jpg) center top no-repeat}
#mainVisual ul.imgList li.item2 {background:url(../../img/main_visual2.jpg) center top no-repeat}
#mainVisual ul.imgList li.item3 {background:url(../../img/main_visual3.jpg) center top no-repeat}
#mainVisual ul.imgList li.item4 {background:url(../../img/main_visual4.jpg) center top no-repeat}


#mainVisual ul.imgList li img {display:block; width:100%; height:100%}
#mainVisual ul.imgList li .caption {position:absolute; top:38%; left:50%; width:56%; margin-left:-28%; z-index:30}
#mainVisual ul.imgList li .caption.center {text-align:center}
#mainVisual ul.imgList li .caption h2 {font-size:56px; line-height:1; font-weight:100; color:#fff; margin-bottom:30px}
#mainVisual ul.imgList li .caption h3 {font-size:16px; font-weight:300; color:#fff; line-height:1.75}
#mainVisual .control {position:absolute; top:0; display:block; width:150px; height:100%; text-align:center; z-index:50}
#mainVisual .prev {left:0}
#mainVisual .next {right:0}
#mainVisual .control span {position:relative; display:inline-block; width:50px; height:50px; top:50%; margin-top:-25px; color:#ccc; text-align:center; line-height:55px; border:1px solid rgba(255,255,255,.6); border-radius:50%}
#mainVisual ol.indicator {position:absolute; bottom:20px; left:0; width:100%; text-align:center; z-index:30}
#mainVisual ol.indicator li {position:relative; display:inline-block; line-height:1; margin:0 5px; padding:10px 0; cursor:pointer}
#mainVisual ol.indicator li .dash {position:relative; width:50px; height:2px; background:rgba(128,128,128,.2)}
#mainVisual ol.indicator li .dash .bar {position:absolute; top:0; left:0; width:0; height:100%; background:#fff}
#visualTab {padding-bottom:20px; border-top:4px solid #21bbb1}
#visualTab ol {max-width:1400px; margin:0 auto}
#visualTab ol:after {clear:both; display:block; content:''}
#visualTab ol li {position:relative; float:left; width:25%; padding:20px 30px; text-align:center; cursor:pointer}
#visualTab ol li:after {position:absolute; top:25%; left:0; width:1px; height:75px; content:''; background:#eee}
#visualTab ol li:first-child:after {display:none}
#visualTab ol li h4 {font-weight:500; line-height:1.6; margin-bottom:10px}
#visualTab ol li h4:after {display:block; width:24px; height:1px; margin:10px auto 15px auto; content:''; background:#ddd}
#visualTab ol li p {display:-webkit-box; color:#888; line-height:1.5; height:40px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#visualTab ol li.on h4 {color:#21bbb1}
#visualTab ol li.on h4:after {background:#21bbb1}
#container .mSection {padding:80px 0}
#container .mSection .inner {max-width:1400px; margin:0 auto; padding:0 50px}
#container .mSection .inner .title {max-width:620px; margin:0 auto; padding:0 15px 50px 15px; text-align:center}
#container .mSection .inner .title h2 {font-size:30px; font-weight:500; line-height:1.2}
#container .mSection .inner .title h2:after {display:block; margin:25px auto; width:40px; height:1px; content:''; background:#555}
#container .mSection .inner .title p {font-size:14px; line-height:1.75; color:#444}
#container .mSection.section1 {background:#f4f4f4}
#container .mSection.section1 ul li {position:relative; text-align:center}
#container .mSection.section1 ul li:before {position:absolute; top:0; left:0; width:1px; height:100%; content:''; background:#e8e5e3}
#container .mSection.section1 ul li:first-child:before {display:none}
#container .mSection.section1 ul li p.icon {width:100px; height:100px; margin:0 auto 20px auto}
#container .mSection.section1 ul li p.icon img {display:block; width:100%}
#container .mSection.section1 ul li h3 {font-size:14px; font-weight:400; margin-bottom:15px}
#container .mSection.section1 ul li p.desc {display:-webkit-box; line-height:1.75; height:45px; margin:0 0 35px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#container .mSection.section1 ul li span {display:inline-block; padding:6px 15px; color:#fff; border-radius:2px; background:#0a9188; transition:all .3s ease}
#container .mSection.section1 ul li:hover span {color:#ffdd24}
#container .mSection.section2 {background:url(../../img/mainbanner_bg.jpg) center top no-repeat; background-size:cover}
#container .mSection.section2 .inner {max-width:720px; margin:0 auto; text-align:center}
#container .mSection.section2 .inner h2 {font-size:30px; font-weight:300; color:#fff; line-height:1.3; margin-bottom:20px}
#container .mSection.section2 .inner:hover span {color:#21bbb1; background:#fff}
#container .mSection.section2 .inner span {display:inline-block; color:#ffdd24; line-height:1; padding:15px 40px; border-radius:2px; background:#09655f; transition:all .3s ease}
#container .mSection.section3 .inner ul li {vertical-align:top}
#container .mSection.section3 .inner ul li a {display:block}
#container .mSection.section3 .inner ul li p.img {position:relative; margin-bottom:25px; height:320px; overflow:hidden}
#container .mSection.section3 .inner ul li p.img:before {position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; content:''; border:1px solid #21bbb1; transition:all .3s ease}
#container .mSection.section3 .inner ul li a:hover p.img:before {border-width:8px}
#container .mSection.section3 .inner ul li p.img img {display:block; width:100%; height:100%}
#container .mSection.section3 .inner ul li .text h4 {font-size:16px; font-weight:400; line-height:1.3; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#container .mSection.section3 .inner ul li .text p {display:-webkit-box; line-height:1.75; height:45px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#container .mSection.section3 .inner ul li .text span {display:inline-block; margin-top:25px; color:#6fd0ca}
#container .mSection.section3 .inner ul li .item {margin-bottom:35px; overflow:hidden}
#container .mSection.section3 .inner ul li .item p.img {float:left; width:120px; height:80px; margin:0 !important}
#container .mSection.section3 .inner ul li .item .text {margin-left:140px}
#container .mSection.section4 {padding-bottom:0 !important; background:#f4f4f4}
#container .mSection.section4 .tile_wrap {position:relative; overflow:hidden}
#container .mSection.section4 .tile_wrap .tile {position:relative; float:left; width:25%; overflow:hidden }
#container .mSection.section4 .tile_wrap .tile a {display:block}
#container .mSection.section4 .tile_wrap .tile a:before {position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; content:''; border:1px solid #21bbb1; transition:all .3s ease; z-index:30}
#container .mSection.section4 .tile_wrap .tile img {display:block; width:100%}
#container .mSection.section4 .tile_wrap .tile .caption {position:absolute; top:40px; left:40px; padding-left:10px; border-left:2px solid #fff; z-index:30}
#container .mSection.section4 .tile_wrap .tile .caption h4 {max-width:160px; font-size:16px; font-weight:500; color:#fff; line-height:1.5}
#container .mSection.section4 .tile_wrap .tile .caption p {color:#fff; width:70%; margin-top:10px; opacity:.9; filter:alpha(opacity='90')}
#container .mSection.section4 .tile_wrap .tile .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; filter:alpha(opacity='0'); z-index:20; transition:all .3s ease}
#container .mSection.section4 .tile_wrap .tile:hover .overlay {opacity:.3; filter:alpha(opacity='30')}
#container .mSection.section4 .tile_wrap .tile a:hover:before {border-width:8px}
/* ¹Ìµð¾îÄõ¸® */
@media screen and (max-width:1280px) {
#visualTab {display:none}
#mainVisual ul.imgList li {height:550px}
#mainVisual ul.imgList li .caption {width:76%; margin-left:-38%; top:30%}
#mainVisual .control {width:100px}
}
@media screen and (max-width:1024px) {
#container .mSection.section3 .inner ul.news li {width:48%; margin-bottom:40px}
#container .mSection.section3 .inner ul.news li.last {width:100% !important; margin-bottom:0; padding-top:40px; border-top:1px solid #eee}
#container .mSection.section3 .inner ul li .item {float:left; width:46%; margin:0 2% 35px 1%}
#container .mSection.section4 .tile_wrap .tile .caption {top:20px; left:20px}
#container .mSection.section4 .tile_wrap .tile .caption p {display:none}
}
@media screen and (max-width:768px) {
#mainVisual ul.imgList li {height:450px}
#mainVisual ul.imgList li .caption {width:90%; margin-left:-45%}
#mainVisual ul.imgList li .caption h2 {font-size:27px; margin-bottom:20px}
#mainVisual ul.imgList li .caption h3 {font-size:12px}
#mainVisual .control {display:none}
#container .mSection {padding:50px 0}
#container .mSection .inner .title h2 {font-size:21px}
#container .mSection .inner .title h2:after {width:20px; height:2px; margin:10px auto}
#container .mSection .inner .title p {font-size:12px}
#container .mSection.section1 ul li h3 {font-size:12px}
#container .mSection.section1 ul li p.desc {display:none}
#container .mSection.section1 ul li span {padding:5px 12px; font-size:10px}
#container .mSection.section2 .inner h2 {font-size:15px; margin-bottom:15px}
#container .mSection.section2 .inner span {font-size:11px; font-weight:500; padding:8px 12px}
#container .mSection.section3 .inner ul.news li {width:100% !important; margin:0; padding:40px 0; border-bottom:1px solid #eee}
#container .mSection.section3 .inner ul.news li.last {padding-bottom:0; border-bottom:none}
#container .mSection.section3 .inner ul li .item {float:none; width:100%; margin:0 0 35px 0}
#container .mSection.section3 .inner ul li .text h4 {font-size:15px}
#container .mSection.section3 .inner ul li .text p {font-size:13px; height:auto}
#container .mSection.section3 .inner ul li .text span {margin-top:15px}
#container .mSection.section3 .inner ul li p.img {height:auto}
#container .mSection.section4 .tile_wrap .tile {width:50%}
#container .mSection.section4 .tile_wrap .tile .caption {border-width:1px}
#container .mSection.section4 .tile_wrap .tile .caption h4 {max-width:15%; font-size:13px; word-break:keep-all}
}
@media screen and (max-width:640px) {
#container .mSection .inner {padding:0 30px}
#container .mSection .inner .title {padding:0 0 30px 0}
#container .mSection .inner .title p br {display:none}
#container .mSection.section1 ul li p.icon {width:45%; height:45%}
#container .mSection.section3 .inner ul li .text h4 {font-size:13px !important}
#container .mSection.section3 .inner ul li .text p {font-size:12px !important; line-height:1.5}
#container .mSection.section3 .inner ul li .text span {font-size:11px !important; font-weight:500}
#container .mSection.section3 .inner ul li .item p.img {width:22%; height:auto !important}
#container .mSection.section3 .inner ul li .item .text {margin-left:28%}
}
@media screen and (max-width:480px) {
#mainVisual ul.imgList li {height:300px !important}
#container .mSection.section2 .inner h2 {font-size:13px; font-weight:400; line-height:1.5}
#container .mSection.section2 .inner h2 br {display:none}
}