@charset "utf-8";


/*
font-family: 'Lora', serif;
*/


/* 공통 */
#main section {overflow: hidden;}
#main .inner_bx {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box;}
#main .ttl01 {text-align: center;}
#main .ttl01 strong {display: block; font-size: 64px; color: #111111; font-weight: 700; line-height: 56px;}
#main .ttl01 .txt1 {font-size: 28px; color: #444444; letter-spacing: -0.025em; word-break: keep-all; margin-top: 47px;}
#main .ttl01 .txt1 span {color: #002050; font-weight: 700;}
#main .ttl01 .txt2 {font-size: 20px; color: #444444; line-height: 38px; letter-spacing: -0.025em; word-break: keep-all; margin: 20px auto 0;}
#main .ttl01 .txt2 span {font-weight: 700; color: #111111;}


/* index */
#index {position: relative; overflow: hidden;}
#index .img_bx {position: relative; overflow: hidden;}
#index .img_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; transform: scale(1.2); -webkit-transition: transform 5s; -moz-transition: transform 5s; transition: transform 5s;}
#index .img_bx.on div {transform: scale(1);}
#index .txt_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#index .txt_bx .txt_w {max-width: 1200px; width: calc(100% - 30px); text-align: center;}
#index .txt_bx strong {display: block; /*font-family: 'Lora', serif; font-size: 160px; color: #ffffff; font-weight: 600; line-height: 160px;*/ -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(-70px); opacity: 0; animation-name: titleAnimation; animation-timing-function: ease; animation-duration: 7s; animation-delay: 0.7s; -webkit-animation-fill-mode: forwards; padding: 20px 0 0;}
#index .txt_bx p {display: block; /*font-size: 36px; color: #ffffff; word-break: keep-all; */padding: 10px 0 20px; margin-top: 37px; -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: titleAnimation2; animation-timing-function: ease; animation-duration: 7s; animation-delay: 0.6s; -webkit-animation-fill-mode: forwards;}
@keyframes titleAnimation {
  0% {
    transform: translateY(-70px);
    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%);
  }
}
@keyframes titleAnimation2 {
  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%);
  }
}
#index .bar {position: absolute; width: 1px; height: 280px; bottom: 0; left: 50%; background: rgba(243,243,243,0.5);}
#index .bar span {position: absolute; width: 1px; height: 80px; background-color: #fff; top: 0; left: 0px; animation: updown 3.5s ease infinite;}
@-webkit-keyframes updown {
	0% {
		transform: translate(0, 0);
	}
	60% {
		transform: translate(0, 200px);
	}
	100% {
		transform: translate(0, 0);
	}
}




/* Our Story */
#ourStory {padding: 176px 0 190px;}
#main #ourStory .ttl01 .txt2 {max-width: 1080px;}
#ourStory .con_bx {display: flex; flex-flow: wrap; margin-top: 72px;}
#ourStory .con_bx li {width: calc(33.333% - 20px); margin-right: 30px; text-align: center;}
#ourStory .con_bx li:nth-child(3n) {margin-right: 0;}
#ourStory .con_bx li img {width: 100%;}
#ourStory .con_bx li strong {font-size: 20px; color: #111111; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all; margin-top: 35px; display: block;}
#ourStory .con_bx li p {font-size: 16px; line-height: 26px; color: #666666; letter-spacing: -0.025em; word-break: keep-all; margin: 14px auto 0;}






/* History */
#history {padding-bottom: 180px;}
#history .top_bx {max-width: 1800px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; position: relative; overflow: hidden; min-height: 400px; display:flex; justify-content:center; align-items:center; table-layout:fixed; padding: 20px;/* margin-top: 190px;*/}
#history .top_bx .bg_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/main/history_bg.jpg) no-repeat center; background-size: cover;}
#history .top_bx strong {display: block; text-align: center; width: 100%; position: relative; z-index: 1; font-size: 64px; color: #ffffff; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all;}
#history .con_bx {position: relative; margin-top: 102px;}
#history .con_bx::before {content: ''; width: 1px; height: calc(100% - 10px); background-color: #dddddd; position: absolute; left: 50%; top: 10px;}
#history .con_bx .con_w {display: flex; flex-flow: wrap; position: relative; margin-bottom: 89px;}
#history .con_bx .con_w:last-child {margin-bottom: 0;}
#history .con_bx .con_w:last-child::after {content: ''; width: 3px; height: calc(100% - 10px); top: 10px; left: calc(50% - 1px); background-color: #fff; position: absolute;}
#history .con_bx .txt_bx {width: 50%; box-sizing: border-box; order: 2; padding: 0 0 0 100px;}
#history .con_bx .img_bx {width: 50%; box-sizing: border-box; order: 1; padding: 0 100px 0 0;}
#history .con_bx .img_bx img {max-width: 100%;}
#history .con_bx .con_w.type2 .txt_bx {order: 1; padding: 0 100px 0 0; text-align: right;}
#history .con_bx .con_w.type2 .img_bx {order: 2; padding: 0 0 0 100px;}
#history .con_bx .txt_bx .year {padding: 0 0 0 7px; font-size: 34px; color: #222222; font-weight: 700; line-height: 25px; position: relative;}
#history .con_bx .txt_bx .year::before {content: ''; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 3px solid #002050; background-color: #fff; position: absolute; left: -107px; top: 50%; margin-top: -7px; z-index: 1;}
#history .con_bx .txt_bx .year::after {content: ''; width: 80px; height: 1px; background-color: #dddddd; position: absolute; left: -99px; top: 50%;}
#history .con_bx .con_w.type2 .txt_bx .year {padding: 0 7px 0 0;}
#history .con_bx .con_w.type2 .txt_bx .year::before {left: auto; right: -107px;}
#history .con_bx .con_w.type2 .txt_bx .year::after {left: auto; right: -99px;}
#history .con_bx .txt_bx ul {padding: 0 0 0 10px; margin-top: 23px;}
#history .con_bx .con_w.type2 .txt_bx ul {padding: 0 10px 0 0;}
#history .con_bx .txt_bx ul li {font-size: 16px; color: #444444; line-height: 26px; letter-spacing: -0.05em; word-break: keep-all; margin-bottom: 4px;}
#history .con_bx .txt_bx ul li:last-child {margin-bottom: 0;}
#history .con_bx .txt_bx ul li sup {position: relative; top: 1px; font-size: 11px;}
#history .con_bx .txt_bx ul li a {color: #444;}





/* Partners */
#partners {background: url(../images/main/partners_bg.jpg) no-repeat center bottom #f1f1f1; padding: 186px 0 180px;}
#partners .con_bx {margin-top: 94px;}
#partners .con_bx ul {display: flex; flex-flow: wrap; background-color: #fff; padding: 60px 100px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.06);}
#partners .con_bx ul li {width: 20%; box-sizing: border-box; text-align: center;}
#partners .con_bx ul li img {max-width: 100%;}





/* Notice */
#notice {padding: 186px 0 190px;}
#notice .ttl01 {margin-bottom: 16px;}

#notice .popup_bx {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100000; background-color: rgba(0,0,0,0.8); overflow-y: auto; display: none;}
#notice .popup_bx .pop_w {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: table; box-sizing: border-box; padding: 50px 0;}
#notice .popup_bx .pop_inner {display: table-cell; height: 100%; vertical-align: middle;}
#notice .popup_bx .pop_con {max-width: 1200px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; background-color: #fff; padding: 40px 60px 60px;}
#notice .popup_bx .close_btn {width: 34px; height: 34px; background: url(../images/icon/close1.png) no-repeat center; margin: 0 0 4px auto; font-size: 0; cursor: pointer;}
#notice .view_bx .subject_bx {margin-bottom: 55px;}
#notice .view_bx .subject_bx strong {display: block; font-size: 28px; color: #111111; font-weight: 700; letter-spacing: -0.025em; word-break: keep-all;}
#notice .view_bx .subject_bx p {font-size: 16px; color: #888888; letter-spacing: -0.025em; word-break: keep-all; margin-top: 17px;}
#notice .view_bx .txt_bx {font-size: 16px; color: #888888;}
#notice .view_bx .txt_bx img {max-width: 100%;}
#notice .view_bx .file_bx {border-top: 1px solid #dddddd; padding: 20px 0; font-size: 0; margin-top: 37px;}
#notice .view_bx .file_bx li {margin-bottom: 5px;}
#notice .view_bx .file_bx li:last-child {margin-bottom: 0;}
#notice .view_bx .file_bx a {display: inline-block; padding-left: 37px; min-height: 28px; box-sizing: border-box; font-size: 14px; color: #999999; letter-spacing: -0.025em; word-break: keep-all; background: url(../images/icon/file.png) no-repeat left top; padding-top: 6px;}





/* Contact */
#contact {position: relative;}
#contact .img_bx {display: flex; flex-flow: wrap; position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden;}
#contact .img_bx .bg_bx {width: calc(50% - 120px); box-sizing: border-box; position: relative; height: 100%; background: url(../images/main/contact_bg.jpg) no-repeat center; background-size: cover;}
#contact .img_bx .map_bx {width: calc(50% + 120px); box-sizing: border-box; position: relative; height: 100%;}
#contact .img_bx .map_bx iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#contact .img_bx .map_bx .root_daum_roughmap .border1, #contact .img_bx .map_bx .root_daum_roughmap .border2, #contact .img_bx .map_bx .root_daum_roughmap .border3, #contact .img_bx .map_bx .root_daum_roughmap .border4 {display: none;}
#contact .txt_bx {width: calc(50% - 120px); box-sizing: border-box; height: 520px; position: relative; z-index: 1; display:flex; justify-content:center; align-items:center; table-layout:fixed; padding-right: 20px; max-width: 420px;}
#contact .txt_bx .txt_w {width: 100%;}
#contact .txt_bx strong {display: block; font-size: 64px; color: #ffffff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 9px;}
#contact .txt_bx ul {padding-top: 44px;}
#contact .txt_bx ul li {font-size: 16px; color: #ffffff; letter-spacing: -0.025em; word-break: keep-all; line-height: 26px; padding-left: 105px; position: relative; margin-bottom: 6px; min-height: 26px;}
#contact .txt_bx ul li:last-child {margin-bottom: 0;}
#contact .txt_bx ul li span {position: absolute; top: 0; left: 0; color: rgba(255,255,255,0.5);}




/* PC */
@media all and (min-width:1025px){
	/* Notice */
	#notice .view_bx .file_bx a:hover {text-decoration: underline;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 공통 */
	#main .ttl01 strong {font-size: 36px; line-height: 32px;}
	#main .ttl01 .txt1 {margin-top: 25px; font-size: 18px; line-height: 26px;}
	#main .ttl01 .txt2 {margin-top: 14px; font-size: 14px; line-height: 22px;}





	/* index */
	#index .txt_bx strong {padding: 5px 0 0;}
	#index .txt_bx strong img {max-width: 115px; width: 100%;}
	#index .txt_bx p {margin-top: 25px; padding: 3px 0 5px;}
	#index .txt_bx p img {max-width: 236px; width: 100%;}
	#index .bar {height: 140px;}
	#index .bar span {height: 40px;}
	@-webkit-keyframes updown {
		0% {
			transform: translate(0, 0);
		}
		60% {
			transform: translate(0, 100px);
		}
		100% {
			transform: translate(0, 0);
		}
	}
	




	/* Our Story */
	#ourStory {padding: 97px 0 100px;}
	#main #ourStory .ttl01 .txt2 {max-width: 780px;}
	#ourStory .con_bx {margin-top: 42px;}
	#ourStory .con_bx li strong {margin-top: 15px; font-size: 14px;}
	#ourStory .con_bx li p {margin-top: 6px; font-size: 12px; line-height: 18px;}
	




	/* History */
	#history {padding-bottom: 100px;}
	#history .top_bx {/*margin-top: 100px;*/ min-height: 200px;}
	#history .top_bx strong {font-size: 36px;}
	#history .con_bx {margin-top: 50px;}
	#history .con_bx .con_w {margin-bottom: 45px;}
	#history .con_bx .img_bx {padding: 0 50px 0 0;}
	#history .con_bx .con_w.type2 .img_bx {padding: 0 0 0 50px;}
	#history .con_bx .txt_bx {padding: 0 0 0 50px;}
	#history .con_bx .con_w.type2 .txt_bx {padding: 0 50px 0 0;}
	#history .con_bx .txt_bx .year {font-size: 20px; line-height: 16px;}
	#history .con_bx .con_w.type2 .txt_bx .year {padding: 0 0 0 7px;}
	#history .con_bx .txt_bx .year::before {width: 10px; height: 10px; border-width: 2px; margin-top: -5px; left: -55px;}
	#history .con_bx .con_w.type2 .txt_bx .year::before {right: -55px;}
	#history .con_bx .txt_bx .year::after {width: 40px; left: -47px;}
	#history .con_bx .con_w.type2 .txt_bx .year::after {right: -47px;}
	#history .con_bx .txt_bx ul {margin-top: 10px;}
	#history .con_bx .con_w.type2 .txt_bx ul {padding: 0 0 0 10px;}
	#history .con_bx .txt_bx ul li {font-size: 12px; line-height: 18px;}
	#history .con_bx .txt_bx ul li sup {font-size: 8px;}





	/* Partners */
	#partners {padding: 97px 0 100px;}
	#partners .con_bx {margin-top: 42px;}
	#partners .con_bx ul {border-radius: 10px; padding: 20px 30px;}
	#partners .con_bx ul li {width: 25%;}





	/* Notice */
	#notice {padding: 97px 0 100px;}
	#notice .ttl01 {margin-bottom: 38px;}
	
	#notice .popup_bx .pop_con {padding: 15px 20px 40px;}
	#notice .popup_bx .close_btn {width: 19px; height: 19px; background-size: 19px 19px; margin-bottom: 4px;}
	#notice .view_bx .subject_bx {margin-bottom: 17px;}
	#notice .view_bx .subject_bx strong {font-size: 18px;}
	#notice .view_bx .subject_bx p {margin-top: 10px; font-size: 12px;}
	#notice .view_bx .txt_bx {font-size: 12px; line-height: 20px;}
	#notice .view_bx .file_bx {margin-top: 15px; padding: 15px 0 0;}
	#notice .view_bx .file_bx a {font-size: 12px; min-height: 20px; padding: 3px 0 0 26px; background-size: 20px 20px;}





	/* Contact */
	#contact .img_bx .bg_bx {width: calc(50% - 60px);}
	#contact .img_bx .map_bx {width: calc(50% + 60px); position: relative; overflow: hidden;}
	#contact .img_bx .map_bx > div {position: absolute; width: 100%; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);}
	#contact .img_bx .map_bx .map > div:nth-child(2) {bottom: 100px!important;}
	#contact .txt_bx {width: calc(50% - 100px); height: 320px;}
	#contact .txt_bx strong {font-size: 36px; padding-bottom: 7px;}
	#contact .txt_bx ul {padding-top: 28px;}
	#contact .txt_bx ul li {margin-bottom: 5px; font-size: 12px; line-height: 17px; padding-left: 80px; min-height: 17px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* index */
	#index .img_bx div {background-position: left 70% center !important;}





	/* Our Story */
	#ourStory .con_bx li:nth-child(n) {width: 100%; margin-right: 0; margin-bottom: 35px;}
	#ourStory .con_bx li:last-child {margin-bottom: 0;}
	




	/* History */
	#history .top_bx .bg_bx {background: url(../images/main/history_bg_m.jpg) no-repeat center; background-size: cover;}
	#history .con_bx {padding-left: 5px;}
	#history .con_bx::before {left: 5px;}
	#history .con_bx .con_w:last-child::after {left: -1px;}
	#history .con_bx .con_w:nth-child(n) .txt_bx {width: 100%; order: 1; padding: 0 0 0 30px; text-align: left;}
	#history .con_bx .con_w:nth-child(n) .img_bx {width: 100%; order: 2; padding: 15px 0 0 40px;}
	#history .con_bx .con_w:nth-child(n) .txt_bx .year::before {left: -35px; right: auto;}
	#history .con_bx .con_w:nth-child(n) .txt_bx .year::after {left: -27px; right: auto; width: 20px;}





	/* Partners */
	#partners .con_bx ul li {width: 50%;}





	/* Contact */
	#main #contact .inner_bx {width: 100%;}
	#contact .txt_bx {width: 100%; height: auto; max-width: 100%; background: url(../images/main/contact_bg_m.jpg) no-repeat center; background-size: cover; padding: 52px 15px 58px;}
	#contact .img_bx {position: relative; top: auto; left: auto; display: block;}
	#contact .img_bx .bg_bx {display: none;}
	#contact .img_bx .map_bx {width: 100%; height: 240px; transform: translate3d(0,100px,0);}
	#contact .img_bx .map_bx.aos-animate {transform: translateZ(0);}
	#contact .img_bx .map_bx .map > div:nth-child(2) {bottom: 140px!important;}
}