@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Nunito+Sans:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */
/* font-family: 'Roboto', sans-serif; */
*{padding: 0; margin: 0;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.02em; font-size: 16px;}
ul, li {list-style: none;}


/*메인 비주얼*/
#wrap {width: 100%;}
.main {width: 100%; height: 950px; position: relative; top:0; background-image: url(../img/main2.jpg); background-size: cover; width: 100%;  display: block;}
/* .main::before {content:''; position:absolute; left: 0; background-image: url(../img/main2.jpg); background-size: cover; width: 100%; height: 100%; display: block; z-index: -2;} */
.main_bor {width:90%; margin: 0 auto;  border:1px solid ; border-top:0; height: 90%; border-image: linear-gradient(-45deg, #c70202, #ffcdf3aa, #6b0202);border-image-slice: 1;
  animation: animatedgradient 2s ease alternate infinite; background-size: 300% 300%; }

   @keyframes animatedgradient { 0% { border-image: linear-gradient(-45deg)} 50% { } 100% { border-image: linear-gradient(360deg)} }


.main_txt {width:40%; text-align: left; position: relative; top:30%; left:5%}
.main_txt h2 {font-size: 6em; line-height: 104px; color:#ffffff; font-family: 'Nunito Sans', sans-serif; font-weight: 100; width: 100%; text-transform: uppercase;}


.main_p_box {margin-top: 10%;}
.main_txt p {width: 100%; word-break:break-all;
  white-space:normal;color:#ffffff; font-size: 24px; height:0; font-weight: 100;}

.main_txt p:nth-child(1) { animation: anitxt 3s ease forwards; }
.main_txt p:nth-child(2) {animation: anitxt 6s ease forwards;}
  @keyframes anitxt {
  0% { left:100px; opacity: 0; height:0;}
  100% {left:0px; opacity: 1; height:1.6em; }
}
.main_txt button {position: absolute; top:480px; width:218px; height:50px; border:none; color:#ffffff; font-size: 20px; }

/*메인 컨텐츠1*/
.main_content1 {position:relative; width:100%; height: 1000px; background: linear-gradient(180deg, rgba(1,1,1,1) 0%, rgba(66,66,66,1) 50%, rgba(1,1,1,1) 100%);
color: #ffffff; font-family: 'Roboto', sans-serif; top:-5px}
.main_content_wrap {width:1200px; margin: 0 auto;}
.main_content1_title {padding:150px 0 100px 0; text-align: center; }
.main_content1 h3 { width:100%; font-size: 40px; line-height: 40px; color:#ffffff;  font-weight: 100; font-family: 'Roboto', sans-serif; }
.main_content1_title p {font-weight: 100; color:#aaaaaa; padding-top:15px}
.main_content1_inner {width:1200px; display: flex; position: absolute; left:50%; transform: translateX(-50%);}
.main_content1_img_box {width:30%; box-sizing: border-box; height: 480px;  transition: all 0.5s ease-in-out; position: relative; margin-left: 20px;}
.main_content1_img_box:nth-child(1) {margin-left: 0}
.main_content1_img_box:hover {background-color: #2c2c2c; animation-name: bor_bx;} 

.line {position: absolute; width: 100%; height: 480px; z-index: 1;}
.line span{position: absolute; background: #4b4e4e;}
.line span:nth-child(1) {left: 0; top: 0; width: 0; height: 1px; transition: all 0.1s;}
.line span:nth-child(2) {right: 0; top: 0; width: 1px; height: 0; transition: all 0.1s linear 0.1s;}
.line span:nth-child(3) {right: 0; bottom: 0; width: 0; height: 1px; transition: all 0.1s linear 0.2s;}
.line span:nth-child(4) {left: 0; bottom: 0; width: 1px; height: 0; transition: all 0.1s linear 0.3s;}
.line:hover span:nth-child(1) {width: 100%;}
.line:hover span:nth-child(2) {height: 100%;}
.line:hover span:nth-child(3) {width: 100%;}
.line:hover span:nth-child(4) {height: 100%;}


.main_content1_img {width:78%; height: 380px; background-color:transparent; position: absolute; left: 50%; transform:translatex(-50%); padding-top:60px; }
.main_content1_img img {display: block; width: 100%; }
.main_content1_txt {text-align: center; position: absolute; top:74%; left:50%; transform:translatex(-50%); }
.main_content1_txt p {font-family: 'Roboto', sans-serif; font-weight: 100;}
.main_content1_txt p:nth-child(1) {font-size: 24px; line-height: 28px; }
.main_content1_txt p:nth-child(1)::before {content: ''; display: block; width:13px; height: 14px; position:absolute; background-image: url(../img/icon-next_2.png); background-size: cover; right: -24px; top:7px}
.main_content1_txt p:nth-child(2)  {font-size: 18px; padding-top:10px; position: relative; color:#aaaaaa}
.main_content1_txt p:nth-child(2)::before {content: ''; background-color:#666666; width:100%; height: 1px; position: absolute; left: 0; top:5px; }

/*메인 컨텐츠2*/
.main_content2 {font-size: 22px; width:100%; }
.main_content2_inner {max-width:1100px; margin: 0 auto; padding: 140px 0 66px 0; display: flex;}
.main_content2_title {display: flex; align-items: flex-end; margin-bottom: 30px;}
.main_content2_title h3 {font-size: 32px; }
.main_content2_title p {padding-left:5px;}
.main_content2_inner > div {font-size: 20px; }
.main_content2 p {font-size:20px; line-height: 32px;}
.main_content2 button {margin-top:110px; }
.main_txt button, .main_content2 button {z-index:1; width:220px; height: 50px; background-color: #e01504; color: #ffffff; border:none; font-size: 22px; box-sizing: border-box; cursor: pointer;}
.main_content2 img {transform: translateY(-20%);}


.main_txt .btn_hover a, .main_content2_txt .btn_hover a {display: block; font-size: 20px; font-weight: 100; line-height: 20px;}
.btn_hover{
color: #fff; cursor: hand; text-transform: capitalize; border: 1px solid #fff; position: relative; overflow: hidden!important; -webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
/* background: transparent!important; */}
.btn_hover:hover{ border: 1px solid #000000; color: #ffffff!important;}
.btn_hover::before {content: ''; width: 0%; height: 100%; display: block; background: #000000; position: absolute; -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg);  transform: skewX(-20deg);   
 left: -10%; opacity: 1; top: 0; z-index: -12; -moz-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition: all .7s cubic-bezier(0.77, 0, 0.175, 1); transition: all .7s cubic-bezier(0.77, 0, 0.175, 1); box-shadow:2px 0px 14px rgba(0,0,0,.6);} 
.btn_hover::after {
    content: ''; width: 0%; height: 100%; display: block;  background: #e01504; position: absolute;
    -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg);  transform: skewX(-20deg); left: -10%; opacity: 0; top: 0; z-index: -15; -webkit-transition: all .94s cubic-bezier(.2,.95,.57,.99);
    -moz-transition: all .4s cubic-bezier(.2,.95,.57,.99); -o-transition: all .4s cubic-bezier(.2,.95,.57,.99); transition: all .4s cubic-bezier(.2,.95,.57,.99); box-shadow: 2px 0px 14px rgba(0,0,0,.6);
}
.btn_hover:hover::before { opacity:1; width: 116%;}
.btn_hover:hover::after {opacity:1; width: 120%;}

/*메인 컨텐츠3*/
.main_content3 {background-color:#8a1001; width:100%; height: 320px;  margin: 0 auto; padding-top:110px; box-sizing: border-box;}
.main_content3 > div { display: flex; width: 100%; justify-content: center;}
.main_content3 > div > a { display: block;}

/*컨텐츠3 버튼*/
.main_btn{width:320px; box-sizing: border-box; padding:6px; margin:10px 4px; color: #000000; font-family: sans-serif; text-transform: uppercase; text-align: center;  position: relative;
text-decoration: none; display:inline-block; overflow:hidden; z-index: 0; }
.main_btn div.notice_btn {height: 70px; padding-top:10px; line-height: 28px; background:#ffffff; position:relative; -moz-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); top: 0; display: block;
-o-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); }
.main_btn div.notice_btn span {display: block;}
.main_btn div.notice_btn span:nth-child(1) {font-size: 16px;}
.main_btn div.notice_btn span:nth-child(2) {font-size: 20px;}
.main_btn_transition { position: absolute; top: 0; left: 0%; width: 0;height: 100%; background: #000000; z-index:-1;}
.main_btn:hover div.notice_btn  {color: #ffffff!important; background-color:#000000; }
.main_btn:hover .main_btn_transition { width:120%; left:110%; -moz-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1); transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);}



/*&&&&&&&&&&&&&&&&&&&&&&&&&&모델 팝업 &&&&&&&&&&&&&&&&&& */

.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  border: 2px solid red;
 
  left: 40%;
  top: 8%;
  width: 25%; /* Full width */
  height: 75%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(255, 255, 255); /* Fallback color */
  background-color: rgba(255, 255, 255, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content1 {
  background-color: #fefefe;
  border: 1px solid #888;
 /* Could be more or less, depending on screen size */                          
}

.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  border: 2px solid red;
  left: 66%;
  top: 8%;
  width: 25%; /* Full width */
  height: 50%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(255, 255, 255); /* Fallback color */
  background-color: rgba(255, 255, 255, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content2 {
  background-color: #fefefe;
  border: 1px solid #888;
 /* Could be more or less, depending on screen size */                          
}

/* *************************반응형************************ */

 /* **********************모바일****************************/
 @media screen and (max-width:767px) {
   
  /*메인 컨텐츠1*/
 .main::before {background-color:#000000; background-repeat: no-repeat; background-size: contain;}
 .modal1 {
  position: absolute; /* Stay in place */
  z-index: 99999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 590px; /* Full height */

  /* Full height */

}
.modal1 img{height: 550px;}

.modal2 {
  position: absolute; /* Stay in place */
  z-index: 99998; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 590px; /* Full height */

  /* Full height */

}
.modal2 img{height: 550px;}


 .main {background-size: contain; background-repeat: no-repeat; background-color: #0f0f0f; height: 680px;}
.main_txt {width: 80%; }
.main_txt h2 {font-size: 4em; }
.main_txt p {font-size: 1.2em; width: 100%; color: #dbdbdb;}

.main_txt button {top:300px}
.main_bor {height: 78%;}

@keyframes anitxt {
  0% { left:100px; opacity: 0; height:0;}
  100% {left:0px; opacity: 1; height:3em; }
}
/* .main_txt button {margin-top: 35%;} */

.main_content1 {width: 100%; height: 1700px;}
.main_content1_title { padding: 20% 10% 5% 10%}
.main_content1_inner {display: block; width: 100%;}
.main_content1_img_box { width: 100%;}
.main_content1_img_box {margin: 0;}
.line {
  width: 87%;height: 90%;left: 50%;top:50%; transform: translate(-50%,-50%);}

  .main_content1_img  {width: 60%; top: 20%; padding: 0;}
 .main_content2 {width: 100%;} 
 .main_content2_inner {display: block; padding: 70px 0 130px 0;}
 .main_content2 button { margin: 0 auto; transform: translateY(60%); display: block;}
 .main_content2_inner img {width: 80%; margin: 0 auto; display: block; transform: translateY(30%); top: 20%;}
 .main_content1_txt  {top:72%}
 .main_content2_title {display: block;}
 .main_content2_txt {width: 90%; margin: 0 auto;}


.main_content3  {height: 500px;  padding: 100px 0;}
 .main_content3 > div {display: block;}
 .main_content3 > div > a {margin: 0 auto;}

 }
 
/************************************* 타블렛 *************************************/
/* @media screen and (max-width:1023px) {

  

} */