*{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;box-sizing:border-box;}

html,body{position:relative;width:100%;height:100%;margin:0;padding:0;color:#232323;color:var(--color_base);background-color:#f5f5f9;background-color:var(--color_whitegray);}
ul,ol,li{list-style:none;margin:0;padding:0;}

h1{text-align:center;margin:36px 0;}
.tabs{
    position:relative;left:50%;transform:translateX(-50%);
    background:#fff;padding:48px 48px 80px;width:75%;
    box-shadow:0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    border-radius:8px;min-width:280px;
}
.tabs input[name=tab-control]{display:none;}
.tabs .content section h2, .tabs ul li label{font-size:18px;color:#4288ff;}
.tabs ul{
    display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
    list-style-type:none;padding-left:0;margin-bottom:12px;
}
.tabs ul li{box-sizing:border-box;flex:1;width:25%;padding:0 10px;text-align:center;}
.tabs ul li label{
    transition:all 0.3s ease-in-out;
    color:#929daf;padding:5px auto;display:block;cursor:pointer;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active{outline:0;color:#bec5cf;}
.tabs .slider{position:relative;width:25%;transition:all 0.33s cubic-bezier(0.38,0.8,0.32,1.07);}
.tabs .slider .indicator{position:relative;width:50px;max-width:100%;margin:0 auto;height:3px;background:#4288ff;border-radius:1px;}
.tabs .content{margin-top:30px;}
.tabs .content section{
    display:none;line-height:1.4;
    -webkit-animation-name: content;
            animation-name: content;
    -webkit-animation-direction: normal;
            animation-direction: normal;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}
.tabs .content section h2{display:none;}

.tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label{cursor:default;color:#4288ff;font-weight:600;}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider{transform:translateX(0%);}
.tabs input[name=tab-control]:nth-of-type(1):checked ~ .content > section:nth-child(1){display:block;}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label{cursor:default;color:#4288ff;font-weight:600;}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider{transform:translateX(100%);}
.tabs input[name=tab-control]:nth-of-type(2):checked ~ .content > section:nth-child(2){display:block;}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label{cursor:default;color:#4288ff;font-weight:600;}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider{transform:translateX(200%);}
.tabs input[name=tab-control]:nth-of-type(3):checked ~ .content > section:nth-child(3){display:block;}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label{cursor:default;color:#4288ff;font-weight:600;}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ .slider{transform:translateX(300%);}
.tabs input[name=tab-control]:nth-of-type(4):checked ~ .content > section:nth-child(4){display:block;}

@-webkit-keyframes content {
    from {
      opacity: 0;
      transform: translateY(5%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @keyframes content {
    from {
      opacity: 0;
      transform: translateY(5%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }