@charset "UTF-8"; #wrapper {min-width:1300px} #header {width:1200px; height:170px; margin:0 auto} #header.main {height:auto} #header .area-logo {position:relative; padding:34px 0 35px; text-align:center} #header .area-logo .bookmark {position:absolute; left:0; top:36px; line-height:27px; padding-left:24px; font-size:14px; color:#606060; background:url(/images/common/bg-mark.png) 0 center no-repeat;} #header .area-logo .logo {display:inline-block; width:182px; height:41px; font-size:0; text-indent:-9999em; vertical-align:top; background:url(/images/common/logo-ycloud-main.png) center no-repeat} #header .area-logo .logo-bottom {display: none;} #header .area-logo .menu {position:absolute; right:0; top:36px} #header .area-logo .menu ul li {float:left} #header .area-logo .menu ul li a {display:inline-block; line-height:27px; font-size:14px; color:#606060} #header .area-logo .menu ul li ~ li {position:relative; margin-left:24px} #header .area-logo .menu ul li ~ li:after {content:""; position:absolute; left:-12px; top:50%; width:3px; height:3px; margin-top:-1px; border-radius:3px; background:#d7d7d7} #header .area-logo .button-gnb, #header .area-logo .button-search {display:none} #header .area-logo .logo-bottom {display:none;} #header .area-logo .main-top-left{display:none;} #header .area-logo .main-top-right{display:none;} #header #gnb {position:relative; display:flex; display:-webkit-flex; display:-ms-flexbox; z-index:100} #header #gnb:after {content:""; display:block; clear:both} #header #gnb > div {display:block; flex:1; -webkit-flex:1; -ms-flex:1; height:60px; text-align:center; box-sizing:content-box} /*#header #gnb > div ~ div {margin-left:1 px}*/ #header #gnb > div > ul {display:block; text-align:center} #header #gnb > div > ul > li {/*float:left*/ display:inline-block} #header #gnb > div > ul > li:after {content:""; display:block; clear:both} #header #gnb > div > ul > li > a {display:inline-block; position:relative; padding:22px 0 20px; font-size:18px; color:#fff; vertical-align:middle; box-sizing:border-box} #header #gnb > div > ul > li ~ li {margin-left:63px} #header #gnb > div > ul > li ~ li > a span:after {content:""; position:absolute; left:-31px; top:50%; width:3px; height:3px; margin-top:-1px; border-radius:3px; background:#ffb6b6; cursor:default} #header #gnb > div.list1 {/*margin:-23px 0 0 -23px; padding:23px 0 0 23px;*/ /*background:url(/images/content/bg-gnb-spt1.png) 0 0 no-repeat*/} #header #gnb > div.list1 > ul {border-top-right-radius:14px; background:#FF5C5C} /* #header #gnb > div.list1 > ul > li > a {color:#fee2e2} #header #gnb > div.list2 > ul > li > a {color:#bac5cd} */ #header #gnb > div.list2 {/*margin:-23px -22px 0 0; padding:23px 23px 0 0;*/ /*background:url(/images/content/bg-gnb-spt2.png) 0 0 no-repeat*/} #header #gnb > div.list2 > ul {margin-left:1px; margin-right:-1px; border-top-left-radius:14px; background:#0F3653} #header #gnb > div.list2 > ul > li ~ li {margin-left:82px} #header #gnb > div.list2 > ul > li ~ li > a span:after {left:-40px; background:#577387} #header #gnb > div.list2 > ul > li.search > a {padding-left:10px; padding-right:10px} /* #header #gnb > div.list1.bg {background:url(/images/content/bg-gnb-shd1-1bg.png) 1px 1px no-repeat} #header #gnb > div.list2.bg {background:url(/images/content/bg-gnb-shd1-2bg.png) 0px 1px no-repeat} */ #header #gnb > div > ul > li.on > a {padding:22px 0 17px; font-weight:bold; color:#fff; /*border-top:3px solid #fff;*/ border-bottom:3px solid #fff} /* #header #gnb > div > ul > li.on > a:before {content:""; position:absolute; left:50%; top:0; width:8px; height:4px; margin-left:-4px; background:url(/images/content/bg-gnb-on-down.png) 0 0 no-repeat} */ #header #gnb > div > ul > li.on > a:after {content:""; position:absolute; left:50%; bottom:0; width:8px; height:4px; margin-left:-4px; background:url(/images/content/bg-gnb-on-up.png) 0 0 no-repeat} #header #gnb > div > ul > li > div.sub {display:none; position:absolute; left:-23px; top:60px; /*top:-999em;*/ width:1246px; margin-bottom:23px; padding:0 23px} #header #gnb > div > ul > li > div.sub div.inner {width:1246px; height:568px; margin:0 0 0 -23px; padding:0 23px 23px; text-align:left; /*background:url(/images/content/bg-gnb-shd3.png) 0 0 no-repeat; background-size:100% auto*/} #header #gnb > div > ul > li > div.sub div.inner > ul {display:flex; display:-webkit-flex; display:-ms-flexbox; flex-direction:column; -webkit-flex-direction:column; -ms-flex-direction:column; width:1200px; height:421px; border-right:1px solid #b3b3b3; border-left:1px solid #b3b3b3; background:#fff} #header #gnb > div > ul > li > div.sub div.inner > ul > li {position:relative; display:block; flex:1; -webkit-flex:1; -ms-flex:1} #header #gnb > div > ul > li > div.sub div.inner > ul > li:before {content:""; display:inline-block; width:0; height:100%; margin-left:-4px; vertical-align:middle} #header #gnb > div > ul > li > div.sub div.inner > ul > li ~ li {border-top:1px solid #e0e0e0} #header #gnb > div > ul > li > div.sub div.inner > ul > li > strong {position:absolute; left:30px; top:50%; margin-top:-10px; font-size:19px; color:#0f3653} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul {display:inline-block; width:100%; vertical-align:middle} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul:after {content:""; display:block; clear:both} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li {float:left; width:20%; padding-left:7px; box-sizing:border-box} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li a {position:relative} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li a:after {content:""; position:absolute; left:-7px; top:11px; width:3px; height:3px; border-radius:3px; background:#d1d1d1} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li a:hover:after {background:#ff5c5c} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li.on a:after {background:#ff5c5c} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li > a {display:inline-block; padding:5px; font-size:15px; color:#515151} #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li.on > a, #header #gnb > div > ul > li > div.sub div.inner > ul > li ul li > a:hover {font-weight:bold; color:#ff5c5c} #header #gnb > div > ul > li > div.sub div.inner > ul > li > ul > li.none {line-height:25px} #header #gnb > div > ul > li > div.sub div.inner > ul > li > ul > li.none a {padding:0} #header #gnb > div > ul > li > div.sub div.inner > ul > li > ul > li.none a:after {display:none} #header #gnb > div > ul > li > div.sub div.inner .bann {/*position:absolute; left:23px; right:23px; bottom:23px;*/ border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3} #header #gnb > div > ul > li > div.sub div.inner .bann img {width:100%} #header #gnb > div > ul > li.textbook > div.sub div.inner {margin-top:-48px} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj {display:flex; display:-webkit-flex; display:-ms-flexbox; width:1200px} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a {display:block; flex:1; -webkit-flex:1; -ms-flex:1; text-align:center; position:relative; z-index:1; padding:18px 0 15px; font-size:15px; color:#666; background:#ebebeb} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a ~ a:after {content:""; position:absolute; left:0; top:50%; width:1px; height:13px; margin-top:-7px; background:#ccc} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a.on {font-weight:bold; color:#ff5c5c; background:#fff} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a.on:after, #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a.on + a:after {display:none} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a:first-child {border-left:1px solid #b3b3b3} #header #gnb > div > ul > li.textbook > div.sub > .tab-subj > a:last-child {border-right:1px solid #b3b3b3} #header #gnb > div > ul > li.textbook > div.sub div.inner {position:relative; padding-top:48px} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul {display:block; height:393px} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul > li {padding:32px 0 32px 136px} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul > li:after {content:""; display:block; clear:both} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul > li > ul {float:left; width:25%} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul > li > ul > li {float:none; width:100%} #header #gnb > div > ul > li.textbook > div.sub div.inner > ul > li > .all {position:absolute; right:30px; top:39px; font-size:13px; color:#ff5c5c; border-bottom:1px solid #ff5c5c} #header #gnb > div > ul > li.textbook > div.sub div.inner#subjEng > ul > li {padding:20px 0 17px 136px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade {position:absolute; left:23px; right:23px; top:0; bottom:136px; z-index:1; text-align:left; border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; background:#fff} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .title-bar {height:48px; padding-left:31px; background:#ebebeb} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .title-bar strong {display:inline-block; line-height:48px; font-weight:bold; font-size:15px; color:#464040; vertical-align:middle} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .title-bar .return {display:inline-block; width:15px; height:15px; margin-left:8px; font-size:0; text-indent:-9999em; vertical-align:middle; background:url(/images/content/ico-reset-gray.png) no-repeat} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist:after {content:""; display:block; clear:both} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist strong.subj {display:block; padding-bottom:12px; font-size:19px; color:#0f3653} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li {position:relative; line-height:23px; padding-left:7px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li:after {content:""; position:absolute; left:0; top:7px; width:3px; height:3px; border-radius:3px; background:#d1d1d1} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li.on:after, #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li:hover:after {background:#ff5c5c} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li a {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; font-size:15px; color:#515151} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li.on a, #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li a:hover {font-weight:bold; color:#ff5c5c} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist ul li.none:after {display:none} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .eng {float:left; width:474px; height:100%; padding:18px 30px 0;} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .eng ul:after {content:""; display:block; clear:both} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .eng ul li {float:left; width:50%} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest {float:left; width:calc(100% - 474px)} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest:after {content:""; display:block; clear:both} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest .list {float:left; width:33.33%; padding:18px 30px 0; border-left:1px solid #e0e0e0} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest .list.list1 {height:100px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest .list.list2 {height:149px; border-top:1px solid #e0e0e0} #header #gnb > div > ul > li.textbook > div.sub .ly-grade .booklist .rest .list.list3 {height:144px; border-top:1px solid #e0e0e0} #header #gnb > div > ul > li.textbook > div.sub .ly-grade#gradeHigh .booklist .rest .list.list1 {height:81px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade#gradeHigh .booklist .rest .list.list2 {height:178px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade#gradeHigh .booklist .rest .list.list3 {height:134px} #header #gnb > div > ul > li.textbook > div.sub .ly-grade#gradeElem .booklist .rest .list {height:393px} #header #gnb > div > ul > li.class > div.sub div.inner > ul > li {height:33.33%; padding:0 64px 0 224px} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li > ul > li {width:20%} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:first-child {flex:0 0 auto; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; height:116px} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:first-child > ul > li {width:17%} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:first-child + li > ul > li {width:17%} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:first-child > ul > li:nth-child(6n) {width:145px} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:nth-child(3) {height:116px} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:nth-child(3) > ul > li {width:25%} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li {padding-left:224px} #header #gnb > div > ul > li.data > div.sub div.inner > ul > li:nth-child(2n) {height:94.5px} #header #gnb > div > ul > li.free > div.sub div.inner > ul > li {height:20%; padding-left:263px} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li {height:71px; padding-left:224px} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > ul > li {width:18%} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li:first-child {flex:0 0 auto; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; height:208px} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li:first-child strong {top:27px; margin-top:0} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school {position:relative; height:33.33%; padding-left:85px} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school > strong {position:absolute; left:0; top:50%; margin-top:-9px; font-weight:bold; font-size:18px; color:#0f3653} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school ~ .school {border-top:1px solid #e0e0e0} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school ul li {width:9.5%} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school ul li a {white-space:nowrap} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li:first-child:before {display:none} #header #gnb > div > ul > li.bank > div.sub div.inner > ul > li > .school:before {content:""; display:inline-block; width:0; height:69px; margin-left:-4px; vertical-align:middle} #header #gnb > div > ul > li.search > div.sub div.inner {position:relative; text-align:center} #header #gnb > div > ul > li.search > div.sub div.inner > .wrap {width:100%; height:100%; border-left:1px solid #b3b3b3; border-right:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3; background:#f7f7f7} #header #gnb > div > ul > li.search > div.sub div.inner .close {position:absolute; right:43px; top:20px; width:23px; height:22px; font-size:0; text-indent:-9999em; background:url(/images/content/btn-close-blk.png) no-repeat} #header #gnb > div > ul > li.search > div.sub div.inner .search-area {padding:51px 0 40px} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap {display:inline-block; width:auto; position:relative} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap input[type="text"] {width:503px; height:45px; padding:0 15px; font-size:15px; color:#2f2f2f; border:3px solid #175b8d; border-radius:0; vertical-align:top} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap input[type="text"] + .srch {display:inline-block; width:96px; height:45px; line-height:45px; margin-left:-5px; font-weight:bold; font-size:15px; color:#fff; text-align:center; background:#175b8d; vertical-align:top} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword {position:absolute; left:0; top:42px; right:0; z-index:1; text-align:left} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword ul li {padding:8px 17px; border-left:1px solid #acb2b7; border-right:1px solid #acb2b7; background:#fff} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword ul li a {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; line-height:1.26em; font-size:15px; color:#2f2f2f} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword ul li a strong {font-weight:bold} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword ul li:first-child {padding-top:16px; border-top:1px solid #acb2b7} #header #gnb > div > ul > li.search > div.sub div.inner .search-area .wrap .auto-keyword ul li:last-child {padding-bottom:16px; border-bottom:1px solid #acb2b7} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords {display:inline-block; text-align:left} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont {position:relative; float:left; width:449px; height:343px; padding:30px; border:1px solid #e0e0e0; background:#fff} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont ~ .cont {margin-left:30px} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont .tit {display:block; padding-bottom:19px; font-weight:bold; font-size:18px; color:#2f2f2f} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li {position:relative; height:45px; padding:0 45px 0 20px; border:1px solid #ececec; box-sizing:border-box} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li ~ li {margin-top:5px} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li:hover {background:#fcfcfc} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li:hover a {font-weight:bold; color:#175b8d} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li a {display:inline-block; overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap; line-height:45px; font-size:15px; color:#606060} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent ul li a.del {position:absolute; right:3px; top:0; width:43px; height:43px; font-size:0; text-indent:-9999em; background:url(/images/content/bg-delete-all.png) center no-repeat} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent .delete-all {position:absolute; right:30px; top:31px; padding-left:15px; font-weight:bold; color:#8e9397; background:url(/images/content/bg-delete-all.png) 0 center no-repeat} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recent .bx-nodata {padding:80px 0 0; border-bottom:none} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm:after {content:""; display:block; clear:both} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm .tit {float:none; border-bottom:1px solid #ececec} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm ul {float:left; width:50%; margin-top:20px; padding-left:10px} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm ul li {position:relative; padding-left:10px} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm ul li ~ li {margin-top:21px} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm ul li:after {content:""; position:absolute; left:0; top:6px; width:3px; height:3px; border-radius:3px; background:#b2b2b2} #header #gnb > div > ul > li.search > div.sub div.inner .rel-keywords .cont.recomm ul li a {display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; line-height:1.26em; font-size:15px; color:#606060} #header #gnbMobile {display:none} #header.main .area-logo {position:relative; height:180px; padding:0} /* #header.main .area-logo:after {content:""; position:absolute; left:50%; bottom:0; width:442px; height:48px; margin-left:-230px; background:url(/images/common/bg-main-home.png) center no-repeat} */ #header.main .area-logo .logo {position:absolute; left:50%; top:50%; width:182px; height:41px; margin:-20px 0 0 -91px; background-image:url(/images/common/logo-ycloud-main.png)} #header.main .area-logo .logo-bottom {display:block; position:absolute; left:0; bottom:0; width:100%; height:auto;} #header.main .area-logo .main-top-left{display:block; position:absolute; float: left; left:0; bottom: 0;} #header.main .area-logo .main-top-right{display:block; position:absolute; float: right; right:0; bottom: 0;} #header.main .area-logo .bookmark, #header.main .area-logo .menu {top:30px} #container {width:1200px; margin:0 auto} #footer {width:1200px; height:243px; margin:0 auto} #footer .links {position:relative; padding:22px 0 19px; text-align:center; border:1px solid #e0e0e0; background:#f2f2f3} #footer .links ul {display:inline-block} #footer .links ul.m {display:none} #footer .links ul:after {content:""; display:block; clear:both} #footer .links ul li {float:left} #footer .links ul li ~ li {position:relative; margin-left:50px} #footer .links ul li ~ li:after {content:""; position:absolute; left:-25px; top:50%; width:3px; height:3px; margin-top:-1px; border-radius:3px; background:#5b5b5b} #footer .links ul li a {font-size:14px; color:#464646} #footer .links .rel-sites {position:absolute; right:14px; top:50%; margin-top:-16px} #footer .info {padding-top:31px; text-align:center} #footer .info .logo {display:inline-block; width:47px; height:24px; font-size:0; text-indent:-9999em; background:url(/images/common/logo.png) center no-repeat; background-size:contain} #footer .info > p {line-height:1.5em; padding-top:17px; font-size:13px; color:#8c8c8c} #footer .info > p > span {display:block; line-height:1.5em; letter-spacing:0} #footer .info > span.copy {display:block; line-height:1.5em; font-size:13px; color:#8c8c8c}