/*@import url(https://fonts.googleapis.com/css?family=Anton);*/

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline
}

audio:not([controls]) {
	display: none;
	height: 0
}

[hidden],
template {
	display: none
}

a {
	background-color: transparent
}

a:active,
a:hover {
	outline: 0
}

abbr[title] {
	border-bottom: 1px dotted
}

b,
strong {
	font-weight: bold
}

dfn {
	font-style: italic
}

h1 {
	font-size: 2em;
	margin: 0.67em 0
}

mark {
	background: #ff0;
	color: #000
}

small {
	font-size: 80%
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -0.5em
}

sub {
	bottom: -0.25em
}

img {
	border: 0
}

svg:not(:root) {
	overflow: hidden
}

figure {
	margin: 1em 40px
}

hr {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	height: 0
}

pre {
	overflow: auto
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0
}

button {
	overflow: visible
}

button,
select {
	text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer
}

button[disabled],
html input[disabled] {
	cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}



input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em
}

legend {
	border: 0;
	padding: 0
}

textarea {
	overflow: auto
}

optgroup {
	font-weight: bold
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

td,
th {
	padding: 0
}


/*
See the explanation of the animation here:
http://codepen.io/timseverien/pen/yvJkm
*/
@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}

.checkbox, .checkbox-alt {
	background:#fff;
	display: inline-block;
	margin: 0 0.25em 10px;
	width:238px;
	padding:10px 0;
	

}
.checkbox label, .checkbox-alt label {
  display: block;
  position: relative;
}


.checkbox label:after, .checkbox-alt label:after {
  /*
  This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
  */
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  /*
  I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
  */

  display: block;
  
}
.checkbox label:hover:after, .checkbox-alt label:hover:after {
  border-color: #FF0089;
}
.checkbox input, .checkbox-alt input {
  display:;
  float:left;
  width:20px;
  height:20px;
  background:white;
}

.checkbox input:checked + label:after, .checkbox-alt input:checked + label:after {
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 7px solid #000;
  border-top: 7px solid #000;
  content: '';
  border-color:#ff0000;
  height:40px;
  left:96px;
  position: absolute;
  top:60px;
  width:20px;
}
.checkbox.checkbox-alt label:hover:after, .checkbox-alt.checkbox-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.checkbox.checkbox-alt input:checked + label:after, .checkbox-alt.checkbox-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}


/* ※※※※※※※※※※※※※※※※※※ 교재신청 페이지 css ※※※※※※※※※※※※※※※※※※※※※ */
.tit_book{float:left; clear:both;}
.tit_book dt{float:left; clear:both; color:#333; font:bold 13px/1.5em 'malgun gothic';}
.tit_book dd{float:left; padding-left:5px; font:13px/1.8em 'malgun gothic';}

.bookbox{border:1px solid #ddd; border-top:4px solid #0b4ee0; margin-bottom:20px;}
.bookbox td{padding:0; text-align:left;}
.bookbox td:nth-child(1){position:relative; width:300px; padding:10px 21px; vertical-align:top;}
.bookbox td:nth-child(2){padding:30px 30px; position:relative; vertical-align:middle; width:60%;}
.bookbox td:nth-child(3){padding:10px 25px; text-align:right; width:40%;}

.lic_wall{}

.bookbox, .checkbox-alt {
	background:#fff;
	display: inline-block;
	margin:0;
	padding:0;
	width:100%;
	margin-bottom:10px;
}
.bookbox label, .bookbox-alt label {
  display:block;
  position:relative;
}


.bookbox label:after, .bookbox-alt label:after {
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  display: block;
}
.bookbox label:hover:after, .bookbox-alt label:hover:after {
  border-color: #FF0089;
}
.bookbox input, .bookbox-alt input {
  display:;
  float:right;
  width:20px;
  height:20px;
  background:white;
  margin-left:10px;
}

.bookbox input:checked + label:after, .bookbox-alt input:checked + label:after {
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 7px solid #000;
  border-top: 7px solid #000;
  content: '';
  border-color:#ff2e2e;
  height:40px;
  left:66px;
  position: absolute;
  top:100px;
  width:20px;
}
.bookbox.bookbox-alt label:hover:after, .bookbox-alt.bookbox-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.bookbox.bookbox-alt input:checked + label:after, .bookbox-alt.bookbox-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}


h1, h2, h3, h4, h5, h6 {
  font-weight: 100;
}

.pay_name{float:right; margin-top:10px; background:white;}
.pay_num{float:left; width:74px; margin-top:23px;}
.pay_num span{float:right; font:12px/2.1em "malgun gothic";}
.pay_name span{float:right;}
.checkbox p{float:right; margin-top:5px; padding:10px 5px; background:#23219C; display:inline-block; clear:both;}
.checkbox p a{color:white; font:14px/1.5em "malgun gothic"; letter-spacing:-1px;}
.checkbox b{float:left; display:inline-block; color:#ff0000; text-decoration:line-through;}
.checkbox strong{display:inline-block; float:left; clear:both; font:17px/1.5em "Anton", "malgun gothic"; color:#ff0000;}


.book_num{float:left; width:326px; margin-top:23px; border:1px solid #ddd; display:none;}
.book_num strong{font:bold 16px/2.1em "malgun gothic"; color:#333;}
.book_num b{display:inline-block; color:#999; text-decoration:line-through;}
.howmuch{color:#ff6100; display:inline-block; font:bold 24px/1em "nanum gothic"; padding-bottom:10px;}

.sdline{width:158px; height:215px;}
.opacity_txt{background:rgba(5,20,62,.8); backdrop-filter:blur(7px); padding:10px 0; width:100%; color:white; font:14px/1.5em "malgun gothic"; letter-spacing:-1px;}


.check_btn{display:inline-block; background:#e91e63; color:white; font:bold 14px/1em malgun gothic; padding:10px 0; width:200px; height:20px; border-radius:3px; margin:20px 0 30px; text-align:center; border:1px solid #e91e63;}
.btn_quick{display:inline-block; background:white; color:#333; font:bold 14px/1em malgun gothic; padding:10px 0; width:70px; height:20px; border-radius:3px; margin:20px 0 30px 7px; text-align:center; border:1px solid #999;}
.check_btn:hover{background:#FF9900;}


.blue_btn{display:inline-block; background:#0095ff; color:white; font:bold 14px/1em malgun gothic; padding:10px 0; width:200px; height:20px; border-radius:3px; margin:20px 0 30px; text-align:center; border:1px solid #0095ff;}
.blue_btn:hover{background:#FF9900;}

.prod_tit{font:bold 16px/1em 'malgun gothic'; color:#333; float:left; margin-left:5px;}