@charset "utf-8";

/*
 * File Name : layout.css
 * 작성일 : 2025-09-09
 */


/********************************************************
 
 *  Common
 
 ********************************************************/

/*-----------------------------------------------------------------------------
 *  Aside
 *----------------------------------------------------------------------------*/

#aside {position: fixed;left:0;top:0;width:70px;height: 100%; z-index: 100}
#aside:before {content: "";position: absolute;left: 0;top: 0;width:70px;height: 100%;background:rgba(28, 25, 115, 0.9)}
#aside a {position: relative;top:0;left: 0;display: block; width: 100%;height: 100%;overflow: hidden}
#aside a .txt_box {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;}
#aside a .txt_box strong {display: block;writing-mode: vertical-rl;font-size:28px;font-weight: 700;letter-spacing: 0.04em; color:#fff;padding: 20px 15px;}
#aside a .txt_box .arr {display: inline-block;animation: moveHorz 1s infinite forwards}

@media screen and (max-width:1200px){
  #aside {position: absolute;left: 0;right: auto;top: auto;bottom: 0;width: 70px;height: 320px;border-radius: 0 50px 0 0;overflow: hidden}
  #aside a .txt_box {display: flex;flex-direction: column-reverse;padding-top:20px;}
  #aside a .txt_box strong {writing-mode: sideways-lr;font-size: 20px}
  #aside a .txt_box .arr {width:30px;overflow: hidden;animation: moveHorz2 1s infinite forwards}
  #aside a .txt_box .arr img {max-width: none; transform: scaleX(-1)}
}

@media screen and (max-width:768px){
  #aside {width: 60px;height: 280px;}
  #aside a .txt_box strong {font-size:18px;padding: 10px 15px;}
  #aside a .txt_box .arr {width:25px;}
}

.btn_move_link {position: absolute;right: 0;top:34px;}
.main .btn_move_link {display: none}
.btn_move_link a {display: inline-flex;gap:20px;width:320px; align-items: center;line-height:62px;background:#485669;color:#fff;font-size: 18px;font-weight: 700;padding: 0 30px;border-radius: 0 0 0 40px}
.btn_move_link a .arr {margin-top: 5px;}
.btn_move_link a .arr img {vertical-align: initial;}

@media screen and (max-width:1500px){
  .btn_move_link a {gap: 10px;width: 280px;font-size: 16px;font-weight: 700;padding: 0 30px;height: 66px}
  .btn_move_link a .arr  {margin-top: 6px}
  .btn_move_link a .arr img {width: 45px;}
}
@media screen and (max-width:1300px){
  .btn_move_link a {width: 200px;padding: 0 25px 0 35px;line-height: 1.4;height: 66px}
  .btn_move_link a .arr img {flex-shrink: 0; display: inline-block;width: 60px}
}
@media screen and (max-width:1200px){
  .btn_move_link {top:0;}
  .btn_move_link a {height: 80px;}
}

@media screen and (max-width:768px){
  .btn_move_link a {height:60px;}
}
@media screen and (max-width:480px){
  .btn_move_link a {gap:10px;width: 150px;font-size: 14px;padding: 0 20px;border-radius: 0 0 0 30px;line-height: 1.4}
}