html,body{padding:0;margin:0;font-family:'NanumSquareRound', sans-serif}body{padding:0 0 0 200px;max-width:700px}*{box-sizing:border-box}a{text-decoration:none;color:inherit}ul{list-style:none;padding:0;margin:0}button{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid #696E84;background:#696E84;color:#ffffff;display:inline-block;padding:10px 20px;margin:0;font-size:inherit}button:focus{outline:0}button:disabled{border-color:#D2D2D8;background:#D2D2D8;color:#999999}input:focus{outline:0}nav{position:fixed;left:0;top:0;height:100%;width:200px;background:#ffffff;color:#333333;padding:20px 0;box-shadow:0px 1px 7px #00000029}nav ul li a{display:block;padding:15px 10px;position:relative}nav ul li a::after{content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:2px;max-width:0;background:#f39c12;transition:max-width 0.3s}nav ul li.active,nav ul li:hover{background:#FFCB51}nav ul li>ul{padding-left:20px}section{padding:20px}div.title-wrap{position:relative;height:1px;background:#666666;margin:20px 0}div.title-wrap:nth-child(n+2){margin:30px 0 20px}div.title-wrap span{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background:#ffffff;padding:0 10px}div.title-wrap.accent{background:#e74645;color:#e74645}div.type-wrap,div.mode-wrap{font-size:0}div.type-wrap>*,div.mode-wrap>*{font-size:14px}div.type-wrap>*:nth-child(n+3),div.mode-wrap>*:nth-child(n+3){margin:0 0 0 5px}div.type-wrap>button,div.mode-wrap>button{float:right}@media (max-width: 767.98px){body{padding:10px 10px 50px}nav{top:auto;bottom:0;width:100%;height:auto;padding:0;border-radius:0;z-index:10}nav img{display:none}nav ul{display:flex}nav ul li{flex:1;text-align:center}section{padding:0}}.control-wrap{display:flex}.control-wrap>*{flex:1}.control-wrap>*:nth-child(1){margin-right:10px}input.type-btn{display:none}input.type-btn+label{display:inline-block;border:1px solid #D2D2D8;padding:10px 20px}input.type-btn:checked+label{background:#547CDC;border:1px solid #3C68D2;color:#ffffff}input.type-btn:checked+label::before{content:'';display:inline-block;width:10px;height:5px;border:2px solid #ffffff;border-top:0;border-right:0;transform-origin:left bottom;transform:rotate(-45deg)}input.type-btn:disabled+label{background:#D2D2D8;color:#999999;border-color:#D2D2D8}input.type-btn:disabled+label::before{content:none}.http-loading{position:relative}.http-loading.bg0::before{background:0}.http-loading.background::before{background-color:#000}.http-loading::before{content:'';display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;z-index:30;background-color:#000}.http-loading::after{content:'';display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:50px;width:50px;background:url(/img/loading.svg) no-repeat center;background-size:50px;z-index:31}.http-loading.invisible::before,.http-loading.invisible::after{content:none}.input-wrap{position:relative;display:flex;margin:10px 0 0}.input-wrap input[type=text]{flex:1;padding:20px 5px 5px;margin-right:5px;border:0;border-bottom:1px solid #cccccc;border-radius:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-wrap input[type=text]+label{position:absolute;left:10px;top:50%;transform:translateY(-50%);transition:transform 0.3s, top 0.3s, left 0.3s, font-size 0.3s;color:#888}.input-wrap input[type=text]:focus+label,.input-wrap input[type=text]:valid+label{transform:translateY(0);top:0;left:5px;font-size:12px}body.popup-visible::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:50}.popup-wrap{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background:#ffffff;border:1px solid #ccc;border-radius:5px;padding:10px;width:90vw;max-width:400px;z-index:51}.popup-wrap.visible{display:block}