@charset "utf-8"; /* 서브 비주얼 영역 */ /* #sub_visual {position:relative; margin-top:80px; overflow:hidden} #sub_visual ul {position:relative; overflow:hidden} #sub_visual ul li {position:absolute; top:0; left:0; height:300px; z-index:5} #sub_visual ul li.active {position:relative; z-index:30} #sub_visual ul li img {display:block; width:100%; height:100%} */ #sub_visual {position:relative; margin-top:80px; overflow:hidden} #sub_visual .subTit { position:absolute; top:0; left:0} #sub_visual > .imgList {position:relative; height:300px} #sub_visual > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual > .imgList > li > img {display:block; width:100%} #sub_visual > .imgList > li.active {z-index:10} #sub_visual > .imgList > li.active-last {z-index:8} #sub_visual > .imgList > li.item1 {background:url(../../img/sub_visual1.jpg) center top no-repeat} #sub_visual > .imgList > li.item2 {background:url(../../img/sub_visual2.jpg) center top no-repeat} #sub_visual > .imgList > li.item3 {background:url(../../img/sub_visual3.jpg) center top no-repeat} #sub_visual2 {position:relative; margin-top:80px; overflow:hidden} #sub_visual2 > .imgList {position:relative; height:300px} #sub_visual2 > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual2 > .imgList > li > img {display:block; width:100%} #sub_visual2 > .imgList > li.active {z-index:10} #sub_visual2 > .imgList > li.active-last {z-index:8} #sub_visual2 > .imgList > li.item1 {background:url(../../img/sub_visual21.jpg) center top no-repeat} #sub_visual2 > .imgList > li.item2 {background:url(../../img/sub_visual22.jpg) center top no-repeat} #sub_visual2 > .imgList > li.item3 {background:url(../../img/sub_visual23.jpg) center top no-repeat} #sub_visual3 {position:relative; margin-top:80px; overflow:hidden} #sub_visual3 > .imgList {position:relative; height:300px} #sub_visual3 > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual3 > .imgList > li > img {display:block; width:100%} #sub_visual3 > .imgList > li.active {z-index:10} #sub_visual3 > .imgList > li.active-last {z-index:8} #sub_visual3 > .imgList > li.item1 {background:url(../../img/sub_visual31.jpg) center top no-repeat} #sub_visual3 > .imgList > li.item2 {background:url(../../img/sub_visual32.jpg) center top no-repeat} #sub_visual3 > .imgList > li.item3 {background:url(../../img/sub_visual33.jpg) center top no-repeat} #sub_visual4 {position:relative; margin-top:80px; overflow:hidden} #sub_visual4 > .imgList {position:relative; height:300px} #sub_visual4 > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual4 > .imgList > li > img {display:block; width:100%} #sub_visual4 > .imgList > li.active {z-index:10} #sub_visual4 > .imgList > li.active-last {z-index:8} #sub_visual4 > .imgList > li.item1 {background:url(../../img/sub_visual41.jpg) center top no-repeat} #sub_visual4 > .imgList > li.item2 {background:url(../../img/sub_visual42.jpg) center top no-repeat} #sub_visual4 > .imgList > li.item3 {background:url(../../img/sub_visual43.jpg) center top no-repeat} #sub_visual5 {position:relative; margin-top:80px; overflow:hidden} #sub_visual5 > .imgList {position:relative; height:300px} #sub_visual5 > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual5 > .imgList > li > img {display:block; width:100%} #sub_visual5 > .imgList > li.active {z-index:10} #sub_visual5 > .imgList > li.active-last {z-index:8} #sub_visual5 > .imgList > li.item1 {background:url(../../img/sub_visual51.jpg) center top no-repeat} #sub_visual5 > .imgList > li.item2 {background:url(../../img/sub_visual52.jpg) center top no-repeat} #sub_visual5 > .imgList > li.item3 {background:url(../../img/sub_visual53.jpg) center top no-repeat} #sub_visual6 {position:relative; margin-top:80px; overflow:hidden} #sub_visual6 > .imgList {position:relative; height:300px} #sub_visual6 > .imgList > li {position:absolute; top:0; left:0; width:100%; height:300px; background-size:cover !important; z-index:5} #sub_visual6 > .imgList > li > img {display:block; width:100%} #sub_visual6 > .imgList > li.active {z-index:10} #sub_visual6 > .imgList > li.active-last {z-index:8} #sub_visual6 > .imgList > li.item1 {background:url(../../img/sub_visual61.jpg) center top no-repeat} #sub_visual6 > .imgList > li.item2 {background:url(../../img/sub_visual62.jpg) center top no-repeat} #sub_visual6 > .imgList > li.item3 {background:url(../../img/sub_visual63.jpg) center top no-repeat} /* 로케이션 영역 */ #container .location_bar {height:60px; border-bottom:1px solid #e6e6e6; background:#fff} #container .location_bar .inner {max-width:1400px; margin:0 auto; padding:0 50px; text-align:right} #container .location_bar .inner ul {text-align:right} #container .location_bar .inner ul li {display:inline-block; color:#888; line-height:60px} #container .location_bar .inner ul li.divider {margin:0 5px} #container .location_bar .inner ul li.current {color:#333} /* 컨텐츠 영역 레이아웃 */ #container > .inner:before {position:absolute; top:0; left:0; content:''; border-left:1px solid #e6e6e6; width:1px; height:100%} #container > .inner {position:relative; max-width:1300px; margin:0 auto} #container > .inner:after {clear:both; display:block; content:''; position:absolute; top:0; right:0; border-right:1px solid #e6e6e6; width:1px; height:100%} #container > .inner .content:before {position:absolute; top:0; left:0; content:''; border-left:1px solid #e6e6e6; width:1px; height:100%} #container > .inner .content {position:relative; margin-left:250px; min-height:500px; padding:50px} /* 좌측 서브메뉴 */ #leftBar {float:left; width:250px; margin-top:-60px} #leftBar .title {height:160px; padding:20px; background:#303d58; margin-left:1px;} #leftBar .title h2 {display:inline-block; font-size:20px; font-weight:600; color:#fff} #leftBar .title span {font-size:12px; font-weight:600; margin-left:10px; color:#fff} #leftBar a.dropdown {display:none} #lnb li {border-bottom:1px dotted #dcdcdc} #lnb li.on a {color:#fff; background:#18b295} #lnb li:hover a {color:#fff; text-decoration:underline; background:#18b295} #lnb li a {display:block; padding:10px 20px} #leftBar .box {padding:20px; border-bottom:1px dotted #dcdcdc; background:#f1f3f2} #leftBar .box h4 {font-size:16px; font-weight:400; color:#333; line-height:1.1; margin-bottom:10px} #leftBar .box p {color:#666} #leftBar .box p span {font-size:16px; font-weight:600; color:#444} /* 컨텐츠 내부 공통 */ #container > .inner img.img_tab, #container > .inner img.img_mob {display:none !important} #container .inner .content .title {margin-bottom:40px} #container .inner .content .title h2 {font-size:35px; font-weight:600; color:#333; line-height:1.2; margin-bottom:15px} #container .inner .content .title p {font-size:14px; color:#888; line-height:1.6} #container .inner .content h3.sub_tit {font-size:22px; font-weight:400; line-height:1.2; color:#555; margin-bottom:30px} /* COMPANY - 회사소개 */ .content .greeting .grt_tit {margin-bottom:60px} .content .greeting .grt_tit h3 {font-size:22px; font-weight:600; color:#444; line-height:1.2; margin-bottom:20px} .content .greeting ul.teamList {text-align:justify; margin-bottom:60px} .content .greeting ul.teamList:after {display:inline-block; width:100%; content:''} .content .greeting ul.teamList > li {display:inline-block; width:30%; vertical-align:top} .content .greeting ul.teamList > li .info {margin-bottom:30px} .content .greeting ul.teamList > li .info h4 {font-size:18px; font-weight:600; color:#555; line-height:1.1} .content .greeting ul.teamList > li .info span {font-size:12px; color:#888} .content .greeting ul.teamList > li .info ul {margin-top:20px} .content .greeting ul.teamList > li .info ul li {color:#666} .content .greeting ul.teamList > li .info ul li:before {display:inline-block; width:2px; height:2px; content:''; margin-right:5px; background:#ccc; vertical-align:middle} .content .greeting ul.teamList > li .imgArea {width:80%; margin:0 auto; border-radius:50%; overflow:hidden} .content .greeting .info_box {margin-top:30px} .content .greeting .info_box dl {margin:0; overflow:hidden; font-size:0.9rem} .content .greeting .info_box dl dt {display:block; float:left; width:12%; padding:8px 0; font-weight:600; color:#444; border-bottom:1px dotted #ccc} .content .greeting .info_box dl dd {display:block; margin-left:15%; padding:8px 0; color:#666; border-bottom:1px dotted #ccc} .content .greeting .info_box a { font-size:0.95rem} /* COMPANY - 연혁 */ .content .history .history_box {margin-bottom:60px} .content .history .history_box:after {clear:both; display:block; content:''} .content .history .history_box .his_tit {margin-bottom:30px; padding-bottom:15px; border-bottom:2px solid #aaa} .content .history .history_box .his_tit span {font-size:20px; color:#888} .content .history .history_box .his_tit h3 {font-size:24px; font-weight:600; color:#444; line-height:1} .content .history .history_box .left {float:left; width:45%} .content .history .history_box .left p {color:#666; margin-bottom:25px; text-align:justify} .content .history .history_box .right {float:right; width:50%} .content .history .history_box .right dl {clear:both; margin:0 0 20px 0; overflow:hidden} .content .history .history_box .right dl dt {float:left; width:60px; font-size:24px; font-weight:600; color:#444} .content .history .history_box .right dl dd {margin-left:80px; line-height:2; color:#666} /* COMPANY - 찾아오시는 길 */ #map {position:relative; height:400px; margin-bottom:30px; overflow:hidden} .content .map_box {padding:30px; background:#f6f6f6} .content .map_box ul.map_info li {color:#666} .content .map_box ul.map_info li:before {display:inline-block; width:3px; height:3px; margin-right:5px; content:''; background:#aaa; vertical-align:4px} /* BUSINESS - 사업안내 */ .content .business ul.typeList {text-align:justify; margin-bottom:60px} .content .business ul.typeList:after {display:inline-block; width:100%; content:''} .content .business ul.typeList li {display:inline-block; width:23%; vertical-align:top} .content .business ul.typeList .imgArea {margin-bottom:25px; overflow:hidden} .content .business ul.typeList .info h4 {font-size:18px; font-weight:400; color:#444; line-height:1; margin-bottom:15px} .content .business ul.typeList .info p {color:#666} .content .business ul.processList {text-align:justify; margin-bottom:20px} .content .business ul.processList:after {display:inline-block; width:100%; content:''} .content .business ul.processList li {display:inline-block; width:31%} .content .business ul.processList .imgArea {margin-bottom:20px; overflow:hidden} .content .business ul.processList .info {padding:10px 15px; background:#ebebeb} .content .business ul.processList .info.color {background:#555} .content .business ul.processList .info.color span {color:#fff} .content .business ul.processList .info span {font-size:15px; color:#555} /* BUSINESS - 사업영역 */ .content .business .area_wrap {text-align:justify; overflow:hidden} .content .business .area_wrap:after {display:inline-block; width:100%; content:''} .content .business .area_wrap > .area_box {display:inline-block; width:49.5%; margin-bottom:20px; vertical-align:top} .content .business .area_wrap > .area_box .imgArea {overflow:hidden} .content .business .area_wrap > .area_box .info {padding:30px; min-height:260px; background:#efefef} .content .business .area_wrap > .area_box .info h4 {font-size:24px; font-weight:400; color:#444; line-height:1; margin-bottom:40px} /* 미디어 쿼리 */ @media screen and (max-width:1024px) { /* 서브 비주얼 영역 */ #sub_visual > .imgList {height:300px} #sub_visual2 > .imgList {height:300px} #sub_visual3 > .imgList {height:300px} #sub_visual4 > .imgList {height:300px} #sub_visual5 > .imgList {height:300px} #sub_visual6 > .imgList {height:300px} #sub_visual2 > .imgList > li {height:300px} #sub_visual3 > .imgList > li {height:300px} #sub_visual4 > .imgList > li {height:300px} #sub_visual5 > .imgList > li {height:300px} #sub_visual6 > .imgList > li {height:300px} /* 서브 공통 레이아웃 */ #container .location_bar {display:none} #container > .inner {border:none} #leftBar {float:none; width:100%; margin:0; border-bottom:1px solid #dcdcdc} #leftBar:after {clear:both; display:block; content:''} #leftBar .title {float:left; width:18%; height:60px; padding:0; text-align:center} #leftBar .title h2 {display:none} #leftBar .title span {font-size:18px; margin:0; line-height:60px} #leftBar .box {display:none} #lnb {margin-left:18%; height:100%} #lnb li {position:relative; float:left; height:100%; border-bottom:none; border-right:1px solid #dcdcdc} #lnb li a {display:inline-block; padding:0 12px; height:100%; line-height:60px} #lnb li.on a:after {position:absolute; bottom:-18px; left:50%; margin-left:-9px; content:''; border-style:solid; border-width:9px; border-color:transparent; border-top-color:#18b295} #container > .inner .content {margin:0; min-height:auto} /* COMPANY - 회사소개 */ .content .greeting .grt_tit p br {display:none} .content .greeting ul.teamList > li .info ul li {font-size:12px} .content .greeting ul.teamList > li .info span {font-size:11px} .content .greeting ul.teamList > li .imgArea {width:70%} /* BUSINESS - 사업안내 */ .content .business > p br {display:none} .content .business ul.typeList li {width:48%; margin-bottom:40px} .content .business ul.typeList li .imgArea {max-height:250px} .content .business ul.typeList li .imgArea img {margin-top:-20%} .content .business ul.processList .info span {font-size:13px} /* BUSINESS - 사업영역 */ .content .business .area_wrap > .area_box .info {min-height:280px} } @media screen and (max-width:768px) { #leftBar .title {width:18%; padding:0; text-align:center} #lnb li a { padding:0 10px; } #lnb {margin-left:18%; } } @media screen and (max-width:640px) { #container > .inner .content:before {content:''; border-left:0} /* 서브 비주얼 영역 */ #sub_visual > .imgList {height:200px} #sub_visual2 > .imgList {height:200px} #sub_visual3 > .imgList {height:200px} #sub_visual4 > .imgList {height:200px} #sub_visual5 > .imgList {height:200px} #sub_visual > .imgList > li {height:200px} #sub_visual2 > .imgList > li {height:200px} #sub_visual3 > .imgList > li {height:200px} #sub_visual4 > .imgList > li {height:200px} #sub_visual5 > .imgList > li {height:200px} /* 서브 공통 레이아웃 */ #container > .inner {padding:0 20px} #container > .inner .content {padding:0 0 50px 0; border:none} #leftBar {position:relative; padding:30px 0 0 0; border:none; overflow:visible; z-index:50} #leftBar .title {display:none} #leftBar a.dropdown {position:relative; display:block !important; margin-bottom:30px; padding:13px 15px; color:#fff; background:#555} #leftBar a.dropdown:after {position:absolute; top:50%; right:15px; width:0; height:0; margin-top:-3px; content:''; border-style:solid; border-width:6px; border-color:transparent; border-top-color:#fff} #leftBar a.dropdown.open:after {margin-top:-9px; border-top-color:transparent; border-bottom-color:#fff} #lnb {display:none; position:absolute; left:0; top:77px; width:100%; height:auto; margin-left:0; border-top:1px solid #f0f0f0; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.2)} #lnb li {float:none; height:auto !important; border:none} #lnb li a {display:block; padding:13px 15px; line-height:1; color:#a1a1a1; border-bottom:1px solid #f0f0f0} #lnb li:hover a {color:#181818; text-decoration:none; background:none} #lnb li.on a {color:#181818; background:none} #lnb li.on a span {border-bottom:1px solid #181818} #lnb li.on a:after {display:none} #container .inner .content h3.sub_tit {font-size:16px; font-weight:600} #container .inner .content .title h2 {font-size:24px} #container > .inner img.img_mob {display:block !important} #container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important} /* COMPANY - 회사소개 */ .content .greeting .grt_tit h3 {font-size:16px} .content .greeting ul.teamList > li {width:100%; margin-bottom:30px; padding-top:30px; text-align:center; border-top:1px solid #e6e6e6} .content .greeting ul.teamList > li:first-child {border-top:none} .content .greeting ul.teamList > li .imgArea {width:160px} .content .greeting .info_box dl {border-bottom:1px dotted #ccc} .content .greeting .info_box dl dt {width:20%; border:none} .content .greeting .info_box dl dd {margin-left:25%; border:none} /* COMPANY - 연혁 */ .content .history .history_box .his_tit span {font-size:14px} .content .history .history_box .his_tit h3 {font-size:18px; margin-top:5px} .content .history .history_box .left {float:none; width:100%; margin-bottom:40px} .content .history .history_box .left p {font-size:12px} .content .history .history_box .right {margin-left:none; width:100%} .content .history .history_box .right dl {margin:15px 0; padding:15px 0 0 0; border-top:1px solid #e6e6e6} .content .history .history_box .right dl:first-child {border-top:none} .content .history .history_box .right dl dt {width:45px; font-size:18px} .content .history .history_box .right dl dd {margin-left:60px; font-size:12px} /* COMPANY - 찾아오시는 길 */ #map {height:350px} .content .map_box ul.map_info li {font-size:12px} /* BUSINESS - 사업안내 */ .content .business ul.typeList li {width:100%} .content .business ul.typeList .info h4 {font-size:15px} .content .business ul.typeList li .imgArea {max-height:initial} .content .business ul.typeList li .imgArea img {margin-top:0} .content .business ul.processList li {width:100%; margin-bottom:40px} .content .business ul.processList li:last-child {margin-bottom:0} /* BUSINESS - 사업영역 */ .content .business .area_wrap > .area_box {width:100%; margin-bottom:15px} .content .business .area_wrap > .area_box .info {min-height:initial; padding:20px} .content .business .area_wrap > .area_box .info h4 {font-size:15px; font-weight:600; margin-bottom:20px} .content .business .area_wrap > .area_box .info p {font-size:12px} } /* 교육부서 */ .eduTime { width:100%; float:left;margin-bottom:50px} .eduTime .eduTB01 { float:left; width:26%; background:#8062b2 url(../../img/edu/t_bar.png) center 110px no-repeat; text-align:center; height:262px; color:#fff; padding-top:60px;} .eduTime .eduTB01 span { font-size:20px; line-height:120%; display:inline-block; padding-top:50px; letter-spacing:-0.05em } .eduTime .eduTB01 span i {display:block} .eduTime .eduTB01R { float:left; width:74%} h4.subT {font-size:1.5rem; font-weight:bold } h4.subT span {font-size:1.2rem; font-weight:bold } .text-cont {font-size:0.92rem; color:#555} .text-cont strong {font-size:1.1rem;} .eduImg {width:100%} .eduImg img {width:100%;border:1px solid #fff; } .eduSubj { width:100%; border-bottom:0.5px solid #ddd;} .eduSubj li { width:100%; border:1px solid #ddd; border-bottom:none; padding:30px; vertical-align:middle} .eduSubj li span { display:inline-block; width:86px; height:86px; line-height:86px;vertical-align:middle; text-align:center; background:#f39b00; color:#fff; font-size:1.0rem; border-radius:50%} .eduSubj li:nth-child(2) span { background:#a8bd27} .eduSubj li:nth-child(3) span { background:#33aebb} .eduSubj li em { display:inline-block;vertical-align:middle; padding-left:30px; font-size:0.95rem; line-height:150%; } .eduSubj li:first-child em { color:#8062b2; font-size:1.1rem} .eduSubjLine { border:1px solid #ddd; border-bottom:none; } .eduSubj2 {display:table;position:relative;width:100%;text-align:center; } .eduSubj2 span { display:inline-block; width:86px; height:86px; line-height:86px; margin:20px 0; text-align:center; background:#f39b00; color:#fff; font-size:1.0rem; border-radius:50%;} .eduSubj2 span.gree {background:#a8bd27} .eduSubj2 span.purp {background:#33aebb} .eduSubj2 p {display:table-cell;vertical-align:middle;height:126px;padding:20px 0; text-align:left;} .eduSubj2 em {display:block; font-size:0.95rem; line-height:150%; } .eduSubj2 em.txtPur { color:#8062b2; font-size:1.2rem} .eduSubj2 em.txtBlue { color:#f38900; font-size:1.2rem} .eduTable { width:100%; border:1px solid #ddd; border-bottom:none} .eduTable th { background:#f4f4f4; border-bottom:1px solid #ddd; width:25%; font-weight:normal; text-align:center; padding:14px 0} .eduTable td { border-bottom:1px solid #ddd; padding:14px 3%;width:75%} .eduTable td span { display:inline-block; width:20%} .eduTable2 { width:100%; border:1px solid #ddd; border-bottom:none} .eduTable2 th { background:#f4f4f4; border-bottom:1px solid #ddd; width:25%; font-weight:normal; text-align:center; padding:19px 0} .eduTable2 td { border-bottom:1px solid #ddd; padding:19px 3%;width:75%} .eduTable2 td span { display:inline-block; width:20%} .eduTable3 { width:100%; border:1px solid #ddd; border-bottom:none;} .eduTable3 th { background:#f4f4f4; border-bottom:1px solid #ddd; border-right:1px solid #ddd; font-weight:normal; text-align:center; padding:14px 0} .eduTable3 td { border-bottom:1px solid #ddd; padding:14px 3%; border-right:1px solid #ddd; text-align:center; } .eduTable3 td span { display:inline-block; width:20%} p.bigText::first-letter { font-size:1.4rem; color:#18b295} .eduSns { background:#3ec729 url(../../img/edu/link.png) 90% 48% no-repeat; color:#fff !important; padding:10px 50px; border-radius:30px; margin-left:10px} .eduOlist { list-style: decimal; font-size:0.95rem; padding-left:15px; margin-top:20px; margin-bottom:10px} .eduOlist li {margin-bottom:5px} .eduPot { width:100%;} .eduPot table {width:100%; text-align:center; } .eduPot table th { padding : 10px 0;border:1px solid #aaa; background:#555; color:#fff} .eduPot table td { padding : 10px 0;border:1px solid #ddd;} .eduPot2 { width:100%;} .eduPot2 table {width:100%; text-align:center; } .eduPot2 table th { padding : 10px 0;border:1px solid #aaa; background:#555; color:#fff} .eduPot2 table td { padding : 10px 0;border:1px solid #ddd;} ul.kids01 { width:100%; float:left; border-top:1px solid #ddd;border-left:1px solid #ddd;} ul.kids01 li { width:50%; float:left; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:100px 0 20px 0; text-align:center;font-size:1.3em} ul.kids01 li span {font-size:1.6em; font-weight:bold; display:block} ul.kids01 li:first-child { background:url(../../img/edu/ico_kids_01.gif) 50% 20px no-repeat;} ul.kids01 li:last-child {background:url(../../img/edu/ico_kids_02.gif) 50% 20px no-repeat;} @media screen and (max-width:992px) { .eduTime .eduTB01 { width:100%; height:auto;padding-top:20px;padding-bottom:20px; background:#8062b2 url(../../img/edu/t_bar.png) center 60px no-repeat; } .eduTime .eduTB01 span { padding-top:15px; font-size:18px;} .eduTime .eduTB01 span i {display:inherit; padding-left:15px} .eduTime .eduTB01R { width:100%; } .eduTime .eduTB01R img {width:100%} .eduTable, .eduTable2 { margin-bottom:30px} .eduTable3{ margin-bottom:40px} .eduSubj li em { width:700px;} .eduSubj2 {text-align:left; padding-left:30px; padding-right:30px;} .eduSubj2 span { width:120px; height:30px; line-height:30px; border-radius:30px; margin-bottom:10px; } .eduSubj2 p {height:auto;padding:10px 0 20px 0} } @media screen and (max-width:800px) { ul.kids01 li { width:50%; float:left; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:100px 0 20px 0; text-align:center;font-size:1.1em} } @media screen and (max-width:768px) { .eduSubj li { padding:20px; } .eduSubj li span { width:120px; height:30px; line-height:30px; border-radius:30px; margin-bottom:10px} .eduSubj li em { display:block; padding-left:0px;width:100%;} } @media screen and (max-width:640px) { .eduTime .eduTB01 {background:#8062b2 url(../../img/edu/t_bar.png) center 40px no-repeat; padding-top:15px; padding-bottom:15px; } .eduTime .eduTB01 h3 { font-size:18px;} .eduTime .eduTB01 span { padding-top:10px; font-size:14px;} h4.subT {font-size:1.2rem; font-weight:bold } .eduSns {display:block; margin-left:0px; text-align:center; padding:10px 0; margin-bottom:10px } ul.kids01 li { width:100%; float:left; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:20px 20px 20px 120px; text-align:left;font-size:1.1em} ul.kids01 li:first-child { background:url(../../img/edu/ico_kids_01.gif) 20px 50% no-repeat;} ul.kids01 li:last-child {background:url(../../img/edu/ico_kids_02.gif) 20px 50% no-repeat;} } @media screen and (max-width:480px) { .eduPot { width:100%; overflow-x:scroll;} .eduPot table { width:440px;} ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:vertical { width: 12px; } ::-webkit-scrollbar:horizontal { height: 12px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; } ul.kids01 li i { display:block} }