@charset "utf-8";
/* CSS Document */

.sampleTitleWrap {height: 80px;}
.sampleTitleWrap > .logo {vertical-align: baseline; margin:0; position: relative; top: 12px;}
.buttonWrap {position: absolute; top:20px; right: 30px; margin:0; width: auto;}
.buttonWrap > .button { float: none; width: 300px; background: #00C063;}
.buttonWrap > .button div {height: 40px;}
.buttonWrap > .button {height: 40px; line-height: 40px;}
.buttonWrap > .button div img {margin-top: 7px;}



/* 토글버튼 */
.toggle-btn {margin-left: 40px;}
.toggle-btn .btn { border: 1px solid #fff;  display: inline-block; padding: 4px 10px; position: relative; text-align: center; -webkit-transition: background 600ms ease, color 600ms ease; transition: background 600ms ease, color 600ms ease; font-size: 12px; color: #fff; }
.toggle-btn input[type="radio"].toggle {display: none;background: none;}
.toggle-btn input[type="radio"].toggle + label { cursor: pointer; min-width: 60px;}
.toggle-btn input[type="radio"].toggle + label:hover { background: rgba(255,255,255,0.1); }
.toggle-btn input[type="radio"].toggle + label:after { background: #fff; content: ""; height: 100%; position: absolute; top: 0; -webkit-transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); width: 100%; z-index: -1;}
.toggle-btn input[type="radio"].toggle.toggle-left + label {  border-right: 0;}
.toggle-btn input[type="radio"].toggle.toggle-left + label:after { left: 100%;}
.toggle-btn input[type="radio"].toggle.toggle-right + label { margin-left: -5px}
.toggle-btn input[type="radio"].toggle.toggle-right + label:after { left: -100%;}
.toggle-btn input[type="radio"].toggle:checked + label { cursor: default; color: #003aaa; font-weight: 600; -webkit-transition: color 200ms; transition: color 200ms; z-index: 1}
.toggle-btn input[type="radio"].toggle:checked + label:after { left: 0;}