﻿@charset "utf-8";

#main_visual_area{position:relative;background-color:#000;overflow:hidden;}

#main_visual_area .typo{position:absolute;top:50%;left:0;width:100%;height:140px;margin-top:-80px;color:#fff;text-align:center;z-index:500;}

#main_visual_area .typo .p1{font-size:20px;font-weight:200;line-height:26px;letter-spacing:2px;opacity:0;}
#main_visual_area .typo .p2{font-size:60px;font-weight:700;line-height:60px;letter-spacing:0px;padding:10px 0 10px;opacity:0;}
#main_visual_area .typo .p2 br.t1br{display:none;}
#main_visual_area .typo .p2 span{color:#00c6ff;}
#main_visual_area .typo .p3{font-size:15px;font-weight:400;line-height:17px;letter-spacing:0px;padding:10px 0 13px;opacity:0;}

#main_visual_area .typo p{margin-top:30px;}


#main_visual_area .spot{position:absolute;top:0;left:0;width:0;height:0;}

#img_wrap .bg{position:absolute;top:0;left:0;width:100%;height:100%;}

.main_title{text-align:center;padding:120px 0 90px;}
.main_title .title{font-size:41px;font-weight:700;line-height:45px;letter-spacing:5px;color:#06428e;}
.main_title .t_eng{font-size:14px;font-weight:600;line-height:18px;letter-spacing:5px;color:#333;padding-top:10px;}
.main_title .t_kor{font-size:12.4px;font-weight:300;line-height:20px;letter-spacing:2px;color:#444;line-height:18px;padding-top:13px;}



ul.link{}
ul.link li{float:left;width:25%;}
ul.link li a{display:block;width:100%;height:280px;overflow:hidden;text-align:center;border-left:1px solid #E5E5E5;}
ul.link li a.first{border-left:none;}
ul.link li a .off{position:relative;height:100%;}
ul.link li a .off .icon{padding-top:80px;}
ul.link li a .off .icon img{opacity:0.75;}
ul.link li a .off .title{font-weight:600;font-size:14px;line-height:18px;letter-spacing:1px;color:#444;padding-top:10px;}
ul.link li a .off .title br{display:none;}
ul.link li a .on{position:relative;height:100%;}
ul.link li a .on .icon{padding-top:80px;}
ul.link li a .on .icon img{opacity:0.9;}
ul.link li a .on .title{font-weight:600;font-size:14px;line-height:18px;letter-spacing:1px;color:#01acd7;padding-top:10px;}
ul.link li a .on .title br{display:none;}
ul.link li a .on .exp{font-weight:400;font-size:12.2px;color:#01acd7;line-height:15px;letter-spacing:-0.6px;}

.port {font-size:0;}
.port li{float:left;width:20%;overflow:hidden;border:0;margin:0;padding:0;}
.port li a{display:block;width:100%;height:100%;position:relative;}

.port li.title{background-color:#101b29;}
.port li.title .title_wrap{position:absolute;top:50%;left:0;width:100%;height:90px;margin-top:-38px;color:#fff;text-align:center;font-size:12px;letter-spacing:0.5px;}
.port li.title .title_wrap .t1{opacity:0.5;line-height:17px;}
.port li.title .title_wrap .t2{font-size:39px;font-weight:700;line-height:42px;color:#eee;}
.port li.title .title_wrap .t3{opacity:0.5}


.port li a .info_area{position:absolute;top:100%;left:0;width:100%;height:100%;z-index:101;}
.port li a .info_bg{position:absolute;top:50%;left:50%;width:0;height:0;background-color:#00c0ff;z-index:100;opacity:0.85;}
.port li a .info_area .zoom{position:absolute;top:12px;right:20px;font-size:30px;line-height:30px;color:#fff;font-weight:600;}
.port li a .info_area .bottom_cont{position:absolute;bottom:23px;left:25px;color:#fff;font-size:12px;letter-spacing:0.8px;line-height:18px;}
.port li a .info_area .bottom_cont h4{line-height:20px;font-size:16.4px;letter-spacing:0px;color:#fff;font-weight:500;text-indent:-0.6px;}
.port li a .info_area .bottom_cont p.type{opacity:0.8;font-size:12.2px;}
.port li a .name_m{display:none;}
.port li a .info_m_bg{display:none;}

#partners{background-color:#f6f6f6;}
#partners .partner_wrap{width:1300px;margin:0 auto;}
#partners .partner{}
#partners .partner li{float:left;width:19%;margin:0.5%;}

@media screen and (max-width:1340px){
#main_visual_area .typo .p2 br.t1br{display:inline;}

#partners .partner_wrap{width:90%;margin:0 auto;}
}

@media screen and (max-width:1200px){
#main_visual_area .typo{height:140px;margin-top:-78px;}
#main_visual_area .typo .p1{font-size:20px;font-weight:200;line-height:26px;letter-spacing:0px;}
#main_visual_area .typo .p2{font-size:53px;line-height:50px;letter-spacing:0px;padding:10px 0 0px;}
#main_visual_area .typo .p3{letter-spacing:0px;padding:10px 0 13px;}


.port li{width:25%;}
.port li.last{display:none;}

.port li a .info_area .zoom{top:10px;right:17px;font-size:26px;line-height:26px;}
.port li a .info_area .bottom_cont{bottom:13px;left:15px;line-height:16px;}
.port li a .info_area .bottom_cont h4{line-height:19px;font-size:14.6px;letter-spacing:-0.4px;text-indent:0px;}
.port li a .info_area .bottom_cont p.type{font-size:12px;}
}

@media screen and (max-width:1100px){
ul.link li a .off .title br{display:inline;}
ul.link li a .on .title br{display:inline;}
}

@media screen and (max-width:1024px){
#main_visual_area .typo{height:130px;margin-top:-65px;}
#main_visual_area .typo .p1{font-size:15px;font-weight:300;line-height:18px;letter-spacing:0px;}
#main_visual_area .typo .p2{font-size:40px;line-height:42px;letter-spacing:0px;padding:10px 0 0px;}
#main_visual_area .typo .p3{letter-spacing:0px;padding:10px 0 13px;}



.port li.title .title_wrap{height:80px;margin-top:-31px;}
.port li.title .title_wrap .t2{font-size:23px;line-height:25px;letter-spacing:0;}

#partners .partner_wrap{width:92%;margin:0 auto;}
}

@media screen and (max-width:768px) {

#main_visual_area{height:360px;}
#img_wrap{position:absolute;top:0;left:50%;width:753px;height:360;margin-left:-376px;}

#main_visual_area .typo{height:120px;margin-top:-60px;}
#main_visual_area .typo .p1{font-size:14px;font-weight:300;line-height:16px;}
#main_visual_area .typo .p2{font-size:32px;line-height:34px;letter-spacing:0px;padding:10px 0 0px;}
#main_visual_area .typo .p3{font-size:13px;letter-spacing:0px;padding:10px 0 13px;}


.main_title{padding:70px 0 40px;}
.main_title .title{font-size:31px;line-height:35px;letter-spacing:1px;}
.main_title .t_eng{font-size:13px;line-height:17px;letter-spacing:1px;padding-top:5px;}
.main_title .t_kor{font-size:12.4px;letter-spacing:1px;line-height:18px;padding-top:8px;}

ul.link li{width:25%;}
ul.link li a{height:150px;border-left:1px solid #E5E5E5;}
ul.link li a .off .icon{padding-top:27px;}
ul.link li a .off .icon img{width:50px;}
ul.link li a .off .title{font-size:14px;letter-spacing:0px;line-height:17px;padding-top:10px;}
ul.link li a .off .title span.t_eng{display:none;}
ul.link li a .off .title span.t_kor{display:block;}
ul.link li a .on{display:none;}

.port li{width:33.33333333%;}
.port li a .info_area{display:none;}
.port li a .info_bg{display:none;}
.port li a .name_m{display:block;position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:12.4px;color:#fff;font-weight:500;letter-spacing:-0.4px;line-height:30px;opacity:0.85;padding:0 10px;overflow:hidden;text-overflow:ellipsis;z-index:2;}
.port li a .info_m_bg{display:block;position:absolute;bottom:0;left:0;width:100%;height:30px;background-color:#000;opacity:0.5;}

#partners .partner li{width:23%;margin:1%;}

}

@media screen and (max-width:600px) {
	#main_visual_area{height:320px;}
	#img_wrap{width:670px;height:320;margin-left:-335px;}
}

@media screen and (max-width:520px) {
	#main_visual_area{height:260px;}
	#img_wrap{width:544px;height:260;margin-left:-272px;}

	#main_visual_area .typo{height:100px;margin-top:-40px;}
	#main_visual_area .typo .p1{font-size:11px;font-weight:300;line-height:14px;}
	#main_visual_area .typo .p2{font-size:18px;line-height:20px;letter-spacing:0px;padding:5px 0 0px;}
	#main_visual_area .typo .p3{font-size:12px;line-height:16px;letter-spacing:0px;padding:5px 0 13px;}
}


@media screen and (max-width:480px) {



.main_title{padding:40px 0 25px;}
.main_title .title{font-size:22px;line-height:25px;letter-spacing:0px;}
.main_title .t_eng{display:none;}
.main_title .t_kor{font-size:12.4px;letter-spacing:-0.4px;line-height:16px;padding:5px 20px 0;}

ul.link li{width:46%;margin:2%;}
ul.link li a{height:130px;border:1px solid #E5E5E5 !important;}
ul.link li a .off .icon{padding-top:24px;}
ul.link li a .off .icon img{width:45px;}
ul.link li a .off .title{font-size:13px;letter-spacing:0px;line-height:14px;padding-top:5px;}

.port li{width:50%;}
.port li.title .title_wrap{height:80px;margin-top:-27px;font-size:11px;line-height:17px;}
.port li.title .title_wrap .t2{font-size:20px;line-height:23px;}


#partners .partner_wrap{width:auto; margin:0 15px;}
#partners .partner li{width:31.333333%;margin:1%;}
}


/*팝업창 이미지 사이즈 재설정 - 필수*/
@media screen and (max-width:768px) {
	.drag_pop{left:0 !important;top:0 !important;max-width:310px !important;height:auto !important;}
}









