@charset "utf-8";

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


html, body, #wrap {overflow-x: hidden;}
#main section {overflow: hidden;}
#main .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}


/* sec1 */
#sec1 {position: relative; overflow: hidden;}
#sec1 .video_bx {position:relative; overflow:hidden;}
#sec1 .video_bx video {position: absolute; top: 50%; left: 50%; min-height: 100%; min-width: 100%;transform: translate(-50%, -50%); z-index:0;}
#sec1 .scroll_bx {max-width: 1820px; width: calc(100% - 40px); position: absolute; bottom: 0; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); text-align: left; font-size: 0;}
#sec1 .scroll_bx .sc_w {display: inline-block; text-align: center; cursor: default;}
#sec1 .scroll_bx strong {display: block; writing-mode: vertical-rl; white-space: nowrap; font-family: 'Montserrat', sans-serif; font-size: 12px; color: #ffffff; font-weight: 400; text-transform: uppercase;}
#sec1 .scroll_bx .bar {position: relative; height: 80px; width: 1px; background-color: rgba(255,255,255,0.2); margin: 12px auto 0;}
#sec1 .scroll_bx .bar span {position: absolute; left: 0; top: 0; width: 1px; height: 30px; background-color: #ffffff; animation: updown 2.5s ease infinite;}
@-webkit-keyframes updown {
	0% {
		transform: translate(0, 0px);
	}
	60% {
		transform: translate(0, 50px);
	}
	100% {
		transform: translate(0, 0px);
	}
}




/* sec2 */
#sec2 .inner_bx {position: relative; padding: 180px 0 240px;}
#sec2 .txt_bx {position: relative; z-index: 1;}
#sec2 .ttl_bx .txt1 img {max-width: 100%;}
#sec2 .ttl_bx .txt2 {font-family: 'Montserrat', sans-serif; font-size: 60px; color: #000000; font-weight: 700; word-break: keep-all; margin-top: -35px; position: relative; z-index: 1; left: -5px}
#sec2 .btn_bx {font-size: 0; margin-top: 88px;}
#sec2 .btn_bx .btn {width: 240px; display: inline-block; margin-right: 14px;}
#sec2 .btn_bx .btn:last-child {margin-right: 0;}
#sec2 .btn_bx .btn strong {display: block; font-family: 'Montserrat', sans-serif; font-size: 30px; line-height: 40px; color: #000000; font-weight: 700;}
#sec2 .btn_bx .btn a {display: inline-block; font-size: 18px; color: #000000; letter-spacing: -0.05em; word-break: keep-all; position: relative; padding: 10px 45px 10px 0; margin-top: 14px;}
#sec2 .btn_bx .btn a::before {content: ''; width: 30px; height: 10px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -5px; z-index: 1;}
#sec2 .btn_bx .btn a span {display: inline-block;}
#sec2 .btn_bx .btn a em {display: inline-block; width: 40px; height: 40px; right: -5px; position: absolute; top: 50%; margin-top: -20px; background-color: transparent; border-radius: 50%;}
#sec2 .img_bx {position: absolute; width: 740px; height: 600px; overflow: hidden; right: 0; top: 50%; margin-top: -300px;}
#sec2 .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;}





/* sec3 */
#sec3 {padding-bottom: 120px;}
#sec3 .ttl_bx {margin-bottom: 85px;}
#sec3 .ttl_bx .txt1 img {max-width: 100%;}
#sec3 .ttl_bx .txt2 {font-family: 'Montserrat', sans-serif; font-size: 60px; color: #000000; font-weight: 700; word-break: keep-all; margin-top: -41px; position: relative; left: -5px;}




/* PC */
@media all and (min-width:1025px){
	/* sec2 */
	#sec2 .btn_bx .btn a::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
	#sec2 .btn_bx .btn a:hover::before {background: url(../images/icon/arrow2.png) no-repeat center; transform: translate(10px, 0);}
	#sec2 .btn_bx .btn a em {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; transform: scale(0.5);}
	#sec2 .btn_bx .btn a:hover em {transform: translate(10px, 0) scale(1); background-color: #000;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* sec1 */
	#sec1 {padding-top: 70px;}
	#sec1 .video_bx video{ width:100%; height:100%; object-fit:cover;}
	#sec1 .scroll_bx {display: none!important;}
	
	


	/* sec2 */
	#sec2 .inner_bx {padding: 140px 0 171px;}
	#sec2 .ttl_bx .txt1 img {max-width: 600px; width: 100%;}
	#sec2 .ttl_bx .txt2 {font-size: 50px; margin-top: -20px;}
	#sec2 .btn_bx {margin-top: 44px;}
	#sec2 .btn_bx .btn {width: 170px;}
	#sec2 .btn_bx .btn strong {font-size: 15px; line-height: 20px;}
	#sec2 .btn_bx .btn a {padding: 8px 19px 8px 0; font-size: 10px; margin-top: 4px;}
	#sec2 .btn_bx .btn a::before {width: 10px; background-size: 10px auto;}
	#sec2 .btn_bx .btn a em {display: none;}
	#sec2 .img_bx {width: 450px; height: 365px; margin-top: -182px;}
	
	


	/* sec3 */
	#sec3 {padding-bottom: 50px;}
	#sec3 .ttl_bx {margin-bottom: 38px;}
	#sec3 .ttl_bx .txt1 img {max-width: 600px; width: 100%;}
	#sec3 .ttl_bx .txt2 {font-size: 50px; margin-top: -20px;}
	
	
}

/* 모바일 */
@media all and (max-width:768px){
	/* sec2 */
	#sec2 .inner_bx {padding: 50px 0 40px;}
	#sec2 .img_bx {display: none;}
	#sec2 .ttl_bx .txt1 {text-align: center;}
	#sec2 .ttl_bx .txt1 img {max-width: 319px; margin: 0 auto;}
	#sec2 .ttl_bx .txt2 {text-align: center; font-size: 25px; left: 0; margin-top: -15px; margin-bottom: 49px;}
	#sec2 .txt_bx .m_show2 {width: 100%;}
	#sec2 .btn_bx {margin-top: 25px; display: flex; flex-flow: wrap;}
	#sec2 .btn_bx .btn {width: 50%; margin-right: 0; text-align: center;}
	
	


	/* sec3 */
	#sec3 .ttl_bx {margin-bottom: 44px;}
	#sec3 .ttl_bx .txt1 img {max-width: 319px; margin: 0 auto;}
	#sec3 .ttl_bx .txt2 {text-align: center; font-size: 25px; left: 0; margin-top: -15px;}
}