@charset "UTF-8";

/*
@font-face {
	font-family: 'nanumgothic';
	src: url('../font/NanumGothic.eot');  - 폰트 파일 주소 (IE 8이하에서만 사용) -
	src: local(※),url('../font/NanumGothic.woff') format('woff'); - IE9이상, 다른 웹표준 브라우저에서 사용 -
}
*/

/* --- reset --- */
*{margin:0;padding:0}
html,body{width:100%;height:100%}
body,h1,h2,h3,h4,input,button{font-family:Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif;color:#383d41}
body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all; font-size:1.8vw; line-height:150%; font-weight:bold; letter-spacing: -1px;}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select{vertical-align:middle}
img{vertical-align:top; width:100%;}
i,em,address{font-style:normal}
label,button{cursor:pointer}
button{cursor:pointer; border:0 none; background-color:transparent;}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
option{padding-right:6px}
hr{display:none}
legend{*width:0}
table{border-collapse:collapse;border-spacing:0}
caption{font-size:0; width:0; height:0; position:absolute; top:-1px; left:-1px; z-index: -1;}
input::-ms-clear{display:none}

/* --- option --- */
.boy{background:url(../images/common/a_mark.png) no-repeat center; background-size:100% 100%;;}
.girl{background:url(../images/common/a_sujin.png) no-repeat center; background-size:100% 100%;}
.boy2{border:2px #0D6E11 solid; background:url(../images/common/a_min.png) no-repeat center; background-size:cover;}
.girl2{border:2px #055C95 solid; background:url(../images/common/a_tui.png) no-repeat center; background-size:cover;}
.chi{border:2px #0D6E11 solid; background:url(../images/common/a_chi.png) no-repeat center; background-size:cover;}
.rola{border:2px #055C95 solid; background:url(../images/common/a_rola.png) no-repeat center; background-size:cover;}
.sung{border:2px #0D6E11 solid; background:url(../images/common/a_sung.png) no-repeat center; background-size:cover;}
.ta{border:2px #055C95 solid; background:url(../images/common/a_ta.png) no-repeat center; background-size:cover;}
.yuki{border:2px #0D6E11 solid; background:url(../images/common/a_yuki.png) no-repeat center; background-size:cover;}
.toya{border:2px #055C95 solid; background:url(../images/common/a_toya.png) no-repeat center; background-size:cover;}
.mark{background:url(../images/common/a_mark.png) no-repeat center; background-size:100% 100%;;}
.sujin{background:url(../images/common/a_sujin.png) no-repeat center; background-size:100% 100%;}
.minsu{border:2px #0D6E11 solid; background:url(../images/common/a_min.png) no-repeat center; background-size:cover;}
.tui{border:2px #055C95 solid; background:url(../images/common/a_tui.png) no-repeat center; background-size:cover;}

.mic{background:#fff url(../images/common/i_mic.png) no-repeat center; background-size:auto 98%;}
.touch{width:7%;height: 12%;position: absolute; z-index: 10000000;
	background:url(../images/common/pointer.png) no-repeat center; background-size:100% 100% }
.no_bor{border:0 none;}

.ir{display:block; text-indent:150%; overflow:hidden; white-space:nowrap}
.blind{position:absolute; z-index:201; top:0; left:0; right:0; bottom:0; background-color:#000; opacity:0.5;}
.col_ccc{color:#ccc;}
.box_shadow{
	box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5); -ms-box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5);
	}
.radius_10{border-radius:10px; -ms-border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.radius_20{border-radius:20px; -ms-border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;}
.radius_40{border-radius:40px; -ms-border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px;}

.test_li{position:relative;}
.test_li>span.check{display:none;}
.test_li.on>span.check{display:block;}
.ox_o{width:100%; height:100%; position:absolute; left:0; top:0; z-index:50; background:url(../images/common/ox_o.png) no-repeat center center; background-size:auto 100%;}
.ox_x{width:100%; height:100%; position:absolute; left:0; top:0; z-index:50; background:url(../images/common/ox_x.png) no-repeat center center; background-size:auto 100%;}
.check_o.on{background:url(../images/common/box_blue.png) no-repeat 0 0 !important; background-size:100% 100% !important;}
.check_o.on2{background:url(../images/common/box_blue.png) no-repeat 0 0 !important; background-size:100% 100% !important;}
.check_o2.on{background:url(../images/common/box_blue2.png) no-repeat 0 0 !important; background-size:100% 100% !important;}
.check_o2.on2{background:url(../images/common/box_blue2.png) no-repeat 0 0 !important; background-size:100% 100% !important;}

.repeat{background:url(../images/common/i_repeat_off.png) no-repeat center center; background-size:100% 100%; cursor:pointer;}
.repeat.on{background:url(../images/common/i_repeat_on.png) no-repeat center center; background-size:100% 100%; }


/* --- #header --- */
#wrap{width:100%; height:90%; }
#header{width:100%; height:12%;}
#header .line_shadow{width:100%; height:8px; background:url(../images/common/line_shadow.png) repeat-x 0 0; position:absolute; top:0; z-index:100;}
#header .btn_nav{width:7%; height:100%; float:left; background:url(../images/common/btn_gnb.png) no-repeat center; background-size:cover;}
#header .nav{width:100%; height:100%;}
#header .nav .gnb{position:absolute; top:12.2%; bottom:100%; width:100%; overflow:hidden; display:none; }
#header .nav .gnb .gnb_bg{cursor:pointer; z-index:301;}
#header .nav .gnb .menu{position:relative; z-index:302; background-color:#fff; overflow:hidden;}
#header .nav .gnb .menu .list_group{margin-left:7%;  width:calc(100% - 7%);}
#header .nav .gnb .menu .list_group ul{float:left; width:26.666%; }
#header .nav .gnb .menu .list_group ul li{padding:0 10px;}
#header .nav .gnb .menu .list_group ul li a{padding:10px 30px; display:block; font-size:2.5vw; line-height:36px; border-top:1px #c7c7c7 solid; background:url(../images/common/bullet.png) no-repeat 10px center;}
#header .nav .gnb .menu .list_group ul li:first-child a{border-top:0 none;}
#header .nav .gnb .menu .list_group ul.list1,
#header .nav .gnb .menu .list_group ul.list3{margin-left:6.6667%;}
#header .nav .gnb .menu .list_group ul li.on a{color:#35aeaa;}

#header .nav .category{margin-left:7%; width:calc(100% - 7%); height:80%; overflow:hidden;}
#header .category ul{width:100%; height:100%;}
#header .nav .category ul li{float:left; width:6.6667%; height:100%; text-align:center;}
#header .nav .category ul li.col4{width:26.666%}
#header .nav .category ul li strong{display:block; height:100%; border-left:1px #FFF solid; line-height:220%; font-size:2.34vw; color:#fff; background-color:#35AEAA;}
#header .nav .category ul li:first-child strong{border-left:0 none;}
#header .nav .category ul li.on strong{background-color:#FFF; color:#000;}

#header .step{margin-left:7%; width:calc(100% - 7%); height:20%; overflow:hidden;}
#header .step ul{width:100%; height:100%; }
#header .step ul li{float:left; width:6.6667%; height:calc(100% - 2px); text-align:center; border-top:1px #35AEAA solid; border-bottom:1px #35AEAA solid; overflow:hidden;}
#header .step ul li span{border-left:1px #35AEAA solid; background-color:#DCFEFD;}
#header .step ul li:first-child span{border-left:0 none;}
#header .step ul li span.on{background-color:#00293D;}

/* --- #container --- */
#container{width:100%;height:88%; position:relative; overflow:hidden;}

/* --- #container backround --- */
#container.front1{background:url(../images/common/front_bg.png) no-repeat center; background-size:cover;}
#container.front2{background:url(../images/common/front_bg.png) no-repeat center; background-size:cover;}

/* --- #container healine --- */
#container .content{width:92%; height:100%; margin:0 auto;}
#container .content .headline{width:100%; height:15%; position:relative; overflow:hidden;}
#container .content .headline .rubric{margin:1.5% 0; height: 60%; line-height: 150%;font-size:2.7vw; white-space:nowrap; letter-spacing:-2px; overflow:hidden;}
#container .content .headline .rubric span.txt{display:inline; padding: 5px 10px; margin-right:10px; font-size:2vw; vertical-align: top; background-color:#35aeaa; color:#fff;}
#container .content .headline .rubric span.txt.st2{background-color:#E46C0A;}
#container .content .headline .rubric span.txt.st3{background-color:#77933C;}
#container .content .headline .rubric span.txt.st4{background-color:#604A7B;}
#container .content .headline .rubric span.bar{display:block; float:left; margin-right:1%; width:1%; height:100%; background:url(../images/common/span_bar.png) no-repeat center; background-size:cover;}
#container .content .headline .btn_page{position:absolute; top:0; right:0; width:12%; height:100%;}
#container .content .headline .btn_page ul{width:100%; height:100%;}
#container .content .headline .btn_page ul li{width:47%; height:90%; float:left; margin:4% 0 4% 3px; position:relative; z-index:199;}
#container .content .headline .btn_page ul li:first-child{margin-left:0;}
#container .content .headline .btn_page ul li button{width:100%; height:100%;}
#container .content .headline .btn_page ul li:nth-child(2) button{position:absolute; display:none;}
#container .content .headline .btn_page ul li:nth-child(2) button.on{display:block;}
#container .content .headline .btn_page ul li button.refresh{background:url(../images/common/refresh.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .headline .btn_page ul li button.pause{background:url(../images/common/pause.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .headline .btn_page ul li button.play{background:url(../images/common/play.png) no-repeat 0 0; background-size:100% 100%;}

/* --- main content --- */
#container .content .audio{display:none;}
#container .content .main_con{height:77%; position:relative; } /* overflow:hiddne 지움 */
#container .content .main_con .conF{width:100%; height:100%;}
#container .content .main_con .conL{float:left; width:60%; height:100%; }
#container .content .main_con .conR{float:right;width:40%; height:100%; }
#container .content .main_con .conL.st2{float:left; width:40%; height:100%; }
#container .content .main_con .conR.st2{float:right;width:60%; height:100%; }
#container .content .main_con .harp{width:50%; height:100%;}
#container .content .main_con .harp2{height:50%;}
#container .content .main_con .harp2.st2{height:35%; }
#container .content .main_con .harp2.st3{height:65%; }

/* --- main Left--- */
#container .content .main_con .conL .img{width:auto; height:100%; text-align:center; overflow:hidden;}
#container .content .main_con .conL .img img{width:auto; max-width:98%; height:92%; padding:5px; border:2px #C8C8C8 solid;}
#container .content .main_con .conL .img img.bd_none{border:0 none;}
#container .content .main_con .conL .img img.mt{height:auto; margin-top:10%;}

#container .content .main_con .conL .img.st2{position:relative;}
#container .content .main_con .conL .drag_area li{position:absolute; width:20%; height:10%; line-height:100%; text-align:center; font-size:2.5vw; border:1px red solid; background-color:#fff; overflow:hidden;}
#container .content .main_con .conL .drag_area li.drag1{right:8%; top:28.4%}
#container .content .main_con .conL .drag_area li.drag2{right:37%; top:74%}
#container .content .main_con .conL .drag_area li.drag3{right:60%; top:14%;}
#container .content .main_con .conL .drag_area li div{width:100%; height:100%; position:relative;}
#container .content .main_con .conL .drag_area li div span{color:#F00; display:block; width:100%; height:100%;}
#container .content .main_con .conL .drag_area li div p{width:100%; height:100%; line-height:130%; color:#00F}
#container .content .main_con .conL .drag_area.st2 li.drag1{left:30%; top:53%}
#container .content .main_con .conL .drag_area.st2 li.drag2{left:41%; top:83%}
#container .content .main_con .conL .drag_area.st2 li.drag3{right:16%; top:83%;}

#container .content .main_con .conL .talk_box{margin:4% 2%; width:96%; height:80%;}
#container .content .main_con .conL .talk_box li{float:left; margin-left:3%; padding:4% 2%; height:17%; width:44%; position:relative; border-top:1px #4F81BD dashed;}
#container .content .main_con .conL .talk_box.li6 li:first-child,
#container .content .main_con .conL .talk_box.li6 li:nth-child(2){border-top:0 none;}
#container .content .main_con .conL .talk_box li:nth-child(odd){margin-left:0;}
#container .content .main_con .conL .talk_box li p{line-height: 230%; font-size:2.2vw}
#container .content .main_con .conL .talk_box li p.blank{margin-left:3%; width:100%; height:100%; border:1px #4A7EBB solid; }
#container .content .main_con .conL .talk_box li .last_mark{display:block; width:2%; position:absolute; left:95%; top:0%; font-size:3vw; line-height: 230%; vertical-align: bottom;}
#container .content .main_con .conL .talk_box.st3 li .last_mark{left:93%; top:3%;}

#container .content .main_con .conL .txt_in2{margin:8% auto 0;  padding:5%; width:80%; height:60%; position:relative; background-color:#CCDDF2; overflow:hidden;}
#container .content .main_con .conL .txt_in2 p{margin-left:5%; margin-top:5%; width:90%; height:25%; font-size:3.5vw; line-height:150%;}
#container .content .main_con .conL .txt_in2 p.blank{margin:5% 0 5% 5%; width:28%; text-align:center; border:1px #000 solid; background-color:#fff;}
#container .content .main_con .conL .txt_in2 p:first-child{margin-top:0;}
#container .content .main_con .conL .txt_in2 .fl{float:left;}
#container .content .main_con .conL .txt_in2 .cb{clear:both;}
#container .content .main_con .conL .txt_in2 .last_mark{display:block; width:2%; position:absolute; left:66%; top:42%; font-size:3vw; line-height: 200%; vertical-align: bottom;}


/* --- main Right --- */
#container .content .main_con .conR .conR_area{
	position:relative; z-index:56; margin-left:2%; width:98%; height:100%; border:1px #35aeaa dashed; overflow:hidden;
	}
#container .content .main_con .conR .conR_area.ofnot{overflow:initial;}
#container .content .main_con .conR .conR_area.class1{border:1px #35aeaa dashed}
#container .content .main_con .conR .conR_area.test{border:0 none;}
#container .content .main_con .conR .conR_area .test_box{margin-top:20px; width:100%; height:100%;}
#container .content .main_con .conR .conR_area .test_box p{width:90%; font-size:2.7vw; margin:0 3%; padding-bottom:5%; text-align:center; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .conR .conR_area .test_box ul{width:45%; height:50%; margin:0 auto; text-align:center;}
#container .content .main_con .conR .conR_area .test_box.st4 ul{width:85%; height:60%;}
#container .content .main_con .conR .conR_area .test_box ul li{cursor:pointer; font-size:2.8vw; margin-top:10%; width:100%; height:30%; line-height:150%; color:#fff; background:url(../images/common/box_gray.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .conR .conR_area .test_box.st4 ul li{margin-top:7%; line-height:180%;}

#container .content .main_con .conR .conR_area .test_box.st2{margin-top:0; height:100%}
#container .content .main_con .conR .conR_area .test_box.st2 ul{width:55%; height:90%; margin-top:2%;}
#container .content .main_con .conR .conR_area .test_box.st2 ul li{margin-left:0; height:22%; line-height:150%; font-size:3.5vw; margin-top:4%; }
#container .content .main_con .conR .conR_area .test_box.st2 ul li:first-child{margin-top:0;}
#container .content .main_con .conR .conR_area .test_box.st2.pt>ul{padding-top:10%;}
#container .content .main_con .conR .conR_area .test_box.st2.pt>ul li{margin-top:10%; font-size:3.5vw; line-height:200%;}

#container .content .main_con .conR .conR_area .test_box.st3.ofnot{overflow:initial;}
#container .content .main_con .conR .conR_area .test_box.st3.ofnot ul{margin-top:10%;}
#container .content .main_con .conR .conR_area .test_box.st3 ul{margin-top:5%; width:60%; height:100%; }
#container .content .main_con .conR .conR_area .test_box.st3 ul li{margin-top:15%; height:100%; cursor:pointer; line-height:170%;}
#container .content .main_con .conR .conR_area .test_box.st3 ul.drag_card li{margin-left:0; height:18%; line-height:200%;}
#container .content .main_con .conR .conR_area .test_box.st3 ul li:first-child{margin-top:0;}

#container .content .main_con .conR .conR_area .test_box.st4 ul li{margin-left:0;}

#container .content .main_con .conR .conR_area .talk_view{
	display:block; padding-left:6%; width:35%; height:10%;; margin:30% auto 0;
	font-size:1.5vw; font-weight:bold; color:#6a6a6a; background:url(../images/common/talk_view.png) no-repeat 0 0; background-size:100% 100%;
	}
#container .content .main_con .conR .conR_area.test .talk_view{position:absolute; bottom:3%; left:33.3%;}
#container .content .main_con .conR .conR_area .talk_up{cursor:pointer; display:none; margin:3%; width:94%; height:94%; position:absolute; top:0; z-index:55; background-color:#fff; overflow-y:scroll;}
#container .content .main_con .conR .conR_area .talk_up ul{width:100%; height:auto; }
#container .content .main_con .conR .conR_area .talk_up ul li{margin-left:3%; padding:1% 0 2% 20%; width:75%; position:relative; border-top:1px #4F81BD dashed;}
#container .content .main_con .conR .conR_area .talk_up ul li:first-child{border-top:0 none;}
#container .content .main_con .conR .conR_area .talk_up ul li p{line-height:150%;}
#container .content .main_con .conR .conR_area .talk_up ul li p.lan{color:#999;}
#container .content .main_con .conR .conR_area .talk_up ul li span{display:block; position:absolute; top:12%; left:1%; width:17%; height:70%; max-width:55px; max-height:55px; }

#container .content .main_con .conR .test_box{width:100%; height:38%; }
#container .content .main_con .conR .test_box.mt{margin-top:5%;}
#container .content .main_con .conR .test_box p{margin:1% 3% 0; padding-bottom:2%; padding-left:5%; width:45%; font-size:2vw; text-align:left; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .conR .test_box ul{margin:1% auto 0; width:100%; height:50%; text-align:center;}
#container .content .main_con .conR .test_box ul li{display:inline-block; margin-left:8%; font-size:2.8vw; width:30%; height:97%; line-height:200%; color:#fff; background:url(../images/common/box_gray.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .conR .test_box ul li.img{background:none; border:0 none;}
#container .content .main_con .conR .test_box ul li.img img{height:100%;}
#container .content .main_con .conR .test_box ul li:first-child{margin-left:0;}

#container .content .main_con .conR .test_box.st2{height:60%;}
#container .content .main_con .conR .test_box.st2 ul{height:70%;}
#container .content .main_con .conR .test_box.st3{height:100%;}
#container .content .main_con .conR .test_box.st3.pt{padding-top:15%;}

#container .content .main_con .conR .test_box.st3 ul.drag_card{margin:0 atuo; width:60%; height:100%;}
#container .content .main_con .conR .test_box.st3 ul.drag_card li{float:initial; margin:5% 0 0; width:100%; height:20%;}
#container .content .main_con .conR .test_box.st3 ul.drag_card li:first-child{margin-top:0;}

#container .content .main_con .conR .click_list{margin:3% auto; width:85%; height:78%;}
#container .content .main_con .conR .click_list li{display:table; padding:2% 3%; width:94%; height:25%;}
#container .content .main_con .conR .click_list li p{display:table-cell; width:100%; height:100%; letter-spacing: 2px; vertical-align:middle; text-align:center; font-size:2.3vw; color:#fff; background:url(../images/common/box_gray.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .conR .click_list li p.txt{letter-spacing: 0}
#container .content .main_con .conR .click_list.st2{margin-top:23%;}
#container .content .main_con .conR .click_list.st2 li{margin-top:8%; height:22%; cursor:pointer;}
#container .content .main_con .conR .click_list.st2 li p{font-size:4vw;}
#container .content .main_con .conR .click_list.st2.li2{margin-top:20%;}
#container .content .main_con .conR .click_list.st2.li2 li{margin-top:3%; height:33%; cursor:pointer;}
#container .content .main_con .conR .click_list.st2 li p{font-size:4vw; letter-spacing: 0;}

/* --- main harp --- */
#container .content .main_con .movie{width:100%; height:100%;}
#container .content .main_con .movie video{width:100%; height:100%;}

#container .content .main_con .harp .img{width:auto; height:100%; text-align:center; overflow:hidden;}
#container .content .main_con .harp .img.st6{height:60%; width:60%; margin:0 auto;}
#container .content .main_con .harp .img.st7{height:70%; width:70%;}
#container .content .main_con .harp .img.st8{height:80%; width:70%;}
#container .content .main_con .harp .img img{width:auto; height:90%; padding:5px; border:2px #C8C8C8 solid;}
#container .content .main_con .harp .img.w_calc img{width:calc(100% - 14px);}
#container .content .main_con .harp .img img.st2{margin-top:1%; height:89%;}
#container .content .main_con .harp .img.st6 img{margin-top:1%; width:80%; height:87%;}
#container .content .main_con .harp .img.st7 img{height:90%;}

#container .content .main_con .harp .img_card{margin:0 auto; padding:5px; width:calc(60% - 10px); height:calc(100% - 17px); background-color: #FE9800;}
#container .content .main_con .harp .img_card .img{width:auto; height:70%; text-align:center; overflow:hidden;}
#container .content .main_con .harp .img_card .img img{padding:0; width:100%; height:100%; border:0 none;}
#container .content .main_con .harp .img_card p.txt{margin-top:6px; width:100%; height:27%;line-height:170%; font-size:4.5vw; background-color:#fff; text-align:center;}

/* --- flip --- */
#container .content .main_con .harp .flip-container{position:relative; margin:0 auto; width:60%; height:100%;}
#container .content .main_con .harp .flip-container .flipper{width:100%; height:100%;}
#container .content .main_con .harp .flip-container .flipper .img_card{padding:5px; position:absolute; top:0; left:0; margin:0;  width:calc(100% - 10px); height:calc(100% - 16px); }
#container .content .main_con .harp .flip-container .flipper .img_card .img{height:100%;}
#container .content .main_con .harp .flip-container .flipper .back_card div.txt{margin: argin-top:0; width:100%; height:100%; background-color:#fff;}
#container .content .main_con .harp .flip-container .flipper .back_card div.txt P{margin:0 5%; font-size:3.5vw; margin-top:35%}
#container .content .main_con .harp .flip-container .flipper .back_card div.txt P span.lan{display:block; margin-top:5px; line-height:150%; letter-spacing: 0; font-size:2.3vw; color:#fff; background-color:#5B75EB;}
#container .content .main_con .harp .flip-container .flipper .back_card2 .img{height:70%;}
#container .content .main_con .harp .flip-container .flipper .back_card2 .txt{height:28%; font-size:4.5vw; line-height:150%;}
/* --- flip end --- */

#container .content .main_con .harp ul.pronounce{width:58%; margin:5px auto; padding:0 1%;}
#container .content .main_con .harp ul.pronounce li{padding:4% 0 4% 23%; position:relative; border-top:1px #4F81BD dashed;}
#container .content .main_con .harp ul.pronounce li:first-child{border-top:0 none;}
#container .content .main_con .harp ul.pronounce li p{line-height:40px;}
#container .content .main_con .harp ul.pronounce li p.lan{color:#4F81BD;}
#container .content .main_con .harp ul.pronounce li span{display:block; letter-spacing: 1px;}
#container .content .main_con .harp ul.pronounce li span.face{position:absolute; left:1%; top:8%; width:13%; height:75%;  max-width:40px; max-height:40px;}
#container .content .main_con .harp ul.pronounce li span.col_yel{display:inline; color:#f0792d;}

#container .content .main_con .harp ul.pronounce.st2{width:80%; margin:5% auto 0; padding:0 1%;}
#container .content .main_con .harp ul.pronounce.st2 li{padding:5% 0 5% 22%; position:relative; border-top:0 none;}
#container .content .main_con .harp ul.pronounce.st2 li p{line-height:40px;}
#container .content .main_con .harp ul.pronounce.st2 li p.lan{color:#4F81BD;}
#container .content .main_con .harp ul.pronounce.st2 li span.face{position:absolute; left:0; top:20%;  width:11%; height:60%; max-width:40px; max-height:40px;}

#container .content .main_con .harp ul.pronounce.st2.sub_lan{margin-top:0%; padding-top:1%; border-top:1px #35AEAA dashed;}
#container .content .main_con .harp ul.pronounce.st2.sub_lan li{padding:2% 0 2% 20%; font-size:1.4vw; font-weight:lighter; color:#ccc; letter-spacing:0.1px;}
#container .content .main_con .harp ul.pronounce.st2.sub_lan li span.face{top:14%; width:9%; height:75%; max-width:30px; max-height:30px;}

#container .content .main_con .harp p.explain{text-align:center; line-height: 160%; font-size:2.5vw;}
#container .content .main_con .harp p.explain span{display:block;}

#container .content .main_con .harp .text_area{display:block; width:80%; height:80%; padding:5% 5%;}
#container .content .main_con .harp .text_area ul{width:100%; height:100%;}
#container .content .main_con .harp .text_area ul li{padding-top:7%; width:100%; height:35%; font-size:2.2vw; line-height:150%;}
#container .content .main_con .harp .text_area ul li span{display:block; margin-left:7%; font-size:1.7vw}

#container .content .main_con .harp p.txt{padding-bottom:3%; font-size:2.5vw; text-align:center; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}

/* --- 말풍선 + 연필 캐릭터 --- */
#container .content .main_con .harp .key_point{position:absolute; top:0; background-color:#fff; width:50%; height:100%; overflow:hidden; display:none;}
#container .content .main_con .harp .key_point.st2{display:block;}
#container .content .main_con .harp .key_point .adbal{margin:3%; width: 90%; height:55%; background:url(../images/common/adbal.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .harp .key_point .adbal.st2{position:relative; height:70%;}
#container .content .main_con .harp .key_point .adbal ul{display:table; width:100%; height:80%;}
#container .content .main_con .harp .key_point .adbal li{display:table-cell; padding:0 20% 0 8%; width:80%; height:100%; color:#fff; font-size:2vw; word-break: keep-all;  vertical-align: middle;}
#container .content .main_con .harp .key_point .adbal li p.txt_col{margin-top:3%; color:#F00}
#container .content .main_con .harp .key_point .adbal.st2 li{display:none;}
#container .content .main_con .harp .key_point .adbal.st2 li.txt_f{padding:0 5%;}
#container .content .main_con .harp .key_point .adbal.st2 li.on{display:table-cell;}
#container .content .main_con .harp .key_point .adbal.st2 li span{display:block;}
#container .content .main_con .harp .key_point .adbal.st2 li span.col_r{display:inline; color:#F00;}
#container .content .main_con .harp .key_point .adbal.st2 li span.br{color:#fff;}
#container .content .main_con .harp .key_point .adbal.st2 li span.lan1{color:#000;}
#container .content .main_con .harp .key_point .pencil{position:absolute; bottom:0; right:1%; width:28%;}

#container .content .main_con .harp .talk_box{margin:3% 8%; height:90%;}
#container .content .main_con .harp .talk_box.st3{width:80%;}
#container .content .main_con .harp .talk_box.st4{width:80%; margin:0 auto;}
#container .content .main_con .harp .talk_box.stF{width:95%; margin:3% auto;}
#container .content .main_con .harp .talk_box li,
#container .content .main_con .conL.harp .talk_box.st3 li{position:relative; margin-left:0; padding:3% 8% 3% 18%; height:15%; width:80%; border-top:1px #4F81BD dashed;}
#container .content .main_con .conL.harp .talk_box>li:nth-child(2){height:initial; height:50%}
#container .content .main_con .harp .talk_box.st4 li{padding-right:5%}
#container .content .main_con .harp .talk_box li:first-child,
#container .content .main_con .conL.harp .talk_box.st3 li:first-child{border-top:0 none;}
#container .content .main_con .harp .talk_box.st3.pad0{margin-left:15%;}
#container .content .main_con .harp .talk_box.st3.pad0 li{padding-left:8%;}
#container .content .main_con .harp .talk_box li p{height:100%; line-height: 170%; font-size:2.3vw}
#container .content .main_con .harp .talk_box li p.mic_on{position:absolute; top:16%; width:70%; height:70%; line-height:150%; background-color:#fff; display:none;}
#container .content .main_con .harp .talk_box li p.mic_on.on{display:block;}
#container .content .main_con .harp .talk_box li p.lan{color:#4F81BD;}
#container .content .main_con .harp .talk_box li span{display:block; position:absolute; left:0; top:10%; width:13%; height:80%}
#container .content .main_con .harp .talk_box>li>span.girl{height:50%}
#container .content .main_con .harp .talk_box li p span{position:initial; display:inline; padding:2% 5%; }
#container .content .main_con .harp .talk_box li p span.bg_1{ background-color:#b8dee7;}
#container .content .main_con .harp .talk_box li p span.bg_2{background-color:#fbd4b7}
#container .content .main_con .harp .talk_box li p.blank{width:100%; height:100%; border:1px #4A7EBB solid; }
#container .content .main_con .harp .talk_box li div.blank{width:100%; height:100%; font-size:2.9vw; border:1px #4A7EBB solid; text-align:center; overflow:hidden;}
#container .content .main_con .harp .talk_box li div.blank span{display:block; position:initial; width:100%; height:100%; line-height:150%; color:#F00;}
#container .content .main_con .harp .talk_box li div.blank p{width:100%; height:100%; line-height:180%;}
{width:100%; height:100%; border:1px #4A7EBB solid; }


#container .content .main_con .harp .talk_box.st2{margin-top:15%; width:90%;}
#container .content .main_con .conL.harp .talk_box.st2 li{margin-left:0; padding:3% 8% 3% 22%; height:17%; width:63%; position:relative; border-top:1px #4F81BD dashed;}
#container .content .main_con .harp .talk_box.st2 li:first-child{border-top:0 none;}
#container .content .main_con .harp .talk_box.st2 li p{line-height: 200%; font-size:2.3vw}
#container .content .main_con .harp .talk_box.st2 li p.lan{color:#4F81BD;}
#container .content .main_con .harp .talk_box.st2 li span{display:block; position:absolute; left:2%; top:10%; width:18%; height:80%;}
#container .content .main_con .harp .talk_box.st2 li p.blank{width:100%; height:100%; border:1px #4A7EBB solid; }
#container .content .main_con .harp .talk_box.st2 li .last_mark{display:block; width:2%; height:50%; position:absolute; left:95%; top:20%; font-size:3vw; line-height: 200%; vertical-align: bottom;}

#container .content .main_con .harp .click_list{margin:4%; height:90%;}
#container .content .main_con .harp .click_list.li8{margin-top:10%;}
#container .content .main_con .harp .click_list.li2{margin-top:5%;}
#container .content .main_con .harp .click_list li{float:left; display:table; padding:2% 3%; width:44%; height:19%; letter-spacing: 0;}
#container .content .main_con .harp .click_list li p{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; font-size:2.3vw; color:#fff; background:url(../images/box_gray.png) no-repeat 0 0; background-size:100% 100%;}

#container .content .main_con .harp .click_list.st4{margin:10% 5%; height:90%;}
#container .content .main_con .harp .click_list.st4 li{width:44%; height:25%;}

#container .content .main_con .harp .click_list.st3{margin-top:13%; width:88%; height:66%; overflow:hidden;}
#container .content .main_con .harp .click_list.st3.mid{margin-top:5%%; height:80%;}
#container .content .main_con .harp .click_list.st3.mid li{width:80%; height:15%;}
#container .content .main_con .harp .click_list.st3 li{float:initial; margin:8% auto 0; width:70%; height:35%; font-size:4vw; text-align:center; line-height:200%; color:#fff; cursor:pointer; background:url(../images/box_gray2.png) no-repeat 0 0; background-size: 100% 100%;}
#container .content .main_con .harp .click_list.st3 li:first-child{margin-top:0;}

#container .content .main_con .harp .click_list.li2 li{float:initial; margin:8% auto 0; width:70%; height:35%; font-size:4vw; text-align:center; line-height:200%; color:#fff; cursor:pointer; background:url(../images/box_gray2.png) no-repeat 0 0; background-size: 100% 100%;}
#container .content .main_con .harp .click_list.li2 li:first-child{margin-top:0;}

#container .content .main_con .harp.st2 .txt_in{margin:0 auto; width:85%; height:100%; background-color:#CCDDF2; overflow:hidden;}
#container .content .main_con .harp.st2 .txt_in>p{font-size:2.5vw; text-align:center; letter-spacing: 1px; margin-top:1%;}
#container .content .main_con .harp.st3>p{position:relative; margin:1% 0 0 13%; padding-bottom:1.5%; width:35%; font-size:2.5vw; text-align:center; background:url(../images/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .harp.st3 .check_list{width:70%; height:72%; margin:0 auto; font-size:0;}
#container .content .main_con .harp.st3 .check_list li{display:inline-block; margin-left:10%; width:35%; height:80%; font-size:3vw; line-height: 400%; text-align:center; cursor:pointer;}
#container .content .main_con .harp.st3 .check_list li:first-child{margin-left:0;}

#container .content .main_con .harp .btn_audio{width:100%; margin:3% 8%; height:90%;}
#container .content .main_con .harp .btn_audio li{height:25%; }
#container .content .main_con .harp .btn_audio li ul{width:100%; height:100%; overflow:hidden; display:none}
#container .content .main_con .harp .btn_audio li .mic1.on{display:block;}
#container .content .main_con .harp .btn_audio li .mic2.on{display:block;}
#container .content .main_con .harp .btn_audio li ul li{padding:1%;width:12%; height:81%; float:left; display:none;}
#container .content .main_con .harp .btn_audio li ul li:first-child{display:block;}
#container .content .main_con .harp .btn_audio li ul li button{width:100%; height:100%;}
#container .content .main_con .harp .btn_audio li ul li button.i_listen{background:url(../images/common/i_listen_off.png) no-repeat center; }
#container .content .main_con .harp .btn_audio li ul li button.i_record{background:url(../images/common/i_recorde_off.png) no-repeat center; }
#container .content .main_con .harp .btn_audio li ul li button.i_repeat{background:url(../images/common/i_repeat_off.png) no-repeat center; }
#container .content .main_con .harp .btn_audio li ul li.on button.i_listen{background:url(../images/common/i_listen_on.png) no-repeat center; }
#container .content .main_con .harp .btn_audio li ul li.on button.i_record{background:url(../images/common/i_recorde_on.png) no-repeat center; }
#container .content .main_con .harp .btn_audio li ul li.on button.i_repeat{background:url(../images/common/i_repeat_on.png) no-repeat center; }

/* --- main harp2 --- */
#container .content .main_con .harp2 .example{position:relative; margin:5px auto 0; width:20%; height:85%;}
#container .content .main_con .harp2 .example.w_3{width:30%;}
#container .content .main_con .harp2 .example p{position:absolute; width:100%; height:100%; line-height: 300%; font-size:3.5vw; text-align:center; background-color:#fff;}
#container .content .main_con .harp2 .example.st2{padding:5.5% 3%; width:37%; height: 30%; border:1px #4a7ebb solid; overflow:hidden;}
#container .content .main_con .harp2 .example.st2 p{position:initial; display:inline-block; line-height: initial; font-size:4vw;}
#container .content .main_con .harp2 .example.st2 p:first-child{float:left; width:50%; /*! border-bottom:2px #000 solid; */}
#container .content .main_con .harp2 .example.st2 p:nth-child(2){border-bottom:2px #000 solid;}
#container .content .main_con .harp2 .example.st2 p:first-child+p{float:right; width:48%}
#container .content .main_con .harp2 .example.st2 p span.h_txt{display:noe;}
#container .content .main_con .harp2 .example.st2.st3{width:60%; }
#container .content .main_con .harp2 .example.st2 p.hide_txt{border-bottom:0; width:100%; font-size:5vw}
#container .content .main_con .harp2 .check_list{height:95%; text-align:center; font-size:0;}
#container .content .main_con .harp2 .check_list li{display:inline-block; margin-left:3%; width:20%; height:90%; line-height: 300%; font-size:4vw; text-align:center; color:#fff; background:url(../images/common/box_gray2.png) no-repeat 0 0; background-size:100% 100%; cursor:pointer;}
#container .content .main_con .harp2 .check_list li:first-child{margin-left:0;}
#container .content .main_con .harp2 .check_list.st2{margin:0 auto; width:40%; height:95%; text-align:center; font-size:0;}
#container .content .main_con .harp2 .check_list.st2 li{display:block; margin-top:3%; margin-left:0; width:100%; height:40%; line-height: 200%; font-size:4vw; text-align:center; color:#fff; background:url(../images/common/box_gray.png) no-repeat 0 0; background-size:100% 100%; cursor:pointer;}
#container .content .main_con .harp2 .check_list.st2 li:first-child{margin-top:0;}


#container .content .main_con .harp2.st2 table{width:95%; height:100%; margin:0 auto; text-align:center; font-size:2.5vw; border:1px #E1E1E1 solid;}
#container .content .main_con .harp2.st2 table thead{background-color:#ABBFCD;}
#container .content .main_con .harp2.st2 table th,
#container .content .main_con .harp2.st2 table td{border-left:1px #E1E1E1 solid; line-height: 170%;}
#container .content .main_con .harp2.st2 table th:first-child,
#container .content .main_con .harp2.st2 table td:first-child{border-left:0 none;}

#container .content .main_con .harp2>p{position:relative; margin:1.5% 0 0; padding-bottom:1.3%; width:35%; font-size:2.5vw; text-align:center; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .harp2.st3 .txt_in{width:87%; height:72%; margin:0 auto; overflow:hidden;}
#container .content .main_con .harp2.st3 .txt_in>div{width:95%; padding-top:1%; padding-left:5%; background-color:#CCDDF2;}
#container .content .main_con .harp2.st3 .txt_in p{font-size:2.5vw; line-height:150%;}
#container .content .main_con .harp2.st3 .txt_in p input{margin-left:1%; padding:2px 2%; height:45%; font-size:2.5vw; vertical-align: top;}
#container .content .main_con .harp2.st3 .txt_in p:nth-child(2) input{margin:0 1% 1% 0;}
#container .content .main_con .harp2.st3 .txt_in ul{margin:2px 0 0 60%; width:39%; height:35%; border:1px #517199 dashed; position:relative;}
#container .content .main_con .harp2.st3 .txt_in ul.st2{margin-left:50%; width:49%}
#container .content .main_con .harp2.st3 .txt_in ul li{position:absolute; width:100%; height:100%; font-size:2.3vw; line-height: 220%; text-align:center; cursor:pointer; display:none;}
#container .content .main_con .harp2.st3 .txt_in ul li.on{display:block;}
#container .content .main_con .harp2.st3 .txt_in ul li span{padding:2% 3%; background-color:#4F81BD; color:#fff;}
#container .content .main_con .harp2.st3 .txt_in ul li:nth-child(2){font-size:2.8vw;line-height: 200%;}
#container .content .main_con .harp2.st3 .txt_in ul li:nth-child(2) span{color:#000; background-color:#D9D9D9; }

#container .content .main_con .harp2 .txt_in3{width:80%; height:89%; margin:0 auto; padding:1% 0; overflow:hidden;  background-color:#CCDDF2;}
#container .content .main_con .harp2 .txt_in3 p{padding:0 5%; width:90%; height:33.3%; font-size:2.2vw; line-height:350%; text-align:left;}
#container .content .main_con .harp2.fn1>p{position:relative; margin:1.5% 0 0 10%; padding-bottom:1.5%; padding-left:3%; width:40%; font-size:2.5vw; text-align:left; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .harp2.fn1 .check_list{margin:1% auto; width:80%; height:55%; font-size:0;}
#container .content .main_con .harp2.fn1 .check_list li{display:inline-block; margin-left:10%; width:25%; height:100%; font-size:4vw; line-height: 180%; text-align:center; cursor:pointer;}
#container .content .main_con .harp2.fn1 .check_list li:first-child{margin-left:0;}

#container .content .main_con .harp2.test_de ul{width:100%; height:70%; font-size:0; text-align:center; }
#container .content .main_con .harp2.test_de ul li{display:inline-block; width:12%; margin-left:10%;}
#container .content .main_con .harp2.test_de ul li:first-child{margin-left:0;}
#container .content .main_con .harp2.test_de>p{text-align:left; margin:0 0 0 3%; padding:0 0 1% 3%; width:30%; font-size:2vw;}
#container .content .main_con .harp2.test_de>p span.repeat{position:absolute; left:100%; top:0; width:12%; height:95%;}
#container .content .main_con .harp2.test2{display:none;}

#container .content .main_con .harp2 .text_list{margin:0 auto; width:70%; height:100%; }
#container .content .main_con .harp2 .text_list li{float:left; width:50%; line-height:200%; text-align:center; font-size:2.5vw; }
#container .content .main_con .harp2 .text_list li span{color:#ffe600;}
#container .content .main_con .harp2 .text_list li.hide_con{float:inherit; width:100%;  font-size:3.7vw; text-align:center; color:#ffe600; display:none;}
#container .content .main_con .harp2 .key_point{position:relative; margin:0 auto; width:70%; height:100%; overflow:hidden; position:relative;}
#container .content .main_con .harp2 .key_point .adbal{display:table; margin:0 auto; width: 80%; height:100%; background:url(../images/common/adbal.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .harp2 .key_point .adbal p{display:table-cell; padding:0 10% 4%;width:100%; height:80%; color:#fff; vertical-align:middle; opacity:0;}
#container .content .main_con .harp2 .key_point .adbal p span{display:block;}
#container .content .main_con .harp2 .key_point .adbal p span.col_red{display:inline; color:#F00}
#container .content .main_con .harp2 .key_point .pencil{position:absolute; bottom:0; left:85%; width:10%;}


/* --- main conF --- */
#container .content .main_con .conF .check_ca{width:100%; height:100%; font-size:0; text-align:center;}
#container .content .main_con .conF .check_ca li{position:relative; display:inline-block; padding:1%; margin-left:2%; margin-top:1%; width:20%; height:calc(91% - 16px); border:5px #D7D7D7 solid;}
#container .content .main_con .conF .check_ca li .img{width:100%; height:100%; overflow:hidden;;}
#container .content .main_con .conF .check_ca li .img img{width:auto; height:110%;}
#container .content .main_con .conF .check_ca li:first-child{margin-left:0;}
#container .content .main_con .conF .check_ca li p{position:absolute; padding:3% 3%; padding-left:10%; bottom:3%; left:26%; width:34%; font-size:2.2vw; line-height: 100%; text-align:center; border:1px #000 solid; background-color:#C8C8C8; cursor:pointer;}
#container .content .main_con .conF .check_ca li p span.choice{display:block; position:absolute; top:23%; left:9%; width:20%; height:55%; border:1px #000 solid; background-color:#fff;}
#container .content .main_con .conF .check_ca li p.on span.choice{background-color:#C0504D;}
#container .content .main_con .end{position:absolute; right:5%; bottom:2%; width:15%; height:17%; background:url(../images/common/btn_end.png) no-repeat center; background-size:cover;}

#container .content .main_con .conF .key_point{position:relative; width:100%; height:100%; overflow:hidden; display:block;}
#container .content .main_con .conF .key_point .adbal{margin:3%; width: 80%; height:65%; background:url(../images/adbal.png) no-repeat 0 0; background-size:100% 100%;}
#container .content .main_con .conF .key_point .adbal ul{display:table; width:100%; height:80%;}
#container .content .main_con .conF .key_point .adbal li{display:table-cell; padding:0 10%; width:80%; height:100%; color:#fff; font-size:2vw; word-break: keep-all;  vertical-align: middle;}
#container .content .main_con .conF .key_point .pencil{position:absolute; bottom:0; right:10%; width:17%; height:80%;}
#container .content .main_con .conF .key_point .pencil img{height:100%;}

#container .content .main_con .conF>p{position:relative; margin:1% 3%; padding-bottom:2%; width:35%; font-size:2.8vw; text-align:center; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .conF>p span.repeat{position:absolute; left:100%; top:0; width:11%; height:80%;}
#container .content .main_con .conF>ul{
	width:100%; height:80%; font-size:0; text-align:center; overflow:hidden;}
#container .content .main_con .conF>ul>li{display:inline-block; margin-left:8%; width:30%; height:94%; overflow:hidden; border:2px #D1D1D1 solid;}
#container .content .main_con .conF>ul>li>img{height:100%;}
#container .content .main_con .conF>ul>li:first-child{margin-left:0;}
#container .content .main_con .conF .img_li3 li{margin-left:2%; width:26%; height:94%;}
#container .content .main_con .conF .check_list.st2{margin-top:1%; height:60%;}
#container .content .main_con .conF .check_list li{color:#FFF; font-size:5vw; line-height:350%; background:url(../images/common/box_gray2.png) no-repeat 0 0; background-size:100% 100%; border:0 none;}

#container .content .main_con .conF .check_list.st2.mid{ height:60%;}
#container .content .main_con .conF .check_list.st2.mid li{line-height: 280%;}
#container .content .main_con .conF .check_list.st2.mid.lh li{line-height: 180%; font-size:4vw; word-break: keep-all}
#container .content .main_con .conF .check_list.st2.mid2{margin-top:5%;}

#container .content .main_con .conF .txt_area{display:table; margin:0 auto; width:68%; height:40%; text-align:center; background-color:#ccddf1;}
#container .content .main_con .conF .txt_area p{display:table-cell; vertical-align:middle; font-size:3.5vw;}
#container .content .main_con .conF .txt_area p span.txt{padding-left:15%; border:1px #000 solid; background-color:#fff;}
#container .content .main_con .conF .txt_area p span.txt.st2{padding-left:40%;}
#container .content .main_con .conF .txt_area p span.blank{display:inline-block; vertical-align: middle; width:15%; height:40px; background-color:#fff; border:1px #000 solid;}

#container .content .main_con .conF .txt_in{margin:1% auto 1%; width:80%; height:25%; position:relative;}
#container .content .main_con .conF .txt_in p{padding-left:5%; width:95%; height:100%; font-size:3vw; line-height:250%; background-color:#CCDDF2;}
#container .content .main_con .conF .txt_in p span.blank{position:absolute; top:12%; margin-left:3%; width:28%; height:70%; font-size:4vw; text-align:center; line-height: 150%; border:1px #000 solid; background-color:#fff;}
#container .content .main_con .conF .txt_in p .last_mark{display:block; width:2%; height:50%; position:absolute; left:71%; top:20%; font-size:3vw; line-height: 200%; vertical-align: bottom;}

#container .content .main_con .conF .exemple{width:100%; height:61%; overflow:hidden;}
#container .content .main_con .conF .exemple.st2{margin-top:3%}
#container .content .main_con .conF .exemple p.txt{width:30%; position:relative; padding-bottom:3px; background:url(../images/common/text_shadow.png) no-repeat 0 100%; background-size:100%;}
#container .content .main_con .conF .exemple p.txt span{position:absolute; top:0; right:0; width:11%; height:auto;}
#container .content .main_con .conF .exemple .list{width:90%; height:75%; margin:0.5% auto 0; overflow:hidden;}
#container .content .main_con .conF .exemple .list.st2{margin-top:3.6%}
#container .content .main_con .conF .exemple .list .fl{float:left; width:13%; height:100%; }
#container .content .main_con .conF .exemple .list .fr{float:right; width:13%; height:100%; }
#container .content .main_con .conF .exemple .list li .img{height:68%; border:2px #E1E1E1 solid; overflow:hidden;}
#container .content .main_con .conF .exemple .list li .img img{width:100%; height:auto;}
#container .content .main_con .conF .exemple .list li .img img.a_min{width:100%; height:100%;}
#container .content .main_con .conF .exemple .list li p{position:relative; margin-top:2px; padding:3% 3%;font-size:2vw; line-height: 100%; text-align:center; border:1px #000 solid; background-color:#C8C8C8; cursor:pointer;}
#container .content .main_con .conF .exemple .list li p span.select{display:block; position:absolute; top:20%; left:9%; width:17%; height:60%; border:1px #000 solid; background-color:#C0504D;}
#container .content .main_con .conF .exemple .list li.table{margin:0 14%;}
#container .content .main_con .conF .exemple .list li table{width:100%; font-size:2.2vw; text-align:center; border:2px #E1E1E1 solid;}
#container .content .main_con .conF .exemple .list li table thead{background-color:#ABBFCD;}
#container .content .main_con .conF .exemple .list li table th,
#container .content .main_con .conF .exemple .list li table td{border-left:2px #E1E1E1 solid; line-height: 270%;}
#container .content .main_con .conF .exemple .list li table th:first-child,
#container .content .main_con .conF .exemple .list li table td:first-child{border-left:0 none;}

#container .content .main_con .conF .talk{width:70%; height:35%; margin:0 auto; position:relative; border:1px dashed #35AEAA; overflow:hidden;}
#container .content .main_con .conF .talk .talk_view{display:block; width:100%; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background-color:#fff;}
#container .content .main_con .conF .talk .talk_view span{padding:1% 2%; font-size:2vw; font-weight:bold; color:#fff; background-color:#4F81BD }
#container .content .main_con .conF .talk>ul{float:left; margin:0 3%; width:45%; height:100%;}
#container .content .main_con .conF .talk>button:first-child+ul{margin-right:0;}
#container .content .main_con .conF .talk>ul>li{position:relative; padding:3% 0; padding-left:20%; width:80%; height:30%; line-height: 160%; border-top:1px dashed #35AEAA;}
#container .content .main_con .conF .talk>ul>li:first-child{border-top:0 none;}
#container .content .main_con .conF .talk>ul>li span{position:absolute; top:4%; left:2%; width:15%; height:90%;}
#container .content .main_con .conF .talk>ul>li p{height:100%; border-bottom:1px #4A7EBB solid;}
#container .content .main_con .conF .talk>ul>li p>span{position:initial;}

#container .content .main_con .conF .self_check{margin-top:1%; width:100%; height:60%;}
#container .content .main_con .conF .self_check>ul{margin:0 auto; width:90%; height:100%;}
#container .content .main_con .conF .self_check>ul>li{margin-top:2%; width:100%; height:30%; font-size:2.5vw; line-height:200%;}
#container .content .main_con .conF .self_check>ul>li:first-child{margin-top:0;}
#container .content .main_con .conF .self_check>ul>li .mark_{float:right; width:25%; height:calc(100% - 4px); border:2px #c8c8c8 solid; overflow:hidden;}
#container .content .main_con .conF .self_check>ul>li .mark_ li{float:left; width:33.33%; height:100%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_a{background:url(../images/common/ev_a.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_b{background:url(../images/common/ev_b.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_c{background:url(../images/common/ev_c.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_a.on{background:#51555b url(../images/common/ev_a_on.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_b.on{background:#51555b url(../images/common/ev_b_on.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .self_check>ul>li .mark_ li.ev_c.on{background:#51555b url(../images/common/ev_c_on.png) no-repeat center; background-size:auto 95%;}
#container .content .main_con .conF .notice{padding-top:3%; width:100%; height:37%;}
#container .content .main_con .conF .notice ul{display:table; margin:0 auto; width:95%; height:90%; background-color:#19b8f1}
#container .content .main_con .conF .notice ul li{display:none; text-align:center; font-size:3vw; color:#fff; vertical-align: middle;}
#container .content .main_con .conF .notice ul li.on{display:table-cell;}
/* --- movie cover --- */
#container .cover{position:absolute; z-index: 300; width:100%; height:100%; background:url(../images/common/cover.png) no-repeat 0 0; background-size:100% 100%;}
#container .cover h1{margin-top:14%; width:71%; text-align:center; color:#fff;}

/* --- graph --- */
#container.graph{background:url(../images/common/e_02_bg.png) no-repeat center; background-size: cover;}
#container.graph .content .graph_b{margin-top:-5.5%; width:100%; height:99%;}
#container.graph .content .graph_b .graph_a{width:70%; height:100%; position:relative;}
#container.graph .content .graph_b .graph_a canvas{width:100%; height:100%; font-size:2vw;}
#container.graph .content .graph_b .graph_a ul.index li{position:absolute; left:50%; width:15%; line-height: 130%; color:#fff; font-size:3vw; text-align:center; background-color:#434343;}
#container.graph .content .graph_b .graph_a ul li.in_1{margin-left:-7.5%; top:0;}
#container.graph .content .graph_b .graph_a ul li.in_2{margin-left:14%; top:23%;}
#container.graph .content .graph_b .graph_a ul li.in_3{margin-left:14%; bottom:20%;}
#container.graph .content .graph_b .graph_a ul li.in_4{margin-left:-7.5%; bottom:1%;}
#container.graph .content .graph_b .graph_a ul li.in_5{margin-left:-30%; bottom:20%;}
#container.graph .content .graph_b .graph_a ul li.in_6{margin-left:-30%; top:23%;}
#container.graph .content .end_graph{position:absolute; top:55%; right:0; width:25%; height:40%; background:url(../images/common/btn_graph.png) no-repeat center; background-size:auto 100%; color:#fff; font-size:2.5vw;}

/* --- navi dott --- */
#container .content .navi_dott{margin-top:3px; width:100%; height:7%; text-align: center; overflow:hidden;}
#container .content .navi_dott ul{width:100%; height:100%}
#container .content .navi_dott ul li{display:inline-block; margin:0 2px; width:15px; height:15px; background:url(../images/common/navi_dott.png) no-repeat center; background-size:cover;}
#container .content .navi_dott ul li.on{background:url(../images/common/navi_dott_on.png) no-repeat center;background-size:cover;}

#container .btn_move a{position:absolute; z-index: 199; top:0; bottom:0; width:4%; opacity: 0.6;}
#container .btn_move a.next{right:0; background:url(../images/common/btn_next.png) no-repeat center; background-size:50% 50%;}
#container .btn_move a.prev{left:0; background:url(../images/common/btn_prev.png) no-repeat center; background-size:50% 50%;}

/* --- modal & front text --- */
#container .modal{display:none;}
#container .txt_box{display:table; position:absolute; z-index:201; left:22%; top:25%; width:56%; height:50%; background:url(../images/common/txt_box.png) no-repeat 0 0; background-size:100% 100%;}
#container .txt_box.st2{display:none;}
#container .txt_box.front{background:url(../images/common/front_txt.png) no-repeat 0 0; background-size:100% 100%;}
#container .txt_box.front p{position:absolute; color:#fff; text-align:center;}
#container .txt_box.front p.title1{left:0; right:77%; top:10%; font-size:3vw;}
#container .txt_box.front p.title2{left:0; right:0; top:15%; font-size:2.5vw;}
#container .txt_box .pop_txt{padding-top:15%; display:table-cell; text-align:center; vertical-align: middle; color:#fff; line-height:50%;}
#container .txt_box .pop_txt.end{padding-top:0%;}
#container .txt_box .pop_txt span{display:block; margin:4% 0;}
#container .txt_box .pop_txt.front{color:#000;}
#container .txt_box .small_txt{margin-top: 36%; padding-left:5%; width:95%; font-size:2.3vw; }

/* --- end page --- */
#container.end_page{background:url(../images/common/end_bg.png) no-repeat center; background-size:cover; overflow:hidden; margin:0 auto;}
#container a{display:block; height:100%; color:#A1A1A1}
#container .main_end{margin:2% auto; width:80%; height:90%; overflow:hidden;}
#container .menu_L{float:left; width:60%; height:100%; }
#container .menu_L .talk_1{margin-bottom:4%; width:100%; height:35%; background:url(../images/common/end_bg1.png) no-repeat; background-size:100% 100%; overflow:hidden;}
#container .menu_L .talk_2{margin-bottom:4%; width:100%; height:35%;background:url(../images/common/end_bg2.png) no-repeat; background-size:100% 100%; overflow:hidden;}
#container .menu_L .return_s{width:100%; height:17%; background:url(../images/common/end_bg4.png) no-repeat; background-size: 100% 100%}
#container .menu_L .talk_1>a,
#container .menu_L .talk_2>a{float:left; width:25%;}
#container .menu_L .talk_1 ul,
#container .menu_L .talk_2 ul{float:right; margin-top:0.5%; padding:0 3%; width:67%; height:93%; text-align:center;}
#container .menu_L .talk_1 ul li,
#container .menu_L .talk_2 ul li{ float:left; border:2px #A1A1A1 solid; width:44%; text-align:center; font-size:2.3vw; margin:1.5%; border-radius:30px; line-height:150%;}

#container .menu_R{float:right; width:37%; height:100%; overflow:hidden;}
#container .menu_R .active{float:left; width:47%; height:100%; background:url(../images/common/end_bg3.png) no-repeat; background-size:100% 100% ; overflow:hidden;}
#container .menu_R .pronounce{float:right; width:47%;  height:48%; background:url(../images/common/end_bg5.png) no-repeat; background-size:100% 100%; }
#container .menu_R .quiz_a{float:right; margin-top:5%; width:47%; height:48%; background:url(../images/common/end_bg6.png) no-repeat; background-size:100% 100% ; }
#container .menu_R .active>a{height:19%;}
#container .menu_R .active ul{padding-top:13%; width:100%; height:74%;}
#container .menu_R .active ul li{margin:7% auto; border:2px #A1A1A1 solid; width:78%; text-align:center; font-size:2.3vw; border-radius:30px; line-height: 150%;}

#container .menu_L .talk_1>a:hover,
#container .menu_L .talk_2>a:hover,
#container .menu_R .active>a:hover{background-color:#fff; opacity:0.1;}
#container .menu_L .talk_1 ul li:hover,
#container .menu_L .talk_2 ul li:hover,
#container .menu_R .active ul li:hover{border:2px #000 solid; border-radius:30px; }
#container .menu_L .talk_1 ul li:hover a,
#container .menu_L .talk_2 ul li:hover a,
#container .menu_R .active ul li:hover a{color:#000;}
#container .menu_L .return_s>a{width:100%; height:65px;}

/* ---  뷰포트 너비가 830px 이면 실행 (pc ifrmae 가로 길이 ) --- */
@media all and (width:830px){
	#wrap{width:100%; height:100%; }
}

/* ---  뷰포트 너비가 320px 이상 400px 이하이면 실행 --- */
@media all and (min-width:320px) and (max-width:400px) {
	#wrap{width:100%; height:100%; max-height:200px;}
}