@charset "utf-8";

/*
font-family: 'Roboto', sans-serif;
*/


body {overflow-x: hidden;}



/* 공통 */
#main section .ttl_bx {text-align: center; padding-bottom: 60px;}
#main section .ttl_bx strong {font-family: 'Roboto', sans-serif; font-size: 40px; color: #035ca3; font-weight: 700; display: block;}
#main section .ttl_bx p {font-size: 18px; line-height: 32px; color: #444444; letter-spacing: -0.05em; word-break: keep-all; margin: 22px auto 0;}
#main section .ttl_bx p span {display: inline-block;}



/* index */
#index .v_bx {overflow: hidden; position: relative;}
#index .v_bx .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/main_v_01.jpg) no-repeat center; background-size: cover; transform: scale(1.2); -webkit-transition: all 5s; -moz-transition: all 5s; transition: all 5s;}
#index .v_bx .bg.on {transform: scale(1);}
#index .v_bx .txt_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; display:flex; justify-content:center; align-items:center; table-layout:fixed; padding: 0 0 34px; box-sizing: border-box;}
#index .v_bx .txt_bx .txt_w {width: 100%; text-align: center; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 88px; line-height: 104px; color: #ffffff; font-weight: 700; word-break: keep-all;}
#index .v_bx .txt_bx .txt_w span {width: 100%; float: left; color: #ffffff; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); transform: translateY(-50px); opacity: 0; animation-name: titleAnimation; animation-timing-function: ease; animation-duration: 7s; /*animation-iteration-count: infinite*/;}
#index .v_bx .txt_bx .txt_w span {animation-delay: 0.6s; -webkit-animation-fill-mode: forwards;}
#index .v_bx .txt_bx .txt_w span:first-child {animation-delay: 0.7s;}
@keyframes titleAnimation {
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  /*100% {
    transform: translateY(50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
  }*/
}
#index .v_bx .scroll {position: absolute; width: 100%; bottom: 24px; left: 0; text-align: center; z-index: 1; padding-top: 50px;}
#index .v_bx .scroll a {display: inline-block; position: relative; padding-top: 45px; opacity: 0.5; animation: op 2s ease infinite; cursor: pointer;}
#index .v_bx .scroll a .icon {width: 24px; height: 40px; border: 1px solid #fff; border-radius: 20px; position: absolute; top: 0; left: 50%; margin-left: -12px; box-sizing: border-box;}
#index .v_bx .scroll a .icon::before {content: ''; width: 2px; height: 6px; background-color: #fff; position: absolute; left: 50%; margin-left: -1px; top: 9px; animation: updown 2s ease infinite;}
#index .v_bx .scroll a span {font-family: 'Roboto', sans-serif; font-size: 13px; color: #ffffff;}
@-webkit-keyframes updown {
	0% {
		transform: translate(0, 0);
	}
	60% {
		transform: translate(0, 3px);
	}
	100% {
		transform: translate(0, 0);	
	}
}
@-webkit-keyframes op {
	0% {
		opacity: 0.5;
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}

#index_txt {padding:  126px 0 0;}
#index_txt .inner_bx {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box;}
#index_txt .t_txt {text-align: center; margin: 0 auto 70px; font-size: 48px; color: #222222; line-height: 68px; letter-spacing: -0.05em; word-break: keep-all; font-weight: 700; max-width: 500px;}
#index_txt .con_bx {font-size: 0;}
#index_txt .con_bx .con_w {width: calc(50% - 12px); margin-right: 24px; display: inline-block; vertical-align: top; padding-bottom: 58px; box-sizing: border-box; min-height: 440px; overflow: hidden;}
#index_txt .con_bx .con_w:last-child {margin-right: 0; margin-bottom: 0;}
#index_txt .con_bx .con_w.col1 {background-color: #035ca3;}
#index_txt .con_bx .con_w.col2 {background-color: #202023; margin-top: 60px;}
#index_txt .con_bx .txt1 {display: block; text-align: right; height: 88px; overflow: hidden;}
#index_txt .con_bx .txt1 strong {font-family: 'Roboto', sans-serif; font-size: 120px; color: #ffffff; line-height: 88px; opacity: 0.05;}
#index_txt .con_bx p {padding: 0 60px; font-family: 'Roboto', sans-serif; font-size: 28px; color: #ffffff; font-weight: 500; margin-top: 85px; margin-bottom: 25px;}
#index_txt .con_bx .txt2 {font-size: 16px; line-height: 30px; color: #ffffff; letter-spacing: -0.05em; word-break: keep-all; opacity: 0.7; padding: 0 60px;}
#index_txt .con_bx ul {padding: 0 60px;}
#index_txt .con_bx ul li {font-size: 16px; color: rgba(255,255,255,0.7); letter-spacing: -0.05em; word-break: keep-all; position: relative; padding-left: 76px; min-height: 30px; line-height: 30px; margin-bottom: 4px;}
#index_txt .con_bx ul li:last-child {margin-bottom: 0;}
#index_txt .con_bx ul li span {position: absolute; left: 0; top: 0; color: rgba(255,255,255,0.5);}



/* about */
#about {padding-top: 140px;}
#about .inner_bx {max-width: 1800px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; position: relative; display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 560px;}
#about .bg {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: url(../images/main/about_bg.jpg) no-repeat center; background-size: cover;}
#about .txt_bx {max-width: 1200px; width: calc(100% - 120px); box-sizing: border-box; position: relative; z-index: 1;}
#about .txt_bx strong {display: block; font-family: 'Roboto', sans-serif; font-size: 40px; color: #ffffff; font-weight: 700; margin-bottom: 21px;}
#about .txt_bx p {font-size: 17px; color: rgba(255,255,255,0.7); line-height: 32px; letter-spacing: -0.05em; word-break: keep-all;}



/* team */
#team {padding: 131px 0 140px;}
#team .inner_bx {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box;}
#team .con_bx {display: flex; flex-flow: wrap; margin-bottom: -24px;}
#team .con_bx .con_w {width: calc(50% - 16px); margin-right: 24px; box-sizing: border-box; border: 1px solid #dddddd; padding: 31px 40px 26px; margin-bottom: 24px; margin: 0 auto; min-height: 240px;}
/*#team .con_bx .con_w {width: calc(25% - 18px); margin-right: 24px; box-sizing: border-box; border: 1px solid #dddddd; padding: 31px 30px 26px;}*/
/* #team .con_bx .con_w:nth-child(2n) {margin-right: 0;} */
#team .con_bx .name {font-size: 20px; color: #666666; letter-spacing: -0.05em; word-break: keep-all;}
#team .con_bx .name strong {display: inline-block; font-size: 28px; color: #222222; font-weight: 700; margin-right: 10px;}
#team .con_bx ul {padding-top: 8px;}
#team .con_bx ul li {position: relative; padding-left: 15px; font-size: 16px; color: #666666; letter-spacing: -0.05em; word-break: keep-all; line-height: 34px;}
#team .con_bx ul li::before {content: ''; width: 3px; height: 3px; background-color: #666666; border-radius: 50%; position: absolute; left: 0px; top: 16px;}
#team .con_bx ul li p {text-indent: 0; font-size: 14px; color: #888888; line-height: 26px;}



/* notice */
#notice {background-color: #f9f9f9; padding: 131px 0 140px;}
#notice .inner_bx {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box;}



/* contact */
#contact {position: relative; overflow: hidden;}
#contact .txt_bx {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; padding: 133px 0 132px;}
#contact .txt_bx .txt_w {width: calc(50% - 120px);}
#main #contact .ttl_bx {text-align: left; padding-bottom: 0;}
#contact .txt_bx .info_bx {padding-top: 50px; padding-right: 30px;}
#contact .txt_bx .info_bx li {font-size: 16px; line-height: 34px; color: #666666; letter-spacing: -0.05em; word-break: keep-all; min-height: 34px; padding-left: 76px; position: relative;}
#contact .txt_bx .info_bx li span {color: #888888; position: absolute; left: 0; top: 0;}
#contact .map_bx {position: absolute; width: calc(50% + 120px); height: 100%; right: 0px; top: 0px; z-index: 1; font-size: 0;}
#contact .map_bx iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}


/* PC */
@media all and (min-width:1025px){
	
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 공통 */
	#main section .ttl_bx {padding-bottom: 36px;}
	#main section .ttl_bx strong {font-size: 24px;}
	#main section .ttl_bx p {margin-top: 13px; font-size: 13px; line-height: 21px;}
	
	
	
	/* index */
	#index .v_bx .txt_bx {padding-bottom: 72px;}
	#index .v_bx .txt_bx .txt_w {font-size: 46px; line-height: 54px;}
	#index .v_bx .scroll {bottom: 16px;}
	#index .v_bx .scroll a {padding-top: 35px;}
	#index .v_bx .scroll a .icon {width: 20px; height: 32px; margin-left: -10px;}
	#index .v_bx .scroll a .icon::before {width: 2px; height: 5px; top: 6px;}
	#index .v_bx .scroll a span {font-size: 12px;}
	
	#index_txt {padding: 75px 0 0;}
	#index_txt .t_txt {margin-bottom: 41px; font-size: 28px; line-height: 36px; max-width: 300px;}
	#index_txt .con_bx .con_w {width: calc(50% - 5px); margin-right: 10px; min-height: 230px; padding-bottom: 22px;}
	#index_txt .con_bx .con_w.col2 {margin-top: 30px;}
	#index_txt .con_bx .txt1 {height: 44px;}
	#index_txt .con_bx .txt1 strong {font-size: 60px; line-height: 46px;}
	#index_txt .con_bx p {margin-top: 32px; margin-bottom: 10px; padding: 0 20px; font-size: 18px;}
	#index_txt .con_bx .txt2 {padding: 0 20px; font-size: 12px; line-height: 20px;}
	#index_txt .con_bx ul {padding: 0 20px;}
	#index_txt .con_bx ul li {margin-bottom: 0; padding-left: 51px; font-size: 12px; line-height: 20px; min-height: 20px;}
	


	/* about */
	#about {padding-top: 80px;}
	#about .inner_bx {height: 220px;}
	#about .txt_bx {width: calc(100% - 40px);}
	#about .txt_bx strong {margin-bottom: 13px; font-size: 24px;}
	#about .txt_bx p {font-size: 13px; line-height: 21px;}
	


	/* team */
	#team {padding: 74px 0 80px;}
	#team .con_bx {margin-bottom: -10px;}
	#team .con_bx .con_w {width: calc(33.333% - 6.666px); margin-right: 10px; padding: 13px 20px 10px; margin-bottom: 10px;}
	/*#team .con_bx .con_w {width: calc(25% - 7.5px); margin-right: 10px; padding: 13px 20px 10px;}*/
	#team .con_bx .name {font-size: 14px;}
	#team .con_bx .name strong {font-size: 18px; margin-right: 9px;}
	#team .con_bx ul {padding-top: 5px;}
	#team .con_bx ul li {font-size: 12px; line-height: 24px; padding-left: 11px;}
	#team .con_bx ul li::before {width: 2px; height: 2px; top: 12px;}
	#team .con_bx ul li p {font-size: 11px; line-height: 19px;}



	/* notice */
	#notice {padding: 74px 0 80px;}



	/* contact */
	#contact .txt_bx {padding: 74px 0;}
	#contact .txt_bx .info_bx {padding-top: 31px;}
	#contact .txt_bx .info_bx li {font-size: 12px; line-height: 20px; min-height: 20px; padding-left: 51px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 공통 */
	
	
	
	/* index */
	#index .v_bx .bg {background: url(../images/main/main_v_01_m.jpg) no-repeat center; background-size: cover;}
	
	#index_txt .con_bx .con_w {width: 100%; margin-top: 0!important; margin-bottom: 10px; margin-right: 0;}
	
	

	/* about */
	#about .bg {background: url(../images/main/about_bg_m.jpg) no-repeat center; background-size: cover;}
	#about .txt_bx {text-align: center;}
	#about .txt_bx p {max-width: 250px; margin: 0 auto;}
	#about .txt_bx p br {display: none;}
	


	/* team */
	#main #team .ttl_bx p {max-width: 290px;}
	#main #team .ttl_bx p br {display: none;}
	#team .con_bx .con_w:nth-child(n) {margin-right: 0; width: 100%; margin-bottom: 10px;}
	#team .con_bx .con_w {min-height: 120px;}


	/* contact */
	#contact .txt_bx {padding-bottom: 47px;}
	#contact .txt_bx .txt_w {width: 100%;}
	#contact .txt_bx .info_bx li {padding-left: 0; margin-bottom: 10px;}
	#contact .txt_bx .info_bx li:last-child {margin-bottom: 0;}
	#contact .txt_bx .info_bx li span {position: relative; left: auto; top: auto; display: block;}
	#contact .map_bx {position: relative; width: 100%; height: auto;}
	#contact .map_bx[data-aos=fade-left] {transform: translate3d(0,100px,0);}
	#contact .map_bx[data-aos=fade-left].aos-animate {transform: translate3d(0,0,0);}
	#contact .map_bx iframe {position: relative; width: 100%; height: 170px;}
}