body{background:#1f2d3f}.page_bg_img{position:fixed;top:0;left:0;z-index:-100;width:100%;height:100%}.page_bg_img img{width:100%;height:100%;object-fit:cover}.page_bg_img::after{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;content:"";display:block;background:rgba(0,0,0,0.3)}.css_learning_list{padding:0 24px}@media (max-width: 500px){.css_learning_list{padding:0 16px}}.css_learning_list .wrap{margin:80px auto;max-width:800px;width:100%}@media (max-width: 980px){.css_learning_list .wrap{margin:48px 0}}@media (max-width: 500px){.css_learning_list .wrap{margin:40px 0}}.css_learning_list .wrap header{margin-bottom:32px;padding:0 4px}@media (max-width: 500px){.css_learning_list .wrap header{margin-bottom:24px}}.css_learning_list .wrap header h1{font-size:28px;line-height:1.4em;color:#fff}@media (max-width: 600px){.css_learning_list .wrap header h1{font-size:24px}}@media (max-width: 500px){.css_learning_list .wrap header h1{font-size:20px}}.css_learning_list .wrap section{background:#fff;border-radius:8px;overflow:hidden}.css_learning_list .wrap section+section{margin-top:24px}.css_learning_list .wrap section h2{padding:16px;background:#0e4c8e;color:#fff}.css_learning_list .wrap section .post_item{padding:8px 8px 8px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #ccdef5;line-height:1.6em}@media (max-width: 600px){.css_learning_list .wrap section .post_item{font-size:14px}}.css_learning_list .wrap section .post_item:last-of-type{border:none}.css_learning_list .wrap section .post_item .start_btn{padding:8px 12px;background:#d97c7c;color:#fff;font-size:14px;border-radius:3em;line-height:1}@media (max-width: 600px){.css_learning_list .wrap section .post_item .start_btn{font-size:12px}}.css_learning header{margin:0 auto;padding:16px;padding-bottom:14px;max-width:1080px;width:100%;background:#3f85d9;color:#fff}.css_learning header h1 .sub{margin-top:8px;font-size:14px}.css_learning>.css_learning_wrap{margin:0 auto;padding:16px;max-width:1080px;width:100%;background:#0a1b2a}.css_learning>.css_learning_wrap>p.explanation{margin:8px 0;line-height:1.8;font-size:14px;color:#fff}.css_learning>.css_learning_wrap .preview_wrap{margin-bottom:8px;display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}@media (max-width: 800px){.css_learning>.css_learning_wrap .preview_wrap{grid-template-columns:repeat(1, 1fr)}}.css_learning>.css_learning_wrap .preview_display{position:relative;width:100%;background:#fff;border-radius:8px;overflow:hidden}.css_learning>.css_learning_wrap .preview_display::before{padding-top:48%;display:block;content:""}.css_learning>.css_learning_wrap .preview_display .inner{position:absolute;top:0;left:0;width:100%;height:100%}.css_learning>.css_learning_wrap .preview_display .inner.h_center{display:flex;align-items:center}.css_learning>.css_learning_wrap .preview_display .inner.p_16{padding:16px}.css_learning>.css_learning_wrap .preview_display .inner .label{position:absolute;top:4px;right:4px;z-index:10;padding:8px 12px;background:#3f85d9;color:#fff;font-size:14px;border-radius:3em}@media (max-width: 800px){.css_learning>.css_learning_wrap .preview_display .inner .label{font-size:12px}}.css_learning>.css_learning_wrap .preview_display.preview .label{background:#d96d6d}.css_learning>.css_learning_wrap .preview_display.preview .label.is_active{background:#1ebcb1}.css_learning>.css_learning_wrap .code_wrap{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}@media (max-width: 600px){.css_learning>.css_learning_wrap .code_wrap{grid-template-columns:repeat(1, 1fr);gap:0}}.css_learning>.css_learning_wrap .code_preview{position:relative;margin-bottom:8px;max-height:200px;background:#37425c;border-radius:8px;overflow:hidden;color:#fff;line-height:1.6em;font-size:12px;overflow-y:scroll}@media (max-width: 800px){.css_learning>.css_learning_wrap .code_preview{font-size:11px}}.css_learning>.css_learning_wrap .code_preview>pre{padding:16px}.css_learning>.css_learning_wrap .code_preview>pre #pre_style_in{padding-left:1.5em;color:#10e8ba}.css_learning>.css_learning_wrap .code_preview>pre #pre_style_in.space_2{padding-left:2.9em}.css_learning>.css_learning_wrap .code_preview>pre #pre_style_in:empty{display:none}.css_learning>.css_learning_wrap .code_preview .label{position:sticky;top:0;right:0;z-index:10;padding:6px 12px;background:#3f85d9;color:#fff;font-size:13px}@media (max-width: 500px){.css_learning>.css_learning_wrap .code_preview .label{padding:6px 8px;font-size:11px}}.css_learning>.css_learning_wrap .css_select{margin:8px 0 16px 0;display:grid;grid-template-columns:repeat(2, 1fr);gap:4px}@media (max-width: 550px){.css_learning>.css_learning_wrap .css_select{grid-template-columns:repeat(1, 1fr)}}.css_learning>.css_learning_wrap .css_select label{padding:0 12px;height:40px;width:100%;display:flex;align-items:center;box-shadow:0 0 4px rgba(0,0,0,0.2);font-size:14px;background:#fafbfd;border-radius:3em}@media (max-width: 650px){.css_learning>.css_learning_wrap .css_select label{font-size:12px}}@media (max-width: 550px){.css_learning>.css_learning_wrap .css_select label{font-size:14px}}.css_learning>.css_learning_wrap .css_select label input{margin-right:8px}.css_learning>.css_learning_wrap .css_select label:has(:checked){background:#ffd900}.css_learning>.css_learning_wrap .navigation{display:flex;gap:4px}.css_learning>.css_learning_wrap .navigation a{height:54px;background:#d58484;flex:1;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}.css_learning>.css_learning_wrap .navigation a.next_link{pointer-events:none;background:#b5b3b3}.css_learning>.css_learning_wrap .navigation a.next_link.is_active{pointer-events:initial;background:#1ebcb1}