/****** layout ******/
#wrap{position:relative; width:90%; height:auto; margin:0 auto; background:url('../images/study/bg_wrap.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrap.b01 {background:url('../images/study/bg_wrap.png') left top no-repeat;}
#wrap.b02 {background:url('../images/study/bg_wrap_level02.png') left top no-repeat;}
#wrap.b03 {background:url('../images/study/bg_wrap_level03.png') left top no-repeat;}
#wrap.list {background:url('../images/study/bg_wrap_list.png') left top no-repeat;}
#wrapBook{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap3.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrapSky{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap_sky.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrapEwr{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap_ewriting.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrapGram{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap_grammar.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrapHomework{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap_homework.png') left top no-repeat; overflow:hidden; z-index:99;}
#wrapListening{position:relative; width:1262px; height:901px; margin:0 auto; background:url('../images/study/bg_wrap_listening.png') left top no-repeat; overflow:hidden; z-index:99;}

#header{width:100%; padding:30px 0 0 0; overflow:hidden;}
#header.hw {padding:26px 0 20px 0;}
#content{width:982px; height:718px; margin:0 auto; padding:75px 0 0 0; overflow:hidden;}
#content h1 {width:100%; height:77px; text-align:center; line-height:64px; font-size:30px; color:#75511e; font-weight:600;}
#content .boxWrap {margin:40px 40px 40px 40px;}
#content .boxWrap:after {content:""; display:block; clear:both;}
#content .skyWrap {margin:0 36px 0 46px;}
#content .skyWrap:after {content:""; display:block; clear:both;}
#content .ewritingWrap {position:relative; margin:0 45px 0 57px;}
#content .ewritingWrap:after {content:""; display:block; clear:both;}
#content .grammarWrap {position:relative; margin:0 45px 0 57px;}
#content .grammarWrap:after {content:""; display:block; clear:both;}
#content .homework {margin:0 40px 0 30px;}
#content .homework:after {content:""; display:block; clear:both;}
#content .testWrap {margin:0 45px 22px 36px;}
#content .testWrap:after {content:""; display:block; clear:both;}
#content .testBottom {margin:22px 17px 0 6px;}
#content .testBottom:after {content:""; display:block; clear:both;}

/* layout popup btn */
.close{position:absolute; right:77px; top:51px; z-index:9999;}
.prebtn {position:absolute; left:210px; top:206px;}
.nextbtn {position:absolute; right:203px; top:206px;}
.tree {position:absolute; left:236px; top:268px; z-index:-1;}

/* navi */
#header #navi{float:left; margin:0 0 0 34px;}
#header #navi .home{float:left;}
#header #navi ul{float:left;}
#header #navi ul li{float:left; width:158px; border:1px #63ae80 solid; border-left:0;}
#header #navi ul li a{display:block; width:100%; height:38px; line-height:38px; background:#fff; color:#5eb47f; font-size:16px; font-weight:600; text-align:center;}
#header #navi ul li a:hover{color:#fff; background:#5eb47f;}
#header #navi ul li a.hover{color:#fff; background:#5eb47f;}
#header #search{position:relative; float:right; width:194px; height:34px; background:url('../images/bg_search.gif') left top no-repeat; margin:4px 27px 0 0;}
#header #search p.btn{position:absolute; right:0; top:0;}

/* popTabs */
#header .popTabs {float:left; width:100%; background:url('../images/study/bg_poptabs.png') left -9px repeat;}
#header .popTabs ul { overflow:hidden;margin-left:12px;padding-bottom:-20px;}
#header .popTabs ul li {float:left; padding:0 4px 13px 0;}
#header .popTabs ul li a {display:block; width:110px; height:40px; line-height:44px; font-size:14px; color:#a76a6; text-align:center; background:url('../images/study/bg_tabs_blue_off.png') left top no-repeat;}
#header .popTabs ul li a:hover {color:#fff; background:url('../images/study/bg_tabs_blue_on.png') left top no-repeat;}
#header .popTabs ul li a.hover {color:#fff; background:url('../images/study/bg_tabs_blue_on.png') left top no-repeat;}

/* book list notice title */
#noticeTxt{width:100%; margin:40px 0 0 0; color:#b0771e; line-height:1.2; font-size:15px; font-weight:600; text-align:center; clear:both; overflow:hidden;}
#noticeTxt span {font-size:15px;}
#noticeTxt span.green {color:#108a3e;}
#noticeTxt span.red {color:#bb2b14;}

/* book list */
#bookList{width:804px; margin:0 auto; background:url('../images/study/bg_level_list.png') left 186px no-repeat; overflow:hidden;}
#bookList ul{margin:17px 0 0 60px;}
#bookList ul li{float:left; padding:32px 0 0 10px;}
#bookList ul li .txt{font-size:15px; color:#ad7514; margin:24px 0 0 -10px; text-align:center;}
#bookList ul li .content{width:75px; font-size:14px; font-weight:600; color:#000000; padding:32px 0 0 15px; text-align:center;}

/****** study ******/
/* studyLeft */
#content .studyLeft {margin-left: 10px;float:left; width:648px; height:720px; margin:30px 0 0 40px; padding:0 0 0 48px; background:url('../images/study/bg_study_left.png') left top no-repeat; overflow:hidden;} 
.studyTitle {width:575px; height:35px; padding:50px 0 0 20px; background:url('../images/study/bg_study_title.gif') left 50px no-repeat; overflow:hidden; }
.studyTitle p {width:100%; line-height:35px; font-size:14px; color:#333; }
.studyText {text-align:left; line-height:1.5; width:90%; height:90%; margin:15px 0 0 0; padding:20px;}
.studyText .studyQuest {font-size:14px; color:#666; line-height:1.4; padding:0 0 20px 0;}
.studyText .studyAnwser {font-size:14px; color:#666; line-height:30px;}
.studyText .studyAnwser input { height:28px; line-height:28px; border:1px #c6c5c0 solid; background:#edecec; text-align:center; margin:0 4px;}
.studyText .exImg {position:relative; text-align:left;}
.studyText .exImg ul {position:absolute; left:0; bottom:-13px;}
.studyText .exImg ul li {font-size:13px; color:#666; padding:10px 0 0 0; text-align:left;}
.studyText .exImg p {position:absolute; right:0; bottom:-13px; font-size:13px; color:#666;}
.studyText .studyBox01 {width:100%; margin:30px 0 0 0; overflow:hidden;}
.studyText .studyBox01 textarea {width:488px; height:100px; padding:20px; font-size:13px; color:#666; line-height:1.5; border:1px #d8d8d8 solid; background:#f8f8f8;}
.studyText .enterNum {float:right;}
.studyText .studyBox02 {width:100%; overflow:hidden;}
.studyText .studyBox02 textarea {width:488px; height:362px; margin:10px 0 0 0; padding:20px; font-size:13px; color:#666; line-height:1.8; border:1px #d8d8d8 solid; background:#f8f8f8;}
.studyText .anwserSelect li {font-size:14px; color:#333; line-height:2.0;}
.studyText .anwserSelect li input {margin:0 10px 0 0; vertical-align:middle;}
.studyListBt {width:100%; margin:6px 0 0 0;}
.studyListBt a {margin:0 0 0 240px;}

/* studyRight */
#content .studyRight {float:left; width:230px; height:100%; background:url('../images/study/bg_studybg.png')left top repeat-y; overflow:hidden; z-index:1;}
#content .studyRight .studyTime {position:relative; width:100%; padding:0 0 20px 0; background:url('../images/study/bg_studybg_line.png')left bottom no-repeat; overflow:hidden;}
#content .studyRight .studyTime .timeText {position:absolute; top:109px; right:44px; font-size:14px; color:#333; font-weight:600;text-align:center;}
#content .studyRight .studyTime .timeText span{font-size:14px; color:#c1272c; font-weight:600;text-align:center;}
#content .studyRight .studyTime .timeStart {position:absolute; top:144px; right:48px; font-size:54px; color:#75511e; font-weight:800; letter-spacing:-2px;text-align:center;}
#content .studyRight .studyTime .checkNum {position:absolute; top:246px; left:0; width:230px; text-align:center; font-size:14px; color:#333; font-weight:600;}
#content .studyRight .studyTime .timeBg {margin:30px 0 0 0;}
#content .studyRight .studyTime .checkBg {margin:10px 0 0 0;}
#content .studyRight .studyStart {height:102px; padding:20px 0 0 31px; background:url('../images/study/bg_studybg_line.png')left bottom no-repeat; *zoom:1; }
#content .studyRight .studyStart:after {content:""; display:block; clear:both;}
#content .studyRight .studySearch {position:relative; height:52px; padding:20px 0 0 31px; background:url('../images/study/bg_studybg_line.png')left bottom no-repeat ;*zoom:1;}
#content .studyRight .studySearch:after {content:""; display:block; clear:both;} 
#content .studyRight .studySearch p.btn {position:absolute; right:28px; top:21px;}
#content .studyRight .studyRightBg {width:100%; height:100%; background-color:#fff; }
#content .studyRight .studyRightBg:after {content:""; display:block; clear:both;}

/* study test01 */
#title {position:relative; float:left; width:100%; height:52px; overflow:hidden;}
#title .testTitle {font-size:28px; color:#5eb481; font-Weight:600; text-align:center; line-height:52px;}
#title .testTitle:after {content:""; display:block; clear:both;}
#title .testNum {position:absolute; top:15px; left:0; width:110px; height:20px; font-size:20px; font-weight:600; color:#5eb47f; text-align:center;}

.testText {position:relative; clear:both; float:left; width:860px; height:302px; padding:20px; background:#efebdc; border:1px solid #e3dfd0; overflow-y:auto; }
.testText .img {position:absolute; left:20px; top:24px;}
.testText p {font-size:15px; color:#333; line-height:1.7; padding:0 0 20px 100px;}
.testText p.r {margin:0 0 0 165px;}
.testWrite {clear:both; float:left; width:100%;}
.testWrite .testQna {float:left; width:618px; margin:0 30px 0 0;}
.testWrite .testQna .writeQna {float:left; width:100%; height:140px;  padding:20px; background:#efebdc; border:1px solid #e3dfd0; overflow-y:auto; } 
.testWrite .testQna .writeQna .questionNum {font-size:15px; color:#333; line-height:1.7; padding:0 0 36px 0;}
.testWrite .testQna .writeQna .questionNum span {font-size:15px; color:#ff3d0f; }
.testWrite .testQna .writeQna .questionNum input {width:100px; height:20px; line-height:20px; border:1px #dedede solid; background:#fff; text-align:center; margin:0 4px;}
.testWrite .testWtk {float:left; width:173px; margin:0 0 0 37px;}
.testWrite .testWtk .writeWtk {width:100%; height:160px; padding:10px 20px; background:#efebdc; border:1px solid #e3dfd0; overflow-y:auto; } 
.testWrite .testWtk .writeWtk p {font-size:13px; color:#333; line-height:1.7;}
.testWrite .testLeft {width:482px;}
.testWrite .testLeft #title .testTitle { font-size:25px; color:#000; font-Weight:600; text-align:center; line-height:50px;}
.testWrite .testLeft:after {content:""; display:block; clear:both;}
.writeTitle	 {margin:20px 0 10px 0;font-size:20px; color:#ff3d0f; font-weight:600;}
.writeTitle2{margin:20px 0 10px 0;font-size:20px; color:#5eb481; font-weight:600;}



/* study test02 */
.leftTest {float:left; width:420px; height:618px; padding:30px 30px 0 35px; overflow:hidden;}
.leftTest .leftTitle {width:100%; margin:0 auto; text-align:center; }
.leftTest .leftTitle:after {content:""; display:block; clear:both;}
.leftTest .leftTitle .leftTNum {width:110px; height:20px; font-size:12px; color:#fff; line-height:18px; text-align:center; margin:0 auto; background:url('../images/study/bg_test_num.png') left top no-repeat;}
.leftTest .leftTitle .leftTTitle {width:100%; font-size:25px; color:#000; font-Weight:600; text-align:center; line-height:45px;}
.leftTest .testLeftText {position:relative; width:400px; height:500px; padding:20px 20px 0 0;  border-top:2px solid #d7c7a6; overflow-y:auto;}
.leftTest .testLeftText .img {position:absolute; left:0; top:20px;}
.leftTest .testLeftText p {font-size:15px; color:#666; line-height:1.5; padding:0 0 20px 0;}
.leftTest .testLeftText p.r {margin:0 0 0 165px;}
.testRight {float:left; width:420px; height:618px; padding:30px 30px 0 35px; overflow:hidden;}
.testRight .rightTitle {width:100%; padding:0 0 5px 0; font-size:20px; color:#ff3d60; font-weight:600; }
.testRight .rightQna {width:400px; height:340px; padding:20px 20px 0 0; border-top:2px solid #d7c7a6; overflow-y:auto;}
.testRight .rightQna .rightQNum {font-size:15px; color:#666; line-height:1.8; padding:0 0 36px 0;}
.testRight .rightQna .rightQNum span {font-size:15px; color:#0d9742; }
.testRight .rightQna .rightQNum input {width:100px; height:20px; line-height:20px; border:1px #dedede solid; background:#fff; text-align:center; margin:0 4px;}
.rWriteTitle {margin:20px 0 10px 0;font-size:20px; color:#ff3d60; font-weight:600;}
.rWriteWtk {width:400px; height:130px; padding:20px 20px 0 0; border-top:2px solid #d7c7a6; overflow-y:auto;}
.rWriteWtk ul li {float:left; width:191px; font-size:12px; color:#666; line-height:1.7;}


/* ewriting */
.ewritingWrap {height:716px;}
.ewritingWrap .subject {font-size:30px; color:#311f02; font-weight:600; padding:74px 0 0 50px;}
.ewritingWrap ul {position:absolute; right:-36px; bottom:0;}
.ewritingWrap ul li {float:left; padding:0 0 0 10px;}
.ewritingWrap textarea {width:774px; height:395px; font-size:16px; font-weight:600; color:#3d230b; border:0; margin:40px 0 0 60px; background:none; letter-spacing:1.2; line-height:1.5;}
.ewritingWrap .search {position:absolute; left:154px; bottom:27px; font-size:0; line-height:0;}
.ewritingWrap .sinput {width:161px; height:39px; line-height:39px; border:0; background:url('../images/study/bg_ew_input_on.png') left top no-repeat; padding:0 0 0 15px;}
.ewritingWrap .sinput_n {width:161px; height:39px; line-height:39px; border:0; background:url('../images/study/bg_ew_input.png') left top no-repeat; padding:0 0 0 15px;}


/* grammar */
.grammarWrap {position:relavtive; height:716px;}
.grammarWrap .time {float:left; height:38px; font-size:17px; color:#010101; line-height:40px; font-weight:600; margin:18px 16px 0 10px;}
.grammarWrap .time span {font-size:30px; vertical-align:middle; padding:0 0 0 30px;}
.grammarWrap .btnList {float:left; margin:18px 0 0 0;}
.grammarWrap .btnList ul li {float:left;}
.grammarWrap .subject {padding:13px 0 0 123px; clear:both;}
.grammarWrap .subject:after {content:""; display:block; clear:both;}
.grammarWrap .subject p {width:232px; font-size:30px; color:#010101; font-weight:600; line-height:64px; padding:0 0 0 20px;}
.grammarWrap .note {position:relative; padding:72px 40px 0 40px;}
.grammarWrap .note:after {content:""; display:block; clear:both;}
.grammarWrap .note .page {position:absolute; right:70px; top:-20px;}
.grammarWrap .note .page p span {font-size:20px; color:#8d7e73; line-height:30px;}
.grammarWrap .note .division {float:left; width:366px; margin:0 30px 0 0; overflow:hidden;}
.grammarWrap .note .division .question {float:left; padding:0 0 0 20px;}
.grammarWrap .note .division .question .tit {display:inline-block; font-size:17px; color:#000; background:url('../images/study/bg_grammar_q.gif') left top repeat-x;}
.grammarWrap .note .division .question .q {position:relative; height:190px; margin:10px 0 0 0;}
.grammarWrap .note .division .question .q p {position:absolute; left:40px; top:4px; width:147px; font-size:15px; color:#040404; line-height:1.3; word-break:keep-all;}
.grammarWrap .note .division .question .q .a {margin:0 0 0 200px;}
.grammarWrap .note .division .question .q .a ul li {padding:4px 0;}
.grammarWrap .note .division .question .q .a ul li input {vertical-align:middle;}
.grammarWrap .note .division .question .q .a ul li label {font-size:15px; color:#040404; line-height:1.3; padding:2px 0 0 5px;}



.grammarWrap .search {position:absolute; right:0; top:24px; font-size:0; line-height:0;}
.grammarWrap .sinput {width:108px; height:31px; line-height:31px; border:0; background:url('../images/study/bg_gram_input_on.png') left top no-repeat; padding:0 0 0 15px;}
.grammarWrap .sinput_n {width:108px; height:31px; line-height:31px; border:0; background:url('../images/study/bg_gram_input.png') left top no-repeat; padding:0 0 0 15px;}


/* sky part */
.skyPart {position:relative; height:auto; margin:15px 0 0 0; }
.skyPart:after {content:""; display:block; clear:both; }
.skyPart .menu {width:90%; overflow:hidden;}
.skyPart .menu ul {margin-left:10px; }
.skyPart .menu ul li {float:left;}
.skyPart .menu ul li .target {width:192px; height:38px; line-height:38px; font-size:15px; color:#5eb47f; font-weight:600; padding:0 0 0 0; background:#fff; border:1px #69b38a solid; border-left:0; text-align:center;}
.skyPart .menu ul li .target2 {width:140px; height:38px; line-height:38px; font-size:12px; color:#5eb47f; font-weight:600; padding:0 0 0 0; background:#fff; border:1px #69b38a solid; border-left:0; text-align:center;}
.skyPart .menu ul li .target3 {width:100px; height:38px; line-height:38px; font-size:14px; color:#800000; font-weight:600; padding:0 0 0 0; background:#fff; border:1px #000099 solid; border-left:0; text-align:center;}
.skyPart .menu ul li .target4 {width:150px; height:38px; line-height:38px; font-size:12px; color:#800000; font-weight:600; padding:0 0 0 0; background:#fff; border:1px #000099 solid; border-left:0; text-align:center;}
.skyPart p.txt {float:right; color:#696868; padding:5px 0 0 0;}
.skyPart p.txt span.ty1 {color:#ad1fd6;}
.skyPart p.txt span.ty2 {color:#0da5d7;}
.skyPart .partSearch {position:absolute; display:block; right:45px; top:5px;height:38px; font-size:0; line-height:0;}
.skyPart .partInput {width:139px; height:34px; line-height:34px; top:5px;height:38px; border:0; background:url('../images/study/bg_partsearch_input_on02.gif') left top no-repeat; padding:0 0 0 10px;}
.skyPart .partInput_n {width:139px; height:34px; line-height:34px; border:0; background:url('../images/study/bg_partsearch_input02.gif') left top no-repeat; padding:0 0 0 10px;}
.cateTit {font-size:30px; color:#484848; font-weight:600; padding:30px 0; text-align:center;}
.cateTit02 {font-size:30px; color:#484848; font-weight:600; padding:20px 0 30px; text-align:center;}


/* 내신자료실 */
.referenceWrap {width:965px; height:623px; background:url('../images/bg/bg_reference_wrap.png') left top no-repeat; overflow:hidden;}
.referenceBox {position:relative; margin:41px 62px 0 42px; height:533px;}
.referenceBox:after {content:""; display:block; clear:both;}
.referenceBox .close {position:absolute; right:3px; top:0; display:none;}
.referenceBox .htitle {text-align:center;}

.referenceBox .downSelect {padding:33px 0 0 26px; overflow:hidden; background:url('../images/bg/bg_downselect.gif') 26px 185px no-repeat;}
.referenceBox .downSelect:after {content:""; display:block; clear:both;}
.referenceBox .downSelect ul li {float:left; margin:0 14px 54px 0; cursor:pointer;}
.referenceBox .file {padding:35px 0 0 66px; overflow:hidden;}
.referenceBox .file:after {content:""; display:block; clear:both;}
.referenceBox .file img {display:none;}
.referenceBox .install {position:absolute; right:3px; bottom:0px;}
.referenceBox .section01 {width:100%; height:533px; position:relative; overflow:hidden;}
.referenceBox .section01 .reback {position:absolute; left:30px; top:20px; width:36px; height:36px; cursor:pointer;}
.referenceBox .section01 p.tit {font-size:30px; font-weight:600; color:#fff; padding:153px 0 30px 0; text-align:center;}
.referenceBox .section01 ul.down {margin:110px 0 0 39px;}
.referenceBox .section01 ul.down li {float:left; padding:0 10px 0 0;}
.referenceBox .section02 {height:533px; position:relative; margin:0 30px; overflow:hidden;}
.referenceBox .section02:after {content:""; display:block; clear:both;}
.referenceBox .section02 .reback {position:absolute; left:0; top:20px; width:36px; height:36px; cursor:pointer;}
.referenceBox .section02 .grade {margin:102px 0 0 0;}

.referenceDiv {width:100%; border-top:2px #75511e solid; border-bottom:2px #aeaead solid; overflow:hidden; margin:10px 0 0 0; }
.referenceTable {width:100%; border-width:0; border-spacing:0; border-style:none; font-size:12px; }
.referenceTable th {border-bottom:1px #adadad solid; color:#333; text-align:center; padding:12px 0 11px 0; font-size:13px; font-weight:600; vertical-align:top; background:#fff;}
.referenceTable td {border-color:#7a9f8b; border-width:0 1px 0 0; color:#fff; border-style:none none solid none; text-align:center; font-size:13px; line-height:1.3; vertical-align:middle; padding:6px 0;}
.referenceTable td a {color:#fff;}
.referenceTable td a:hover {text-decoration:underline;} 
.referenceTable td.none {height:414px; font-size:18px; color:#666; text-align:center;}
.referenceTable td.none img {padding:0 0 5px 0;}
.referenceDiv.mt {margin:52px 0 0 0;}

/* selectbox bg change */
span.searchSelectBox{height:30px; font-size:13px; background:url('../images/bg/bg_select.gif') right center #fff no-repeat; border-left:1px #dedede solid;}
span.searchSelectBox.changed{background-color:#fff;}
.searchSelectBoxInner{font-size:13px; white-space:nowrap; line-height:30px; padding:0 48px 0 10px;}


/* 체험하기 */
.eBox {width:100%; overflow:hidden;}
.eBox .eBoxhead {width:100%; height:170px; background:#30ceb9;}
.eBox .eBoxhead p {text-align:center;}
.eBox .eBoxhead p.tit {font-size:25px; color:#fff; font-weight:600; padding:35px 0 0 0;} 
.eBox .eBoxhead p.tit span {display:block; width:37px; height:1px; margin:20px auto 0; background:#98e7dc;}
.eBox .eBoxhead p.txt {font-size:14px; color:#fff; font-weight:600; padding:20px 0 0 0; line-height:1.6;}
.eBox .eBoxbody {width:100%; padding:30px 0 27px 0; background:#fff; overflow:hidden;}
.eBox .eBoxbody ul {margin:0 0 0 40px;}
.eBox .eBoxbody ul li {float:left; margin:0 19px 18px 0;}

/* 처음 이세요 */
.firstTime {width:100%; overflow:hidden;}
.firstTime .naviHead {position:relative; width:100%; height:170px; background:#30ceb9;}
.firstTime .naviHead p {text-align:center;}
.firstTime .naviHead p.tit {font-size:25px; color:#fff; font-weight:600; padding:35px 0 0 0;} 
.firstTime .naviHead p.tit span {display:block; width:37px; height:1px; margin:20px auto 0; background:#98e7dc;}
.firstTime .naviHead p.txt {font-size:14px; color:#fff; font-weight:600; padding:20px 0 0 0; line-height:1.6;}
.firstTime .naviHead .pre {position:absolute; left:30px; top:67px; cursor:pointer;}
.firstTime .naviHead .next {position:absolute; right:30px; top:67px; cursor:pointer;}
.firstTime .naviHead.b1 {background:#f2b155;}
.firstTime .naviHead.b2 {background:#e59550;}
.firstTime .naviHead.b3 {background:#e8804b;}
.firstTime .naviHead.b4 {background:#e8674a;}
.firstTime .naviHead.b5 {background:#e94b64;}
.firstTime .naviHead.b6 {background:#d95f9a;}
.firstTime .naviHead.b7 {background:#bc5eac;}
.firstTime .naviHead.b8 {background:#a86ec3;}
.firstTime .naviHead.b9 {background:#8c6ec3;}
.firstTime .naviHead.b10 {background:#715d5b;}
.firstTime .naviHead.b11 {background:#9573bc;}
.firstTime .ftbody {width:100%; padding:30px 0 0 0; background:#fff; overflow:hidden;}
.firstTime .ftbody .cateImg {width:100%; text-align:center; padding:0 0 30px 0;}
.firstTime .ftbody .tit {font-size:18px; color:#333; font-weight:600; line-height:1.5; text-align:left; text-decoration:none;}
.firstTime .ftbody .txt {font-size:16px; color:#333; font-weight:600; line-height:1.4; text-align:center;}
.firstTime .ftbody .txt span {font-size:19px; color:#333; font-weight:600; line-height:1.4;}
.firstTime .ftbody .txt span u {font-size:19px; color:#cf141c; font-weight:600; text-decoration:none;}
.popStep {display:none}
.popstepimg {text-align:center; padding:0 0 40px 0;}

/* 숙제하기 */
.homework {position:relative;}
.homework .tit {font-size:45px; color:#010101; font-weight:600; padding:60px 0 0 0;}
/*.homework .memberInfo {position:absolute; right:0; top:-10px; width:317px; height:130px; padding:18px 0 0 138px; background:url('../images/study/bg_pop_member_info.png') left top no-repeat; overflow:hidden;}*/
.homework .memberInfo {position:absolute; right:0; top:-10px; width:400px; height:130px; padding:18px 0 0 138px; background:url('../images/study/bg_pop_member_info.png') left top no-repeat; overflow:hidden;}

.homework .memberInfo .face {float:left; width:175px;}
.homework .memberInfo .face .member {color:#333; font-weight:600; padding:0 0 7px 0;}
.homework .memberInfo .face .member span {font-size:17px; font-weight:600; color:#75511e;}
.homework .memberInfo .face .department {color:#333; line-height:1.2;}
.homework .memberInfo .info {float:left; width:140px;}
.homework .memberInfo .info ul {margin:-3px 0 0 0;}
.homework .memberInfo .info ul li {line-height:20px; color:#333; padding:0 0 0 9px; background:url('../images/bg/bg_member_info_dot.gif') left 9px no-repeat;}
.homework .memberInfo .info ul li span {color:#c1272c; font-weight:600;}
.homework .memberInfo .btn {position:absolute; left:138px; top:92px;}
.homework .memberInfo .btn ul li {float:left; margin:0 5px 0 0;}


/* listening part */
.part {position:relative; margin:30px 0 30px 30px;}
.part:after {content:""; display:block; clear:both;}
.part .menu {width:100%; overflow:hidden;}
.part p.txt {color:#696868; padding:10px 0 0 0;}
.part p.txt span.ty1 {color:#ad1fd6;}
.part p.txt span.ty2 {color:#0da5d7;}
.part ul {position:absolute; left:0; top:0;}
.part ul li {float:left; padding:0 20px 0 0;}
.part ul.st01 {left:130px; top:124px;}
.part ul.st02 {left:521px; top:252px;}
.part ul.st03 {left:40px; top:337px;}
.part ul.st03 li {padding:0 35px 0 0;}
.part ul.st04 {left:428px; top:486px;}
.part .partSearch {position:absolute; right:0; top:0; font-size:0; line-height:0;}
.part .partInput {width:139px; height:34px; line-height:34px; border:0; background:url('../images/study/bg_partsearch_input_on.gif') left top no-repeat; padding:0 0 0 10px;}
.part .partInput_n {width:139px; height:34px; line-height:34px; border:0; background:url('../images/study/bg_partsearch_input.gif') left top no-repeat; padding:0 0 0 10px;}









/* view */
#viewHeader{position:relative; width:100%; padding:10px 0 0 0; overflow:hidden;}
#viewHeader h2{color:#5eb47f; font-weight:600; font-size:40px; text-align:center; letter-spacing:-2px;}
#viewHeader p.level{position:absolute; left:10px; bottom:0; color:#5eb47f; font-weight:600; font-size:22px;}

#viewContent{position:relative; width:754px; height:245px; border:1px #e3dfd0 solid; background:#efebdc; margin:10px 0 0 10px; padding:12px; overflow-y:auto; color:#312921; font-size:14px; line-height:1.4; word-break:keep-all;}
#viewContent p.img{position:absolute; left:10px; top:10px;}
#viewContent p.rightTxt{color:#312921; font-size:14px; line-height:1.4; margin:0 0 0 220px; word-break:keep-all;}

/* qna */
#qna{width:100%; overflow:hidden;}
#qna #question{float:left; width:566px; margin:10px 0 0 10px;}
#qna #question h3{color:#ff3d0f; font-weight:600; font-size:20px; padding:0 0 10px 0;}
#qna #word{float:left; width:190px; margin:10px 0 0 20px; }
#qna #word h3{color:#35ac63; font-weight:600; font-size:20px; padding:0 0 10px 0;}
#qna .inbox{height:120px; border:1px #e3dfd0 solid; background:#efebdc; padding:15px 10px; overflow-y:auto;}
#qna .inbox ul li{height:18px; line-height:18px; font-size:13px; color:#2e1c0c;}
#qna .q{color:#fe603c; font-size:15px; font-weight:600; word-break:keep-all;}
#qna .a{line-height:2; color:#2e1c0c; font-size:13px; padding:6px 0 15px 10px; word-break:keep-all;}

/****** tool ******/
#tool{width:960px; height:70px; background:#79cd99; margin:10px 0 0 16px; overflow:hidden; }
#tool #btnArea{float:left; width:220px; margin:0 26px 0 0;}
#tool #btnArea ul{margin:6px 0 0 20px;}
#tool #btnArea ul li{float:left; padding:0 10px 4px 0;}
#tool #playArea {float:left; width:126px;}
#tool #playArea ul {margin:8px 0 0 0;}
#tool #playArea ul li {float:left; padding:0 10px 0 0;}
#tool #progressArea {position:relative; float:left; width:240px; margin:0 14px 0 0;}
#tool #progressArea #progress {width:240px; margin:30px 0 0 0;}
#tool #soundArea {position:relative; float:left; width:100px;}
#tool #soundArea p.img {position:absolute; left:0; top:20px;}
#tool #soundArea #sound {width:70px; margin:30px 0 0 27px;}
#tool #searchArea {float:left; width:216px; margin:22px 0 0 0;}
#tool #searchArea ul {margin:0 0 0 65px;}
#tool #searchArea ul li {float:left;}
#tool #searchArea ul li input.stype {width:113px; height:30px; line-height:30px; background:url('../images/study/bg_search_sub_txt.gif') left top no-repeat; border:0; color:#484738;}
#tool.ty {margin:0 0 0 5px;}
.sfocus{width:105px; height:30px; line-height:30px; background:url('../images/study/bg_search_sub.gif') left top no-repeat; border:0; color:#484738; padding:0 0 0 10px;}
.sfocusnot{width:105px; height:30px; line-height:30px; background:url('../images/study/bg_search_sub.gif') left top no-repeat; border:0; color:#484738; padding:0 0 0 10px;}








/****** common ******/
/* location */
.location {width:100%; margin:40px 0 0 0; overflow:hidden;}
.location ol li {float:left; line-height:16px;}
.location ol li a {font-size:13px; color:#666;}
.location ol li.home {padding:0 0 0 20px; background:url('../images/ico/ico_home.gif') left 1px no-repeat;}
.location ol li.last {font-size:13px; color:#666; font-weight:600;}


/* list search */
.listSearch {width:100%; height:50px; font-size:0; line-height:0; margin:0 0 10px 0; background:url('../images/study/pop_list_searchwrap.gif') left top no-repeat;}
.listSearch .lsearchType {width:696px; height:28px; line-height:28px; font-size:13px; color:#999; padding:0 0 0 9px; margin:10px 6px 0 99px; border:1px #dedede solid; background:url('../images/study/bg_list_search_txt.gif') left top #fff no-repeat;}
.listSearch .lsearchType_n {width:696px; height:28px; line-height:28px; font-size:13px; color:#999; padding:0 0 0 9px; margin:10px 6px 0 99px; border:1px #dedede solid; background:url(none) #fff;}
.listSearch input {margin-top:10px;}

/* list table */
.listDiv {width:100%; border-top:2px #75511e solid; border-bottom:2px #aeaeae solid; overflow:hidden; margin:0 auto; }
.listTable {width:100%; border-width:0; border-spacing:0; border-style:none; font-size:12px; }
.listTable th {border-color:#adadad; border-width:0 0 1px 0; color:#333; border-style:none none solid none; text-align:center; padding:14px 0 13px 0; font-size:13px; font-weight:600; vertical-align:top; background:#fff;}
.listTable th.s {padding:5px 0 4px 0;}
.listTable td {border-color:#e6ded2; border-width:0 0 1px 0; color:#333; border-style:none none solid none; text-align:center; font-size:13px; vertical-align:middle;background:#fff;}
.listTable td.left {text-align:left; padding:14px 0 13px 45px;}
.listTable td.left2 {text-align:left; padding:14px 0 13px 10px;}
.listTable td a {color:#333;}
.listTable td a:hover {text-decoration:underline;} 
.listTable td.none {height:414px; font-size:18px; color:#666; text-align:center;}
.listTable td.none img {padding:0 0 5px 0;}

.listDiv02 {width:100%; overflow:hidden; margin:0 auto;}
.listTable02 {width:100%; border-width:0; border-spacing:0; border-style:none; font-size:12px; }
.listTable02 th {border-bottom:1px #adadad solid; border-right:1px #e7e7e7 solid; color:#333; text-align:center; padding:12px 0 11px 0; font-size:13px; font-weight:600; vertical-align:top; background:#e8f0ff;}
.listTable02 th.last {border-right:0}
.listTable02 td {border-color:#e6ded2; border-width:0 1px 1px 0; color:#333; border-style:none solid solid none; text-align:center; font-size:13px; background:#e8f0ff; line-height:1.3; vertical-align:middle;background:#fff;}
.listTable02 td.left {text-align:left; padding:12px 10px 11px 10px;}
.listTable02 td a {color:#333;}
.listTable02 td a:hover {text-decoration:underline;} 
.listTable02 td.none {height:414px; font-size:18px; color:#666; text-align:center;}
.listTable02 td.none img {padding:0 0 5px 0;}
.listTable02 td.last {border-right:0}


/* sky type table */
.skyDiv {width:100%; overflow:hidden; margin:0 auto;}
.skyTable {width:100%; border-width:0; border-spacing:0; border-style:none; font-size:12px;}
.skyTable th {border-color:#adadad; border-width:0 0 1px 0; color:#333; border-style:none none solid none; text-align:center; padding:14px 0 13px 0; font-size:16px; font-weight:600; vertical-align:top; color:#484848;}
.skyTable td {border-color:#e6ded2; border-width:0 0 1px 0; color:#474747; border-style:none none solid none; text-align:center; padding:4px 0 8px 0; font-size:15px; vertical-align:middle;background:#3c619b;}
.skyTable td a {color:#333;}
.skyTable td a:hover {text-decoration:underline;} 
.skyTable td.none {height:414px; font-size:18px; color:#666; text-align:center;}
.skyTable td.none img {padding:0 0 5px 0;}

.skyTable2 {width:100%; border-width:0; border-spacing:0; border-style:none; font-size:12px;background:#e8f0ff;}


/* span type */
span.green{color:#108a3e;}
span.red{color:#bb2b14;}


/* input type */
.searchType{width:157px; height:34px; line-height:34px; color:#6c6c6c; border:0; background:url('../images/study/bg_search_input_txt.gif') left top no-repeat;}
.focus{width:187px; height:30px; line-height:30px; color:#6c6c6c; border:0; margin:6px 0 0 10px; padding:8px 0 0 10px; background:url(none);}
.focusnot{width:137px; height:34px; line-height:34px; color:#6c6c6c; border:0; padding:0 0 0 20px; background:url('../images/study/bg_input_txt_no.gif') left top no-repeat;}m
.anwser{width:62px; height:16px; line-height:16px; border:1px #c6c5c0 solid; background:#edecec; text-align:center; padding:0 5px; margin:5px 0 0 0;}
.startType{width:101px; height:32px; line-height:32px; color:#999; font-size:14px; border:0; padding:0 0 0 0; background:url('../images/study/bg_input_txt.gif') 4px 4px #fff no-repeat;}
.startFocusnot{width:101px; height:30px; line-height:30px; color:#999; font-size:15px; border:0; padding:0 0 0 9px; background:url(none) #fff;}
.testType{width:115px; height:30px; line-height:30px; color:#999; font-size:15px; border:0; padding:0 0 0 9px; background:url('../images/study/bg_input_txt.png') 4px top none no-repeat;}
.testFocusnot{width:115px; height:30px; line-height:30px; color:#999; font-size:15px; border:0; padding:0 0 0 9px; background:url(none) #fff;}
.pwi50 {width:50px;}
.pwi110 {width:110px;}


/* btn type */
.btnAreaList{position:relative; width:100%; text-align:center; clear:both;}
.btnAreaList.ty {margin:30px 0 50px 0;}
.btnAreaList2{position:relative; width:100%; margin:60px 0 0 0; text-align:center; clear:both;}


/* paging */
.allPageMoving{margin:26px 0 0 0;}
.allPageMoving *{vertical-align:top;}
.allPageMoving a{display:inline-block;width:17px;height:17px;line-height:17px;color:#999;text-decoration:none; font-size:11px; margin:0 4px;font-weight:600;}
.allPageMoving a.pre{border:0;padding:0;margin:4px 9px 0 0;}
.allPageMoving a.pre2{margin:4px 0 0 0;}
.allPageMoving a.next{border:0;padding:0;margin:4px 0 0 7px;}
.allPageMoving a.next2{margin:4px 0 0 0;}
.allPageMoving a img{vertical-align:top;}
.allPageMoving strong{display:inline-block;width:17px;height:17px;line-height:17px;color:#997542;text-decoration:none; font-size:11px; font-weight:600;margin:0 4px;}
.allPageMoving.ty{margin:57px 0 0 0;}

.allPageMoving2{}
.allPageMoving2 *{vertical-align:top;}
.allPageMoving2 a{display:inline-block;width:17px;height:17px;line-height:17px;color:#fff;text-decoration:none;background:url('../images/study/bg_paging.gif') left top no-repeat; font-size:11px; margin:0 4px;font-weight:600;}
.allPageMoving2 a.pre{border:0;padding:0;margin:0 9px 0 0; background:url(none);}
.allPageMoving2 a.next{border:0;padding:0;margin:0 0 0 7px; background:url(none);}
.allPageMoving2 a img{vertical-align:top;}
.allPageMoving2 strong{display:inline-block;width:17px;height:17px;line-height:17px;color:#fff;text-decoration:none; background:url('../images/study/bg_paging_strong.gif') left top no-repeat; font-size:11px; font-weight:600;margin:0 4px;}


/* ui reset */
.ui-widget-content{border:0; background:#b0ebba;}
.ui-widget-header{background:url('../images/study/bg_progress.gif') left top repeat;}
#progressArea .ui-state-default, #progressArea .ui-widget-content .ui-state-default, #progressArea .ui-widget-header .ui-state-default{border:0; background:url('../images/study/slider_progress.png') left top no-repeat;}
#progressArea .ui-slider .ui-slider-handle{width:32px; height:32px; cursor:pointer; margin:-4px 0 0 -4px;}
#soundArea .ui-state-default, #soundArea .ui-widget-content .ui-state-default, #soundArea .ui-widget-header .ui-state-default{border:0; background:url('../images/study/slider_sound.png') left -2px no-repeat;}
#soundArea .ui-slider .ui-slider-handle{width:20px; height:26px; cursor:pointer;}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-bottom-right-radius:0;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {border-bottom-left-radius:0;}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border-top-right-radius:0;}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {border-top-left-radius:0;}

hr.style-two {
border : 0 ;
height : 1px ;
background-image :-webkit-linear-gradient ( left , rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 , 0.75 ), rgba ( 0 , 0 , 0 , 0 ));
background-image :-moz-linear-gradient ( left , rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 , 0.75 ), rgba ( 0 , 0 , 0 , 0 ));
background-image :-ms-linear-gradient ( left , rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 , 0.75 ), rgba ( 0 , 0 , 0 , 0 ));
background-image :-o-linear-gradient ( left , rgba ( 0 , 0 , 0 , 0 ), rgba ( 0 , 0 , 0 , 0.75 ), rgba ( 0 , 0 , 0 , 0 ));
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	.study table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.study thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.study tr { border: 1px solid #ccc; }
	
	.study td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.study td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	.study td:nth-of-type(1):before { content: "No"; }
	.study td:nth-of-type(2):before { content: "Suject"; }
	.study td:nth-of-type(3):before { content: "Go"; }
}


.rtable {
  /*!
  // IE needs inline-block to position scrolling shadows otherwise use:
  // display: block;
  // max-width: min-content;
  */
  display: inline-block;
  vertical-align: top;
  width: 100%;
  /* max-width: 100%; */
  
  overflow-x: auto;
  
  // optional - looks better for small cell values
  white-space: nowrap;

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

.rtable,
.rtable--flip tbody {
  // optional - enable iOS momentum scrolling
  -webkit-overflow-scrolling: touch;
  
  // scrolling shadows
  background: radial-gradient(left, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 0 center,
              radial-gradient(right, ellipse, rgba(0,0,0, .2) 0%, rgba(0,0,0, 0) 75%) 100% center;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;
}

// change these gradients from white to your background colour if it differs
// gradient on the first cells to hide the left shadow
.rtable td:first-child,
.rtable--flip tbody tr:first-child {
  background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 20px 100%;
}

// gradient on the last cells to hide the right shadow
.rtable td:last-child,
.rtable--flip tbody tr:last-child {
  background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 20px 100%;
}

.rtable th {
  font-size: 11px;
  text-align: left;
  text-transform: uppercase;
  background: #f2f0e6;
}

.rtable th,
.rtable td {
  padding: 6px 12px;
  border: 1px solid #d9d7ce;
}

.rtable--flip {
  display: flex;
  overflow: hidden;
  background: none;
}

.rtable--flip thead {
  display: flex;
  flex-shrink: 0;
  min-width: min-content;
}

.rtable--flip tbody {
  display: flex;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.rtable--flip tr {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  flex-shrink: 0;
}

.rtable--flip td,
.rtable--flip th {
  display: block;
}

.rtable--flip td {
  background-image: none !important;
  // border-collapse is no longer active
  border-left: 0;
}

// border-collapse is no longer active
.rtable--flip th:not(:last-child),
.rtable--flip td:not(:last-child) {
  border-bottom: 0;
}


.zui-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px 'Nanum Gothic', Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: none;
    color: #336B6B;
    padding: 5px;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-table tbody td {
	background-color: #FFFFFF;
    border-bottom: solid 1px #DDEFEF;
    color: #333;
    padding: 5px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
	font: normal 14px 'Nanum Gothic', Arial, sans-serif;
}
.zui-wrapper {
    position: relative;
}
.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}

.studyBox {
 background-color: #ffffff;
  clear: left;
  height: auto;
  width: 97%;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  float: left;
   border: 1px solid #333300;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   -o-border-radius: 15px;

}

body{
	-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; 
	width: 100%; 
	height: 100%;
	background: url(../images/bexy.jpg);
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
.btn{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;display:inline-block;overflow:hidden;height:53px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;line-height:30px;font-size:16px;font-weight:bold;text-shadow:0px 1px 1px #888;}.btn span.icon,.btn span.title{display:block;position:relative;line-height:50px;padding:0 30px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}.btn span.left{float:left;border-radius:6px 0 0 6px;-moz-border-radius:6px 0 0 6px;-webkit-border-radius:6px 0 0 6px;}.btn span.right{float:right;border-radius:0 6px 6px 0;-moz-border-radius:0 6px 6px 0;-webkit-border-radius:0 6px 6px 0;}.btn span.icon{font-size:23px;background-color:#00967f;-webkit-box-shadow:0 3px 0 0 #007261;box-shadow:0 3px 0 0 #007261;text-shadow:0px 1px 1px #888;}.btn span.title{-webkit-box-shadow:0 3px 0 0 #00ae94;box-shadow:0 3px 0 0 #00ae94;background-color:#00cdae;}.btn span.arrow-left,.btn span.arrow-right{position:absolute;width:0;height:0;border-top:25px solid transparent;border-bottom:25px solid transparent;-webkit-transition:all .15s;-transition:all .15s;-webkit-transition-property:left,right;transition-property:left,right;}.btn.left span.arrow-left{right:0;-webkit-box-shadow:10px 0 0 0 #00cdae,10px 3px 0 0 #00ae94;box-shadow:10px 0 0 0 #00cdae,10px 3px 0 0 #00ae94;border-right:10px solid #00cdae;}.btn.right span.arrow-left{right:0;-webkit-box-shadow:10px 0 0 0 #00967f,10px 3px 0 0 #007261;box-shadow:10px 0 0 0 #00967f,10px 3px 0 0 #007261;border-right:10px solid #00967f;}.btn.left span.arrow-right{left:0;-webkit-box-shadow:-10px 0 0 0 #00967f,-10px 3px 0 0 #007261;box-shadow:-10px 0 0 0 #00967f,-10px 3px 0 0 #007261;border-left:10px solid #00967f;}.btn.right span.arrow-right{left:0;-webkit-box-shadow:-10px 0 0 0 #00cdae,-10px 3px 0 0 #00ae94;box-shadow:-10px 0 0 0 #00cdae,-10px 3px 0 0 #00ae94;border-left:10px solid #00cdae;}.btn span.slant-left,.btn span.slant-right{position:absolute;width:0;height:0;border-top:0 solid transparent;border-bottom:50px solid transparent;-webkit-transition:all .15s;-transition:all .15s;-webkit-transition-property:left,right;transition-property:left,right;}.btn.left span.slant-right{left:0;-webkit-box-shadow:-10px 0 0 0 #00967f,-10px 3px 0 0 #007261;box-shadow:-10px 0 0 0 #00967f,-10px 3px 0 0 #007261;border-left:10px solid #00967f;}.btn.right span.slant-right{left:0;-webkit-box-shadow:-10px 0 0 0 #00cdae,-10px 3px 0 0 #00ae94;box-shadow:-10px 0 0 0 #00cdae,-10px 3px 0 0 #00ae94;border-left:10px solid #00cdae;}.btn.left span.slant-left{right:0;-webkit-box-shadow:10px 0 0 0 #00cdae,10px 3px 0 0 #00ae94;box-shadow:10px 0 0 0 #00cdae,10px 3px 0 0 #00ae94;border-right:10px solid #00cdae;}.btn.right span.slant-left{right:0;-webkit-box-shadow:10px 0 0 0 #00967f,10px 3px 0 0 #007261;box-shadow:10px 0 0 0 #00967f,10px 3px 0 0 #007261;border-right:10px solid #00967f;}.btn:active,.btn.active{height:51px;}.btn:hover{}.btn:hover span.arrow-left{right:10px;}.btn:hover span.arrow-right{left:10px;}.btn:hover span.slant-left{right:10px;}.btn:hover span.slant-right{left:10px;}.btn-small{height:30px;font-size:12px;line-height:10px;}a.btn-small span.btn{height:30px;}