@charset "utf-8";
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

:root { --device-change-h:60px; --button-color1:#ffa50f; --button-color2:#f77100; --button-color3:#7355b0; --button-color4:#6975dd; }
* { margin:0; padding:0; border:none; box-sizing:border-box; }

html, body { font-family:"NanumSquare", sans-serif; font-weight:500; font-size: 16px; height:100%; }
body { overflow:hidden; line-height:1.5; background:#ddd; }

a, button { border:none; background:none; outline:none; font:inherit; cursor:pointer; font-weight:500; color:inherit; font-size:inherit; outline:none; }
a { text-decoration:none; }

.theme-info { position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; }
.device-change { position:fixed; left:0; top:calc(-1 * var(--device-change-h)); right:0; height:var(--device-change-h); display:flex; justify-content:space-between; background:#222; color:#fff; z-index:9; }
body.device .device-change { top:0; }


.device-change ul { display:flex; }
.device-change li { position:relative; display:flex; justify-content:center; align-items:center; border-left:1px solid #333; border-right:1px solid #333; margin-left:-1px; padding:0 35px; font-size:0; background:none no-repeat center; cursor:pointer; }
.device-change li.on { background-color:#000; z-index:3; filter:invert(1); }
.device-change li:hover:before,
.device-change li.on:before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--button-color1); }
.device-change li.on:before { filter:invert(1); }
.device-change li:nth-child(1) { background-image:url("/img/device_p.png"); }
.device-change li:nth-child(2) { background-image:url("/img/device_t.png"); }
.device-change li:nth-child(3) { background-image:url("/img/device_m.png"); }


.device-change .button { padding:0 25px; }

.device-change .all { position:relative; background:linear-gradient(140deg, var(--button-color3), var(--button-color4)); }
.device-change .all:before,
.device-change .all:after { content:""; position:absolute; opacity:1; visibility:visible; transition-duration:400ms; transition-delay:400ms; z-index:-11; }

.device-change .all:before { left:0; top:calc(100% - 25px); border-radius:99px; background:linear-gradient(140deg, var(--button-color3), var(--button-color4)); width:50px; height:55px; }
.device-change .all:after { left:15px; top:100%; width:15px; height:15px; border-radius:3px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg); }
body.device .device-change .all:before,
body.device .device-change .all:after { opacity:0; visibility:hidden; transition-duration:0ms; transition-delay:0ms; }
.device-change .sell { display:flex; justify-content:center; align-items:center; background:linear-gradient(140deg, var(--button-color2), var(--button-color1)); }


body.device iframe { padding-top:var(--device-change-h); }
iframe { display:block; width:100%; height:100%; margin:0 auto; box-shadow:0 3px 10px rgba(0,0,0,.1); }

.device-change,
iframe { transition-duration:500ms; }

@media (max-width: 767px) {
	:root { --device-change-h:45px; }
	html, body { font-size:14px; }

	.device-change .button { padding:0 15px; font-size:.875rem; }
	.device-change li { padding:0 25px; background-size:24px; }
}