
.visual {position:relative; height:1300px;}
.visual .control {position:absolute; left:50% !important;; width:300px; margin-left:-150px; bottom:300px; padding:0; height:24px;  z-index:10; text-align:center;}
.visual .control a[class*="btn_"] {display:none; text-align:center; width:40px; height:40px; right:auto; bottom:0; border:0; border-radius:50%; -webkit-border-radius:50%; vertical-align:top; position:relative; background-repeat:no-repeat; background-position:center 50%; background-color:rgba(255,255,255,0.2);}
.visual .control a[class*="btn_"] span {line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;}
.visual .control a.btn_stop {background-image:url(../img/main/visual_control_stop.png); background-size:15px auto;}
.visual .control a.btn_play {background-image:url(../img/main/visual_control_play.png); background-size:15px auto;}
.visual .control ul {width:auto; height:4px; text-align:center; display:inline-block; vertical-align:top; position:relative; left:auto; bottom:0; margin-top:15px;}
.visual .control ul li {display:inline-block; vertical-align:top; margin:0 10px 0 0; height:10px;}
.visual .control ul li a {display:block; position:relative; width:65px; height:10px; text-indent:-9999px; overflow:hidden; background:#fff; border-radius:0; -webkit-border-radius:0; opacity:0.3; -webkit-opacity:0.3; transition : all 0.2s ease; -webkit-transition : all 0.2s ease;}
.visual .control ul li a.on {opacity:1; -webkit-opacity:1;}
.visual .move {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; }
.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.bg1 { background:url(../img/main/img_main_slide01.jpg); background-position:10% 50%;}
.visual .move ul li.bg2 { background:url(../img/main/img_main_slide02.jpg); background-position:50% 50%;}
.visual .move ul li.bg3 { background:url(../img/main/img_main_slide03.jpg); background-position:50% 50%;}
.visual .move ul li.bg1, .visual .move ul li.bg2, .visual .move ul li.bg3{ background-size:cover; }
.visual .move ul li {background-position:center top; background-repeat:no-repeat; background-size:cover;}

.visual .move ul li.bg1 .slogon{ text-align:center;}
.visual .move ul li.bg2 .slogon{ padding-left:10%;}
.visual .move ul li.bg3 .slogon{ padding-left:10%;}
.visual .move ul li .slogon { position:absolute; left:0; top:400px; width:100%;}
.visual .move ul li .slogon p {color:#fff; font-size:30px;}
.visual .move ul li .slogon p.eng{ font-size:45px; font-family: 'NanumSquare';}
.visual .move ul li .slogon p.subject { font-size:100px; font-weight:600; margin:15px 0 30px 0; letter-spacing:-2px;}
.visual .move ul li .slogon p.subject strong {font-weight:600; color:#fce524;}
.visual .move ul li .slogon p.txt_b {font-size:20px; line-height:26px;}
.visual .move ul li .slogon p.txt_s {font-size:17px; line-height:22px; margin-top:25px; opacity:0.9; -webkit-opacity:0.9; font-weight:300;}
.visual .move ul li .slogon p.txt_s span {display:block;}

@-webkit-keyframes move {
	0%   {bottom:40px;}
	100% {bottom:55px;}
}
/* Standard syntax */
@keyframes move {
	0%   {bottom:40px;}
	100% {bottom:55px;}
}



@media all and (max-width : 1920px){
	
	.visual { height:935px;}
	
	.visual .control{ bottom:200px}
	.visual .control ul li a { width:45px; height:7px;}
	
	.visual .move ul li .slogon{ top:300px;}
	.visual .move ul li .slogon p {font-size:25px;}
	.visual .move ul li .slogon p.eng{ font-size:35px;}
	.visual .move ul li .slogon p.subject { font-size:80px;}
	
	
}

@media all and (max-width : 1220px){
	
	.visual { height:700px;}
	.visual .control{ bottom:100px;}
	.visual .move ul li .slogon{ top:200px;}
	
	.visual .move ul li .slogon p.subject{ font-size:65px;margin:10px 0 20px 0;}
	.visual .move ul li .slogon p{ font-size:20px;}
}

@media all and (max-width :960px){
	
	.visual { height:600px;}
	.visual .move ul li .slogon{ top:150px;}
	.visual .move ul li .slogon p.subject{ font-size:55px;margin:5px 0 20px 0;}
	
}

@media all and (max-width :640px){
	
	.visual { height:500px;}
	.visual .move ul li.bg2 .slogon{ padding-left:0; text-align:center;}
	.visual .move ul li .slogon{ top:100px;}
	.visual .move ul li .slogon p.eng{ font-size:27px;}
	.visual .move ul li .slogon p.subject{ font-size:40px;margin:5px 0 20px 0;}
	.visual .move ul li .slogon p{ font-size:17px;}
	
}

@media all and (max-width :480px){
	
	.visual { height:450px;}
	.visual .move ul li .slogon p.eng{ font-size:21px;}
	.visual .move ul li .slogon p.subject{ font-size:33px;margin:0px 0 10px 0;}
	}



#sec_01{ position:relative;}
#sec_01:before{ content:''; position:absolute; top:0; left:0; width:500px; height:1000px; background:url(../img/main/sec_01_bg.jpg) no-repeat; background-size:100% auto;}
#sec_01:after{ content:''; position:absolute; bottom:50px;;left:500px; width:60%; height:200px; background:url(../img/main/main_bg.png)  repeat; z-index:-1;}
#sec_01 .sTit{ padding-left:300px;}
#sec_01 .more{ }
#sec_01 .more a{ display:inline-block; background:#fff; padding:10px 30px;}
#sec_01 .more a i{ padding-left:20px;}

#sec_02 .area{ position:relative;background:url(../img/main/sec_02_bg.jpg) no-repeat; background-size:cover; color:#fff;}
#sec_02 .area li{ width:calc((100% / 4) - 41px); margin-right:50px;}
#sec_02 .area li:last-child{ margin-right:0;}
#sec_02 .area li span{ display:block; padding:50px 0;border:1px #fff dotted; border-radius:30px; }

#sec_03{ }
#sec_03 dl{ position:relative;}
#sec_03 dl dt{width:37%; height:1100px;background:url(../img/main/sec_03_bg.jpg) no-repeat 50% 100%; background-size:cover}
#sec_03 dl dd{ position:absolute; top:0;left:32%;margin-right:400px;}
#sec_03 dl dd .area{ padding-left:340px; }
#sec_03 dl dd li{width:calc((100% / 4) - 41px); margin-right:50px; }
#sec_03 dl dd .in{ padding:15px;box-shadow: 0 13px 21px 0 rgb(153 159 183 / 40%); background:#fff; margin-bottom:20px;}
#sec_03 dl dd li img{ width:100%;}
#sec_03 dl dd li:last-child{ margin-right:0;}

#sec_04 dl{ position:relative;}
#sec_04 dl dt{position:absolute; top:0; left:0; width:37%;}
#sec_04 dl dt .b_logo{ padding-top:250px;}
#sec_04 dl dt .b_logo img{ width:400px;}
#sec_04 dl dd{ margin-left:37%;  }
#sec_04 dl dd .s01{padding:150px 400px 150px 150px; background:#0054a6; color:#fff;}
#sec_04 dl dd .ffN{ line-height:35px;}
#sec_04 dl dd .ffN a{ color:#fff;}
#sec_04 dl dd .s01 .link{ border:1px #4d88c1 solid; color:#fff; display:inline-block; padding:15px 25px; font-weight:300;}
#sec_04 dl dd  i{ padding-left:20px;}

#sec_04 dl dd .s02{ position:relative; height:400px; display:table; width:100%;}
#sec_04 dl dd .s02 li{ float:left; width:calc(100% / 3); height:100%;}
#sec_04 dl dd .s02 li:nth-child(1){ position:relative; }
#sec_04 dl dd .s02 li:nth-child(1):before{ content:''; position:absolute; bottom:0;left:-1000px; width:1000px; height:100%; background:url(../img/main/main_bg.png)  repeat; z-index:-1;}
#sec_04 dl dd .s02 li:nth-child(2){background:#01c73c;height:400px; }
#sec_04 dl dd .s02 li:nth-child(3){ background:url(../img/main/sec_0404.jpg) no-repeat; background-size:cover; color:#fff;height:400px;}
#sec_04 dl dd .s02 .in{padding:70px 50px 50px 50px; }
#sec_04 dl dd .s02 .in span{ padding:0 12px;}
#sec_04 dl dd .s02 a{ display:block; width:100%; height:100%; color:#fff;}
#sec_04 dl dd .s02 .w_logo img{ width:300px;}
#sec_04 dl dd .s02 .in_sns{ margin:30px 0;}
#sec_04 dl dd .s02 .in_sns2 img{ width:150px;}

#sec_04 .root_daum_roughmap{ width:100% !important; }
#sec_04 .root_daum_roughmap .wrap_map{height:400px !important;}


.m_cs{ display:none;}

@media all and (max-width : 1920px){
	
	#sec_01:before{ content:''; position:absolute; top:0; left:0; width:400px; height:1000px; background:url(../img/main/sec_01_bg.jpg) no-repeat; background-size:100% auto;}
	#sec_01:after{ content:''; position:absolute; bottom:40px;left:300px; width:60%; height:150px; background:url(../img/main/main_bg.png)  repeat; z-index:-1;}
	#sec_02 .area li span{ padding:35px 0;}

	#sec_03 dl dt{ height:850px;}
	#sec_03 dl dd{ margin-right:300px;}
	#sec_03 dl dd li{width:calc((100% / 4) - 22px); margin-right:25px}
	#sec_03 dl dd .in{ padding:10px 10px 15px 10px;}
	#sec_03 dl dd .area{ padding-left:230px;}
	
	#sec_04 dl dt .b_logo img{ width:350px;}
	#sec_04 dl dd .ffN{ line-height:30px;}
	#sec_04 dl dd .s01 {padding: 130px 300px 130px 130px;}
	#sec_04 dl dd .s01 .link{padding:10px 20px;}
	#sec_04 dl dd .s02 .in{padding:50px; }
	#sec_04 dl dd .s02 .w_logo img{ width:250px;}
	#sec_04 dl dd .s02{ height:350px;}
	#sec_04 .root_daum_roughmap .wrap_map{height:350px !important;}
	#sec_04 dl dd .s02 li:nth-child(2), #sec_04 dl dd .s02 li:nth-child(3){ height:350px;}
	
	


@media all and (max-width : 1700px){
	
	#sec_04 dl dd .s01{padding:70px;}
	

	
}
@media all and (max-width : 1220px){
	#sec_01::before{ display:none;}
	#sec_01 .sTit{ padding-left:0;}
	#sec_01 .fs25 br{ display:none;}
	

	#sec_03 dl dd{ margin-right:15px;}
	
	
	#sec_04 dl dt .b_logo img{ width:200px;}
	
	#sec_04 dl dt{ display:none;}
	#sec_04 dl dd{ margin-left:0;}
	
	.visual .move ul li.bg3 .slogon{display: none}
	
	
	
}

@media all and (max-width : 960px){
	
	#sec_01::after{ left:50%; width:500px; margin-left:-250px;}
	
	#sec_02 .fs45 br{ display:none;}
	
	#sec_02 .area li {width: calc((100% / 2) - 41px);margin-right:30px; margin-right:0;}
	#sec_02 .area li:nth-child(2n+2){ margin-right:0;}
	#sec_02 .area li:nth-child(1), #sec_02 .area li:nth-child(2){ margin-bottom:30px;}
	#sec_02 .area li .mb30{ margin-bottom:15px;}
	#sec_02 .area li span{ padding:20px 0; }
	
	#sec_03 dl dd{ position:relative; left:0; margin-right:0;}
	#sec_03 dl dt{ width:100%;}
	#sec_03 dl dd{ margin:0 10px;}
	#sec_03 dl dd .area{ padding-left:0; text-align:center;}
	#sec_03 dl dd ul{ margin:0}
	#sec_03 dl dd .fs25 br{ display:none;}
	
	
	#sec_04 dl dd .s01 {padding:70px;}
	#sec_04 dl dt{ display:block; position:relative; width:100%;}
	#sec_04 dl dt .b_logo{ padding:50px 0}
	#sec_04 dl dd{ margin-left:0;}
	
	#sec_04 dl dd .s02{ height:auto;}
	#sec_04 dl dd .s02 li:nth-child(2){ position:relative; left:0; width:100%;}
	#sec_04 dl dd .s02 li:nth-child(1){ width:100%;}
	#sec_04 dl dd .s02 li:nth-child(1)::before{ display:none;}
	#sec_04 dl dd .s02 li:nth-child(3){ width:100%;}
	
	
	
	
	
	
	
}
@media all and (max-width : 640px){
	
	#sec_01::after{ left:50%; width:350px; margin-left:-175px; height:100px; bottom:20px;}
	
	
	#sec_03 dl dt{ height:650px;}
	#sec_03 dl dd li {width: calc((100% / 2) - 12px);  margin-right:20px;}
	#sec_03 dl dd li:nth-child(2n+2){ margin-right:0;}
	#sec_03 dl dd li:nth-child(1), #sec_03 dl dd li:nth-child(2){ margin-bottom:20px;}
	
	#sec_04 dl dd .s01 {padding:50px;}
	
	.m_cs{ display:table; width:100%;}
	.m_cs li{ position:relative;float:left; width:calc(100% /3 ); height:190px; text-align:center;}
	.m_cs li:nth-child(1){ background:#f2da00;color: #391d1d; padding-top:15px;}
	.m_cs li:nth-child(1) img{ width:50px;}
	.m_cs li:nth-child(1) .txt2 { position:absolute; bottom:0; left:0; width:100%;background: #391d1d;color: #f2da00; padding:20px 0; }
	.m_cs li:nth-child(1) .txt2 span{ display:block; }
	.m_cs li:nth-child(1) .txt2 b{ font-size:20px; font-weight:bold}
	.m_cs li:nth-child(2){ background:#0072bc;color: #fff;}
	.m_cs li:nth-child(2) a{ color:#fff;}
	.m_cs li:nth-child(2) .mb15{ margin-top:20px;}
	.m_cs li:nth-child(2) span{ background:#FFF; color:#06C; border-radius:10px; display:inline-block; padding:3px 20px; font-size:15px;}
	.m_cs li:nth-child(3){ background:#00a99d;color: #fff; }
	.m_cs li:nth-child(3) img{ width:45px;padding-top:20px; }
	.m_cs li:nth-child(3) .txt1{ position:relative; margin:0 15px 10px 15px; padding-bottom:5px; padding-top:10px;}
	.m_cs li:nth-child(3) .txt1:before{ content:''; position:absolute; bottom:0; left:0; border-top:1px #fff solid; opacity:0.3; width:100%; height:1px;}
	.m_cs li:nth-child(3) .txt2{ font-weight:500; line-height:25px;}
	.m_cs li:nth-child(3) .txt2 span{ font-size:23px;}
	
	

	
	

}

@media all and (max-width : 480px){
	
	#sec_02 .area li{ width:100%;}
	#sec_02 .area li:nth-child(3){ margin-bottom:30px;}
	#sec_02 .area li span{ margin:0 30px;}
	
	#sec_03 dl dt{ height:550px;}
	
	#sec_04 dl dd .s01 {padding:50px 20px;}
	#sec_04 dl dt .b_logo img{ width:250px;}
	#sec_04 dl dd .s02 .in{ padding:50px 0px;}
	#sec_04 dl dt .fs27{ margin-bottom:0;}

	
	.visual .move ul li.bg3 .slogon{display: none}
	.visual .move ul li.bg3 {background-position: 79% 50%;}
	
	
	
}
