@media (max-width:1200px) {
    body { font-size: 0.85em; }
    a { -webkit-tap-highlight-color : transparent; }
    #header, #gnb, #contents, #footer { min-width: auto; }
    #header .wrap { height: 11.7vw; }
    #hd_pop, .wrap { width: 100%; }
    #header .logo img { max-height: 8.3vw;}
    .wrap { padding: 0 2vw; }
    .hd_sch_wr { flex: 0 1 45vw }
    #header.scroll .hd_sch_wr { padding: 0 2vw; }
    #header.scroll .hd_sch_wr > div { width: 100%; }
    .gnb_1dli { padding: 0 3.5vw;}
    #gnb_all { width: calc(100% - 4em);}
    .fix_btn { right: 2vw; bottom: 2vw; }
    #aside { width: 23vw; margin-right: 3vw; }
    #aside + section { width: calc(100% - 26vw); }
    #contents { margin: 2.5vw 0 4vw 0;}
    #contents.main #aside { width: 23vw; margin-left: 2vw; }
    #contents.main #aside + section { width: calc(100% - 25vw); }
    #contents .main_banner { margin-bottom: 2.5vw; }
    .tab_menu ul { margin-bottom: 2vw; }
    .pic_rank, .latest_wr { margin-bottom: 3vw; }
    .pic_rank li:first-child { width: 50%; }
    .pic_rank ul { padding-left: 51%; min-height: 31.8vw; }
    .pic_rank li { width: 47.5%; margin-left: 2.5%; margin-bottom: 1.95vw; }
    .pic_rank li:first-child .subj { font-size: 1.25em; }
    .pic_rank li:first-child .con { font-size: 1.05em; }
    .latest_wr.rows > div { margin-left: 2vw; }
    .pic_list li .lt_img { width: 17vw; }
    .pic_list li .con { display: none; }
}

@media (max-width:1023px) {
    .wrap, #header.scroll .hd_sch_wr { padding: 0 3vw; }
    #header .wrap { height: auto; padding: 40px 0 15px 0; }
    #header .wrap.rows_bc { flex-direction: column; }
    #header .btn_mobile { display: block; position: absolute; top: 20px; left: 20px; width: 30px; height: 30px; font-size: 0; text-indent: -9000px; background: transparent url(/theme/ws01/img/icon_hamberg.png) no-repeat center; background-size: 24px; }
    #header .logo, .hd_sch_wr { flex-basis: auto; }
    #header .logo { margin-bottom: 30px; }
    #header .hd_sch_wr { width: 60vw; }
    #header .hd_sch_wr .btn_mobile { display: none; }
    #header.scroll .hd_sch_wr .btn_mobile { display: block; position: static; top: 20px; left: 20px; width: 30px; height: 30px; font-size: 0; text-indent: -9000px; background: transparent url(/theme/ws01/img/icon_hamberg.png) no-repeat center; background-size: 24px; margin-right: 15px; }
    #header.scroll #hd_sch { width: 40vw; }
    #header .top_banner { display: none; }
    #header .user_area { display: flex; align-items: center; position: absolute; right: 20px; top: 20px; gap: 10px; }
    #header .user_area > div { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
    #header .user_area i { font-size: 1.5em !important; }
    #header .user_area img { border-radius: 50% }
    #gnb { position: fixed; left: -300px; top: 0; height: 100%; z-index: 20; width: 300px; padding: 15px; transition: .3s all; }
    #gnb.on { left: 0; }
    #gnb .wrap { height: 100%; padding: 0; }
    #gnb .rows_bc { display: block; height: 100%; }
    #gnb_1dul { flex-direction: column; padding-top: 40px; height: calc(100% - 210px); overflow: auto; }
    .gnb_1dli { padding: 0; }
    .gnb_1dli > a { display: block; height: auto; padding: 15px }
    .gnb_al_li_plus > a { pointer-events: none; }
    .gnb_1dli .gnb_2dul { height: auto; opacity: 1; position: static; transition: none; transform: none; background: transparent !important; padding: 0 5px !important; display: none; }
    .gnb_1dli .gnb_2dul ul { border: 0; background: rgba(0,0,0,0.2); border-radius: 5px; overflow: hidden; }
    #gnb_1dul ul li a { background-color: transparent !important; color: rgba(255,255,255,0.7); border-color:rgba(255,255,255,0.1) !important }
    #gnb_1dul ul li.on a { background: rgba(0,0,0,0.3) !important; color: #fff; }
    #gnb .gnb_menu_btn { display: none; }
    #gnb .btn_close { display: block; width: 30px; height: 30px; font-size: 0; text-indent: -9000px; position: absolute; right: 5px; top: 5px; border: 0; background-color: transparent; z-index: 1000; }
    #gnb .btn_close:after { content: ""; display: block; width: 30px; height: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%) rotate(45deg); background: #fff; }
    #gnb .btn_close:before { content: ""; display: block; width: 30px; height: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%) rotate(-45deg); background: #fff; }
    .ol { background-color: rgba(0,0,0,0.3) !important; margin: 0; border: 0 !important; position: fixed; left: -315px; bottom: 15px; z-index: 21; width: 270px; transition: .3s all; color: rgba(255,255,255,0.55); }
    .ol a { color: rgba(255,255,255,.75);}
    .ol.on { left: 15px; }
    #ol_after_hd p .win_point, #ol_after_hd #ol_after_logout { color: rgba(255,255,255,.55); }
    #ol_after_hd .user, #ol_after_hd p strong, #ol_arm #arm_cnt.arm0, #ol_after_private li strong, #ol_before p strong { color: #fff; }
    #ol_arm dl { top: auto; bottom:30px; left: -50px; }
    #ol_after_hd .profile_img a { color: #000; }
    #ol_after_private li i { background-color: #000; }
    #ol_after_private { border-color: #555; }
    #aside { position: absolute; left: -315px; height: 0; overflow: hidden; }
    #aside + section, #contents.main #aside + section { width: 100%; }
    #contents { margin: 3vw 0 4vw 0; border-top: 1px solid #eee; padding-top: 3vw; }
    #contents .main_banner { margin-bottom: 4vw; }
    .pic_rank ul { min-height: 43vw; }
    .pic_rank, .latest_wr { margin-bottom: 4vw; }
    .latest_wr.mobile_aid { display: flex; }
}

@media (max-width:767px) {
    body { font-size: .9em; }
    .mobile_ex { display: none !important; }
    #header .wrap { padding: 35px 0 25px; }    
    .tab_menu { overflow-x: auto; }
    #header .btn_mobile, #header.scroll .hd_sch_wr .btn_mobile { background-size: 20px; width: 20px; height: 20px; }
    #header.scroll .hd_sch_wr .btn_mobile { margin:0 15px 0 10px; flex-shrink: 0; }
    #popular .popular_inner { padding-top: 3px; font-size: .95em; }
    #header.scroll #popular { display: none; }
    #header.scroll #hd_sch { width: 60vw }
    #header .logo img { max-height: 40px; }
    #header .logo { margin-bottom: 25px; }
    #header .hd_sch_wr { width: 80vw;}
    #header .user_area { right: 15px; top: 15px; gap: 5px; }
    #header .user_area > div { width: 30px; height: 30px; }
    #header .user_area i { font-size: 1.2em !important; }
    #header .user_area img { border-radius: 50% }
    #gnb { padding: 10px;}
    #gnb .btn_close { width: 20px; height: 20px; top: 10px; right: 10px; }
    #gnb .btn_close:after, #gnb .btn_close:before { width: 20px; }
    .gnb_1dli > a {  padding: 12px 15px; font-size: 1rem; }
    #gnb_1dul ul li a { padding: 13px 15px; font-size: .9rem; }
    .tab_menu ul { margin-bottom: 12px; }
    .tab_menu li a { height: 36px; padding: 0 15px; min-width: 80px; }
    #contents { margin: 1vw 0 40px 0; padding-top: 3vw; }
    #contents.main { margin-bottom: 0; }
    #contents .main_banner { margin-bottom: 30px; }
    .pic_rank ul { flex-wrap: nowrap; overflow-x: auto; padding: 0; }
    .pic_rank li { flex: 0 0 280px !important; position: relative !important; margin-left: 12px; margin-bottom: 0; }
    .pic_rank li .subj { font-size: 1.1em !important; font-weight: 600 !important; margin-top: 0.7em !important; white-space: normal !important; }
    .pic_rank li .con { display: block; font-size: 1em !important; margin-top: 0.7em !important; }
    .pic_rank li .lt_info { margin-top: 0.7em !important; }
    .pic_rank, .latest_wr { margin-bottom: 30px; }
    .latest_wr.rows { flex-wrap: wrap; }
    .latest_wr.rows > div { width: 100%; margin: 10px 0 0 0; }
    .latest_wr.rows > div:first-child { margin-top: 0; }
    .pic_lt ul { margin-left: -5px; }
    .pic_lt li { width: calc(100%/2 - 5px); margin-left: 5px; margin-bottom: 5px; }
    .pic_lt li .lt_nick, .pic_slide .galley_li .lt_nick { display: none; }
    .pic_list ul { margin: 0; }
    .pic_list li { width: 100%; margin: 0 0 10px; }
    .pic_list li .lt_img { width: 150px; }
    #container_title { font-size: 1.4em; margin-top: 10px; }
    #bo_cate { margin-bottom: 15px; padding-top: 0; } 
    #bo_btn_top { margin: 5px 0; }
    #ft_link { justify-content: center; }
    #ft_link > * { margin: 0 10px; }
    #ft_company { display: none; }
    #ft_copy { text-align: center; }
    #arm_list .btn { padding: 0 7px; }
}