@charset "utf-8";

body{width: 100%; height: 100%; background-color: #000;}


@font-face {
    font-family: Title;
    src: url(./font/Cafe24Classictype.ttf);
}

@font-face {
    font-family: Right;
    src: url(./font/Pretendard-Light.otf);
}

@font-face {
    font-family: Regular;
    src: url(./font/Pretendard-Regular.otf);
}

@font-face {
    font-family: ExtraBold;
    src: url(./font/Pretendard-ExtraBold.otf);
}

a{color: #fff;}

#wrap{width: 100%; overflow: hidden;}

/* header 메뉴 */

header{position: fixed; top : 0; width : 100%; border-bottom: 1px solid #c4c4c4; z-index: 99999999; font-family: Right; transition: all 0.5s;}

header.fix{position : fixed; top : 0; background-color: rgba(255, 255, 255, 0.2); border-bottom: none;}

.menu_list{display: flex; justify-content: right;}

.menu_list > li{color: #fff; height : 80px; text-align: center; font-size: 18px; cursor: pointer; display: flex; justify-content: right; align-items: center; padding: 0 32px; transition: 0.6s;}
.menu_list > li:hover{color: #cacaca;}


.menu_list > li.on{
    box-sizing: border-box;
}








/* section1 */
.section1{max-width: 100%; height: 1080px; position: relative; }

/* 폰트 */
.section1_font{ text-align: center; color: #fff; max-width: 1016px; margin: 0 auto; position: absolute; top: 46%; left: 52%; transform: translate(-50%,-50%);}
.section1_font>p:nth-child(2) {font-size: 18px; font-family: Right;}
.section1_font>p:nth-child(2)>img{width: 512px; padding: 4px 10px;}
.section1_font>p:nth-child(1) {font-size: 112px; font-family: Title; padding-top: 10px;}

/* 커서 */
.section1_mouse{width: 35px; height: 56px; position: absolute; top: 88%; left: 50%; transform: translate(-50%,-50%);}
.section1_mouse>img{width: 100%; height: 56px;}

/* 비디오 */
.vid { width: 100%; height: 100%; position: fixed; top: -60px; left: 0; z-index: -20;} 
.vid video {width: 100%; } 




/* section2 */
.section2{max-width: 100%; height: 1080px; background-color: #000; color: #fff; position: relative;}

.section2_box{max-width: 1300px; margin: 0 auto; padding-top: 160px;}


/* section2_box1 */
/* 상단폰트 */
/* .top_title_font{color: #fff; font-size: 40px; text-align: center; font-family: Title; padding-top: 164px;} */


/* 이미지 */
.st2_box1_img{width: 404px; height: 404px;}
.st2_box1_img>img{width: 100%; height: 100%; border-radius: 50%;}


/* 오른쪽 */
.section2_box1{width: 97%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 62px;}
.st2_box1_text>div{display: flex;}

/* 오른쪽폰트 */
.st2_box1_text>div>div{font-size: 20px; font-family: Regular; padding-left: 80px; line-height: 32px;}

.section2_rt_title{font-size: 28px; font-family: ExtraBold;}
.section2_rt_hadan{font-size: 20px; font-weight: 800; padding-right: 12px;}


/* section2_box2 */
.section2_box22{width: 100%; height: 196px; background-color: #1e2425; position: absolute; bottom: 0;}
.section2_box2>div{max-width: 1210px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; text-align: center; font-size: 18px; font-family: Right; padding-top: 42px;}
.section2_box2>div>div>p{padding-top: 10px;}

.skill{width: 88px; height: 88px;  border-radius: 22px;}
.skill>img{width: 100%; height: 100%; border-radius: 22px;  cursor: pointer;}
.skill>img:hover{ width: 88px; height: 88px;  border-radius: 22px; transform: scale(1.1); transition: 0.6s;}




/* section3 */
.section3{max-width: 100%; height: 1080px; /*background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #013c64 74%);*/ color: #fff; position: relative;}

.st_3_background{width: 110px; height: 378px; background-color: #fff; opacity: 0.6; transition: all 0.7s; position: absolute; top: 58%; left:715px; transform: translate(-50%, -50%); z-index: 9999;} 
.st_3_background.on{width: 2400px; transform: translate(-50%, -50%);} 



/* 뒤에 백그라운드 색상(원) */
.st_33_background{width: 5px; height: 5px; border-radius: 50%; background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #013c64 74%); transition: all 0.8s; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); z-index: 999} 
.st_33_background.on{transform: translate(-50%, -50%) scale(500); }



/* 폰트 */
.st_3_detail{color: rgb(0, 52, 87);  width: 980px; display: flex; align-items: center; margin: 0 auto; z-index: 999999; position: absolute; left: 16%; bottom: -2px;}

.st_3_detail>div>img{margin-top: 99px;}

.st_3_font{margin-top: 24px; margin-left: 70px;}
.st_3_font>p{padding: 4px 0;}
.st_3_font>p:nth-child(1){font-size: 32px; padding-bottom: 6px; font-family: Title;}
.st_3_font>p:nth-child(2){font-size: 20px; padding-bottom: 4px; font-family: ExtraBold;}
.st_3_line_box{width: 400px; height: 1px; background-color: rgb(0, 52, 87); opacity: 0.6; margin: 10px 0;}

.st_title{font-size: 20px; font-family: Regular;}
.st_sub{font-size: 18px; padding-left: 14px; font-family: Regular;}

/* 버튼 */
.button{text-align: center; font-family: Regular; font-size: 18px; width: 120px; height: 40px; line-height: 40px; border-radius: 5px;  background-color:rgb(0, 52, 87); transition: 0.8s; margin-top: 16px;}
.st_3_button{color:#fff; display: block;}
.button:hover{background-color:#fff;}
.button:hover .st_3_button{color: rgb(0, 52, 87);}







/* section4 */
/* 첫번째 박스 */
.section4{max-width: 100%; height: 1080px; background-color : #3f0d12; background-image : linear-gradient(315deg, #3f0d12 0%, #a71d31 74%); color: #fff; position: relative; overflow: hidden;}
.section4_box{max-width: 80%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; column-gap: 8px; align-items: center; margin: 0 auto; padding-top: 144px;}
.st_img1>img{width: 100%; border-radius: 10px;}

/* 두번쨰 박스 */
.section4_box2{max-width: 80%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; column-gap: 8px; align-items: center; margin: 0 auto; padding-top: 144px;}

/* 화살표 */
/* 왼쪽 */
.left_hsp{display: inline-block; position: absolute; top: 488px; left: 94px; width: 60px; height: 60px; background-color: #000; border-radius: 50px; transition: 0.3s; cursor: pointer;}
.left_hsp:hover{background-color: #2e2e2e;}

.left_hsp>img{padding-top: 15px; padding-left: 17px; width: 16px;}

/* 오른쪽 */
.right_hsp{display: inline-block; position: absolute; top: 488px; right: 105px; width: 60px; height: 60px; background-color: #000; border-radius: 50px; transition: 0.3s; cursor: pointer;}
.right_hsp:hover{background-color: #2e2e2e;}

.right_hsp>img{padding-top: 15px; padding-left: 22px; width: 16px;}

/* ------------------------------------------------------- */

/* img1 */
.st_img1{text-align: center; width: 492px; height: 359px; position: relative; overflow: hidden;}
.st_img1_font{opacity: 0; width: 492px; height: 100px; position: absolute; top: 125px; transition: all 0.5s;}
.st_img1_font>p:nth-child(1){font-family: Title; font-size: 40px; color: #fff; padding-bottom: 6px;}
.st_img1_font>p:nth-child(2){font-family: Regular; font-size: 20px; padding-bottom: 25px; color: #fff;}

/* 버튼 */
.website_button{font-family: Regular; width: 120px; height: 40px; line-height: 40px; border-radius: 5px;  background-color : #a71d31; color: #fff; margin: 0 auto; transition: 0.8s;}
.website_font{display: block;}
.website_button:hover{background-color: #fff;}
.website_button:hover .website_font{color: #db2020; font-weight: 600;}

.st_img1:hover .st_img1_font{opacity: 1; z-index: 99999;}

/* 검정색배경 */
.st_img1:hover:after {opacity: 0.8;}

.st_img1:after {
    width: 492px;
    height: 359px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #000;
    opacity: 0;
    transition: opacity .8s;
    z-index: 2;
    border-radius: 9px;
}

/* ------------------------------------------------------- */






/* section5 */
.section5{max-width: 100%; height: 1080px; background-color: #0e0e0e; color: #fff; position: relative;}
.section5_box{max-width: 71%; height: 714px; display: flex; justify-content: space-between; align-items: start; gap: 22px; margin: 0 auto; padding-top: 138px;}
.st5_img2{max-width: 323px; height: 714px;}
.modal_img2{padding-bottom: 24px;}
.st5_img2>div>img:nth-child(1) {padding-bottom: 24px;}



/* 모달창 */


/* 팝업 버튼 */
.button1{ padding-left: 74%; padding-top: 8%; opacity: 0.9;}


/* modal_1 */
.st5_img1{cursor:pointer; opacity: 0.2; transition: all 0.3s;}
.st5_img1:hover{cursor:pointer; opacity: 1;}

/* 팝업 */
.modal_content1{
    width: 820px; height: 600px;
    position:fixed; left:33%; top:22%;
    overflow-y: auto; border-radius:10px;
    overflow-X:hidden
  }


/* 팝업 뒤에 배경색상 */
  .modal1{ 
    position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.9); top:0; left:0; display:none; z-index: 999999;
  } 


/*팝업 스크롤바 */
  .modal_content1::-webkit-scrollbar {
    width: 20px;
  }
  .modal_content1::-webkit-scrollbar-thumb {
    background-color: #363636;
    border-radius: 8px;
  }
  .modal_content1::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }





/* modal_2 */
.img2{cursor:pointer; opacity: 0.2; transition: all 0.3s;}
.img2:hover{cursor:pointer; opacity: 1;}

/* 팝업 */
.modal_content2{
    width: 820px; height: 600px;
    position:fixed; left:33%; top:24%;
    overflow-y: auto; border-radius:10px;
    overflow-X:hidden
  }


/* 팝업 뒤에 배경색상 */
  .modal2{ 
    position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.6); top:0; left:0; display:none; z-index: 999999; cursor:pointer;
  } 


/*팝업 스크롤바 */
  .modal_content2::-webkit-scrollbar {
    width: 20px;
  }
  .modal_content2::-webkit-scrollbar-thumb {
    background-color: #363636;
    border-radius: 8px;
  }
  .modal_content2::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }






  
/* modal_3 */
.img3{cursor:pointer; opacity: 0.2; transition: all 0.3s;}
.img3:hover{cursor:pointer; opacity: 1;}

/* 팝업 */
.modal_content3{
    width: 820px; height: 600px;
    position:fixed; left:33%; top:24%;
    overflow-y: auto; border-radius:10px;
    overflow-X:hidden
  }


/* 팝업 뒤에 배경색상 */
  .modal3{ 
    position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.6); top:0; left:0; display:none; z-index: 999999; cursor:pointer;
  } 


/*팝업 스크롤바 */
  .modal_content3::-webkit-scrollbar {
    width: 20px;
  }
  .modal_content3::-webkit-scrollbar-thumb {
    background-color: #363636;
    border-radius: 8px;
  }
  .modal_content3::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }






/* modal_4 */
.img4{cursor:pointer; opacity: 0.2; transition: all 0.3s;}
.img4:hover{cursor:pointer; opacity: 1;}

/* 팝업 */
.modal_content4{
    width: 820px; height: 600px;
    position:fixed; left:33%; top:24%;
    overflow-y: auto; border-radius:10px;
    overflow-X:hidden
  }


/* 팝업 뒤에 배경색상 */
  .modal4{ 
    position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.6); top:0; left:0; display:none; z-index: 999999; cursor:pointer;
  } 


/*팝업 스크롤바 */
  .modal_content4::-webkit-scrollbar {
    width: 20px;
  }
  .modal_content4::-webkit-scrollbar-thumb {
    background-color: #363636;
    border-radius: 8px;
  }
  .modal_content4::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }





  /* modal_5 */
.img5{cursor:pointer; opacity: 0.2; transition: all 0.3s;}
.img5:hover{cursor:pointer; opacity: 1;}

/* 팝업 */
.modal_content5{
    width: 820px; height: 600px;
    position:fixed; left:33%; top:24%;
    overflow-y: auto; border-radius:10px;
    overflow-X:hidden
  }


/* 팝업 뒤에 배경색상 */
  .modal5{ 
    position:fixed; width:100%; height:100%; background: rgba(0,0,0,0.6); top:0; left:0; display:none; z-index: 999999; cursor:pointer;
  } 


/*팝업 스크롤바 */
  .modal_content5::-webkit-scrollbar {
    width: 20px;
  }
  .modal_content5::-webkit-scrollbar-thumb {
    background-color: #363636;
    border-radius: 8px;
  }
  .modal_content5::-webkit-scrollbar-track {
    background-color: grey;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
  }










/* 버튼 */
.st5_button{font-family: Regular; width: 120px; height: 40px; line-height: 40px; border-radius: 5px;  background-color : #2e2e2e; color: #fff; margin: 0 auto; transition: 0.8s; margin-top: 36px;}
.st_5_font{display: block; text-align: center;}
.st5_button:hover{background-color: #fff;}
.st5_button:hover .st_5_font{color: #0e0e0e; font-weight: 600;}




/* footer */
footer{text-align: center; line-height: 50px; max-width: 100%; height: 50px; background-color: rgb(138, 138, 138); color: #fff;}




/* floatnav  오른쪽 슬라이더 버튼*/
.floatnav{
    width : 8px;
    height : 350px;
    position : fixed;
    border-radius: 40px;
    top : 450px;
    right : 30px;
    z-index: 9999;
}

.bul_list{
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.bul_list > li{
    width : 10px;
    height : 10px;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
}

li.on{
    background-color: rgba(21,21,21);
    color : white;
}