@charset "utf-8";
@import url(../font/NotoSansKr/font.css);
@import url(../font/frank-ruhl-libre-v3-latin/font.css);
body, input {font-family:"Noto Sans KR","돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}

.visual,
.visual .slogon,
.visual .slogon p,
.visual .slogon img
{
	transition : all 0.4s ease;
	-webkit-transition : all 0.4s ease;
}


/* visual */
.visual {width:100%; height:470px; overflow:hidden; position:relative; background:#e1ebef;}
.visual .slogon {position:relative; z-index:10; max-width:1260px; margin:0 auto; margin-top:60px;}
.visual .slogon img {display:block; margin:20px 0;} 
.visual .slogon p {color:#646768; line-height:18px; font-size:14px; font-weight:normal;}
.visual .slogon p.txt1 {color:#333; font-size:19px; font-weight:600; line-height:24px;}
.visual .control {position:absolute; left:50%; top:285px; z-index:10; margin-left:-630px;}
.visual .control a[class*="btn_"] {display:none; width:20px; height:20px; overflow:hidden; text-indent:-9999px;}
.visual .control a.btn_stop {background:url(../images/main/infozone_stop.png) no-repeat center 50%;}
.visual .control a.btn_play {background:url(../images/main/infozone_play.png) no-repeat center 50%;}
.visual .control ul {width:auto; text-align:center; display:inline-block; vertical-align:top; margin-top:5px;}
.visual .control ul li {display:inline-block; vertical-align:top; margin:0 2px;}
.visual .control ul li a {display:block; width:15px; height:10px; text-indent:-9999px; overflow:hidden; background:#b3c1c6; 
border-radius:5px; -webkit-border-radius:5px; transition : all 0.4s ease; -webkit-transition : all 0.4s ease;}
.visual .control ul li a.on {width:30px; background:#86b1c2;}
.visual .move {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:5;}
.visual .move ul {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%;}
.visual .move ul li {position:absolute; left:100%; top:0; width:100%; height:100%; display:none;}
.visual .move ul li:first-child {left:0; display:block;}
.visual .move ul li:after {content:""; display:block; max-width:1260px; margin:0 auto; height:100%; }
.visual .move ul li.bg1:after {background:url(../images/main/visual_bg1.png) no-repeat right 20px;}
.visual .move ul li.bg2:after {background:url(../images/main/visual_bg2.png) no-repeat 92% 60px;}
.visual .move ul li.bg3:after {background:url(../images/main/visual_bg3.png) no-repeat right 70px;}
.visual .move ul li.bg4:after {background:url(../images/main/visual_bg4.png) no-repeat right 50px;}


/* section01 */
.section01,
.section01 h3,
.section01 .business ul li a,
.section01 .business ul li a:after,
.section01 .business ul li a h3:before,
.section01 .news ul li p,
.section01 .news ul li p.photo img,
.section01 .news .more_btn,
.section01 .prmovie ul li p.photo img,
.section01 .prmovie ul li p.photo:after,
.section01 .prmovie .more_btn
{
	transition : all 0.4s ease;
	-webkit-transition : all 0.4s ease;
}

.section01 {width:auto; height:auto; padding:0 0 60px 0;}		
.section01 h3 {margin:0 0 15px 0; font-family: 'Frank Ruhl Libre'; font-size:35px; line-height:39px;}
.section01 .business {background:#fff; float:left; width:100%; margin-top:-95px; margin-bottom:50px; position:relative; z-index:51; box-shadow:0 5px 25px rgba(0,0,0,0.1); -webkit-box-shadow:0 5px 25px rgba(0,0,0,0.1);}
.section01 .business ul {width:100%;}
.section01 .business ul:after {content:""; display:block; clear:both;}
.section01 .business ul li {float:left; width:25%;}
.section01 .business ul li a {display:table; width:100%; height:165px; table-layout:fixed; word-wrap:break-word; text-decoration:none; position:relative;}
.section01 .business ul li a:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:#fff;}
.section01 .business ul li a h3 {display:table-cell; position:relative; z-index:51; margin:0; vertical-align:middle; color:#5b5b5b; width:100%; text-align:center; font-size:16px; font-weight:normal; line-height:20px; font-family:"Noto Sans KR","돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
.section01 .business ul li a h3:after {content:""; display:block; width:1px; height:90px; background:#e5e5e5; position:absolute; z-index:1; right:0; top:50%; margin-top:-45px;}
.section01 .business ul li.bn04 a h3:after {display:none;}
.section01 .business ul li a h3:before {content:""; display:block; width:100%; height:62px; margin-bottom:10px;}
.section01 .business ul li.bn01 a h3:before {background:url(../images/main/business_ico1.png) no-repeat center 50%;}
.section01 .business ul li.bn02 a h3:before {background:url(../images/main/business_ico2.png) no-repeat center 50%;}
.section01 .business ul li.bn03 a h3:before {background:url(../images/main/business_ico3.png) no-repeat center 50%;}
.section01 .business ul li.bn04 a h3:before {background:url(../images/main/business_ico4.png) no-repeat center 50%;}
.section01 .business ul li a h3 span {display:block; line-height:20px;}
.section01 .business ul li a:hover:after,
.section01 .business ul li a:active:after {background:#1682cd; top:-40px; z-index:10; box-shadow:0 5px 15px rgba(0,0,0,0.2); -webkit-box-shadow:0 5px 15px rgba(0,0,0,0.2);}
.section01 .business ul li a:hover h3,
.section01 .business ul li a:active h3 {color:#fff;}
.section01 .business ul li a:hover h3:after,
.section01 .business ul li a:active h3:after {display:none;}
.section01 .business ul li a:hover h3:before,
.section01 .business ul li a:active h3:before {margin-top:-90px;}
.section01 .business ul li.bn01 a:hover h3:before,
.section01 .business ul li.bn01 a:active h3:before {background:url(../images/main/business_ico1_on.png) no-repeat center 50%;}
.section01 .business ul li.bn02 a:hover h3:before,
.section01 .business ul li.bn02 a:active h3:before {background:url(../images/main/business_ico2_on.png) no-repeat center 50%;}
.section01 .business ul li.bn03 a:hover h3:before,
.section01 .business ul li.bn03 a:active h3:before {background:url(../images/main/business_ico3_on.png) no-repeat center 50%;}
.section01 .business ul li.bn04 a:hover h3:before,
.section01 .business ul li.bn04 a:active h3:before {background:url(../images/main/business_ico4_on.png) no-repeat center 50%;}
.section01 .news {width:66%; float:left; position:relative;}
.section01 .news ul {width:100%;}
.section01 .news ul:after {content:""; display:block; clear:both;}
.section01 .news ul li {float:left; width:48.5%; margin-left:3%;}
.section01 .news ul li:first-child {margin-left:0;}
.section01 .news ul li a {display:block; text-decoration:none;}
.section01 .news ul li p {margin:0; overflow:hidden;}
.section01 .news ul li p.photo {height:210px; margin-bottom:20px; background:#eee;}
.section01 .news ul li p.photo img {display:block; margin:0 auto; width:100%;}
.section01 .news ul li a:hover p.photo img,
.section01 .news ul li a:active p.photo img {transform:scale(1.1); -webkit-transform:scale(1.1);} 
.section01 .news ul li p.title {margin-bottom:0; font-size:20px; line-height:26px; height:52px;}
.section01 .news ul li p.date {font-size:16px; line-height:21px; opacity:0.6; -webkit-opacity:0.6;}
.section01 .news .more_btn {display:block; width:20px; height:20px; background:url(../images/main/more_bul.png) no-repeat center 50%; position:absolute; right:0; top:9px; z-index:10; overflow:hidden; text-indent:-9999px;}
.section01 .news .more_btn:hover,
.section01 .news .more_btn:active {transform:rotate(270deg); -webkit-transform:rotate(270deg);} 
.section01 .prmovie {width:32%; float:right; position:relative;}
.section01 .prmovie ul {width:100%;}
.section01 .prmovie ul:after {content:""; display:block; clear:both;}
.section01 .prmovie ul li {width:auto;}
.section01 .prmovie ul li a {display:block; text-decoration:none;}
.section01 .prmovie ul li p {margin:0; overflow:hidden;}
.section01 .prmovie ul li p.photo {height:210px; margin-bottom:20px; background:#eee; position:relative;}
.section01 .prmovie ul li p.photo:after {content:""; display:block; width:63px; height:63px; background:url(../images/main/prmovie_ico.png) no-repeat center 50%; background-size:100% auto; position:absolute; left:50%; top:50%; margin:-31px 0 0 -31px;}
.section01 .prmovie ul li p.photo img {display:block; margin:0 auto; height:100%;}
.section01 .prmovie ul li a:hover p.photo img,
.section01 .prmovie ul li a:active p.photo img {transform:scale(1.1); -webkit-transform:scale(1.1);} 
.section01 .prmovie ul li p.title {font-size:20px; line-height:26px;}
.section01 .prmovie .more_btn {display:block; width:20px; height:20px; background:url(../images/main/more_bul.png) no-repeat center 50%; position:absolute; right:0; top:9px; z-index:10; overflow:hidden; text-indent:-9999px;}
.section01 .prmovie .more_btn:hover,
.section01 .prmovie .more_btn:active {transform:rotate(270deg); -webkit-transform:rotate(270deg);}


/* section02 */
.section02,
.section02:before,
.section02:after,
.section02 .projects h3,
.section02 .projects .mapping .infor .btn span a,
.section02 .projects .mapping .infor .popup .close_btn,
.section02 .data_total,
.section02 .data_total p,
.section02 .data_total ul,
.section02 .data_total ul li,
.section02 .data_total ul li strong
{
	transition : all 0.4s ease;
	-webkit-transition : all 0.4s ease;
}
				
.section02 {width:auto; height:auto; padding:60px 0 70px 0; background:#efedf7; position:relative;}
.section02:before, .section02:after {content:""; display:block; width:278px; height:100%; position:absolute; top:0;}
.section02:before {background:url(../images/main/section2_bg1.jpg) no-repeat left top; left:0;}
.section02:after {background:url(../images/main/section2_bg2.jpg) no-repeat left top; right:0;}
.section02 .al_box {z-index:10;}
.section02 .projects {margin-top:0;}
.section02 .projects:after {content:""; display:block; clear:both;}
.section02 .projects h3 {text-align:center; font-size:40px; line-height:44px; font-family: 'Frank Ruhl Libre'; color:#333; margin:0 0 30px 0;}
.section02 .projects .mapping {position:relative;}
.section02 .projects .mapping .back {max-width:100%; margin:0 auto;display:block;}
.section02 .projects .mapping .infor {position:absolute;}
.section02 .projects .mapping .infor .btn {margin:0; position:relative; color:#fff;}
.section02 .projects .mapping .infor .btn span {display:inline-block; vertical-align:top; font-weight:700; position:relative; font-size:14px;}
.section02 .projects .mapping .infor .btn span:after {content:""; display:block; width:20px; height:20px; background:url(../images/main/project_pointer_on.png) no-repeat center 50%; position:absolute; left:50%; top:28px; margin-left:-10px;
animation-name:pointer;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: ease-in-out;
-webkit-animation-name:pointer;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;}
.section02 .projects .mapping .infor .btn span a {display:block; font-size:16px; font-weight:300; color:#ffc10e; background-color:rgba(27,111,133,0.9); padding:0 15px; text-decoration:none; border-radius:14px; -webkit-border-radius:14px;}
.section02 .projects .mapping .infor .btn span a:hover {box-shadow:0px 0px 8px #fff; -webkit-box-shadow:0px 0px 8px #fff; background-color:rgba(27,111,133,1);}
.section02 .projects .mapping .infor .btn.ty2 span:after {left:-20px; top:4px; margin-left:0;}
@keyframes pointer {
	0%   {transform:scale(0.5); opacity:0;}
	50%   {transform:scale(1); opacity:1;}
	100%   {transform: scale(1.5); opacity:0;}
}
@-webkit-keyframes pointer {
	0%   {-webkit-transform:scale(0.5); -webkit-opacity:0;}
	50%   {-webkit-transform:scale(1); -webkit-opacity:1;}
	100%   {-webkit-transform: scale(1.5); -webkit-opacity:0;}
}
.section02 .projects .mapping .infor .popup {width:290px; height:240px; overflow:hidden; display:none; position:absolute; z-index:10; left:50%; top:0; margin:0 0 0 -145px; z-index:10; background:#fff; box-sizing:border-box; padding:25px; box-shadow:0 0 20px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);}
.section02 .projects .mapping .infor .popup .country {font-size:18px; color:#007fcd; letter-spacing:-0.5px; padding-bottom:18px; margin-bottom:12px; background:url(../images/main/mapping_patternbg.gif) repeat-x left bottom;} 
.section02 .projects .mapping .infor .popup .country img {display:inline-block; vertical-align:top; margin:-4px 7px 0 0;}
.section02 .projects .mapping .infor .popup .sub_txt {font-size:13px; line-height:17px; margin-bottom:12px;}
.section02 .projects .mapping .infor .popup ul {}
.section02 .projects .mapping .infor .popup ul li {font-size:13px; line-height:17px; color:#666; font-weight:300; margin-top:5px; padding:0 0 0 8px; position:relative;}
.section02 .projects .mapping .infor .popup ul li:after {content:""; display:block; width:3px; height:3px; background:#81baf1; position:absolute; left:0; top:8px;}
.section02 .projects .mapping .infor .popup .close_btn {position:absolute; right:25px; top:29px; display:block; width:20px; height:20px; background:url(../images/main/mapping_close.png) no-repeat center 50%; overflow:hidden; text-indent:-9999px;}
.section02 .projects .mapping .infor .popup .close_btn:hover,
.section02 .projects .mapping .infor .popup .close_btn:active {transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.section02 .projects #modal_1 {left:7%; top:48%;}
.section02 .projects #modal_2 {left:27%; top:23%;}
.section02 .projects #modal_3 {left:33%; top:41.5%;}
.section02 .projects #modal_4 {left:43.5%; top:33.5%;}
.section02 .projects #modal_5 {left:47%; top:48%;}
.section02 .projects #modal_6 {left:50.7%; top:54.5%;}
.section02 .data_total {float:right; margin-top:10px;}
.section02 .data_total:after {content:""; display:block; clear:both;}
.section02 .data_total p {margin:30px 0 0 0; float:left; font-size:20px; line-height:24px; color:#333; font-weight:700; padding-right:90px; position:relative;}
.section02 .data_total p:after {content:""; display:block; width:80px; height:1px; background:#333; position:absolute; right:0; top:55%;}
.section02 .data_total ul {margin:0; float:left;}
.section02 .data_total ul:after {content:""; display:block; clear:both;}
.section02 .data_total ul li {float:left; padding:0 35px; text-align:center; font-size:20px; line-height:24px; color:#9a999f; font-weight:700; border-right:1px solid #aaa;}
.section02 .data_total ul li strong {display:block; font-size:67px; font-weight:500; letter-spacing:-1px; line-height:67px; color:#3b8cdf;}
.section02 .data_total ul li.total {border:0; padding-right:0;}
.section02 .data_total ul li.total strong {display:inline; margin:0 10px; font-size:100px; line-height:91px;}


/* section03 */
.section03 .sns li a,
.section03 .sns li a:after,
.section03 .relate_site a,
.section03 .relate_site a:after,
.section03 .sitemap ul li a,
.section03 .sitemap ul li ul li a:after
{
	transition : all 0.4s ease;
	-webkit-transition : all 0.4s ease;
}	

.section03 {background:#b9d3ec; padding:60px 0;}
.section03 .sns {width:auto;}
.section03 .sns:after {content:""; display:block; clear:both;}
.section03 .sns li {float:left; margin-left:10px;}
.section03 .sns li:first-child {margin-left:0;}
.section03 .sns li a {display:block; width:50px; height:50px; overflow:hidden; text-indent:-9999px; position:relative; background:#94bee1; border-radius:50%; -webkit-border-radius:50%; overflow:hidden;}
.section03 .sns li a:hover,
.section03 .sns li a:active {background:#fff;}
.section03 .sns li a:after {content:""; display:block; background-size:100% auto !important; position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;}
.section03 .sns li a.fb:after {background:url(../images/main/sns_ico1.png) no-repeat center 50%;}
.section03 .sns li a.instar:after {background:url(../images/main/sns_ico2.png) no-repeat center 50%;}
.section03 .sns li a.tw:after {background:url(../images/main/sns_ico3.png) no-repeat center 50%;}
.section03 .sns li a.bl:after {background:url(../images/main/sns_ico4.png) no-repeat center 50%;}
.section03 .sns li a.yt:after {background:url(../images/main/sns_ico5.png) no-repeat center 50%;}
.section03 .sns li a:hover:after,
.section03 .sns li a:active:after {animation-name:rotate; -webkit-animation-name:rotate;}
.section03 .sns li a.fb:hover:after {background:url(../images/main/sns_ico1_on.png) no-repeat center 50%;}
.section03 .sns li a.instar:hover:after {background:url(../images/main/sns_ico2_on.png) no-repeat center 50%;}
.section03 .sns li a.tw:hover:after {background:url(../images/main/sns_ico3_on.png) no-repeat center 50%;}
.section03 .sns li a.bl:hover:after {background:url(../images/main/sns_ico4_on.png) no-repeat center 50%;}
.section03 .sns li a.yt:hover:after {background:url(../images/main/sns_ico5_on.png) no-repeat center 50%;}
@keyframes rotate {
	0%   {transform: rotateY(0deg);}
	100%   {transform: rotateY(360deg);}
}
@-webkit-keyframes rotate {
	0%   {-webkit-transform:rotateY(0deg);}
	100%   {-webkit-transform:rotateY(360deg);}
}
.section03 .relate_site {position:absolute; right:0; top:-3px; z-index:101; width:265px;}
.section03 .relate_site a {display:block; text-decoration:none; box-sizing:border-box; padding:0 7%; height:50px; position:relative; background:#8bb9dd; font-size:17px; line-height:50px; color:#fff;}
.section03 .relate_site a:after {content:""; display:block; position:absolute; right:7%; top:50%; margin-top:-4px; width:12px; height:9px; background:url(../images/main/relate_site_bul.png) no-repeat center 50%;}
.section03 .relate_site ul {margin:0; box-sizing:border-box; position:absolute; left:0; bottom:50px; z-index:200; background:#2463a5; width:100%; display:none;}
.section03 .relate_site ul li {display:block; margin:0; border-top:1px solid #4983be;}
.section03 .relate_site ul li:first-child {border:0;}
.section03 .relate_site ul li a {padding:10px 7%; height:auto; color:#fff; font-size:14px; line-height:19px; background:#2463a5; font-weight:300;}
.section03 .relate_site ul li a:after {display:none;}
.section03 .relate_site ul li a:hover, .section03 .relate_site ul li a:active {background:#165392;}
.section03 .relate_site a.on:after {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}
.section03 .sitemap {margin-top:50px;}
.section03 .sitemap ul {width:auto;}
.section03 .sitemap ul:after {content:""; display:block; clear:both;}
.section03 .sitemap ul li {float:left; width:20%; padding-right:2%; box-sizing:border-box;}
.section03 .sitemap ul li:nth-child(2),
.section03 .sitemap ul li:nth-child(5) {width:16%;}
.section03 .sitemap ul li:nth-child(4) {width:28%;}
.section03 .sitemap ul li a {color:#3e6586; font-size:20px; line-height:26px; word-break:keep-all; display:inline-block; vertical-align:top; text-decoration:none;}
.section03 .sitemap ul li ul {height:auto !important; padding-top:15px;}
.section03 .sitemap ul li ul li {float:none; width:auto !important; margin-top:10px; padding:0;}
.section03 .sitemap ul li ul li a {font-size:15px; line-height:19px; font-weight:300; position:relative; color:#29435c;}
.section03 .sitemap ul li ul li a:after {content:""; display:block; width:0; height:2px; background:#29435c; position:absolute; left:0; top:9px;}
.section03 .sitemap ul li ul li a:hover,
.section03 .sitemap ul li ul li a:active {padding-left:14px;}
.section03 .sitemap ul li ul li a:hover:after {width:7px;}
.section03 .sitemap ul li ul li a strong {font-weight:300;}
.section03 .sitemap ul li ul li ul {display:none;}





/****************** Media css ******************/
@media all and (max-width:1680px){
.section02:before {left:-100px;}
.section02:after {right:-100px;}	
}

@media all and (max-width:1580px){
.section02:before {left:-150px;}
.section02:after {right:-150px;}	
}

@media all and (max-width:1440px){
.visual .slogon {box-sizing:border-box; padding:0 4%; max-width:100%;}		
.visual .control {left:4%; margin-left:0;}
.visual .move ul li:after {max-width:100%;}
.visual .move ul li.bg1:after {background-position:90% 20px;}
.visual .move ul li.bg2:after {background-position:92% 60px;}
.visual .move ul li.bg3:after {background-position:90% 70px;}
.visual .move ul li.bg4:after {background-position:90% 50px;}
.section01 {padding:0 4% 60px 4%;}	
.section02 {padding:60px 4% 70px 4%;}
.section02:before,
.section02:after {display:none;}
.section03 {padding:60px 4% 60px 4%;}	
}

@media all and (max-width:1280px){
.visual .slogon img {width:280px;} 
.visual .slogon p {font-size:13px;}
.visual .slogon p.txt1 {font-size:18px;}	

.visual .move ul li.bg1:after {background-size:700px auto; background-position:90% 50px;}

}

@media all and (max-width:1140px){
.section02 .data_total ul li {font-size:18px; line-height:22px; padding:0 25px;}
.section02 .data_total ul li strong {font-size:54px; line-height:54px;}
.section02 .data_total ul li.total {margin-top:-4px;}
.section02 .data_total ul li.total strong {font-size:84px; line-height:84px;}
}

@media all and (max-width:1023px){
.visual {height:auto; padding:30px 0 300px 0;}
.visual .slogon {margin-top:0; text-align:center;}
.visual .slogon img {margin:12px auto 17px auto; width:260px;}
.visual .slogon p.txt1 {font-size:17px; line-height:22px;}
.visual .slogon p.txt2 {display:none;}
.visual .control {top:155px; left:0; width:100%; text-align:center;}
.visual .move ul li.bg1:after {background-size:auto 250px; background-position:center 120px;}
.visual .move ul li.bg2:after {background-size:auto 290px; background-position:center 120%;}
.visual .move ul li.bg3:after {background-size:auto 160px; background-position:center 190px;}
.visual .move ul li.bg4:after {background-size:auto 200px; background-position:center 170px;}
.section01 {padding:0 4% 50px 4%;}	
.section01 h3 {font-size:32px; line-height:36px;}
.section01 .business {margin-bottom:40px; margin-top:-68px;}
.section01 .business ul li {width:50%; box-sizing:border-box;}
.section01 .business ul li a {height:135px;}
.section01 .business ul li.bn02,
.section01 .business ul li.bn04 {border-left:1px solid #ececec;}
.section01 .business ul li.bn03,
.section01 .business ul li.bn04 {border-top:1px solid #ececec;}
.section01 .business ul li a h3 {font-size:15px;}
.section01 .business ul li a h3:after {display:none;}
.section01 .business ul li a h3:before {height:52px; background-size:auto 100% !important;}
.section01 .business ul li a:hover:after,
.section01 .business ul li a:active:after {top:0;}
.section01 .business ul li a:hover h3:before,
.section01 .business ul li a:active h3:before {margin-top:0;}
.section01 .news ul li p.photo {height:190px; margin-bottom:15px;}
.section01 .news ul li p.title {font-size:17px; line-height:21px; height:42px;}
.section01 .news ul li p.date {font-size:15px; line-height:19px;}
.section01 .prmovie ul li p.photo {height:190px; margin-bottom:15px;}
.section01 .prmovie ul li p.title {font-size:17px; line-height:21px;}
.section02 {padding:50px 4% 50px 4%;}
.section02:before, .section02:after {width:200px; background-size:100% auto !important;}
.section02 .projects {margin-top:0 !important;}
.section02 .projects h3 {font-size:37px; line-height:41px; margin:0 0 20px 0;}
.section02 .projects .mapping .infor {display:none;}
.section02 .projects .mapping .back {display:none;}
.section02 .data_total {text-align:center; float:none; background:url(../images/main/project_map_mob.png) no-repeat center 50%; height:310px; box-sizing:border-box; padding-top:110px;}
.section02 .data_total p {font-size:19px; line-height:23px; padding-right:0; padding-bottom:20px; margin-right:20px; margin-top:10px; float:none; display:inline-block; vertical-align:top;}
.section02 .data_total p:after {right:auto; left:0; top:auto; bottom:0; width:40px;}
.section02 .data_total ul {float:none; display:inline-block; vertical-align:top;}
.section02 .data_total ul li {font-size:16px; line-height:20px;}
.section02 .data_total ul li strong {font-size:47px; line-height:47px;}
.section02 .data_total ul li.total strong {font-size:74px; line-height:74px;}
.section03 {padding:40px 4% 40px 4%; width:auto;}
.section03 .sns li a {height:40px; width:40px;}
.section03 .relate_site {top:-5px;}
.section03 .relate_site a {font-size:16px;}
.section03 .sitemap {display:none;}
}

@media all and (max-width:840px){	
.section01 {padding:0 4% 40px 4%;}	
.section01 h3 {font-size:29px; line-height:33px;}
.section01 .news {width:48.5%; margin-right:3%;}
.section01 .news ul li {display:none; width:auto; float:none;}
.section01 .news ul li:first-child {display:block;}
.section01 .news ul li p.photo {height:170px;}
.section01 .news .more_btn {top:5px;}
.section01 .prmovie {width:48.5%;}
.section01 .prmovie ul li p.photo {height:170px;}
.section01 .prmovie .more_btn {top:5px;}
.section02 {padding:40px 4%;}
.section02:before, .section02:after {width:160px;}
.section02 .projects h3 {font-size:34px; line-height:38px;}
.section02 .data_total {padding-top:60px; height:280px; background-size:auto 100%;}
.section02 .data_total p {margin:0 0 30px 0; display:block;}
.section02 .data_total p:after {left:50%; margin-left:-20px;}
.section02 .data_total ul li strong {font-size:42px; line-height:42px;}
.section02 .data_total ul li.total strong {font-size:69px; line-height:69px;}
.section03 {padding:35px 4%;}
}

@media all and (max-width:640px){
.visual {padding:30px 0 250px 0;}	
.visual .slogon p.txt1 {font-size:16px;}
.visual .slogon img {width:220px;}
.visual .control {top:150px;}
.visual .move ul li.bg1:after {background-size:auto 180px; background-position:center 135px;}
.visual .move ul li.bg2:after {background-size:auto 240px; background-position:center 120%;}
.visual .move ul li.bg3:after {background-size:auto 120px; background-position:center 180px;}
.visual .move ul li.bg4:after {background-size:auto 160px; background-position:center 160px;}
.section01 {padding:0 4% 35px 4%;}	
.section01 h3 {font-size:27px; line-height:31px; margin:0 0 10px 0;}
.section01 .business {margin-top:-60px;}
.section01 .business ul li a {height:120px;}
.section01 .business ul li a h3 {font-size:14px; line-height:18px;}
.section01 .business ul li a h3 span {line-height:18px;}
.section01 .business ul li a h3:before {height:47px; margin-bottom:7px;}
.section01 .news ul li p.photo {height:150px;}
.section01 .news ul li p.title {margin-bottom:10px;}
.section01 .news ul li p.date {font-size:14px;}
.section01 .prmovie ul li p.photo {height:150px;}
.section01 .prmovie ul li p.photo:after {width:53px; height:53px; margin:-26px 0 0 -26px;}
.section02 {padding:35px 4%;}
.section02:before, .section02:after {display:none;}
.section02 .projects h3 {font-size:31px; line-height:35px; margin-bottom:10px;}
.section02 .data_total {padding-top:40px; height:250px; background-size:auto 90%;}
.section02 .data_total p {margin:0 0 30px 0; display:block;}
.section02 .data_total p:after {left:50%; margin-left:-20px;}
.section02 .data_total ul li {padding:0 10px; font-weight:500; font-size:15px;}
.section02 .data_total ul li strong {font-size:34px; line-height:30px;}
.section02 .data_total ul li.total {margin-top:-1px;}
.section02 .data_total ul li.total strong {font-size:52px; line-height:52px; margin:0 5px;}
.section03 {padding:30px 4%;}
.section03 .sns {text-align:center; margin-bottom:20px;}
.section03 .sns li {float:none; display:inline-block; vertical-align:top;}
.section03 .sns li a {height:40px; width:40px;}
.section03 .relate_site {position:relative; right:auto; top:auto; margin:0 auto;}
.section03 .relate_site a {height:42px; line-height:42px;} 
.section03 .relate_site ul {bottom:42px;}
}

@media all and (max-width:480px){
.visual {padding:25px 0 210px 0;}	
.visual .slogon p.txt1 {font-size:15px;}
.visual .slogon img {width:200px;}
.visual .control {top:140px;}
.visual .move ul li.bg1:after {background-size:auto 140px; background-position:center 145px;}
.visual .move ul li.bg2:after {background-size:auto 200px; background-position:center 120%;}
.visual .move ul li.bg3:after {background-size:auto 100px; background-position:center 180px;}	
.visual .move ul li.bg4:after {background-size:auto 130px; background-position:center 160px;}		
.section01 h3 {font-size:26px; line-height:28px;}
.section01 .business {margin-bottom:35px; margin-top:-40px;}
.section01 .business ul li {float:none; width:auto; border:0 !important; border-top:1px solid #ececec !important;}
.section01 .business ul li:first-child {border-top:0 !important;}
.section01 .business ul li a {box-sizing:border-box; padding:0 9%; position:relative; height:76px;}
.section01 .business ul li a h3 {text-align:left; padding-left:70px; font-size:15px;}
.section01 .business ul li a h3:before {position:absolute; left:0; top:13px; width:60px; margin:0 !important;}
.section01 .news {float:none; width:auto; margin:0; margin-bottom:30px;}
.section01 .news ul li p.photo {height:auto; margin-bottom:10px;}
.section01 .news ul li p.title {height:auto;}
.section01 .prmovie {float:none; width:auto;}
.section01 .prmovie ul li p.photo {height:auto; margin-bottom:10px;}		
.section02 .projects {margin-top:30px;}
.section02 .projects h3 {font-size:28px; line-height:32px;}
.section02 .data_total {background-size:100% auto; background-position:center top; padding-top:10px; padding-bottom:20px; height:auto;}
.section02 .data_total p {font-size:17px;}
.section02 .data_total ul {display:block; width:230px; margin:0 auto;}
.section02 .data_total ul li {width:50%; box-sizing:border-box;}
.section02 .data_total ul li:nth-child(2) {border:0;}
.section02 .data_total ul li.total {margin:15px 0 0 0; width:100%; padding:0;}
.section02 .data_total ul li.total strong {font-size:47px; line-height:47px;}
}

@media all and (max-width:400px){
.visual {padding:25px 0 190px 0;}	
.visual .control {top:135px;}
.visual .slogon img {width:190px;}
.visual .move ul li.bg1:after {background-size:auto 120px; background-position:center 145px;}
.visual .move ul li.bg2:after {background-size:auto 190px; background-position:center 120%;}
.visual .move ul li.bg3:after {background-size:auto 90px; background-position:center 180px;}
.visual .move ul li.bg4:after {background-size:auto 90px; background-position:center 180px;}		
.section01 h3 {font-size:24px; line-height:26px;}
.section01 .news .more_btn {top:3px;}
.section01 .prmovie .more_btn {top:3px;}
.section02 .data_total {padding-bottom:10px;}
.section02 .data_total ul li strong {font-size:30px; line-height:30px;}
.section02 .data_total ul li.total strong {font-size:42px; line-height:42px;}
}