@media screen and (min-width:1200px) {

     .b_c {
         width: 350px;
         height: 350px;
         background: black;
         border: 3px solid blue;
         color: white;
         font-size: 280px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 297px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }

     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 350px;
         height: 350px;
         left: 50px;
         bottom: 50px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 350px;
         height: 350px;
         left: calc(50% - 175px);
         top: 50px;
         transform-origin: 50% 0%;
         /**** 추가 */

     }


     #container3 {
         perspective: 25px;
         position: absolute;

         width: 350px;
         height: 350px;
         right: 50px;
         bottom: 50px
     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 120px;
         left: 10%;
         width: 80%;
         height: calc(100vh - 425px);
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 124px;
         left: calc(10% + 0.5px);
         width: calc(80% - 1px);
         height: calc(100vh - 425px);
         position: absolute;
     }

     .bottom_line {
         width: calc(100% - 425px);
         position: absolute;
         height: 3px;
         background: blue;
         bottom: 220px;
         left: 225px;
         z-index: 999;

     }

 }

 @media screen and (min-width:901px) and (max-width:1200px) {
     .b_c {
         width: 300px;
         height: 300px;
         background: black;
         border: 3px solid blue;
         color: white;
         font-size: 230px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 250px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }



     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 300px;
         height: 300px;
         left: 20px;
         bottom: 50px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 300px;
         height: 300px;
         left: calc(50% - 150px);
         top: 70px;
         /**** 추가 */

     }

     #container3 {
         perspective: 25px;
         position: absolute;

         width: 300px;
         height: 300px;
         right: 50px;
         bottom: 50px;

     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 140px;
         left: 15%;
         width: 70%;
         height: calc(100vh - 320px);
         z-index: 998 !important;
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 145px;
         left: calc(15% + 1.5px);
         width: calc(70% - 3px);
         height: calc(100vh - 320px);
         position: absolute;
         z-index: 998 !important;
     }

     .bottom_line {
         width: calc(100% - 300px);
         position: absolute;
         height: 3px;
         background: blue;
         bottom: 200px;
         left: 150px;
         z-index: 999;

     }

 }

 /*
 @media screen and (min-width:400px) and (max-width:600px) {
     .b_c {
         width: 150px;
         height: 150px;
         background: black;
         border: 3px solid blue;
         color: white;
         font-size: 120px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 127px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }

     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 150px;
         height: 150px;
         left: 30px;
         bottom: 30px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 150px;
         height: 150px;
         left: calc(50% - 75px);
         top: 70px;
     

     }

     #container3 {
         perspective: 25px;
         position: absolute;

         width: 150px;
         height: 150px;
         right: 30px;
         bottom: 30px;

     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 140px;
         left: 15%;
         width: 70%;
         height: calc(100vh - 150px);
         z-index: 998;
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 143px;
         left: calc(15% + 1.5px);
         width: calc(70% - 3px);
         height: calc(100vh - 150px);
         position: absolute;
         z-index: 998;
     }

     .bottom_line {
         width: calc(100% - 150px);
         position: absolute;
         height: 2px;
         background: blue;
         bottom: 100px;
         left: 100px;
         z-index: 999;

     }

 }
*/
 @media screen and (min-width:701px) and (max-width:900px) {
     .b_c {
         width: 300px;
         height: 300px;
         background: black;
         border: 2px solid blue;
         color: white;
         font-size: 230px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 250px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }



     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 300px;
         height: 300px;
         left: 50px;
         bottom: 50px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 300px;
         height: 300px;
         left: calc(50% - 150px);
         top: 50px;
         /**** 추가 */

     }

     #container3 {
         perspective: 25px;
         position: absolute;

         width: 300px;
         height: 300px;
         right: 50px;
         bottom: 50px;

     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 140px;
         left: 15%;
         width: 70%;
         height: calc(100vh - 320px);
         z-index: 998 !important;
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 145px;
         left: calc(15% + 1.5px);
         width: calc(70% - 3px);
         height: calc(100vh - 320px);
         position: absolute;
         z-index: 998 !important;
     }

     .bottom_line {
         width: calc(100% - 300px);
         position: absolute;
         height: 2px;
         background: blue;
         bottom: 200px;
         left: 150px;
         z-index: 999;

     }

 }

 @media screen and (min-width:400px) and (max-width:700px) {
     .b_c {
         width: 150px;
         height: 150px;
         background: black;
         border: 2px solid blue;
         color: white;
         font-size: 120px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 127px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }

     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 150px;
         height: 150px;
         left: 30px;
         bottom: 30px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 150px;
         height: 150px;
         left: calc(50% - 75px);
         top: 30px;
         /**** 추가 */

     }

     #container3 {
         perspective: 25px;
         position: absolute;

         width: 150px;
         height: 150px;
         right: 30px;
         bottom: 30px;

     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 90px;
         left: 15%;
         width: 70%;
         height: calc(100vh - 200px);
         z-index: 998;
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 93px;
         left: calc(15% + 1px);
         width: calc(70% - 2px);
         height: calc(100vh - 200px);
         position: absolute;
         z-index: 998;
     }

     .bottom_line {
         width: calc(100% - 140px);
         position: absolute;
         height: 2px;
         background: blue;
         bottom: 100px;
         left: 80px;
         z-index: 999;

     }

     .credit_b {
         top: 33px !important;
     }
 }

 @media screen and (min-width:201px) and (max-width:399px) {
     .b_c {
         width: 120px;
         height: 120px;
         background: black;
         border: 2px solid blue;
         color: white;
         font-size: 90px;
         border-radius: 50%;
         text-align: center;
         top: 0px !important;
         line-height: 100px;
         font-weight: 100;
         transition: transform 1.5s;
         -webkit-transition: transform 1.5s;
         -moz-transition: transform 1.5s;
         -o-transition: transform 1.5s;
         border-radius: 50%;
         font-family: 'Hahmlet';
         transition: all 1s;


     }



     #container2 {
         perspective: 25px;
         position: absolute;

         left: 50%;
         width: 120px;
         height: 120px;
         left: 20px;
         bottom: 20px;
     }

     #container1 {
         perspective: 25px;
         position: absolute;

         width: 120px;
         height: 120px;
         left: calc(50% - 60px);
         top: 20px;
         /**** 추가 */

     }

     #container3 {
         perspective: 25px;
         position: absolute;

         width: 120px;
         height: 120px;
         right: 20px;
         bottom: 20px;

     }

     .b_c:hover {
         background: blue;
         color: white;
         filter: blur(50px);
     }



     .s1 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
     }

     .s1:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(-45deg);
         transform-origin: 100% 0%;
     }

     .s2 {

         width: 50vw;
         height: 80vh;
         position: absolute;
         top: 13vh;
         left: 50vw;
     }

     .s2:after {
         content: "";
         position: absolute;
         border-top: 3px solid blue;
         width: 50vw;
         height: 80vh;
         transform: rotate(45deg);
         transform-origin: 0% 0%;
     }

     .tr {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: blue;
         top: 80px;
         left: 15%;
         width: 70%;
         height: calc(100% - 161px);
         position: fixed;
         z-index: 998 !important;
     }

     .inside {
         -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
         background: black;
         top: 85px;
         left: calc(15% + 1px);
         width: calc(70% - 2px);
         height: calc(100% - 161px);
         position: fixed;
         z-index: 998 !important;
     }

     .bottom_line {
         width: calc(100% - 120px);
         position: absolute;
         height: 2px;
         background: blue;
         bottom: 80px;
         left: 60px;
         z-index: 999;

     }


 }