@charset "UTF-8";
@import url("fonts.css");

html,body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	/* padding: 45px 122px; */
	font: 23px/1 'Bd', 'Noto Sans KR','돋움', dotum, AppleGothic sans-serif;
	color: #3e3e3e;
	letter-spacing: -1px;
	background: #5bc3de;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0;
}

div {
    position:absolute;
    font-family: 'KoPubDotumL';
}

#wrap {
	position: absolute;
	width: 2560px;
	height: 1080px;
	top: 0;
	left: 0;
	background: #5bc3de url(../images/bg/bg3.jpg) no-repeat center center / cover;
    background-size: 100% 100%;
}

.header {
    position: relative;
    width: 1920px;
    left: 50%;
    right: 50%;
    height: 120px;
    transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
}

.header {
    position: relative;
    width: 1920px;
    left: 50%;
    right: 50%;
    height: 120px;
    transform: translatex(-50%);
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
    z-index: 10;
}

#bgItems {
	position: absolute; width:100%; height:100%;text-align:center;
}

iframe {
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    border: none;
    overflow: hidden;
    /* background: #000; */
    z-index: 9;
}

#frm2 {
	z-index:10;
}

.btn:hover {
	filter:hue-rotate(100deg);
	-webkit-filter:hue-rotate(100deg);
	-moz-filter:hue-rotate(100deg);
}

iframe {
	-webkit-transition:all 0.8s;
	-webkit-transform-origin:50% 50%;
	-moz-transition:all 0.8s;
	-moz-transform-origin:50% 50%;
	transition:all 0.8s;
	transform-origin:50% 50%;
	/* display: none; */
	visibility: hidden;
}

#frmVoca {
    top: 0;
    bottom: auto;
    height: 936px;
}

/* #frmTOOL2 {
	width: 1920px;
	left: 50%;
	transform: translate(-50%, 0);
} */

/* 뒷배경 */
#bg {
    position: absolute;
    bottom: 0;
    left: -147px;
    width: 115.5%;
}

#backTools {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #EBEBEB;
    display: none;
    top: 0;
    left: 0;
    cursor: auto;
}

/* 인트로 제목 */
.title {position: absolute;left: 20px;width: 600px;height: max-content;margin-top: 40px;}

.top_box {
	position: absolute;
	top: 40px;
	right: 20px;
	height: 40px;
	width: 700px;
}

.subject_n {
	font-family: 'GmarketSansTTFBold';
	font-size: 37px;
	color: #fff;
	text-shadow: 1px -1px 15px #006595;
	margin: 0;
}

.subject_n span {
	font-size: 36px;
	font-family: 'GmarketSansTTFMedium';
}

/*nav메뉴*/
#menu {
    width: 712px;
    height: 40px;
    z-index: 10;
}

.btn_menu {
	position: absolute;
	cursor: pointer;
	/* width: 288px; */
	/* height: 92px; */
}

.btn_menu img {margin-right: 5px;}

.btn_menu p {
	display: inline-block;
	color: #fff;
	font-family: 'GmarketSansTTFBold';
	font-size: 25px;
	margin: 0;
	margin-left: 30px;
}

#pds {
	left: 151px;
}

#help {
	/* left: 157px; */
    left: 311px;
}

#dictionary {
	/* left: 317px; */
	left: 472px;
}

/* #voca {
	left: 448px;
} */

#game {
	left: 608px;
}

#pds {
	background-image: url("../images/bg/pds.png");
	background-repeat: no-repeat;
	background-position: 0px 0;
}

#pds:hover {
	background-image: url("../images/bg/pds_h.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 2px solid #fff;
}

#help {
	background-image: url("../images/bg/help.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#help:hover {
	background-image: url("../images/bg/help_h.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 2px solid #fff;
}

#dictionary {
	background-image: url("../images/bg/dic.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#dictionary:hover {
	background-image: url("../images/bg/dic_h.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 2px solid #fff;
}

#voca {
	background-image: url("../images/bg/voca.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#voca:hover {
	background-image: url("../images/bg/voca_h.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 2px solid #fff;
}

#game {
	background-image: url("../images/bg/game.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#game:hover {
	background-image: url("../images/bg/game_h.png");
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border-bottom: 2px solid #fff;
}


/* 일본어 서체 */
.jp_txt {
    text-align: left;
    font-family: 'HeiseiKakuGoStdW5', sans-serif;
    font-style: normal;
    font-weight: normal;
}
.jp_kaku {
    font-family: 'HeiseiKakuGoStdW5', sans-serif !important;
    font-style: normal;
    font-weight: normal;
}
.jp_meir {
    font-family: 'meiryo-bold', 'sans-serif' !important;
    font-style: normal;
    font-weight: bold;
}

/* 목차 */
#contents {
    position: absolute;
    left: 560px;
    top: 236px;
    width: 1340px;
    height: 705px;
    z-index: 8;
}

.b_unit {
    position: absolute;
    top: 10px;
    left: 0;
    width: 420px;
    height: 685px;
    padding: 10px 30px 0px 40px;
    color: #1e1e1e;
}

.mitem {
	position: relative;
}

.mitem .mcon_tit {
	display: block;
}

#li5 .mcon_tit {
	letter-spacing: 3px;
}

.dash {
    /* background-image: linear-gradient(to right, #c1c1c1 70%, rgba(255,255,255,0) 0%); */
    background-position: bottom;
    background-size: 20px 2px;/*점선 간격 수정*/
    background-repeat: repeat-x;
    border-bottom: 2px solid #ffc7c5;
}

.b_unit .dash:last-child,
.s_unit .dash:last-child {
    border-bottom: none;
}

.m_num, .labelSub {
    font-family: 'NotoSansM';
}

.b_unit p {
    display: none;
}

/*대단원 이미지*/
#li0 {
	position: absolute;
	top: 0;
	left: 40px;
	width: 116px;
	height: 164px;
	background-image: url("../images/bg/sublesson01.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 2;
}

/* #li0:hover {
	background-image: url("../images/bg/sublesson01_h.png");
} */

.b_unit #li0.selected {
	background-image: url("../images/bg/sublesson01_h.png") !important;
	z-index: 10;
}

.lesson > p {
	display: none;
}

#li1 {
	position: absolute;
	top: 0;
	left: 217px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson01.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li1:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li1:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 105px;
}

#li1.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 105px;
}

.b_unit #li1.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li2 {
	position: absolute;
	top: 0;
	left: 505px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson02.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li2:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li2:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 80px;
}

#li2.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 81px;
}

.b_unit #li2.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li3 {
	position: absolute;
	top: 0px;
	left: 796px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson03.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li3:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li3:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 81px;
	padding: 0 10px;
}

#li3.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 81px;
}

.b_unit #li3.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li4 {
	position: absolute;
	top: 0px;
	left: 1086px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson04.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
    z-index: 2;
}

#li4:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 80px;
}

#li4.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 105px;
}

.b_unit #li4.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li4:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li5 {
	position: absolute;
	top: 369px;
	left: 217px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson05.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#li5:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li5:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 80px;
}

#li5.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 81px;
}


.b_unit #li5.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li6 {
	position: absolute;
	top: 369px;
	left: 505px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson06.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li6:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li6:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 60px;
	letter-spacing: -3px;
}

#li6.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 81px;
}

.b_unit #li6.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li7 {
	position: absolute;
	top: 369px;
	left: 796px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson07.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li7:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li7:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 90px;
}

#li7.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 81px;
}

.b_unit #li7.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li8 {
	position: absolute;
	top: 369px;
	left: 1086px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson08.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li8:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li8:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 100px;
}

#li8.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 54px;
}

.b_unit #li8.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

#li9 {
	position: absolute;
	top: 369px;
	left: 1086px;
	width: 234px;
	height: 326px;
	background-image: url("../images/bg/lesson09.png");
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#li9:hover {
	background-image: url("../images/bg/lesson_h.png");
}

#li9:hover > p {
	display: block;
	text-align: center;
	color: #fff;
	font-family: 'NotoSansM';
	font-size: 34px;
	line-height: 44px;
	margin-top: 80px;
	padding: 0 10px;
}

#li9.selected > p {
	display: block;
	text-align: center;
    color: #fff;
    font-family: 'NotoSansM';
    font-size: 34px;
    margin-top: 54px;
}

.b_unit #li9.selected {
	background-image: url("../images/bg/lesson_h.png") !important;
	z-index: 10;
}

/*대단원 이미지 관련 끝*/

/*소단원*/

.lesson_nt {
	width: 400px;
}

.lesson_nt::before {
	content: '•';
	color: #ff726f;
	margin-right: 20px;
	margin-left: 18px;
}

.goEbook, .goPopup {
	display: none !important;
	background: url("../images/bg/ebook.png") no-repeat;
	background-size: 111px 50px;
	background-position: 5px 17px;
	width: 120px;
	height: 50px;
}

.goEbook:hover, .goPopup:hover {
	background: url("../images/bg/ebook_h.png") no-repeat;
	background-position: 5px 17px;
	width: 120px;
	height: 50px;
}

.mitem:hover .lesson_nt::before {
	content:url(../images/bg/check.png);
	margin-right: 13px;
	margin-left: 18px;
}

.mitem:hover .lesson_nt {
    color: #fff;
	font-weight: 700;
}

.mitem:hover .goEbook {
	display: table-cell !important;
}

.mitem:hover .goPopup {
	display: table-cell !important;
}

.goEbook {
	color: #fff;
	font-size: 24px;
	display: block;
	text-align: center;
	position: relative;
	top: -2px;
	left: -5px;
    font-family: 'NotoSansM';
    cursor: pointer;
}

.goPopup {
	color: #fff;
	font-size: 24px;
	display: block;
	text-align: center;
	position: relative;
	top: -2px;
	left: -4px;
    font-family: 'NotoSansM';
    cursor: pointer;
}

.s_unit p {
	display: table-cell;
	font-size: 36px !important;
	padding: 15px 0;
	word-break: keep-all;
    font-family: 'NotoSansM';
	font-weight: 500;
	color: #222e3b;
	line-height: 44px;
	text-indent: 0px;
	cursor: pointer;
}

.mitem {
	position: relative;
	padding: 0px;
	/* border-bottom: 2px solid #ffc7c5; */
	min-height: 80px;
	width: 651px;
	color: #243966 !important;
}

.s_unit .mitem:hover {
	background-color: #ff726f;
	color: #fff;
	background-image: none;
	border-radius: 20px;
	border-bottom-color: transparent;
}

.s_unit {
    position: absolute;
	width: 649px;
	max-height: max-content;
	border-radius: 25px;
	background-color: #fff;
	z-index: 10;
	border: 5px solid #ff726f;
	padding: 25px 30px;
	display: none;
}

.s_unit:has([data-idx="li0"]) {
    top: 0;
    left: 215px;
    width: 720px;
    display: block;
}

.s_unit:has([data-idx="li0"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 36px;
    left: -65px;
    background-size: 100% 100%;
}

[data-idx="li0"] {
	width: 710px;
}

[data-idx="li0"] .lesson_nt{
	width: 450px;
}


.s_unit:has([data-idx="li1"]) {
    top: -70px;
    left: 485px;
    display: block;
}

.s_unit:has([data-idx="li1"]):after {
    content: "";
    background: url("../images/bg/tail.png") no-repeat;
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 101px;
    left: -65px;
    background-size: 100% 100%;
}

.s_unit:has([data-idx="li2"]) {
    top: -70px;
    left: 783px;
    display: block;
}

.s_unit:has([data-idx="li2"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 100px;
    left: -65px;
    background-size: 100% 100%;
}

.s_unit:has([data-idx="li3"]) {
    top: -70px;
    left: 54px;
    display: block;
}

.s_unit:has([data-idx="li3"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    transform: rotate(180deg);
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 100px;
    left: 697px;
    background-size: 100% 100%;
}

.s_unit:has([data-idx="li4"]) {
    top: -70px;
    left: 344px;
    display: block;
}

.s_unit:has([data-idx="li4"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    transform: rotate(180deg);
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 100px;
    left: 697px;
    background-size: 100% 100%;
}

.s_unit:has([data-idx="li5"]) {
    top: -112px;
    left: 514px;
    width: 790px;
    display: block;
}

.s_unit:has([data-idx="li5"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 587px;
    left: -65px;
    background-size: 100% 100%;
}

[data-idx="li5"] {
	width: 790px;
}

[data-idx="li5"] .lesson_nt{
	width: 530px;
}

.s_unit:has([data-idx="li6"]) {
    top: -100px;
    left: 775px;
    display: block;
}

.s_unit:has([data-idx="li6"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 620px;
    left: -65px;
    background-size: 100% 100%;
}


.s_unit:has([data-idx="li7"]) {
    top: -100px;
    left: 3px;
    display: block;
}

.s_unit:has([data-idx="li7"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    transform: rotate(180deg);
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 621px;
    left: 696px;
    background-size: 100% 100%;
}

.s_unit:has([data-idx="li8"]) {
    top: -100px;
    left: 284px;
    display: block;
}

.s_unit:has([data-idx="li8"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    transform: rotate(180deg);
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 600px;
    left: 697px;
    background-size: 100% 100%;
}


.s_unit:has([data-idx="li9"]) {
    top: -100px;
    left: 344px;
    display: block;
}

.s_unit:has([data-idx="li9"]):after {
    content: "";
    background-image: url("../images/bg/tail.png");
    background-repeat: no-repeat;
    transform: rotate(180deg);
    display: block;
    width: 77px;
    height: 65px;
    position: absolute;
    top: 660px;
    left: 697px;
    background-size: 100% 100%;
}
/*소단원 끝*/

.lesson_n {
	font-family: 'BMJUA';
	font-size: 37px;
	/* color: #243966; */
	text-align: center;
	margin-top: 57px;
}

/* 애니 오브제 */

#obj {
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#obj1 {
	position: absolute;
	left: -7px;
	top: 200px;
	z-index: -6;
	background-size: 1920px 463px;
	width: 2240px;
}

#obj2 {
	position: absolute;
	left: -7px;
	top: 540px;
	background-size: 2844px 398px;
	width: 2304px;
	z-index: -5;
	height: 398px;
}

#obj3 {
	position: absolute;
	left: 245px;
	top: 600px;
	display: none;
}

#obj4 {
	position: absolute;
	right: 0px;
	top: -90px;
	z-index: -1;
}

#obj5 {
	position: absolute;
	left: -29px;
	top: -204px;
	z-index: 0;
}

#obj6 {
	position: absolute;
	left: 2060px;
	top: 650px;
	width: 215px;
	height: 334px;
}
#obj6>img {
	position: absolute;
	top:0; left:0;
	width: 100%;
}

#obj9 {
	position: absolute;
	left: 30px;
	top: 620px;
	z-index: -2;
}

#obj12 {
	position: absolute;
	left: 480px;
	top: 664px;
	z-index: -2;
}

#obj16 {
    position: absolute;
    left: 1570px;
    top: 685px;
    z-index: -2;
}

#obj19 {
	position: absolute;
	left: 170px;
	top: 370px;
	z-index: -3;
}

#obj20 {
	position: absolute;
	left: -8px;
	top: 823px;
	width: 2241px;
	z-index: -2;
}

#obj21 {
	position: absolute;
	left: 810px;
	top: 540px;
	opacity: 0;
}

/*사람애니메이션*/

#cha1 {
   position: absolute;
   top: 40px;
   left: 0px;
}
#cha_shadow1 {
   position: absolute;
   top: 946px;
   left: 428px;
}
#boy1_body {
   position: absolute;
   top: 640px;
   left: 406px;
   z-index: 3;
}
#boy1_hand1 {
   position: absolute;
   top: 632px;
   left: 429px;
}
#boy1_hand2 {
   position: absolute;
   top: 621px;
   left: 607px;
}
#boy1_head {
   position: absolute;
   top: 629px;
   left: 466px;
}
#girl1_neck {
   position: absolute;
   top: 707px;
   left: 587px;
   z-index: 6;
}
#girl1_arm1 {
   position: absolute;
   top: 727px;
   left: 533px;
   z-index: 5;
}
#girl1_arm2 {
   position: absolute;
   top: 715px;
   left: 653px;
   z-index: 3;
}
#girl1_body {
   position: absolute;
   top: 740px;
   left: 600px;
   z-index: 4;
}
#girl1_head {
   position: absolute;
   top: 659px;
   left: 601px;
   z-index: 5;
}

#cha2 {
   position: absolute;
   width: 500px;
   top: 400px;
   left: 1930px;
}
#cha_shadow2 {
   position: absolute;
   top: 570px;
   left: 30px;
}
#boy2_body {
   position: absolute;
   top: 300px;
   left: 120px;
   z-index: 5;
}
#boy2_arm1 {
   position: absolute;
   top: 253px;
   left: 216px;
   z-index: 5;
}
#boy2_armline {
   position: absolute;
   top: 307px;
   left: 225px;
   z-index: 6;
}
#boy2_head {
   position: absolute;
   top: 248px;
   left: 173px;
}
#girl2_neck {
   position: absolute;
   top: 327px;
   left: 48px;
   z-index: 7;
}
#girl2_arm1 {
   position: absolute;
   top: 346px;
   left: 9px;
}
#girl2_arm2 {
   position: absolute;
   top: 325px;
   left: 107px;
   z-index: 5;
}
#girl2_body {
   position: absolute;
   top: 358px;
   left: 48px;
}
#girl2_head {
   position: absolute;
   top: 278px;
   left: 54px;
}

/* 폭죽 */


#fire1 {
   position: absolute;
   top: 350px;
   left: 390px;
   width: 316px;
   height: 320px;
}
#fire2 {
   position: absolute;
   top: 83px;
   left: 911px;
}
#fire3 {
   position: absolute;
   top: 577px;
   left: 1910px;
}
#fire4 {
   position: absolute;
   top: 200px;
   left: 2100px;
}


#fire1_1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 270px;
}
#fire1_2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 171px;
}
#fire1_3 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
}
#fire2_1 {
   position: absolute;
   top: 25px;
   left: -37px;
   width: 110px;
}
#fire2_2 {
   position: absolute;
   top: 58px;
   left: 100px;
   width: 50px;
}
#fire2_3 {
   position: absolute;
   top: 100px;
   left: 10px;
   width: 160px;
}
#fire3_1 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 170px;
   z-index: 2;
}
#fire3_2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 250px;
}
#fire4_1 {
   position: absolute;
   top: 0;
   left: 0;
}
#fire4_2 {
   position: absolute;
   top: 90px;
   left: 27px;
}
#fire4_3 {
   position: absolute;
   top: -30px;
   left: 110px;
}
#fire4_4 {
   position: absolute;
   top: 110px;
   left: -10px;
}
#fire5 {
   position: absolute;
   top: 220px;
   left: 530px;
}
#fire6{
   position: absolute;
   top: 555px;
   left: 716px;
}
#fire7 {
   position: absolute;
   top: 160px;
   left: 1513px;
}
#fire8 {
   position: absolute;
   top: 660px;
   left: 2220px;
}



#wrapper {
    display: none;
}

#popup_close {
	/* top: 10px;
    right: 10px; */
    top: 76px;
    right: 117px;
    background-image: url(../images/popup/close.png);
    background-size: 100% 100%;
	width: 55px;
    height: 58px;
	cursor: pointer;
    position: absolute;
    z-index: 11;
    display: none;
}

#popup_close:hover {
    background-image: url(../images/popup/close_h.png);
    background-size: 100% 100%;
}

#frmtranslate {
    background-color: transparent;
}

.fw500 {
	font-weight: 500 !important;
}

.mitem:hover .fw500 {
	font-weight: 700 !important;
}

.sans_jp{
	font-family: 'Noto Sans JP';
 	font-weight: normal;
}