@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */
/* ******************  메인 비주얼 ********************** */
#mainVisual{background:#000; position:relative; height:990px; overflow:hidden; padding-top:90px;}
#mainVisual > div{position:relative; height:100%;}

#mainVisual .main-visual-title{width:25%; height:100%; background:rgba(0, 0, 0, 0.7); position:absolute; left:0; top:0; text-align:center; display:flex; flex-direction: column; align-items: center; z-index:999;}
#mainVisual .main-visual-title p{display:inline-block; position:absolute; top: 50%; left: 50%;  transform: translateX(-50%) translateY(-50%);}
#mainVisual .main-visual-title p span{display:block;}
#mainVisual .main-visual-title p span + span {margin-top:50px;}
#mainVisual .main-visual-title p span u{text-decoration:none; background:#c30d23; color:#000; padding:10px 30px;}

#mainVisual .main-visual-con{position:absolute; left:25%; top:0px; width:75%; height:100%; box-sizing:border-box; }
#mainVisual .main-visual-con .youtubeW{position:absolute !important; width:100%; height:900px; left: 0; top: 0; }
#mainVisual .main-visual-con .youtubeW iframe{width: 1930px !important; height: 1040px !important;}			

@media screen and (max-width:1920px){
	#mainVisual{height:900px !important;}
	#mainVisual .main-visual-con .youtubeW{height:810px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width: 1450px !important; height:950px !important;}
}

@media screen and (max-width:1500px){
	#mainVisual{height:720px !important;}
	#mainVisual .main-visual-con .youtubeW{height:630px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width: 1120px !important; height: 730px !important;}
}

@media screen and (max-width:1200px){
	#mainVisual{height:600px !important;}
	#mainVisual .main-visual-title p{width:90%;}
	#mainVisual .main-visual-con .youtubeW{height:510px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width: 900px !important; height: 610px !important;}
}

@media screen and (max-width:1024px){
	#mainVisual{height:auto !important; padding-top:80px;}
	#mainVisual > div{height:auto;}
	
	#mainVisual .main-visual-title{width:100%; height:auto; position:relative; padding:50px 0 50px;}
	#mainVisual .main-visual-title p{position:relative; left:0; top:0; transform: translateX(0%) translateY(0%); }
	#mainVisual .main-visual-title p span + span {margin-top:15px;}

	#mainVisual .main-visual-con{position:relative; left:0; top:-0px; width:100%; height:560px !important; padding:0; }	
	#mainVisual .main-visual-con .youtubeW{height:560px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width: 1450px !important; height: 700px !important;}
}

@media screen and (max-width:560px){
	#mainVisual .main-visual-con,
	#mainVisual .main-visual-con .youtubeW{height:300px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width:550px !important; height:420px !important;}
}

@media screen and (max-width:420px){
	#mainVisual{padding-top:50px;}
	
	#mainVisual .main-visual-con,
	#mainVisual .main-visual-con .youtubeW{height:230px !important;}
	#mainVisual .main-visual-con .youtubeW iframe{width: 420px !important; height:350px !important;}
}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{position:relative; text-align:center;}
.main-tit-box p{line-height:160%; color:#333; font-size:normal;}
.main-tit-box .main-tit-en{font-weight:700; font-size:18px; letter-spacing:-0.25px; color:#f8b62c; margin-bottom:35px; display:block; }
.main-tit-box .main-tit-en em{font-weight:700; }
.main-tit-box .main-tit{font-weight:600; font-size:46px; letter-spacing:-1.45px; color:#303030; line-height:1.32;}
.main-tit-box .main-tit em{font-weight:600;}
.main-tit-box p.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
 /* transition일때 */ 
.aos-animate .main-tit-box p.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}
.main-page-btn{position:absolute; right:0; top:50%; transform:translateY(0); color:#3d3d3d; letter-spacing:0; font-size:50px; font-weight:700; transition:opacity 0.8s 0.3s, transform 0.8s 0.3s, color 0.3s; opacity:0;}
.aos-animate .main-page-btn{opacity:1; transform:translateY(-50%); }
.main-page-btn .arrow{display:inline-block; width:27px; height:27px; background-color:#303030; text-align:center; border-radius:50%; color:#fff; vertical-align:middle; margin-left:9px; transition:all 0.3s}
.main-page-btn .arrow i{line-height:27px; font-size:19px; position:relative; left:1px}
@media all and ( min-width: 801px ){	
	.main-page-btn:hover{color:#f8b62c}
	.main-page-btn:hover .arrow{background-color:#f8b62c}
}


.m_board{ background:#044566; height:50px; overflow:hidden;}
.m_board .inner{height:50px;}
.m_board .situ, .m_board .qna, .m_board .notice{width:33.333%; float:left; padding-top:9px;}
.m_board h3{width:20%; float:left; text-align:center; font-size:14px; padding-top:2px;}
.m_board h3 a{color:#fff;  }
.m_board h3 a:hover{color:#ef114c;}
.m_board #notice_list01, #container .m_board #notice_list02, #container .m_board #notice_list03{}
.m_board ul{width:400px; float:left; }
.m_board ul li{position:relative; width:100%;}
.m_board ul li a{color:#fff; opacity:0.8; font-size:14px; width:100%; display:block;}
.m_board ul li span{position:absolute; right:30px; opacity:0.6; }
@media all and (max-width:1024px){
	.m_board{ height:120px;}
	.m_board .situ, .m_board .qna, .m_board .notice{width:100%; float:none; padding:6px; height:40px; border-bottom:1px solid rgba(255, 255, 255, 0.2);}
	.m_board h3{width:30%; float:left; }
	.m_board ul{width:100%; float:left; }
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Business Area) -------- */
.sec01{padding:100px 0 105px;}
.sec01 .main-con-box{}
.sec01 .main-con-box h3{text-align:center; font-size:100px; text-transform:uppercase; color:#000; font-weight:normal; margin:60px 0 20px; line-height:160%;}
.sec01 .main-con-box h3 strong{color:#4ae5ef; font-weight:bold;}
.sec01 .main-con-box ul{}
.sec01 .main-con-box ul li{float:left; width:50%; margin:10px 0;}
.sec01 .main-con-box ul li:nth-child(2n+1){padding-right:20px;}
.sec01 .main-con-box ul li:nth-child(1n+1){padding-left:20px;}
.sec01 .main-con-box ul li a{color:#fff; display:block; position:relative; background:#003049; font-size:16px; padding:40px 0 40px 125px; }
.sec01 .main-con-box ul li:nth-child(2) a,
.sec01 .main-con-box ul li:nth-child(3) a,
.sec01 .main-con-box ul li:nth-child(6) a,
.sec01 .main-con-box ul li:nth-child(7) a{background:#044566;}
.sec01 .main-con-box ul li a img{ position:absolute; left:40px; top:34px;}
.sec01 .main-con-box ul li a strong{display:block; font-size:22px; font-weight:normal; margin-bottom:10px;}
.sec01 .main-con-box ul li a span:after{content:"+"; display:inline-block; color:#fff; position:absolute; right:30px; bottom:30px; transition: all 0.5s ease; font-size:50px;  z-index:10;}
.sec01 .main-con-box ul li a:hover span:after{ transform: rotate(90deg); }
@media all and (max-width:1024px){
	.sec01{padding:60px 0 65px;}
	.sec01 .main-tit-box img{width:150px; height:auto;}
	.sec01 .main-con-box h3{ font-size:40px; margin:40px 0 10px;}
	.sec01 .main-con-box ul li{float:none; width:100%;}
	.sec01 .main-con-box ul li:nth-child(2n+1){padding-right:0px;}
	.sec01 .main-con-box ul li:nth-child(1n+1){padding-left:0px;}
	.sec01 .main-con-box ul li a{ font-size:14px; padding:20px 0 20px 70px; }
	.sec01 .main-con-box ul li a strong{ font-size:16px; margin-bottom:5px;}
	.sec01 .main-con-box ul li a span{line-height:100%;}
	.sec01 .main-con-box ul li a span:after{right:20px; bottom:20px; font-size:30px;}
	.sec01 .main-con-box ul li a img{left:20px; top:20px; width:40px; height:auto;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Portfolio) -------- */
.sec02{padding:100px 0;  position:relative; clear:both;}
/*
.main-con-box{position:relative; left:50%; margin-left:100%; padding-top:30px; z-index:2; transition:margin-left 1.8s 0.3s !important}
#mainContent2.aos-animate .main-con-box{margin-left:-710px;}
*/
@media all and (max-width:1024px){
	.sec02{padding:0px 0 30px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Counseling) -------- */
.sec03{background:#ebebeb; padding:50px 0;  position:relative;}
.sec03 .main-area-box{background:#fff; padding:25px 0;}
.sec03 .main-con-box ul{text-align:Center;}
.sec03 .main-con-box ul li{display:inline-block;}
.sec03 .main-con-box ul li input{background:#232323; width:300px; height:40px; color:#fff; padding:0 10px; font-size:18px;}
.sec03 .main-con-box ul li input::placeholder{color:#fff;}
.sec03 .main-con-box ul li select{
	min-width:300px;
	max-width:100%;
	height: 40px; 
	padding-left: 10px; 
	color: #fff; 			
	border: none;
	border-radius: 0px; 
	-webkit-appearance: none; /* 화살표 없애기 for chrome*/ 
	-moz-appearance: none;    /* 화살표 없애기 for firefox*/ 
	appearance: none;         /* 화살표 없애기 공통*/ 
	background:#232323 url('/design/default/images/select-arrow-w.png') no-repeat 92% 50%; /* 화살표 아이콘 추가 */ 
	font-size:18px;
	line-height:40px;
}
@media all and (max-width:1024px){
	.sec03{padding:40px 20px;}
	.sec03 .main-area-box{padding:35px 0 20px;}
	.sec03 .main-con-box ul{padding:0 20px;}
	.sec03 .main-con-box ul li{display:block; margin:2px 0;}
	.sec03 .main-con-box ul li input{ width:100%; font-size:16px; }
	.sec03 .main-con-box ul li select{min-width:100%; max-width:100%; font-size:16px; background-position:96% 50%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(Customer Center) -------- */
.sec04{padding:90px 0;}
.sec04 .main-area-box{border:1px solid #ddd;}
.sec04 .main-tit-box{position:relative; top:-25px; background:#fff; max-width:1024px; margin:0 auto;}
.sec04 .main-con-box{max-width:1024px; margin:0 auto;}
.sec04 .main-con-box ul{}
.sec04 .main-con-box ul li{padding:20px 0 20px 230px; border-top:1px solid #ddd; display:flex; flex-direction: column; justify-content: center; }
.sec04 .main-con-box ul li span{font-size:20px; margin:auto 0;}
.sec04 .main-con-box ul li span img{margin-right:10px;}
.sec04 .main-con-box ul li span u{text-decoration:none; font-size:30px; bottom:-5px; position:relative; font-weight:bold; font-family: 'Noto Sans KR'; color:#000;}
@media all and (max-width:1024px){	
	.sec04{padding:50px 20px;}
	.sec04 .main-con-box{ width:90%;}
	.sec04 .main-con-box ul li{padding:10px 0;}
	.sec04 .main-con-box ul li span{font-size:16px;}
	.sec04 .main-con-box ul li span img{margin-right:10px; width:auto; height:19px;}
	.sec04 .main-con-box ul li span u{ font-size:22px;}
}