@font-face {
  font-family: 'PyeongChangPeace-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'HS-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/HS-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');


/* Graphic */
#design
  {padding: 30px;
  position: relative;
  /* overflow: hidden; */
  background-color: #a5b88d; 
  }
#design h2{font-family: 'Lobster';}
#design svg.design
  {background-color: #a5b88d; /* #dfdfdf */
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  z-index: -1;
  }
#design h2
  {margin-bottom: 50px;}

#design .overflow
  {width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  }
#design .total-design
  {width: 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-55%);
  }

#design .illu, #design .photoshop
  {width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  }




#design .illu ul.thumb
  {width: 800px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  }
#design ul.thumb li
  {width: 250px;
  height: 250px;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  line-height: 250px;
  margin: 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  box-shadow: 2px 2px 10px rgba(0,0,0, 0.681);
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s;
  }
  #design ul.thumb li:last-child
    {cursor: default;}
  .thumb-title
    {font-size: 3rem;
    font-family: 'HS-Regular';
    background-color: transparent/* rgb(63, 249, 255) */;
    box-shadow: none !important;
    border-radius: 50% ;
    position: relative;
    }
  
  .thumb-title .design-subtitle
    {position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: svg-round 9s infinite linear;
    }
  .thumb-title:hover
    {border: none;}
  .thumb-title #cls
    {stroke: red;
    fill: #fff;
    }
  
  .thumb-title svg text
    {font-size: 1.5rem;
    font-weight: bold;
    fill: rgb(63, 201, 255);
    text-shadow: none;
    text-transform: uppercase;
    }
  .photoshop .thumb-title svg text{fill:rgb(217, 255, 0);}  
  .thumb-title #text-curve
    {stroke: red;
    fill: transparent;
    }
  @keyframes svg-round
    {100%
      {transform:
        translate(-50%, -50%) 
        rotate(360deg);}}
  

  #design ul.thumb li:hover:not(:last-child)
    {border-radius: 50%;
    box-shadow: none;
    border: 1px solid #000;
    background-color: beige;
    }
#design ul.thumb li img
  {width: inherit;
  transition: 0.3s;
  }
  #design ul.thumb li:hover img
    {transform: scale(1.05);
    }

#design .photoshop ul.thumb
  {width: 900px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  }

  #design p:before
    {position: absolute;
    font-family: 'Material Icons Outlined';
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    animation: gr-btn 1.8s infinite;
    }
 .illu-btn:before
  {content: '\e5e0';
  color: rgb(185, 255, 63);
  left: -40px;
  }
  .graphy-btn:before
    {content: '\e5e1';
    right: -40px;
    color: rgb(63, 249, 255);
    }
  @keyframes gr-btn
    {50%{opacity:1;}}

  #design p
  {position: absolute;
  top: 50%;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  z-index: 100;
  cursor: pointer;
  }
#design .graphy-btn
  {right: 10%;
  }
#design .illu-btn
  {display: none;
  left: 7%;
  }

/* MODALLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL */

  #design-popup{ /*검정배경*/
    display: none;
    position: fixed ; 
    top: 0;
    left: 0;
    width:100%; 
    height:100vh; 
    background:rgba(0,0,0,0.7); 
    z-index:30000;
    overflow-y: scroll;  
  }
  .pop_body{   /*팝업내용박스*/
    position:relative;
    height:100vh;	
    margin:0 auto;
    width:1200px;
    background:#fff;
    z-index:10000;
  }
  .view>li
    {width:1200px;
    margin: auto;
    position:absolute;
    display:none;
    }

  #design-popup2{ /*검정배경*/
    display: none; 
    position:fixed; 
    left:0; 
    top:0;
    width:100%; 
    height:100vh; 
    background:rgba(0,0,0,0.7); 
    z-index:1000;
    overflow-y:scroll; 
  }
  .pop_body2{   /*팝업내용박스*/
    position:relative;
    height:100vh;	
    margin:0 auto;
    width:1200px;
    background:#fff;
    z-index:10000;
  }
  .view2>li
    {width:1200px;
    position:absolute;
    display:none;
    }
        
  /*버튼영역*/ 
  .m_btn, .m_btn2{
    position:fixed;
    left:50%;
    top:20px;
    margin-left:632px;
    width:85px;
    height:180px;
    color:#fff;
    text-align:center;
    overflow:hidden;
    z-index:20000;
  }
  .m_btn>li, .m_btn2>li{
    cursor:pointer;
    border-radius: 50%;
    background:#72b7bd;
    font-size:40px;	
    width:40px;
    height:40px;
    transition: .2s;
  }
  .m_btn>li:hover{background:#00656e;}
  .m_btn2>li:hover{background:#de7575;}
  
  /*닫기버튼*/
  .m_btn .btn_close, .m_btn2 .btn_close2{
    height:80px;
    width:80px;
    margin: 0 auto 5px;
    border-radius: 50%;
    cursor:pointer;
    border-bottom:1px solid #72b7bd;
  }
  .m_btn .btn_close i, .m_btn2 .btn_close2 i{  /*아이콘폰트*/
    position:relative;
    top:15px;
    font-size:50px;
  }
  
  /*다음이전 버튼*/
  
  .m_btn .left_btn, .m_btn .right_btn,   .m_btn2 .left_btn2, .m_btn2 .right_btn2 {float:left;
  }
  .m_btn .left_btn i,.m_btn .right_btn i,
  .m_btn2 .left_btn2 i,.m_btn2 .right_btn2 i{ 
    position:relative;
    top:0px;
    font-size: 40px;
  }
  .m_btn .left_btn,.m_btn2 .left_btn2 {margin-right: 5px;
  }
  .m_btn .g_page, .m_btn2 .g_page2{  /*Page번호*/
    font-size:12px;
    color:#fff;
    margin: 20px auto 0;
    width:80px;
    height: 20px;
    background-color: transparent;
    border-radius: 0;
    padding-top:40px;
    text-align:center;
  }
  .m_btn .g_page:hover, .m_btn2 .g_page2:hover{background: transparent;
  cursor: unset;
  }