<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">

<title>HBBS 한백고등학교 방송부</title>
<script>

               jQuery(document).ready(function($) {

               $(".scroll").click(function(event){
                event.preventDefault();
               $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
                });
                 });

</script> </script>

    </script>
    <style>
      html {

scroll-behavior: smooth;

} .BS { padding: 10px; }

         .po
        {
           margin-top:1000px
        }
        .all


        a:link {text-decoration: none; color: black;}
        a:visited {text-decoration: none; color: black;}



        body {
            height: 3000px;
            margin: 0;
            font-family: "Do hyeon";
            font-size: 20px;
              background-color: #FAFAFA;
        }
        .qnav-container {
            height: 60px;
            width:50px;
            display: flex;
            flex-direction: row;
            justify-content:center;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color:white;
            z-index: 1;
            opacity: 0.95;
            list-style-type: none;
            position: fixed;
            top:0;
            text-align: center;
            float: left ; border-bottom: 0.1px solid #D5D5D5

            }
        .qnav-item {
            margin-left:;
            padding: 15px;
            cursor: pointer;
        }
        .qnav-item a {
            text-align: center;

        }


        .HB {
            margin-left: 900px;

        }
       .qnav-item  {

margin:0; text-transform:uppercase; } .qnav-item:after { display:block; content: ''; border-bottom: solid 3px #282828; transform: scaleX(0); transition: transform 0.325s ease-in-out; } .qnav-item:hover:after { transform: scaleX(1); }

.BS { margin-right: 700px;

} #dkssud { position: absolute; top: 2000px; right: 500px;

}

    </style>

• HBBS

• 방송부 소개
• 방송부 분야
• 방송부
• 동아리 신청

</nav>

<main>
<div class="po">
    <div class="container">
        <div class="row">
          <div class="col">
              <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#qwe">방송부 소개</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#asd">방송부 분야</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#zxc">방송부</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#rty">노래 신청</a>
                </li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane fade show active" id="qwe">
                  <p><br>점심 방송</br></p>
                </div>
                <div class="tab-pane fade" id="asd">
                  <p><br>엔지니어</br><br>아나운서</br><br>편집</br><br>카메라</br></br>작가</br></p>
                </div>
                <div class="tab-pane fade" id="zxc">
                  <p>방송부</p>
                </div>
                <div class="tab-pane fade" id="rty">
                  <p>노래 신청</p>
                </div>
              </div>
          </div>
        </div>
    </div>

</main>
  <a id="dkssud" href="지원서.hwp"download><button>지원서 다운로드</button></a>




<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>