@charset "utf-8";

html {
  -webkit-text-size-adjust: none; /* 가로로 돌려도 텍스트 크기 고정 */
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}
body{margin:0; padding: 0; font-family: 'Pretendard'; font-weight: 400;}
img,h1,h2,h3,h4,h5,h6{margin: 0;}
ul{margin: 0; padding: 0; list-style: none;}
.d_flex{display: flex;}
.d_justify{justify-content: space-between;}

/*메인*/
.main{padding-bottom: 8vh;}
.main_full_bg{width:100%; min-height:100dvh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; background: url(../images/main_bg.jpg); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
.main_full_bg h1{text-align: center; padding-top: 110px;}
.main_full_bg h1 img{width: 40vw;}

.main_txt_box{width: 31vw; padding: 15px 0; margin: 0 auto; margin-top: 20px; box-shadow: 7px 7px 15px rgba(46,115,123,0.3); border-radius: 20px; background: url(../images/main_text_box_bg.jpg); text-align: center; align-items: center; justify-content: center; font-size: 1.1vw; font-weight: 500;}

.person_all{width: 80vw; margin: 0 auto; flex: 1;}
.person_b{width: 65vw; margin: 0 auto;}
.person{position: relative;}
.person .img{width:12vw; height: 12vw; margin: 3vh 0; border-radius: 50%;  overflow: hidden; border:5px solid #fff; box-shadow: 7px 7px 15px rgba(0,0,0,0.3);}
.person .img img{width: 100%; height: 100%; object-fit: cover;}

.person .icon{position: absolute; width: 60%; top: 0; left: -30px; animation: icon 1s alternate infinite;}
@keyframes icon{
    0%{transform: rotate(-10deg);}
    100%{transform:  rotate(10deg);}
}
.person .icon img{width: 100%;}
.person .icon.icon1,.person .icon.icon4{top: auto; bottom: 0; animation: icon2 1s alternate infinite;}
@keyframes icon2{
    0%{transform: rotate(10deg);}
    100%{transform:  rotate(-10deg);}
}
.main_btn{position: absolute; left: 50%; bottom: 10vh; width: 300px; transform: translateX(-50%); text-align: center;}
.main_btn img{width: 100%;}


/*인물카드*/
.main_full_bg .sub_tit img{width: 35vw;}
.list_bg{background-image: url(../images/list_bg.jpg);}
.sub_txt{background: none; box-shadow: none; height: auto; color: #fff; margin-top: 0;}
.call_list{margin-top: 3vh; padding-bottom: 5vh;}
.call_list>ul{width: 90%; margin: 0 auto;}
.call_list>ul>li{background:url(../images/call_list_bg.jpg) no-repeat; box-sizing: border-box; width: calc(25% - 20px); background-size: cover; border-radius: 20px; padding: 15px; margin: 0 10px; transition: all .35s ease;} 
.call_list>ul>li:hover{transform:scale(1.1); margin: 0 20px; z-index:2;}
.call_list>ul>li .name{font-family: 'SchoolSafeMonggleMonggle'; font-size: 1.8vw; margin: 15px 0; padding-bottom: 15px; border-bottom: 2px solid #d4d4d5}
.call_list>ul>li .des{font-size: 1vw; font-weight: 500; word-break: keep-all;}
.call_list>ul>li .img img{border-radius: 15px; width: 100%;}

.call_btn{display: flex; justify-content: center; margin-top: 30px; gap: 50px;}
.call_btn li{cursor: pointer;}

.hidden{
    display:none !important;
  }
  
  #call_screen{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../images/loading_bg.jpg);
    background-size: cover;
    background-position: center;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index: 1000;
  }
  
  .loader{
    border:15px solid rgba(91,204,217,0.2);
    border-top:15px solid white;
    border-radius:50%;
    width:100%;
    height:100%;
    position: absolute;
    top: -15px;
    left: -15px;
    animation:spin 1s linear infinite;
  }
  #caller_img{position: relative; z-index: 100; display: block;}
  .call_ui{position: relative; margin-bottom: 50px;}
  
  @keyframes spin{
    0%{transform:rotate(0)}
    100%{transform:rotate(360deg)}
  }

  .caller_name{
    font-size: 1.5rem;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
  }
  
  #video_screen{
    text-align:center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #video_player{
    margin-top: 5dvh;
    height: 80dvh;
    border-radius: 20px;
  }
  .video_top{
    position: fixed;
    display: flex;
    align-items: center;
    top: 8dvh;
    left: 50%;
    transform: translateX(-50%);
    gap: 20px;
    margin-left: 50px;
  }
  #time_display{
    font-size:18px;
    background: #28939f;
    color: #fff;
    border-radius: 50px;
    padding:2px 10px;
  }

  #video_close{
    display: block;
  }
  

  .slide_end_call{
    border-radius:60px;
    padding:10px;
    box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    margin-top: 20px
}

.slide_btn{
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:transform .5s ease;
}

.slide_btn img{
    width:60px;
}

.video_rel,.subtitle_rel{position: relative;}
#subtitle {
  width: 80%;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  word-break: keep-all;

  padding: 10px 18px;
  border-radius: 50px;

  background: url(../images/chat_pattern.jpg) repeat;
  
  border:2px solid #fff;

  pointer-events: none;
  transition: all 0.2s ease;
}

#subtitle::before,#subtitle::after{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 35px;
  height: 35px;
  background: url(../images/chat_left_img.png);
  background-size: 100%;
}
#subtitle::after{
  top: auto;
  left: auto;
  bottom: -10px;
  right: -10px;
  background-image: url(../images/chat_right_img.png);
}

#video_title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;

  padding: 2px 10px;
  border-radius: 20px;

  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);

  z-index: 10000;
}

.quick_menu{
  position: absolute;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.quick_btn{
  width: 60px;
  height: 60px;
  background: url(../images/119_loading.png) no-repeat;
  background-size: 100%;
  border: 0;
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
  border-radius: 50%;
}
.guard_btn{background-image: url(../images/guard_loading.png);}
.office_btn{background-image: url(../images/guard_office_loading.png);}
.ranger_btn{background-image: url(../images/ranger_loading.png);}

/*bgm버튼추가*/
.bgm_btn,.logo{display: flex; font-size: 14px; align-items: center; position: absolute; right: 30px; bottom: 30px; backdrop-filter: blur(6px); font-weight: 500; cursor: pointer; z-index: 1000; border-radius: 20px; border: 1px solid #000; box-shadow: 1px 1px rgba(0,0,0); padding: 5px 10px; transition:box-shadow 0.3s;}
.logo{bottom: auto; top: 30px;  border: 0; box-shadow: none; width: 150px;}
.logo img{width: 100%;}
.bgm_btn:hover{box-shadow: 0 0 0 rgba(0,0,0,0);}
.bgm_btn img{margin-right: 5px; position: relative; animation: bgm 0.3s alternate infinite;}
@keyframes bgm {
  0%{top:-2px}
  100%{top: 0;}
}

.source{font-weight: 600;font-size: 12px;text-align: right;margin-top: 5px;border: 1px solid;background: #fff;padding: 5px;border-radius: 10px;display: inline-block;position: absolute; width: 100%; width: 180px;text-align: center;right: 0;top: 5px;}

/*반응형*/

/* 2. 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
  /*메인*/
  .main_full_bg h1{padding-top: 80px;}
  .main_full_bg h1 img,.main_full_bg .sub_tit img{width: 80vw;}
  .main_txt_box{width: 50vw; height: 8vh; font-size: 1.8vw;}
  .person_all{width: 85vw; flex:none;}
  .person_b{width: 75vw;}
  .person .img{width: 18vw; height: 18vw;}
  .main_btn{bottom: 5vh; width: 30vw;}

  /*리스트*/
  .call_list>ul>li .des{font-size: 1.2vw;}
  .call_btn{gap: 30px;}
  .call_btn li img{width: 5vw;}
}

@media (max-width: 768px) {
  .main_btn{bottom: 5vh; width: 40vw;}
}


/* 3. 모바일 (480px 이하) */
@media (max-width: 480px) {
  .logo{width: 100px; bottom: auto; top: 10px; right: 0;}
  .logo img{width: 100%;}
  .bgm_btn{bottom: 10px; right: 10px; font-size: 2.5vw; border: 1px solid #000; box-shadow: 1px 1px rgba(0,0,0); background: none;}
  .bgm_btn img{width: 3.5vw;}

  /*메인*/
  .main_full_bg{background-image: url(../images/m_main_bg.jpg); background-size:cover;}
  .main_full_bg .sub_tit img{width: 80vw;}
  .main_txt_box{width: 70vw; font-size: 2.5vw; padding: 0;}
  .person_all{margin-top: 5dvh; width: 95%;}
  .person_b{width: 93%;}
  .person .img{width: 18vh; height: 18vh;}
  .main_btn{width:180px; bottom: 5vh;}
  .main_btn img{width: 100%;}
  .person .icon{left: 0;}

  /*리스트*/
  .list_bg{background-image: url(../images/m_list_bg.jpg);}
  .main_full_bg .m_tit{padding-top: 5vh; margin-top: 0;}
  .m_sub_txt{width: 100%; height: auto; font-size: 3.5vw;}
  .call_list{margin-top: 5vh;}
  .call_list>ul{flex-wrap: wrap; width: 95%;}
  .call_list>ul>li{width: calc(50% - 20px); padding: 10px; margin-bottom: 20px;}
  .call_btn li img{width: 30px;}
  .call_btn{margin-top: 10px;}
  .call_list>ul>li .name{margin: 5px 0; padding-bottom: 5px;}
  .call_list>ul>li:hover{margin: 0;}
  .call_list>ul>li .name{font-size: 3.5vw;}
  .call_list>ul>li .des{font-size: 2.5vw;}
  .call_list>ul>li:hover{transform: unset; margin: 0 10px 20px 10px; z-index:2; transform: translateY(-10px);}
  .call_ui{width: 50vw;}
  .call_ui img{width: 100%;}
  .slide_end_call{width: auto; height: auto;}
  .slide_btn img{width: 40px;}
  .slide_text{font-size: 1.2rem;}
  .video_top{justify-content: space-between; margin-left: 0;}
  #subtitle{font-size: 18px;}
}