.body_wrap{position:relative}

.flex_wrap{display:flex}

.FontList{line-height:30px;font-size:22px;font-weight:700}

.font_option p{margin-bottom:5px;line-height:20px;font-size:12px;font-weight:700}
.font_option + .font_option{margin-top:10px}
.font_option:last-child{margin-bottom:40px}

.input_wrap{padding:4px 8px;width:80%;height:30px;border:1px solid #333;border-radius:2px}
.input_wrap input{border:0;width:100%;line-height:22px;color:#333;font-size:16px;background:none;outline:none}
.input_wrap + .input_button{margin-left:4px;width:20%;height:30px;border-radius:2px;color:#fff;line-height:30px;font-size:14px;background:#333}

.select_wrap{position:relative;padding:2px 8px;width:100%;height:30px;border:1px solid #333;border-radius:2px}
.select_wrap:after{content:'▼';position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#333;font-size:12px}
.select_wrap select{border:0;width:100%;line-height:26px;font-size:14px;background:none;outline:none}

p#font_text{position:relative;padding-left:140px}
p#font_text:before{position:absolute;left:90px;top:50%;transform:translateY(-50%);width:35px;font-size:16px;text-align:right}
p#font_text:after{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:16px}
.font_fw100:before{content:'100'}
.font_fw200:before{content:'200'}
.font_fw300:before{content:'300'}
.font_fw400:before{content:'400'}
.font_fw500:before{content:'500'}
.font_fw600:before{content:'600'}
.font_fw700:before{content:'700'}
.font_fw800:before{content:'800'}
.font_fw900:before{content:'900'}
.font_fw100:after{content:'Thin'}
.font_fw200:after{content:'ExtraLight'}
.font_fw300:after{content:'Light'}
.font_fw400:after{content:'Regular'}
.font_fw500:after{content:'Medium'}
.font_fw600:after{content:'SemiBold'}
.font_fw700:after{content:'Bold'}
.font_fw800:after{content:'ExtraBold'}
.font_fw900:after{content:'Black'}

.header_wrap{position:fixed;left:0;top:0;padding:15px 30px;width:100vw;height:60px;background-color:#000;z-index:9999}
.header_wrap .flex_wrap{justify-content:flex-start;justify-content:space-between}
.header_wrap .mainTitle{line-height:30px;color:#fff;font-size:22px;font-weight:700}
.header_wrap .btn_fontList{display:none;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg id='btn_menu' transform='translate(-1788.762 -59.762)' style='isolation: isolate'%3E%3Cg id='사각형_486498' data-name='사각형 486498' transform='translate(1788.762 59.762)' fill='red' stroke='%23707070' stroke-width='1' opacity='0'%3E%3Crect width='24' height='24' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='23' height='23' fill='none'/%3E%3C/g%3E%3Cg id='그룹_698141' data-name='그룹 698141' transform='translate(0 0.5)'%3E%3Cline id='선_1802' data-name='선 1802' x2='18' transform='translate(1791.762 65.262)' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cline id='선_1803' data-name='선 1803' x2='18' transform='translate(1791.762 71.262)' fill='none' stroke='%23fff' stroke-width='2'/%3E%3Cline id='선_1804' data-name='선 1804' x2='18' transform='translate(1791.762 77.262)' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") center no-repeat}

.content_wrap{height:100dvh}
.content_wrap .left_list{position:fixed;left:0;top:60px;padding:20px;width:300px;height:calc(100% - 60px);background-color:#eee}
.content_wrap .left_list li:not(:first-child){padding:4px 0;margin-top:10px;border-bottom:1px solid #333}
.content_wrap .center_content{padding:20px 20px 20px 320px;margin-top:60px;width:100vw}
.content_wrap .center_content li + li{margin-top:60px}
.content_wrap .center_content .contentTitle{position:relative;line-height:30px;font-size:22px;font-weight:700}
.content_wrap .center_content li + li .contentTitle:after{content:'';position:absolute;left:0;top:-30px;width:100%;height:1px;background:#333}
.content_wrap .center_content .font_wrap{margin-top:20px}
.content_wrap .center_content .font_wrap p{padding:10px 0;font-size:16px}

.content_wrap .center_content.type_black{background-color:#000 !important}
.content_wrap .center_content.type_black *{color:#fff !important}

@media(max-width:900px){
    .header_wrap .btn_fontList{display:block}
    .content_wrap .left_list{overflow-y:scroll;top:-100%;width:100%;height:max-content;max-height:calc(100dvh - 60px);border-bottom:1px solid #333;box-shadow:2px 4px 6px rgba(0,0,0,.6);transition:top .5s;z-index:999}
    .content_wrap .left_list.active{top:60px}
    .content_wrap .center_content{padding:20px}
    p#font_text{padding-left:0;padding-top:30px}
    p#font_text:before{left:90px;top:10%;transform:translateY(-10%)}
    p#font_text:after{left:0;top:10%;transform:translateY(-10%)}
}