/* #header */ .dim {display:block; position:fixed; top:0; left:0; z-index:199; width:100%; height:100%; background:rgba(0,0,0,0.6)} #header {position:relative; z-index:200; padding:0 20px;} #header .inner {margin:0 auto; max-width:100%; width:1760px; height:80px} #header .inner:after {display:block; content:""; clear:both} #header .inner > h1 {position:relative; z-index:100; margin-top:19px; float:left} #header .inner > h1 a {display:block; width:134px; height:42px; text-indent:-9999px; background:url("../images/han-logo.png") no-repeat center; background-size:100% 100%} #header .inner .btnSOpen {display:block; position:relative; z-index:101; margin-top:25px; float:right; width:28px; height:28px; text-indent:-9999px; background:url("../images/icon-search_b.png") no-repeat center; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s} #header .inner .btnSOpen.on {background:url("../images/icon-close_b.png") no-repeat center} #header .inner .btnMenu {display:none} #header .inner .searchWrap {display:none; position:absolute; top:0; left:0; width:100%; z-index:100; padding:20px 270px; border-top:1px solid #ddd; width:100%; background:#fff} #header .inner .searchWrap .inBox {position:relative; margin:0 auto; max-width:100%; width:1160px} #header .inner .searchWrap .inBox input {padding:0 60px 0 18px; border:0; border-bottom:1px solid #333; width:100%; height:40px; font-size:18px; font-weight:500; color:#666; line-height: 38px;} #header .inner .searchWrap .inBox .btnSearch {display:block; position:absolute; top:2px; right:2px; width:38px; height:38px; text-indent:-9999px; background:url("../images/icon-search_b.png") no-repeat center} #header.active {position: fixed; top:0;} #header.active .inner > h1 a {background:url(../images/han-logo-w.png) no-repeat center; background-size: 100%;} #header.active .btnSOpen {position: fixed; right:20px; background:url(../images/icon-search-w.png) no-repeat center;} #gnb {position:absolute; top:0; left:0; z-index:1; overflow:hidden; width:100%; height:auto; background:#fafafa; border-bottom:1px solid #ddd;} #gnb:before {display:block; content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:80px; background:#fff} #gnb .inBox {position:relative; margin:0 auto; padding:0 150px; max-width:100%; width:1760px} #gnb .inBox h1 {display:none} #gnb .inBox .btnClose {display:none} #gnb .inBox .btnLang {position:absolute; top:25px; right:50px; padding:0 11px 0 30px; border:1px solid #666; line-height:28px; font-size:15px; font-weight:500; font-family:'noto'; color:#000; background:url("../images/icon-global.png") no-repeat 10px center} #gnb .inBox > ul {position:relative; margin:0 auto; max-width:100%; width:1160px; padding:0 20px;} #gnb .inBox > ul:after {display:block; content:""; clear:both} #gnb .inBox > ul:before {display:block; content:""; position:absolute; top:80px; left:-150%; width:300%; height:1px; background:#ddd} #gnb .inBox > ul > li {float:left; width:16.666666%} #gnb .inBox > ul > li > a {display:inline-block; margin:26px 0 28px 23px; line-height:26px; font-size:18px; color:#000; font-family:'noto', sans-serif; font-weight: 600;} #gnb .inBox > ul > li:hover > a {position: relative; color:#20a494} #gnb .inBox > ul > li > a:hover::after{content:""; position: absolute; left:0; bottom:-30px; width:100%; height:4px; background: #20a494;} #gnb .inBox > ul > li > div {display:none} #gnb .inBox > ul > li > div > ul {margin:30px 0; padding:0 10px 0 25px; font-family:'noto'; font-weight: 500;} #gnb .inBox > ul > li > div > ul:before {display:block; content:""; position:absolute; top:110px; left:0; bottom:30px; border-left:1px solid #ddd} #gnb .inBox > ul > li:nth-child(1) > div > ul:before {left:0} #gnb .inBox > ul > li:nth-child(2) > div > ul:before {left:16.6666%} #gnb .inBox > ul > li:nth-child(3) > div > ul:before {left:33.3333%} #gnb .inBox > ul > li:nth-child(4) > div > ul:before {left:49.9999%} #gnb .inBox > ul > li:nth-child(5) > div > ul:before {left:66.6666%} #gnb .inBox > ul > li:nth-child(6) > div > ul:before {left:83.3333%} #gnb .inBox > ul > li > div > ul > li + li {margin-top:15px} #gnb .inBox > ul > li > div > ul > li > a {display:inline-block; line-height:20px; font-size:15px; letter-spacing:-0.03em; color:#474747} #gnb .inBox > ul > li > div > ul > li > a:hover {color:#20a494} #gnb .inBox > ul > li > div > ul > li.more > a {position:relative; padding-right:18px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s} #gnb .inBox > ul > li > div > ul > li.more > a:before {display:block; content:""; position:absolute; top:4px; right:0; width:10px; height:10px; background:url("../images/icon-plus.png") no-repeat center; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s} #gnb .inBox > ul > li > div > ul > li.more.on > a {color:#20a494;} #gnb .inBox > ul > li > div > ul > li.more.on > a:before {background:url("../images/icon-miner.png") no-repeat center} #gnb .inBox > ul > li > div > ul > li ul {display:none} #gnb .inBox > ul > li > div > ul > li ul li {margin-top:10px} #gnb .inBox > ul > li > div > ul > li ul li a {display:inline-block; position:relative; padding-left:10px; line-height:20px; font-size:14px; letter-spacing:-0.03em; color:#888} #gnb .inBox > ul > li > div > ul > li ul li a:before {display:block; content:""; position:absolute; top:9px; left:3px; width:2px; height:2px; background:#a1a1a1} #gnb.active {position: fixed; top:0;} #gnb.active:before {background:#20a494;} #gnb.active .inBox > ul > li > a {color:#fff;} #gnb.active .inBox .btnLang {border:1px solid #fff; background:url(../images/icon-global-w.png) no-repeat 10px center; color:#fff;} #gnb.active .inBox > ul > li > a:hover::after {background: #fff;} /* #footer */ #footer {position: relative; border-top:1px solid #ddd; background: #fff; font-size:14px; z-index: 100;} #footer .linkArea {position: relative; padding:5px 20px; width:1160px; margin:0 auto;} #footer .linkArea .privacy {color:#20a494} #footer .linkArea .fl {position: relative; padding:10px 0;} #footer .linkArea .fl a {position: relative; padding:0 15px} #footer .linkArea .fl a:after{content: ""; position: absolute; top:50%; right:0; width:1px; height:14px; transform: translateY(-50%); background: #afafaf} #footer .linkArea .fl a:last-child:after {display: none} #footer .linkArea .fl a:first-child {padding:0; padding-right:15px} #footer .linkArea .fr > div {display: inline-block;} #footer .linkArea .fr > a {display: inline-block; margin-right:20px; vertical-align: middle} #footer .linkArea .fr > .linkBtn {padding:5px 10px; background:#20a494; color:#fff;} #footer .linkArea .fr a img {display: block} #footer .linkArea .fr .familyLink > span {display: block; position: relative; padding-left:10px; width:155px; height:35px; line-height: 35px; border:1px solid #ccc; background:#f5f5f5 url(../images/small-arrow_down.png) no-repeat 95% center; cursor: pointer} #footer .linkArea .fr .familyLink .familyList {display: none; position: absolute; left:0; bottom:33px; width:100%; border:1px solid #ccc; background: #ccc} #footer .linkArea .fr .familyLink .familyList li a {display: block; padding:0 7px; font-size:13px; background: #fff} #footer .linkArea .fr .familyLink .familyList li a:hover {color:#20a494} #footer .linkArea .fr .familyLink.on .familyList {display: block} #footer .linkArea .fr .familyLink.on > span {background: #f5f5f5 url(../images/small-arrow_up.png) no-repeat 95% center} #footer .copyRightArea {position: relative; padding:17px 0; vertical-align: middle; border-top:1px solid #ccc} #footer .copyRightArea .mainFrame > div{display: inline-block; line-height: 1.8; vertical-align: top;} #footer .copyRightArea .copyright{margin-left:2%;} #footer .copyRightArea .copyright span {display:inline-block; position: relative; padding:0 5px} #footer .copyRightArea .copyright span:after {content:""; position: absolute; top:50%; right:0; width:2px; height:15px; background: #ccc; transform: translateY(-50%)} #footer .copyRightArea .copyright span:first-child{display: block;} #footer .copyRightArea .copyright span:first-child::after{display: none;} #footer .copyRightArea .copyright .last {display: block} #footer .copyRightArea .copyright span:nth-child(4):after, #footer .copyRightArea .copyright .last:after {display: none} #footer .copyRightArea .slideArea {overflow: hidden; float: right; width:200px} #footer .copyRightArea .slideArea .footerSlide {position: relative; width:200px} #footer .copyRightArea .slideArea .footerSlide img {display: block; width:180px; margin:0 auto} #footer .copyRightArea .slideArea .footerSlide .swiper-button-next:after, #footer .copyRightArea .slideArea .footerSlide .swiper-container-rtl .swiper-button-prev:after, #footer .copyRightArea .slideArea .footerSlide .swiper-button-prev:after, #footer .copyRightArea .slideArea .footerSlide .swiper-container-rtl .swiper-button-next:after {display: none} #footer .copyRightArea .slideArea .footerSlide .swiper-button-prev {left:0; right:auto; width:6px; height: 9px; background: url(../images/small-left-arrow.png)} #footer .copyRightArea .slideArea .footerSlide .swiper-button-next {left:auto; right:0; width:6px; height: 9px; background: url(../images/small-right-arrow.png)} #footer .copyRightArea .slideArea .footerSlide .swiper-button-next, #footer .copyRightArea .slideArea .footerSlide .swiper-button-prev{margin-top:0; transform: translateY(-50%);} @media all and (max-width:1180px){ #gnb .inBox > ul > li > a:hover::after{display: none;} #footer .linkArea, .mainFrame{width:100%;} #footer .linkArea .fl{width:60%;} #footer .linkArea .fr > .linkBtn {float:left; margin:10px 0;} #footer .copyRightArea .mainFrame{vertical-align: middle;} #footer .copyRightArea .mainFrame > .copyright{width:80%;} #footer .copyRightArea .copyright .last{display: inline-block; padding:0;} #footer .copyRightArea .mainFrame > .slideArea{position: absolute; top:0; right:0;} } @media all and (max-width:1024px){ #footer .copyRightArea .mainFrame > .slideArea{display: none;} } @media all and (max-width:767px){ #footer .linkArea{padding:0 10px 40px;} #footer .linkArea .fl, #footer .linkArea .fr{float:none; width:100%;} #footer .linkArea .fl{display: flex; justify-content: space-around; border-bottom:1px solid #ddd;} #footer .linkArea .fl a::after{display: none;} #footer .linkArea .fl a:first-child{padding-right: 0;} #footer .linkArea .fr > a{float: right; margin: 0; padding:10px 0; font-size:14px;} #footer .linkArea .fr > .familyLink{position: absolute; left:10px; right:0; bottom:5px; width:94.5%;} #footer .linkArea .fr .familyLink > span {width:100%;} #footer .copyRightArea .copyright span{display: block; padding:0;} #footer .copyRightArea .copyright span:after{display: none;} #footer .copyRightArea .mainFrame > .copyright{width:60%;} #footer .copyRightArea .mainFrame > .copyright span:first-child::after{display: none;} #footer .copyRightArea .slideArea .footerSlide{display: none;} } @media all and (max-width:500px){ #footer .linkArea .fl a{font-size:12px; padding:0 1%;} #footer .linkArea .fl a:first-child {letter-spacing: -0.5px;} #footer .copyRightArea .copyright span{display: block; padding:0; font-size:13px;} #footer .copyRightArea .copyright span:after{display: none;} #footer .copyRightArea .mainFrame > .copyright{width:100%;} } @media all and (min-width:1161px){ #gnb {display:block !important; height:auto !important} } @media all and (max-width:1180px){ /* menu */ #header {padding:0 16px; border-bottom:1px solid #ddd; background:#fff} #header .inner {height:60px} #header .inner > h1 {margin-top:13px} #header .inner > h1 a {width:105px; height:33px} #header .inner .btnSOpen {margin:0; position:absolute; top:0; right:47px; float:none; width:41px; height:60px; background:url("../images/icon-search-m.png") no-repeat center; background-size:21px auto} #header .inner .btnSOpen.on {background:url("../images/icon-close_b-m.png") no-repeat center; background-size:19px} #header .inner .btnMenu {display:block; position:absolute; top:0; right:6px; width:41px; height:60px; text-indent:-9999px; background:url("../images/icon-m_menu.png") no-repeat center; background-size:21px auto} #header .inner .searchWrap {display:none; top:0; padding:10px;} #header .inner .searchWrap .inBox input {padding:0 55px 0 15px; height:40px; font-size:17px; background:#fff} #header .inner .searchWrap .inBox .btnSearch {top:0; right:0;} #header.active {background:#20a494;} #header.active .inner > h1 a {width:116px; height:42px;} #header.active .inner .btnSOpen {position:fixed; top:0; background:url("../images/icon-search-w.png") no-repeat center; } #header.active .inner .btnMenu {position:fixed; top:0; background:url("../images/icon-m_menu-w.png") no-repeat center; background-size: 21px auto;} #header.active .inner .btnSOpen.on {background: url(../images/icon-close_b-m) no-repeat center;} #header.active .inner .searchWrap {position: fixed; width:100%;} #gnb {opacity:0; position:fixed; top:0; left:inherit; right:-100%; z-index:-1; height:100%; background:#fff; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; transform:translateX(100%)} #gnb.on {z-index: 999; opacity:1; transform:translateX(0); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s;} #gnb:before {display:none} #gnb:after {display:block; content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:60px; background:#20a494} #gnb .inBox {position:static; margin:0 auto; padding:0; font-family:"noto";} #gnb .inBox:before {display:block; content:""; z-index:-1; position:absolute; top:60px; left:0; bottom:0; width:130px; height:100%; background:#eaeaea} #gnb .inBox h1 {display:block; float:left} #gnb .inBox h1 a {display:block; width:52px; height:60px; text-indent:-9999px; background:url("../images/icon-home.png") no-repeat center; background-size:20px auto} #gnb .inBox .btnClose {display:block; float:right; width:52px; height:60px; text-indent:-9999px; background:url("../images/icon-close-m.png") no-repeat center; background-size:20px auto} #gnb .inBox .btnLang {position:static; padding:0; margin-left:5px; float:left; border:none; line-height:60px; font-size:15px; color:#fff; background:none} #gnb .inBox > ul {position:absolute; top:60px; bottom:0; left:0; z-index:1; overflow-y:auto; padding-left:162px} #gnb .inBox > ul:before {display:none} #gnb .inBox > ul > li {float:none; width:100%} #gnb .inBox > ul > li > a {display:block; margin:0; position:fixed!important; top:0; left:32px; width:98px; opacity:0; line-height:30px; font-size:18px; color:#999; font-family:'noto', sans-serif;} #gnb .inBox > ul > li.curr > a {color:#1a9b8b; transition-delay: 0.5s;} #gnb .inBox > ul > li.curr > a:before {display:block; content:""; position:absolute; top:13px; right:0; width:18px; height:3px; background:#1a9b8b} #gnb .inBox > ul > li:nth-child(1) > a {top:84px; transition-delay:0.25s; -webkit-transition-delay:0.25s; -moz-transition-delay:0.25s} #gnb .inBox > ul > li:nth-child(2) > a {top:144px; transition-delay:0.3s; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s} #gnb .inBox > ul > li:nth-child(3) > a {top:204px; transition-delay:0.35s; -webkit-transition-delay:0.35s; -moz-transition-delay:0.35s} #gnb .inBox > ul > li:nth-child(4) > a {top:264px; transition-delay:0.4s; -webkit-transition-delay:0.4s; -moz-transition-delay:0.4s} #gnb .inBox > ul > li:nth-child(5) > a {top:324px; transition-delay:0.45s; -webkit-transition-delay:0.45s; -moz-transition-delay:0.45s} #gnb .inBox > ul > li:nth-child(6) > a {top:384px; transition-delay:0.5s; -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s} #gnb .inBox > ul > li > div {display:none !important} #gnb .inBox > ul > li.curr > div {display:block !important} #gnb .inBox > ul > li > div > ul {margin:24px 0; padding:0} #gnb .inBox > ul > li > div > ul:before {display:none} #gnb .inBox > ul > li > div > ul > li > a {display:block; line-height:30px; font-size:15px; letter-spacing:-0.05em; color:#222} #gnb .inBox > ul > li > div > ul > li.more > a {padding-right:18px} #gnb .inBox > ul > li > div > ul > li.more.on > a {color:#222} #gnb .inBox > ul > li > div > ul > li.more > a:before {top:10px; right:30px} #gnb .inBox > ul > li > div > ul > li ul li {margin-top:10px} #gnb .inBox > ul > li > div > ul > li ul li a {line-height:18px; letter-spacing:-0.05em} #gnb .inBox > ul > li > div > ul > li ul li a:before {display:block; content:""; position:absolute; top:9px; left:3px; width:2px; height:2px; background:#a1a1a1} #gnb .inBox > ul > li > div > ul > li ul li.curr a {color:#20a494} #gnb .inBox > ul > li > div > ul > li ul li.curr a:before {background:#20a494} #gnb.on {opacity:1; right:0} #gnb.on .inBox > ul > li > a {opacity:1} #gnb.active .inBox .btnLang {border: none; background: none;} #gnb.active .inBox > ul > li > a {color:#333;} } @media all and (max-width:500px){ #gnb .inBox > ul > li > a{font-size:16px; } #gnb .inBox > ul > li > div > ul > li.more > a{padding-right: 0;} #gnb .inBox > ul > li > div > ul > li.more > a:before{right:0;} } /* 서브페이지 */ #subPage {overflow: hidden; background: #f5f5f5} #subPage select {-ms-appearance: none; -webkit-appearance: none; appearance: none; background: #fff url(../images/icon-arrow.png) no-repeat 95% center;} #subPage select, #subPage input[type="text"], #subPage input[type="password"] {width:100%; height:100%; padding-left:13px; font-size: 15px; color:#444;} #subPage .contentPage {position: relative; width:1160px; padding:0 20px; margin:auto} #subPage .subContent {padding:0 60px 80px; background: #fff; } .normalTitle{display: block; margin-bottom:28px; font-size:22px; color:#333; } @media all and (max-width:1180px){ #subPage{background: #fff;} #subPage .contentPage{width:100%; padding:0;} #subPage .subContent{padding:0 30px 40px;} .comNav{display: none;} .normalTitle {margin:10px 0;} } /* 상단 네비게이션 */ .comNav {position: relative; width:100%; height:45px; line-height: 45px; } .comNav::before {content: ""; position: absolute; bottom:0; left:-1000px; right:-1000px;height:1px; background: #e2e2e2} .comNav > div {float: left; border-right:1px solid #e2e2e2} .comNav .homeLink {border-left:1px solid #e2e2e2;width:45px} .comNav .homeLink a {display: block; text-indent: -9999px; background: url(../images/icon-home_sub.png) no-repeat center} .comNav .selectbox {width:160px;} #subPage .comNav .selectbox select {width:100%; border:0; background: #f5f5f5 url(../images/icon-arrow.png) no-repeat 95% center} /* 타이틀 영역 */ .titleArea {position: relative; padding:50px 0; font-family:"noto"; font-weight: 500;} .titleArea h2 {text-align: center; font-size:36px; color:#222;} .titleArea a {position: absolute; top:50%;width:13px; height:22px; padding:10px; transform: translateY(-50%)} .titleArea .leftArrow {left:0; background: url(../images/left-arrow.png) no-repeat center} .titleArea .rightArrow {right:0; background: url(../images/right-arrow.png) no-repeat center} @media all and (max-width:1180px){ .titleArea{padding:30px 0;} .titleArea h2{font-size:30px;} } @media all and (max-width:500px){ .titleArea{padding:25px 0;} .titleArea h2{font-size:21px;} } /* 서브페이지 타이틀 및 박스 */ .subTitleArea{position: relative; margin-top:50px;} .subTitleArea:first-child{margin-top:0;} .subTitleArea .subTitle{overflow: hidden;} .subTitleArea .subTitle span{display: block; width:100%; font-size:22px; color:#222; font-weight: 600;} .subTitleArea .subTitle .hana{font-family:"noto";} .subTitleArea .subTitle .hana strong{color:#20a494} .subTitleArea .subTitle .fl{width:30%; font-size:22px; color:#222; font-weight: 600;} .subTitleArea .subTitle .fr{width:70%; font-size:16px; color:inherit; font-weight: 500; line-height: 32px;} .subTitleArea .subTitle ul{margin: 40px 0 50px;} .subTitleArea .subTitle ul li{position: relative; padding-left:10px;} .subTitleArea .subTitle ul li::before{content:""; position: absolute; top:50%; left:0; width:4px; height: 4px; border-radius: 50%; background: #20a494; transform: translateY(-50%);} .subTitleArea .subTitle .ask{display: inline-block; width: auto!important; padding:5px 15px 5px 35px; text-align: right; font-size:14px!important; background:#f7f7f7 url(../images/intro/telephone.png) no-repeat 10px center; font-weight: bold;} .subTitleArea .contentBox{position: relative; overflow: hidden; margin-top:30px;} .subTitleArea .contentBox strong{color:#333; font-weight: bold;} .subTitleArea .contentBox.v2 strong {line-height:45px; font-size:25px} .subTitleArea .contentBox.v2 strong + p {margin-top:8px} .subTitleArea .contentBox.v2 ul {margin-top:15px} .subTitleArea .contentBox.v2 ul li strong {line-height:26px; font-size:16px} .subTitleArea .contentBox.v2 .listArea + strong {display:block; margin-top:70px} .subTitleArea .contentBox.v2 .listArea .title strong {font-size:15px} .subTitleArea .contentBox.v2 .listArea .btmTxt strong {line-height:26px; font-size:15px} .subTitleArea .contentBox.v2 .btnArea {margin-bottom:60px !important} .subTitleArea .contentBox.v2 .videoArea + p {margin:8px auto; width:686px} @media all and (max-width:1180px){ .subTitleArea{margin-top:30px;} .subTitleArea .contentBox{margin-top:20px;} .subTitleArea .subTitle span{font-size:18px;} .subTitleArea .subTitle .hana strong{display: inline-block; font-size:18px;} } @media all and (max-width:767px){ .subTitleArea .subTitle .fl{width:100%; font-size:20px;} .subTitleArea .subTitle .fl br{display:none;} .subTitleArea .subTitle .fr{width:100%; font-size:14px; line-height: 1.8;} .subTitleArea .subTitle ul{margin:20px 0 0;} } @media all and (max-width: 500px){ .subTitleArea .subTitle .fl{font-size:18px;} .subTitleArea .subTitle span {font-size:18px;} .subTitleArea .subTitle .ask{display: block; width:100%!important; padding:5px 2px 5px 15px; font-size:12px!important; text-align:center; letter-spacing: -1px;} .subTitleArea .subTitle .hana strong {display: block;} } /* 서브 타이블 부분 */ .subTxtArea {position: relative; overflow: hidden; margin-top:40px;} .subTxtArea .leftTxt {float: left; width:30%;} .subTxtArea .leftTxt span{display: block;} .subTxtArea .leftTxt .title {font-size:26px; font-family:"noto"; color:#222; font-weight:600} .subTxtArea .leftTxt .subTitle {font-size:20px; color:#20a494;} .subTxtArea .rightTxt {float: right; width:70%;} .subTxtArea .rightTxt p {text-align: justify} .subTxtArea .rightTxt p + p {margin-top:20px;} .subTxtArea .rightTxt .list{text-align: left; line-height: 1.8;} .subTxtArea .rightTxt .list + .list{margin-top:20px;} .subTxtArea .rightTxt .list li{padding-left:20px; text-indent: -20px;} .subTxtArea .rightTxt .list li:first-child{color:#222; font-weight:bold;} .subTxtArea .rightTxt .list li:nth-child(2){margin-top:5px;} @media all and (max-width:1180px){ .subTxtArea{margin-top:30px;} } @media all and (max-width:767px){ .subTxtArea .leftTxt{float:none; width:100%;} .subTxtArea .leftTxt .title{font-size:20px;} .subTxtArea .leftTxt .subTitle{font-size:18px;} .subTxtArea .rightTxt{float:none; width:100%; margin-top:25px;} .subTxtArea .rightTxt p{font-size:14px;} } /* 탭영역 */ .topTabArea{overflow: hidden; border:1px solid #ddd; font-weight: 500; background: #f8f8f8;} .topTabArea.v2 > button {width:calc(100% / 2 - 0.01px);} .topTabArea.v3 > button {width:calc(100% / 3 - 0.01px);} .topTabArea.v4 > button {width:calc(100% / 4 - 0.01px);} .topTabArea.v5 > button {width:calc(100% / 5 - 0.01px) ;} .topTabArea > button {float: left; display: block; height:55px; line-height: 55px; text-align: center; border-left:1px solid #ddd; color: rgba(87,87,87,0.7); cursor: pointer} .topTabArea > button:hover, .topTabArea > button.on {color:#fff; background: #414952;} .resultTab{margin-top:80px;} .resultTab .view{display:none;} .resultTab .view.on{display: block;} .resultTab .brochureArea{width:100%; height:1200px;} .resultTab .brochureArea .moblieArea{display: none;} .resultTab .brochureArea .moblieArea img {display: block; width:100%;} @media all and (max-width:1180px){ .resultTab{margin-top:50px} } @media all and (max-width:767px){ .resultTab{margin-top:30px} .resultTab .brochureArea{width:100%; height:640px;} .topTabArea > button{font-size:14px;} } /* 회색버튼 */ .bgGray{margin-top: 30px; background: #fafafa;} .bgGray .btnArea{padding:30px 0;} @media all and (max-width:767px){ .bgGray{margin-top:15px;} .bgGray .btnArea{padding:15px 0;} } /* 빈영역 */ .blankBox{overflow: hidden; padding:40px; margin-top:30px; border:1px solid #ddd;} .blankBox .circle li{position: relative; padding-left:15px; color:#222; line-height:1.8} .blankBox .circle li:before{content:""; position: absolute; left:0; top:13px; width:4px; height:4px; border-radius:50%; background:#222; } .blankBox .circle li span{color:#ec577d; font-weight:bold;} .blankBox .number{margin-top:30px; line-height: 1.8;} .blankBox + .blankBox li{margin-top:20px;} .blankBox p{line-height: 1.8;} .blankBox strong{color:#333;} .blankBox p span{display: block;} .blankBox .indent{padding-left:10px; text-indent: -10px;} @media all and (max-width:767px){ .blankBox{padding:20px;} } @media all and (max-width:500px){ .blankBox{padding:10px;} .blankBox + .blankBox li{margin-top:10px;} } /* 아코디언 */ .accordionArea{position: relative; margin-top:45px;} .accordionArea .topArea{overflow: hidden;} .accordionArea .topArea strong{color:#222;} .accordionArea .topArea button{background: none; cursor: pointer;} .accordionArea .contentList{margin-top:10px; border-top:2px solid #222;} .accordionArea .contentList .txtBox > div{position: relative; padding:15px 40px 15px 115px;} .accordionArea .contentList .txtBox .icon{position: absolute; left:60px; } .accordionArea .contentList .txtBox .questionBox{border-bottom:2px solid #ddd; background: #fff url(../images/small-arrow_down.png) no-repeat 98% center; cursor: pointer;} .accordionArea .contentList .txtBox .questionBox.up{background: #fff url(../images/small-arrow_up.png) no-repeat 98% center;} .accordionArea .contentList .txtBox .questionBox .icon{top:50%; transform: translateY(-50%);} .accordionArea .contentList .txtBox .questionBox span{display: block;} .accordionArea .contentList .txtBox .questionBox span.fl{ overflow: hidden; width:100%; white-space: nowrap; text-overflow: ellipsis;} .accordionArea .contentList .txtBox .answerBox{display: none; background: #fafafa;} .accordionArea .contentList .txtBox .answerBox p{text-align: justify; line-height: 1.8;} .accordionArea .contentList .txtBox .answerBox p span {display: block; width:100%;} .accordionArea .contentList .txtBox .answerBox .link{display: inline-block; padding-right:18px; margin-top:10px; background:url(../images/infor/icon-window-g.png) no-repeat right center; color:#20a494; font-size:14px;} @media all and (max-width: 500px){ .accordionArea .contentList .txtBox > div{padding:15px 40px 15px 60px; } .accordionArea .contentList .txtBox .icon{left:4%;} } /* 검색영역 */ .searchArea {padding:20px 115px; background:#f4f4f4; } .searchArea > div {display: inline-block} .searchArea .selectBox {width:18.5%; height:45px;} .searchArea .selectBox select {background:#fff url(../images/icon-arrow.png) no-repeat 95% center!important} .searchArea .inputBox {position: relative; width: 80%; height:45px;} .searchArea .inputBox input[type="text"] {padding-right:45px; } .searchArea.v2 .inputBox {width:100%;} .searchArea .inputBox .btn {position: absolute; right:0; border:0; width:45px; height:45px; background: #414952; cursor: pointer;} .searchArea .inputBox .btn.search {background:#414952 url(../images/icon-search_w.png) no-repeat center;} .searchArea .check input[type="checkbox"] + label{padding-left:30px;} .searchArea .check input[type="checkbox"] + label::before{left:0;} @media all and (max-width:1180px) { .searchArea{padding: 20px 16px;} } @media all and (max-width:767px){ .searchArea{margin:15px 0;} .searchArea .selectBox {width:40%;} .searchArea .inputBox {width:59%;} .searchArea.v3 .inputBox{width:70%;} } @media all and (max-width:500px){ .searchArea .selectBox {width:32%;} .searchArea .selectBox select {font-size:14px!important;} .searchArea .inputBox {width:66%;} .searchArea.v3 .inputBox{width:100%;} .searchArea .check input[type="checkbox"] + label{margin-top:10px;} .check input[type="checkbox"]{display: none;} } /* @media all and (max-width:380px) { .searchArea .selectBox{width:100%; height:40px;} .searchArea .inputBox{width:100%; height:40px; margin-top:5px; } .searchArea .inputBox .btn{width:40px; height:40px;} } */ /* 보존기간 텍스트 */ .rightTxt {display: block; text-align: right;} .rightTxt > span {display: inline-block; vertical-align: middle} .rightTxt .star {position: relative; padding-left:10px} .rightTxt .star::before {content: "*"; position: absolute; top:50%; left:0; color:#20a494; transform: translateY(-35%);} /* 종이접힌 효과 */ .paperArea{overflow: hidden; position: relative;} .paperArea .paperBox{float: left; position: relative; width:calc(100% / 3 - 24px); height:430px; margin-right:3.5%; border:1px solid #ddd;} .paperArea .paperBox::before {content:''; display:block; position:absolute; top:-1px; right:-1px;; background:#fff; border-width:30px 30px 0 0; border-style:solid; border-color:transparent #fafafa transparent; z-index: 10; transform: rotate(90deg); box-shadow: 1px 1px 1px #ddd;} .paperArea .paperBox:last-child{margin-right:0;} .paperArea .paperBox span{display: block;} .paperArea .paperBox .topArea{position: relative; height:120px; background: #fafafa; text-align: center;} .paperArea .paperBox .topArea:after{content:""; position: absolute; top:-1px; right:-13px; width:85px; height: 1px; background: #ddd; z-index: 10; transform: rotate(45deg);} .paperArea .paperBox .topArea .number{position: absolute; top:15px; left:15px; font-size:20px; color:#20a494;} .paperArea .paperBox .topArea .titleBox{position: absolute; top:50%; left:50%; width:100%; transform: translate(-50%, -30%);} .paperArea .paperBox .topArea .titleBox span{color:#222; font-size:18px; font-weight: bold;} .paperArea .paperBox .topArea .titleBox .green{color:#20a494} .paperArea .paperBox .topArea .titleBox .sub{color:inherit; font-size:15px; color:#666;} .paperArea .paperBox .btmArea{padding:30px 18px;} .paperArea .paperBox .btmArea ul{line-height: 1.8;} .paperArea .paperBox .btmArea ul li{position: relative; padding-left:10px; font-size:14px; text-align: justify; letter-spacing: -1px;} .paperArea .paperBox .btmArea ul li:before{content:""; position: absolute; top:12px; left:0; width:4px; height:4px; border-radius: 50%; background: #20a494;} @media all and (max-width:767px){ .paperArea .paperBox .topArea{overflow: hidden; height: 100px;} .paperArea .paperBox{float:none; width:100%; height:auto; margin-bottom: 10px;} .paperArea .paperBox .topArea .number{font-size:18px;} .paperArea .paperBox .topArea .titleBox span{font-size:16px;} .paperArea .paperBox .topArea .titleBox .sub{font-size:13px;} .paperArea .paperBox .btmArea{padding:20px 15px;} .paperArea .paperBox .btmArea ul li{font-size:13px;} .paperArea .paperBox .btmArea ul li:before{top:9px;} } /* 갤러리 및 뉴스 영역 */ .galleryArea{position: relative; margin-top: 25px;} .galleryArea:after{clear: both; content: ""; display: block;} .galleryArea .galleryBoxList{position: relative; margin-top:8px; padding-bottom:90px; border-top:2px solid #333} .galleryArea .galleryBoxList > div{overflow: hidden;} .galleryArea .galleryBoxList .box{float: left; padding-top:15px; width:32.65%; min-height:369px; margin-right:1%; cursor: pointer;} .galleryArea .galleryBoxList .box:nth-child(3n){margin-right:0;} .galleryArea .galleryBoxList .box .conBox{position: relative; width:100%; height: 200px} .galleryArea .galleryBoxList .box .conBox img{opacity: 0;} .galleryArea .galleryBoxList .box .boxTxt{margin-top:25px; width:100%} .galleryArea .galleryBoxList .box .boxTxt .boxTitle{display: block; overflow: hidden; width:100%; font-size:20px; color:#333; font-family:"noto"; font-weight: bold; text-overflow: ellipsis; white-space: nowrap} .galleryArea .galleryBoxList .box .boxTxt P{padding:10px 0;} .galleryArea .galleryBoxList .box .boxTxt .date{display: block; padding-left:20px; color:#888; background: url(../images/icon-calendar.png) no-repeat left center} .galleryArea .addArrow{position: absolute; bottom:-30px; left:50%; width:110px; height: 25px; padding-bottom:60px; background: url(../images/notice/galleryArrow.png) no-repeat center; text-align: center; transform: translateX(-50%); cursor: pointer;} @media all and (max-width:1180px){ .galleryArea .galleryBoxList .box .conBox{height:auto;} .galleryArea .galleryBoxList .box .boxTxt .boxTitle{font-size:18px;} } @media all and (max-width:767px){ .galleryArea .galleryBoxList .box{width:49%; padding-top:10px;} .galleryArea .galleryBoxList .box:nth-child(2n){float:right; margin-right:0;} .galleryArea .galleryBoxList .box:nth-child(3n){margin-right:1%;} } @media all and (max-width:500px){ .galleryArea .galleryBoxList .box .conBox {height:200px;} .galleryArea .galleryBoxList .box{float:none; width:100%; margin:0; margin-bottom: 20px;} .galleryArea .galleryBoxList .box .boxTxt{margin-top:15px;} .galleryArea .galleryBoxList .box:nth-child(2n){float: none;} .galleryArea .galleryBoxList .box:nth-child(3n){margin-right:0;} } /* 테이블영역 */ .tableArea {position: relative; overflow: hidden; margin-top:25px;} .tableArea .table {position:relative; width:100%; margin-top:10px; table-layout: fixed;} .tableArea .table table {border-collapse: collapse; border-top:2px solid #222;} .tableArea .table table th {padding:22px 0; color:#333} .tableArea .table table tbody {border-top:1px solid #ccc} .tableArea .table table tbody tr.reply td:nth-child(2){ padding-left:20px; background: url(../images/infor/replyArrow.png) no-repeat 0 25px;} .tableArea .table table tbody tr:last-child{border-bottom:1px solid #ccc;} .tableArea .table table tbody td {padding:25px 0; border-bottom:1px solid #ccc; text-align: center;} .tableArea .table table tbody td .alert{padding:5px 15px; background:#f25871; color:#fff;} .tableArea .table table tbody td a {display: block} .tableArea .table table tbody td .leftTxt {text-align: left} .tableArea .table table tbody td.fileDownArea{position: relative;} .tableArea .table table tbody td.fileDownArea .counting{position: absolute; bottom:10px; min-width:25px; padding:5px 7px; background: #707070; color:#fff; border-radius: 50%; font-size:12px;} .tableArea.v3 table{border-top:2px solid #333;} .tableArea.v3 table th, .tableArea.v3 table td{padding:5px 0 5px 10px; text-align: left; border-bottom: 1px solid #ddd;} .tableArea.v3 table th{background:#f4f4f4;} .tableArea.v3 .input{height:45px;} /* 기본 테이블영역 */ .basicTable{overflow: hidden; position:relative; width:100%; max-width:100%; border-top:2px solid #222; table-layout:fixed} .basicTable table .hidden{visibility: hidden; } .basicTable .rightTxt{display: block; width:100%; text-align: right; font-size:14px;} .basicTable table{width:100%; table-layout:fixed} .basicTable table .title{color:#222;} .basicTable table th{background: #f8f8f8;} .basicTable table th, .basicTable table td{padding:10px 0; border-bottom:1px solid #ccc; } .basicTable table tr:nth-child(2) th{border-left:1px solid #ccc; font-size:14px;} .basicTable table td{font-size:14px; text-align: center; border-left:1px solid #ccc;} .basicTable table tr:nth-child(2) th:first-child, .basicTable table td:first-child{border-left:0;} .basicTable.v2 table th{border-left:1px solid #ccc; color:#222;} .basicTable.v2 table th:first-child{border-left:0;} @media all and (max-width:500px) { .tableScroll table{width:750px!important;} .basicTable .moblieScroll {display: block;} .tableArea .table table tbody td, .tableArea .table table th {padding:10px 0;} .tableArea .table table tbody td:nth-child(1) {width:40px;} .tableArea .table table tbody td:nth-child(3) {width:80px;} .tableArea .table table tbody td.fileDownArea .counting {display: none;} } /* 페이징영역 */ .pagingArea {margin:30px 0; text-align: center;} .pagingArea > a {display: inline-block; margin:0 15px; padding-top:5px} .pagingArea > a:hover, .pagingArea > a.on{border-bottom:2px solid #20a494; font-weight: bold; color:#20a494} .pagingArea > a.txt {margin:0; width:31px; height:31px; text-indent: -9999px} .pagingArea > a.txt:hover, .pagingArea > a.txt.on{border-bottom:0;} .pagingArea > a.first {background: url(../images/paging-first.jpg) no-repeat center; background-size: cover} .pagingArea > a.first:hover {background: url(../images/paging-first_on.jpg) no-repeat center; background-size: cover} .pagingArea > a.prev {margin-right:20px; background: url(../images/paging-prev.jpg) no-repeat center; background-size: cover} .pagingArea > a.prev:hover {background: url(../images/paging-prev_on.jpg) no-repeat center; background-size: cover} .pagingArea > a.next {margin-left:20px; background: url(../images/paging-next.jpg) no-repeat center; background-size: cover} .pagingArea > a.next:hover {background: url(../images/paging-next_on.jpg) no-repeat center; background-size: cover} .pagingArea > a.last {background: url(../images/paging-last.jpg) no-repeat center; background-size: cover;} .pagingArea > a.last:hover {background: url(../images/paging-last_on.jpg) no-repeat center; background-size: cover} @media all and (max-width:767px){ .pagingArea{margin:15px 0;} .pagingArea > a{margin:0 1.5%; background-size: contain;} .pagingArea > a.txt{width:25px; height:25px;} .pagingArea > a.prev{margin-right:1%;} .pagingArea > a.next{margin-left:1%;} } /* 상세페이지 텍스트 */ .detailArea .topArea {padding:22px 11px; border-top:2px solid #333; border-bottom: 1px solid #ddd;} .detailArea .topArea .txtArea {overflow: hidden} .detailArea .topArea .txtArea .title {display: block; width:90%; font-size:30px; color:#333; text-align: justify;} .detailArea .topArea .txtArea .shareArea{margin-top:8px;} .detailArea .topArea .txtArea .shareArea a {display: inline-block; height: 24px; text-indent: -9999px} .detailArea .topArea .txtArea .shareArea .print {width:26px; background: url(../images/icon-print.png) no-repeat center} .detailArea .topArea .txtArea .shareArea .linkCopy {width:26px; margin-right:5px; background:url(../images/icon-copy.png) no-repeat center} .detailArea .topArea .infoTxt {margin-top: 5px} .detailArea .topArea .infoTxt > span {display: inline-block; position: relative; padding-right:10px; margin-left:5px} .detailArea .topArea .infoTxt > span img{margin-right: 5px;} .detailArea .topArea .infoTxt > span:first-child {margin-left:0} .detailArea .topArea .infoTxt > span::after {content:""; position: absolute; top:50%; right:0; width:2px; height:14px; background:#ddd; transform: translateY(-50%)} .detailArea .topArea .infoTxt > span:last-child::after {display: none} /* .detailArea .topArea .infoTxt .name {background: url(../images/icon-name.png) no-repeat left center} .detailArea .topArea .infoTxt .date {background: url(../images/icon-calendar.png) no-repeat left center} .detailArea .topArea .infoTxt .look {background: url(../images/icon-look.png) no-repeat left center} */ .detailArea .btmArea {overflow: hidden; padding:10px 11px; border-bottom:1px solid #ddd} .detailArea .btmArea .fileName {margin-right:2%; padding-top:5px; width:6%; font-size:15px; color:#333} .detailArea .btmArea .fileList {overflow: hidden; width:92%} .detailArea .btmArea .fileList a {display: block; overflow: hidden; padding:7px 0 7px 30px; width:100%; text-overflow: ellipsis; white-space: nowrap} .detailArea .btmArea .fileList .hwp {background: url(../images/icon-hwp.png) no-repeat left center} .detailArea .btmArea .fileList .pdf {background: url(../images/icon-pdf.png) no-repeat left center} .detailArea .btmArea .fileList .xls {background: url(../images/icon-xls.png) no-repeat left center} .detailArea .btmArea .fileList .ppt {background: url(../images/icon-ppt.png) no-repeat left center} @media all and (max-width:1180px){ .detailArea .topArea .txtArea .title{font-size:28px;} } @media all and (max-width:767px){ .detailArea .topArea{position: relative; padding:11px 6px;} .detailArea .topArea .txtArea .title{width:100%; font-size:24px;} .detailArea .topArea .txtArea .shareArea{position: absolute; bottom:10px; right:10px;} .detailArea .btmArea .fileName{float: none; display:block; width:100%; margin:0; font-size: 16px; color:#333;} .detailArea .btmArea .fileList{float: none; width:100%; margin-top:10px; padding-left:10px;} } @media all and (max-width:500px){ .detailArea .topArea .txtArea .title {width:80%; font-size:20px;} .detailArea .topArea .infoTxt > span {font-size:12px;} .detailArea .btmArea .fileList {padding-left:0;} .detailArea .btmArea .fileList a {padding:7px 0;} .detailArea .topArea .txtArea .shareArea {bottom:auto; top:13px; right:0; margin-top:0;} } /* 상세페이지 글 내용영역 */ .detailTxtArea {padding:40px 11px; min-height: 250px;} .detailTxtArea .imgArea{margin-top:40px; padding:0 140px;} .detailTxtArea .imgArea img{opacity: 0;} .detailTxtArea .imgArea + .imgArea{margin-top:65px;} .detailTxtArea .imgArea span{display: block; margin-top:10px;} @media all and (max-width:1180px){ .detailTxtArea{padding:30px 5px;} .detailTxtArea img {width:100%;} } @media all and (max-width:500px) { .detailTxtArea {padding:0;} } /* 이전글 다음글 */ .upDownTxtArea {overflow: hidden; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} .upDownTxtArea > div {overflow: hidden} .upDownTxtArea span {display: block} .upDownTxtArea .txtBox.fl {display: block; padding:16px 42px; width: 20%; color:#333; text-align: center;} .upDownTxtArea .txtBox.fr {width:80%; text-align: right;} .upDownTxtArea .txtBox.fr a {display: block; padding:16px; text-align: left; } .upDownTxtArea .txtBox.fr a.none {color:#999; cursor: default; background: #fff} .upDownTxtArea .prev {border-bottom:1px solid #ccc} .upDownTxtArea .prev .txtBox.fl {background:#f4f4f4 url(../images/small-arrow_up.png) no-repeat 75% center} .upDownTxtArea .next .txtBox.fl {background:#f4f4f4 url(../images/small-arrow_down.png) no-repeat 75% center} @media all and (max-width:1180px){ .upDownTxtArea .txtBox.fl{padding: 16px 20px;} } @media all and (max-width:767px){ .upDownTxtArea .txtBox.fl{width:150px;} .upDownTxtArea .txtBox.fr{width:calc(100% - 150px);} .upDownTxtArea .txtBox.fr a{overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap;} } @media all and (max-width:500px){ .upDownTxtArea .txtBox.fl{width:100px;} .upDownTxtArea .txtBox.fr{width:calc(100% - 100px);} .upDownTxtArea .prev .txtBox.fl, .upDownTxtArea .next .txtBox.fl{background: #f4f4f4;} .upDownTxtArea .txtBox.fr a.none, .upDownTxtArea .txtBox.fl a.none {background: #fff} } /* 버튼 */ .btnArea {margin:30px 0; text-align: center;} .btnArea .btn {display: inline-block; padding:12px 45px 12px 30px; margin:0 10px; color:#fff; background:#414952} .btnArea .normal{padding:12px 40px;} .btnArea .main{padding:12px 40px; background: #20a494;} .btnArea .cancel{border:1px solid #20a494; background: none; color:#20a494;} .btnArea .down{background: #20a494 url(../images/icon-down.png) no-repeat 93% center;} .btnArea .window{background: #20a494 url(../images/icon-window.png) no-repeat 93% center;} @media all and (max-width:767px){ .btnArea{margin:15px 0;} .btnArea .btn{margin:0 1%;} .btnArea .main{padding:3% 4.5%;} } @media all and (max-width:500px){ .btnArea .btn{display: inline-block; width:auto; margin:20px auto 0;} .btnArea.v3 .btn {width:32%; background:#20a494;} .btnArea .down{background: #20a494;} .btnArea .window, .btnArea .down {background: #20a494;} } /* 레이어 */ .layerFrame{position: fixed; top:0; left:0; bottom:0; right:0; display:none; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; transition: 0.5s;} .layerFrame .layerArea{position: absolute; top:50%; left:50%; width:750px; padding:20px; border-top:4px solid #20a494; background: #fff; transform: translate(-50%, -50%);} .layerFrame .layerArea.main{transform: none;} .layerFrame .layerArea .topArea{margin-top:20px;} .layerFrame .layerArea .topArea span{display: block; font-size:14px;} .layerFrame .schedule .topArea .prev{width:30px; height:30px; margin:0 5px; background:url(../images/layer/leftArrow.jpg) no-repeat center; text-indent: -9999px; cursor: pointer;} .layerFrame .schedule .topArea .next{width:30px; height:30px; margin:0 5px; background:url(../images/layer/rightArrow.jpg) no-repeat center; text-indent: -9999px; cursor: pointer;} .layerFrame .layerArea .topArea .title{font-family:"noto"; font-size:24px; color:#222; font-weight:bold;} .layerFrame .layerArea .topArea .green{margin-top:20px; color:#20a494; margin-bottom:5px;} .layerFrame .layerArea .btmArea{overflow:hidden; margin-top:20px;} .layerFrame .layerArea .btmArea table{font-size:14px; border:1px solid #ddd; border-bottom:0;} .layerFrame .layerArea .btmArea table th{background: #f8f8f8; text-align: left;} .layerFrame .layerArea .btmArea table th, .layerFrame .layerArea .btmArea table td{padding:10px; border-bottom:1px solid #ddd;} .layerFrame .layerArea .btmArea table input[type="text"], .layerFrame .layerArea .btmArea table select{width:100%; padding-left:5px;} .layerFrame .layerArea .btmArea table .inputArea > div{display: inline-block;} .layerFrame .layerArea .btmArea table .inputArea .input{width:35%;} .layerFrame .layerArea .btmArea table .inputArea .select{width:25%} .layerFrame .layerArea .btmArea table .inputArea select {height:30px;} .layerFrame .layerArea .btmArea table textarea{min-height:200px; padding:10px;} .layerFrame .layerArea .btnArea{margin:0; margin-top:20px;} .layerFrame .layerArea .btnArea button{display:inline-block; width:100px; height:50px; cursor: pointer;} .layerFrame .layerArea .btnArea .cancel{border:1px solid #20a494; color:#20a494} .layerFrame .layerArea .btnArea .confirm{background:#20a494; color:#fff} .layerFrame .schedule{width:330px; padding:15px; border-top:4px solid #20a494;} .layerFrame .schedule .topArea{padding-bottom:10px; margin-top:0; border-bottom:1px solid #ddd;} .layerFrame .schedule .topArea span{display: inline-block; vertical-align: middle;} .layerFrame .schedule .topArea .title{font-size:21px;} .layerFrame .schedule .btmArea{padding:20px 0; margin-top:0; border-bottom:1px solid #ddd;} .layerFrame .schedule .dailyArea{overflow:auto; height:120px; max-height:120px;} .layerFrame .schedule .dailyArea .dailyTxt{overflow:hidden; position:relative; display: block; width:100%; padding-left:10px; text-overflow: ellipsis; white-space:nowrap; line-height:1.8; font-size:13px;} .layerFrame .schedule .dailyArea .dailyTxt:before{content:""; position: absolute; top:50%; left:0; width:5px; height:5px; border-radius: 50%; background: #ccc; transform:translateY(-50%)} .layerFrame .schedule button{position: absolute; top:20px; right:15px; width:20px; height:20px; background: url(../images/layer/close.png) no-repeat center; text-indent: -9999px; cursor: pointer;} /* 갤러리 */ .layerFrame .gallery{width:500px;} .layerFrame .gallery .title{text-align: center;} .layerFrame .gallery .btmArea img{width:100%;} .layerFrame .gallery .btmArea .swiper-slide{height:450px;} .layerFrame .gallery .btnArea .btn{padding:12px 45px;} .layerFrame .gallery .swiper-button-next:after, .layerFrame .gallery .swiper-button-prev:after{display: none;} .layerFrame .gallery .swiper-button-prev{width:16px; height:46px; background: url(../images/layer/gallery_left.png) no-repeat center; } .layerFrame .gallery .swiper-button-next{width:16px; height:46px; background: url(../images/layer/gallery_right.png) no-repeat center; } .layerFrame .tableArea{margin-top:0;} .layerFrame .layerArea .btmArea .tableArea table{border:0; border-top:2px solid #333;} .layerFrame .tableArea select{height:30px;} .layerFrame .tableArea .tel{display:flex; width:50%; justify-content: space-around; align-items: center;} .layerFrame .tableArea .tel > span{margin:0 1%;} .layerFrame .tableArea .w50{width:50%;} .layerFrame .tableArea span, .layerFrame .tableArea .input{display: inline-block; vertical-align: middle;} .layerFrame.v2 .layerArea{width:670px; height:auto; padding:0;border-bottom: 0;} .layerFrame.v2 .layerArea .topArea{width:100%; height:80px; margin-top:0; line-height: 80px; color:#fff; font-size:26px; background: #20a494; text-align: center;} .layerFrame.v2 .layerArea .topArea .title{color:#fff;} .layerFrame.v2 .btmArea{min-height:366px; margin-top:0; padding:47px 30px; border:2px solid #20a494;} .layerFrame.v2 .btmArea .subTitle{color:#333; font-size:22px; font-weight: bold;} .layerFrame.v2 .btmArea p{margin-top:30px; line-height: 26px;} .layerFrame.v2 .checkArea{position: absolute; bottom:0; left:0; display: flex; align-items: center; width:100%; height:30px; line-height: 30px; padding:0 30px; background: #333;} .layerFrame.v2 .checkArea label, .layerFrame.v2 .checkArea a{color:#fff; cursor: pointer; font-size:14px; font-weight: normal;} .layerFrame.v2 .checkArea label{padding-left:10px;} .layerFrame.v2 .checkArea .check input[type="checkbox"] + label::before{top:50%; left:-17px; width:15px; height:15px; transform: translateY(-50%); } .layerFrame.v2 .checkArea a{position: absolute; right:30px; top:50%; padding-right:20px; background: url(../images/icon-close.png) no-repeat right center; background-size: 12px; transform: translateY(-50%);} @media all and (max-width:767px) { .layerFrame .layerArea {overflow:auto; width:95%; height:400px;} .layerFrame .layerArea .btmArea table .inputArea .input {width:45.6%;} .layerFrame .layerArea .btmArea table .inputArea .select {width:100%; marign-top:10px;} } /* 이미지 영역 */ .imgArea {overflow: hidden; position: relative; margin-top:30px;} .imgArea .imgTxt{display: block;} .imgArea > div {width:49%;} .imgArea > .w100{width:100%;} .imgArea.flex{display: flex; align-items: center; justify-content: space-between;} .imgArea.flex > div{margin-right:40px;} .imgArea.flex > div:last-child{margin-right:0;} .imgArea.txt{margin:0 0 30px;} .imgArea.txt .imgTxt{margin-bottom:20px;} .imgArea.v4 > div {width: auto;} @media all and (max-width:500px) { .imgArea {margin-top:15px;} .imgArea.flex > div{margin-right:0;} .imgArea.v4 > div {float:none; width: 100%; margin:5px 0;} .layerFrame .gallery {overflow:auto; width:95%; height:auto;} .layerFrame .gallery .topArea {margin-top:0;} .layerFrame .gallery .topArea .title {font-size:20px;} .layerFrame .gallery .btmArea .swiper-slide {height: auto;} } /* 소개 */ #intro p {text-align: justify;} #intro .subTitleArea.video{width:100%; height:500px; margin:30px 0;} #intro .allSchollArea .txtArea {overflow: hidden;} #intro .allSchollArea .txtArea .fl{width:50%; } #intro .allSchollArea .txtArea .fl img{width:100%;} #intro .allSchollArea .txtArea .fr{width:48%;} #intro .allSchollArea .txtArea .fr p{line-height: 1.8;} #intro .allSchollArea .txtBoxArea {margin-top:80px;} #intro .allSchollArea .txtBoxArea > .txtTitle {font-family:"noto"; color:#20a494; font-size:26px; font-weight:bold;} #intro .allSchollArea .txtBoxArea .txtBox{padding: 40px 0;} #intro .allSchollArea .txtBoxArea .txtBox .title{font-size:22px;} #intro .allSchollArea .txtBoxArea .txtBox .title span{color:#222; font-family:'noto'; font-weight:550} #intro .allSchollArea .txtBoxArea .txtBox .title .green{margin-right: 10px; color:#20a494;} #intro .allSchollArea .txtBoxArea .txtBox p {margin-top:12px; line-height: 1.8; text-align: justify;} #intro .history {position: relative;} #intro .history span {display: block;} #intro .history .historyBox {padding:20px 0;} #intro .history .historyBox > span {display:block; position: relative; font-family:"noto"; font-size:40px; text-align: center; color:#222;} #intro .history .historyBox > span:after {content: ""; position: absolute; bottom:-20px; left:50%; width:9px; height:9px; border-radius: 50%; transform: translateX(-50%); background: #20a494;} #intro .history .historyBox .historyTxt {overflow: hidden; position: relative; margin-top:40px;} #intro .history .historyBox .historyTxt .imgBox{overflow: hidden; padding:0 35px;} #intro .history .historyBox .historyTxt .imgBox img{width:45%;} #intro .history .historyBox .historyTxt .imgBox + .imgBox{margin-top:10px;} #intro .history .historyBox .historyTxt::after {content: ""; position: absolute; top:0; left:50%; width:1px; height:100%; transform: translateX(-50%); background:#ccc;} #intro .history .historyBox .historyTxt .txtBox{width:45%} #intro .history .historyBox .historyTxt .txtBox ul li{color:#666;} #intro .history .historyBox .historyTxt .txtBox ul li + li {padding-top:20px;} #intro .history .historyBox .historyTxt .txtBox ul li span {display: inline-block;} #intro .history .historyBox .historyTxt .txtBox ul li .bold{margin-right:30px; color:#222; font-weight: bold;} #intro .history .historyBox.left .historyTxt .txtBox ul li .bold{margin:0; margin-left:30px;} #intro .history .historyBox .historyTxt .txtBox ul li .txt{color:#575757; letter-spacing: -1.5px;} #intro .history .historyBox .historyTxt .txtBox.fl{text-align: right;} #intro .history .historyBox .historyTxt .txtBox.fr li{text-align: left;} #intro .explianArea {overflow: hidden; position: relative; } #intro .explianArea .bold{font-weight: 550; color:#333; font-size:24px; line-height: 34px;} #intro .explianArea p{text-align: justify; margin-top:30px; line-height: 25px;} #intro .explianArea p:first-child{margin-top:0;} #intro .explianArea p span{font-size:15px;} #intro .explianArea > div > img.fl{margin-right:2%;} #intro .explianArea .ciTxt {display: block; padding-top:10px; font-size:26px; color:#20a494; line-height: normal;} #intro .explianArea .boldTxt {margin-top:25px;} #intro .explianArea .boldTxt > span {display: block; font-size:15px; color:#222; font-weight: bold;} #intro .explianArea .para{margin-top:50px;} #intro .explianArea .para p{font-size:15px; text-align: justify;} #intro .explianArea .para p + p{margin-top:35px;} #intro .explianArea .bgGreen{margin-top:30px; line-height: 1.8;} #intro .explianArea .bgGreen span{color:#fff; background:#20a494} #intro .explianArea .para .signature{display: block; margin-top:30px; padding:10px 0;} #intro .explianArea .para .signature img{margin-left:10px;} #intro .explianArea.v2{position: relative;} #intro .explianArea.v2 .leftArea{width:50%;} #intro .explianArea.v2 .rightArea{position: absolute; right:0; height: 100%;} #intro .explianArea.v2 .rightArea img{position: absolute; top:13%; right:0;} #intro .explianArea.v2 .boldTxt > span{font-size:26px;} #intro .visionArea{position: relative;} #intro .visionArea .visionTitle{padding:35px 60px; width:100%; background: url(../images/intro/vision-bg.jpg) no-repeat center;} #intro .visionArea .visionTitle > span{display: block; position: relative; font-family:"noto"; font-size: 26px; color:#222; font-weight: bold;} #intro .visionArea .visionTitle > span::after{content: ""; position: absolute; bottom:-30px; left:0; width:20px; height:2px; background: #20a494;} #intro .visionArea .visionTitle p{margin-top:55px; font-size:15px;} #intro .visionArea .visionTitle p span{display: block; line-height: 1.8;} #intro .visionArea .contentBox.v2{padding:75px 70px; border:1px solid #ddd} #intro .visionArea .contentBox .topArea{overflow: hidden;} #intro .visionArea .contentBox .topArea .fl{padding-top:30px; width:39%;} #intro .visionArea .contentBox .topArea .fl > span{font-family:"noto"; font-size:26px; color:#222; font-weight: bold; } #intro .visionArea .contentBox .topArea .fl p {margin-top:25px; font-size:15px; text-align: justify;} #intro .visionArea .contentBox .topArea .fr{width:55%;} #intro .visionArea .contentBox .topArea .fr .img{display: inline-block; width: calc(100% / 3 - 3px); text-align: center;} #intro .visionArea .contentBox .topArea .fr .img span{display: block; margin-top:20px; font-size:20px; font-family:"noto"; font-weight: bold;} #intro .visionArea .contentBox .topArea .fr .img:first-child span{color:#20a494} #intro .visionArea .contentBox .btmArea{position: relative; margin-top:140px; height:530px; background: url(../images/intro/vision-goal.png) no-repeat center;} #intro .visionArea .contentBox .btmArea .txt{position: absolute;} #intro .visionArea .contentBox .btmArea .txt span{display: block;} #intro .visionArea .contentBox .btmArea .txt .title{font-size:18px; color:#20a494; font-weight: bold;} #intro .visionArea .contentBox .btmArea .txt .subTxt{margin-top:5px; font-weight: normal; font-size:16px;} #intro .visionArea .contentBox .btmArea .txt span:nth-child(2){color:#222; font-weight:bold;} #intro .visionArea .contentBox .btmArea .one{top:-5%; left:57%;} #intro .visionArea .contentBox .btmArea .two{top:65%; right:0; transform: translateY(-50%);} #intro .visionArea .contentBox .btmArea .three{bottom:0; left:22%;} #intro .visionArea .contentBox .btmArea .four{top:43%; left:0; transform: translateY(-50%);} #intro .visionArea .developerArea .box{position: relative; float: left; width:30%; margin-right:50px; text-align: center;} #intro .visionArea .developerArea .box:last-child {margin-right: 0;} #intro .visionArea .developerArea .box:after {content: ""; position: absolute; right:-85px; top:50px; border:40px solid #e7e7e7; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; border-left-color: #e7e7e7;} #intro .visionArea .developerArea .txtBox {margin-top:40px; height:265px; border-top:2px solid #20a494; background: #fafafa;} #intro .visionArea .developerArea .txtBox ul {padding:15px 40px;} #intro .visionArea .developerArea .txtBox ul li {position: relative; padding:15px 0 0 10px; text-align: left; font-size:15px; text-align: justify; letter-spacing: -1.3px;} #intro .visionArea .developerArea .txtBox ul li::before {content: ""; position: absolute; top:23px; left:0; width:4px; height:4px; border-radius: 50%; background: #20a494;} #intro .presentArea span {display: block;} #intro .presentArea table {float: left; border-right:1px solid #ccc;} #intro .presentArea table:last-child {border-right:0;} #intro .presentArea .subTitleArea .contentBox{ margin-top:10px;} #intro .presentArea .subTitleArea .full + .full {margin-top:30px;} #intro .presentArea .rightTxt {font-size:14px; text-align: right; color:#666; font-weight: 500;} #intro .allStatus .basicTable {overflow: hidden;} #intro .allStatus .basicTable.half table {width:50%;} #intro .allStatus .basicTable.quarter table {width:25%;} #intro .teacherArea {position: relative;} #intro .teacherArea .organization {position: relative; margin-top:80px; height:550px; background: url(../images/intro/oraginze-bg.png) no-repeat center;} #intro .teacherArea .organization span {width:160px; height:50px; text-align: center; line-height: 50px; background: #fff;} #intro .teacherArea .organization .title {position: absolute;} #intro .teacherArea .organization .title > .sub + .sub {margin-top:40px;} #intro .teacherArea .organization .one {left:50%; background:#20a494; transform: translateX(-50%); color:#fff;top:-5%;} #intro .teacherArea .organization .two {top:23%; left:50%; background:#20a494; transform: translateX(-50%); color:#fff;} #intro .teacherArea .organization .three {left:15%; bottom:0; top:266px;} #intro .teacherArea .organization .four {left:50%; bottom:55px; transform: translateX(-50%);} #intro .teacherArea .organization .five {right:15%; bottom:26%; } #intro .teacherArea .organization .sub {border:1px solid #ccc; border-top:2px solid #20a494; border-radius: 0 0 10px 10px;} #intro .teacherArea .organization .sub.right {position: absolute; right:15%; top:11%;} #intro .teacherArea .teacherList {position: relative; margin-top:136px; border-top:2px solid #222;} #intro .teacherArea .teacherList .topName {height:60px; text-align: center; color:#222; line-height: 60px; border-bottom:1px solid #ccc; background:#f8f8f8; font-weight: bold;} #intro .teacherArea .basicTable.half table {float: left; width:50%; table-layout: fixed;} #intro .teacherArea .basicTable th {font-weight: normal;} #intro .teacherArea .basicTable td.bdl {border-left:1px solid #ccc;} #intro .ciArea .imgArea {text-align: center;} #intro .ciArea .imgArea img{width: auto;} #intro .ciArea .txtArea {padding:40px 0; text-align: center; line-height: 1.6; background: #fafafa;} #intro .ciArea .txtArea span:first-child {font-size:24px; color:#222; font-weight:bold;} #intro .ciArea .txtArea span:last-child {font-size:22px; color:#20a494;} #intro .ciArea .uniformArea {display: flex; justify-content: space-between; align-items: center;} #intro .ciArea .uniformArea .imgArea{margin-right:1.5%;} #intro .ciArea .uniformArea .imgArea:last-child{margin-right:0;} #intro .ciArea .uniformArea img{width: 100%;} #intro .ciArea .subTitleArea:last-child .contentBox {padding:60px 100px 60px 40px; border:1px solid #ccc;} #intro .ciArea .detailBox {overflow: hidden;} #intro .ciArea .detailBox + .detailBox {margin-top:80px;} #intro .ciArea .detailBox span {font-size:18px;} #intro .promotionArea video {width:100%; margin-top:30px;} #intro .promotionArea .subTitleArea{margin-top:50px;} #intro .promotionArea .galleryBoxList .box .imgArea{height: auto;} #intro .promotionArea .brochureArea{width:100%; height:1200px;} #intro .promotionArea .brochureArea .moblieArea{display: none;} #intro .promotionArea .brochureArea .moblieArea img {display: block; width:100%;} #intro .directionArea #mapArea{width:100%; height:500px;} #intro .directionArea .methodArea{margin-top:50px; border-top:2px solid #222;} #intro .directionArea .methodArea table td{padding:20px 30px; border-bottom:1px solid #ccc; font-size:15px;} #intro .directionArea .methodArea table td span{display:inline-block;} #intro .directionArea .methodArea table td:first-child span{color:#222;} #intro .directionArea .methodArea table td img{margin-right:15px;} #intro .coporationArea img{width:100%;} #intro .coporationArea .basicTable.v2{margin-top:30px;} #intro .coporationArea table{margin-top:0; } #intro .coporationArea table td{font-size:16px;} #intro .coporationArea .subTitleArea .contentBox{margin-top:0;} #intro .coporationArea .tableArea{margin-top:0;} #intro .coporationArea .tableArea img{width: auto; margin-right:5px;} #intro .coporationArea .searchArea{margin:25px 0;} #intro .coporationArea .imgArea.v2 img {width:auto;} #intro .coporationArea .btnArea.top {text-align: left;} #intro .coporationArea .btnArea a {margin:0;} #intro .sponsorship .contentBox{margin-top:25px;} #intro .sponsorship .contentBox.btb{border-top:2px solid #222;} #intro .sponsorship table th, #intro .sponsorship table td{padding:30px 55px; border-bottom:1px solid #ccc; font-size:15px;} #intro .sponsorship table th{background:#20a494; color:#fff;} #intro .donor .bgGray{padding:15px 30px; margin-top:60px;} #intro .donor .bgGray span{color:#222; font-weight: bold;} #intro .donor .bgGray ul {margin-top:10px; line-height: 1.8;} #intro .donor .bgGray ul li{font-size:14px;} #intro .donor .bgGray ul li:last-child{padding-left:80px; text-indent: -80px;} #intro .remind .bgGray{padding:50px;} #intro .remind .bgGray span{position: relative; font-size: 26px; color:#222; font-weight: bold; font-family:"noto";} #intro .remind .bgGray span:after{content:""; position: absolute; bottom:-30px; left:0; width:20px; height:2px; background: #20a494;} #intro .remind .bgGray p {margin-top:50px; line-height: 1.8; text-align: justify;} #intro .remind .subTitle .fl{width: auto;} #intro .remind .subTitle .explain{width:auto; float: right; padding:5px 10px; font-size:14px; border-radius: 30px; border:1px solid #ccc; color:#666} #intro .remind .imgArea{float: left; width:calc(100% / 2.5); margin-right:3%;} #intro .remind .fl > ul{margin:0; margin-top:25px;} #intro .remind .fl > ul li{padding-left:20px; margin-top:5px; font-size: 15px; color:#666; font-weight: 500;} #intro .remind .fl > ul li::before{top:10px; left:10px;} #intro .qualityArea .video {height:565px;} #intro .qualityArea .swiper-button-next:after, #intro .qualityArea .swiper-container-rtl .swiper-button-prev:after {display: none;} #intro .qualityArea .swiper-button-prev:after, #intro .qualityArea .swiper-container-rtl .swiper-button-next:after {display: none;} #intro .qualityArea .swiper-button-prev, #intro .qualityArea .swiper-container-rtl .swiper-button-next {width:26px; height:43px; background: url(../images/main/arrow-left.png) no-repeat center} #intro .qualityArea .swiper-button-next, #intro .qualityArea .swiper-container-rtl .swiper-button-prev {width:26px; height:43px; background: url(../images/main/arrow-right.png) no-repeat center} #intro .facilityArea .topArea{overflow: hidden;} #intro .facilityArea .topArea .tabList{float: right;} #intro .facilityArea .topArea .tabList span{display: none;} #intro .facilityArea .topArea .tabList ul li{position: relative; padding:10px 0 10px 35px; cursor: pointer;} #intro .facilityArea .topArea .tabList ul li.on {color:#20a494; font-weight:bold;} #intro .facilityArea .topArea .tabList ul li::before{content: ""; position: absolute; left:0; top:50%; width:25px; height:25px; line-height: 23px; color:#fff; border-radius: 50%; text-align: center; background: #bcbcbc; transform: translateY(-50%); font-size:13px;} #intro .facilityArea .topArea .tabList ul li:hover::before, #intro .facilityArea .topArea .tabList ul li.on::before{background: #222;} #intro .facilityArea .topArea .tabList ul li:first-child{margin-top:0;} #intro .facilityArea .topArea .tabList ul li:first-child:before{content: "1";} #intro .facilityArea .topArea .tabList ul li:nth-child(2)::before{content: "2";} #intro .facilityArea .topArea .tabList ul li:nth-child(3)::before{content: "3";} #intro .facilityArea .topArea .tabList ul li:nth-child(4)::before{content: "4";} #intro .facilityArea .topArea .tabList ul li:nth-child(5)::before{content: "5";} #intro .facilityArea .topArea .tabList ul li:nth-child(6)::before{content: "6";} #intro .facilityArea .topArea .tabList ul li:nth-child(7)::before{content: "7";} #intro .facilityArea .topArea .tabList ul li + li{margin-top:20px;} #intro .facilityArea .topArea .imgArea{float: left; width:75%} #intro .facilityArea .topArea .imgArea > .img{display: none; width:95%;} #intro .facilityArea .topArea .imgArea > .img.on{display: block;} #intro .facilityArea .subImgArea{margin-top:60px;} #intro .facilityArea .subImgArea .halfArea{display: none; overflow: hidden;} #intro .facilityArea .subImgArea .halfArea.on{display: block;} #intro .facilityArea .subImgArea .halfArea .title{display: block; width:100%; margin-bottom:30px; font-family:"noto"; font-size:26px; color:#222; font-weight: bold;} #intro .facilityArea .subImgArea .halfArea .half{width:49.5%} #intro .facilityArea .subImgArea .halfArea .half img{width:100%;} #intro .facilityArea .btmArea{display: none; margin-top:65px;} #intro .facilityArea .btmArea.on{display: block;} #intro .facilityArea .btmArea .floorList > span{display: inline-block; font-size:26px; color:#333; font-family:"noto"; font-weight: bold;} #intro .facilityArea .btmArea ul{display: inline-block;} #intro .facilityArea .btmArea ul li{display: inline-block; padding:0 25px; cursor: pointer;} #intro .facilityArea .btmArea ul li span{position: relative; font-weight: bold;} #intro .facilityArea .btmArea ul li:hover span, #intro .facilityArea .btmArea ul li.on span{color:#20a494;} #intro .facilityArea .btmArea ul li:hover span::after, #intro .facilityArea .btmArea ul li.on span::after{content: ""; position: absolute; bottom:0; left:0; width:100%; height:2px; background: #20a494;} #intro .facilityArea .btmArea .floorContent{position: relative; height:595px; max-height: 595px; padding:40px 20px; margin-top:50px; border:1px solid #ccc;} #intro .facilityArea .btmArea .floorContent > div{display: none;} #intro .facilityArea .btmArea .floorContent > div.on{display: block;} #intro .facilityArea .btmArea .floorContent .title{color:#222; font-size:20px; line-height: 30px;} #intro .facilityArea .btmArea .floorContent img{width: auto;} #intro .facilityArea .btmArea .floorContent .imgArea{position: absolute;} #intro .facilityArea .btmArea .floorContent .first{bottom:90px; left:50%; transform: translateX(-20%);} #intro .facilityArea .btmArea .floorContent .second{bottom:90px; left:50%; transform: translateX(-50%);} #intro .facilityArea .btmArea .floorContent .third{bottom:50px; left:50%; width:100%; transform: translateX(-50%); text-align: center;} #intro .facilityArea .btmArea .floorContent .third img {width:70%;} #intro .facilityArea .btmArea .floorContent .forth{bottom:30px; right:0; width:100%; text-align: center;} #intro .facilityArea .btmArea .floorContent .forth img {width:90%;} #intro .facilityArea .btmArea .floorContent .fifth{bottom:50px; left:50%; width:100%; transform: translateX(-50%); text-align: center;} #intro .facilityArea .btmArea .floorContent .fifth img {width:80%;} #intro .facilityArea .btmArea .floorContent .sixth{bottom:20px; left:0; width:100%; text-align: center;} #intro .facilityArea .btmArea .floorContent .sixth img {width:80%;} #intro .facilityArea .btmArea .floorContent .seventh{bottom:50px; left:50%; width:100%; transform: translateX(-50%); text-align: center;} #intro .facilityArea .btmArea .floorContent .sixth img {width:80%;} #intro .artcenterArea{position: relative; overflow: hidden;} #intro .artcenterArea strong{color:#222;} #intro .artcenterArea p{text-align: justify; line-height: 1.8;} #intro .artcenterArea .detailArea{overflow: hidden;} #intro .artcenterArea .detailArea .top.fl{width:67%;} #intro .artcenterArea .detailArea .top.fr{width:32%;} #intro .artcenterArea .detailArea .imgArea{width:49.5%;} #intro .artcenterArea .detailArea .imgArea.mobile{display: none;} #intro .artcenterArea .detailArea .imgArea:nth-child(4), #intro .artcenterArea .detailArea .imgArea:nth-child(5){margin-top:1%;} #intro .gallery-top{margin-top:20px;} #intro .gallery-top .swiper-slide{text-align: center;} #intro .gallery-top .swiper-button-next{--swiper-navigation-color:#333;} #intro .gallery-top .swiper-button-prev{--swiper-navigation-color:#333;} #intro .gallery-top .btmTxt{position: absolute; bottom:0; left:6%; width:88%; padding:20px 25px; background: rgba(0,0,0,0.8);} /* #intro .gallery-top .btmTxt.on{transform: translateY(0); opacity: 1; transition: 0.5s;} */ #intro .gallery-top .btmTxt span{color:#fff; font-size:15px; text-align: left; font-weight: normal;} #intro .gallery-thumbs{overflow: hidden; margin-top:20px;} #intro .swiper-slide-visible{text-align: center;} #intro .swiper-slide-thumb-active{margin:0 0 1px 1px;} #intro .swiper-slide-thumb-active img{border:2px solid #20a494} @media all and (max-width:1180px){ #intro .explianArea .bold {font-size:18px; line-height: 24px;} #intro .explianArea > div > img.fl{float: none; width:100%; margin:0; } #intro .explianArea .ciTxt{line-height: 1.2;} #intro .explianArea.v2{padding-top: 0;} #intro .explianArea.v2 .boldTxt > span {font-size:23px; letter-spacing: -0.5px;} #intro .explianArea.v2 .rightArea{position: static; height: auto;} #intro .explianArea.v2 .rightArea img{position: static;} #intro .allSchollArea .txtArea{padding:30px 0;} #intro .allSchollArea .txtBoxArea{margin-top:40px;} #intro .allSchollArea .txtBoxArea > .txtTitle {font-size:20px;} #intro .allSchollArea .txtBoxArea .txtBox{padding:30px 0;} #intro .allSchollArea .txtBoxArea .txtBox p{margin-top:20px;} #intro .allSchollArea .txtBoxArea .txtBox .title .green{margin-right: 1%;} #intro .history .historyBox .historyTxt .txtBox ul li .bold{margin-right:1%;} #intro .history .historyBox.left .historyTxt .txtBox ul li .bold{margin-left:1%;} #intro .history .historyBox > span{font-size:30px;} #intro .history .historyBox .historyTxt .txtBox ul li .txt.letter2{letter-spacing: -2px;} #intro .explianArea > div{width:100%; text-align: center;} #intro .explianArea > .rightArea{margin-top:20px;} #intro .explianArea.v2 .leftArea{width:100%; margin-top:20px; text-align:center;} #intro .visionArea .visionTitle{padding:20px 30px;} #intro .visionArea .visionTitle > span{font-size:20px;} #intro .visionArea .visionTitle p{margin-top:45px;} #intro .visionArea .contentBox.v2{padding:30px;} #intro .visionArea .contentBox .topArea .fl > span{font-size:20px;} #intro .visionArea .developerArea .box{margin-right:5%;} #intro .visionArea .developerArea .txtBox ul{padding:10px 30px;} #intro .visionArea .contentBox .topArea .fl{padding-top:0;} #intro .visionArea .contentBox .topArea .fr{margin-top:20px;} #intro .visionArea .contentBox .topArea .fl, #intro .visionArea .contentBox .topArea .fr{width:100%;} #intro .teacherArea .organization .three{left:10%;} #intro .teacherArea .organization .five{right:10%;} #intro .ciArea .txtArea{padding:20px 0;} #intro .ciArea .txtArea span:first-child{font-size:20px;} #intro .ciArea .txtArea span:last-child{font-size:16px;} #intro .ciArea .imgArea img{width:100%;} #intro .ciArea .subTitleArea:last-child .contentBox{padding: 30px 30px;} #intro .ciArea .detailBox span{display: block; margin-bottom:10px; font-size:16px;} #intro .promotionArea .subTitleArea{margin-top:25px;} #intro .directionArea .methodArea table td{padding:20px 15px; font-size:14px;} #intro .directionArea .methodArea table td:first-child {border-bottom:0; text-align: left;} #intro .directionArea .methodArea table td img{margin-right:2%;} #intro .sponsorship table th, #intro .sponsorship table td{padding:20px 30px;} #intro .remind .subTitle .fl{width:70%;} #intro .remind .subTitle .explain{width:25%; padding:5px 7px; font-size:13px; text-align: center;} #intro .facilityArea .topArea{overflow: visible;} #intro .facilityArea .topArea .tabList{float: none; width:100%;} #intro .facilityArea .topArea .tabList ul li{display: inline-block; padding:10px 0 10px 28px; width:16%; font-size:14px;} #intro .facilityArea .topArea .tabList ul li + li{margin-top:0;} #intro .facilityArea .topArea .tabList ul li:last-child{width:17%;} #intro .facilityArea .topArea .imgArea{float: none; width:100%; margin-top:20px;} #intro .facilityArea .subImgArea .halfArea .title{font-size:20px;} #intro .facilityArea .btmArea .floorContent .title{font-size:20px;} #intro .facilityArea .btmArea ul li{font-size:14px;} #intro .swiper-slide-visible img{width:100%;} } @media all and (max-width:1024px){ #intro .allSchollArea .txtArea{padding:25px 10px;} #intro .allSchollArea .txtArea > div{float: none; width:100%!important; text-align: center;} #intro .allSchollArea .txtArea .fl img{width:auto;} #intro .facilityArea .topArea .tabList ul li{width:33%; padding:1% 0 1% 5%;} #intro .facilityArea .topArea .tabList ul li:last-child{width: auto;} #intro .facilityArea .topArea .tabList ul li::before{width:20px; height:20px; line-height: 20px;} #intro .facilityArea .btmArea ul li{padding:0 3%;} #intro .history .historyBox .historyTxt .txtBox ul li span{font-size:14px;} #intro .gallery-top .btmTxt{left:0; width:100%;} #intro .gallery-top .swiper-button-next, #intro .gallery-top .swiper-button-prev{display: none;} #intro .gallery-top .swiper-slide img{width:100%;} #intro .gallery-thumbs{height:127px;} } @media all and (max-width:767px){ #intro br.none {display: none;} #intro .allSchollArea .txtArea .fl {float: none; width:100%;} #intro .allSchollArea .txtArea .fr {float: none; width:100%;} #intro .allSchollArea .txtArea .fr img{width:100%;} #intro .allSchollArea .txtBoxArea .txtBox p{margin-top:15px;} #intro .allSchollArea .txtBoxArea .txtBox p br{display: none;} #intro .allSchollArea .txtBoxArea .txtBox .title{font-size:18px;} #intro .explianArea .para .signature {width:100%; text-align: center;} #intro .history .historyBox{padding:30px 0; border-bottom:1px solid #ddd;} #intro .history .historyBox .historyTxt .txtBox.fl{position: relative;} #intro .history .historyBox .historyTxt .txtBox ul{margin-top:20px; line-height: 26px;} #intro .history .historyBox .historyTxt .txtBox ul li + li{padding-top:0;} #intro .history .historyBox .historyTxt .imgBox img{width:100%;} #intro .history .historyBox .historyTxt .imgBox img.fl, #intro .history .historyBox .historyTxt .imgBox img.fr{float: none; width:100%;} #intro .history .historyBox .historyTxt .txtBox.fl, #intro .history .historyBox .historyTxt .txtBox.fr{float: none; width:100%;} #intro .history .historyBox .historyTxt > div{width:100%;} #intro .history .historyBox .historyTxt::after{display:none;} #intro .history .historyBox.left .imgBox, #intro .history .historyBox.right .imgBox{float:none; padding:0; text-align:center} #intro .history .historyBox .historyTxt .txtBox ul li .bold{margin:0;} #intro .history .historyBox .historyTxt .txtBox ul li .txt{margin:0; letter-spacing: 0;} #intro .history .historyBox .historyTxt .txtBox ul li{position: relative;} #intro .history .historyBox.left .historyTxt .txtBox ul li .txt{margin:0; margin-left:20px;} #intro .history .historyBox.left .historyTxt .txtBox ul li .bold{position: absolute; top:-1px; left:0;margin:0;} #intro .explianArea .boldTxt{margin-top:20px;} #intro .explianArea .boldTxt > span{display: inline;} #intro .explianArea .para{margin-top:25px;} #intro .explianArea .para p + p{margin-top:15px;} #intro .visionArea .contentBox .btmArea{ height:auto; margin-top:20px; background-position: top;} #intro .visionArea .contentBox .btmArea .txt{position: static; margin-bottom:20px; transform: none;} #intro .visionArea .contentBox .btmArea .txt:first-child{padding-top:111%;} #intro .visionArea .contentBox .btmArea .txt .subTxt br{display: none;} #intro .visionArea .contentBox .topArea .fr .img span{margin-top:10px; font-size:16px;} #intro .visionArea .developerArea .box:after{display:none;} #intro .visionArea .developerArea .box{float:none; width:100%; margin-top:20px;} #intro .visionArea .developerArea .txtBox{height: auto; margin-top:20px;} #intro .presentArea table{border-right:0;} #intro .allStatus .basicTable.quarter table{float: none; width:100%;} #intro .allStatus .basicTable.half table{float:none; width:100%;} #intro .teacherArea .basicTable.half table{float: none; width:100%; max-width:100%; table-layout: fixed;} #intro .teacherArea .organization .sub.right{right:0;} #intro .teacherArea .organization .three{left:0;} #intro .teacherArea .organization .five{right:0} #intro .directionArea .methodArea table td{padding:20px 5px;} #intro .coporationArea .basicTable.v2{margin-top:10px;} #intro .coporationArea table td{font-size:13px;} #intro .coporationArea table td:nth-child(3){padding-left:5px;} #intro .coporationArea .imgArea.v2 {text-align: center;} #intro .coporationArea .imgArea.v2 img {width:auto;} #intro .coporationArea .btnArea.top {text-align: center;} #intro .sponsorship table th, #intro .sponsorship table td{padding:15px 5px; font-size:14px;} #intro .donor .bgGray{margin-top:30px; padding:10px 15px;} #intro .donor .bgGray ul li:last-child{padding:0; text-indent:0;} #intro .remind .bgGray{padding:30px;} #intro .remind .bgGray span{font-size:20px;} #intro .remind .fl > ul li{font-size:13px;} #intro .facilityArea .subImgArea .halfArea .title{margin-bottom:15px;} #intro .facilityArea .subImgArea .halfArea .half{float: none; width:100%; margin-top:10px;} #intro .facilityArea .btmArea{margin-top:40px;} #intro .facilityArea .btmArea .floorContent{height: auto; max-height: unset;} #intro .facilityArea .btmArea .floorContent .imgArea{position: static; text-align: center;} #intro .facilityArea .btmArea .floorContent .imgArea img{width: 100%;} #intro .facilityArea .btmArea .floorContent .first img{width: auto;} #intro .facilityArea .btmArea .floorContent .first, #intro .facilityArea .btmArea .floorContent .second, #intro .facilityArea .btmArea .floorContent .third, #intro .facilityArea .btmArea .floorContent .fifth, #intro .facilityArea .btmArea .floorContent .seventh{transform: unset;} #intro .facilityArea .topArea .tabList{position: relative; width:100%; height:40px; border:1px solid #ccc; background: url(../images/small-arrow_down.png) no-repeat 98% center; line-height: 40px; cursor: pointer;} #intro .facilityArea .topArea .tabList ul{display: none; position: absolute; top:38px; left:0; width:100%; background: #fff; z-index: 10; border:1px solid #ddd; transition: 0.5s; cursor: pointer;} #intro .facilityArea .topArea .tabList ul.on{display: block; transition: 0.5s;} #intro .facilityArea .topArea .tabList ul li, #intro .facilityArea .topArea .tabList ul li:last-child, #intro .facilityArea .topArea .tabList ul li + li, #intro .facilityArea .topArea .tabList ul li:first-child{width:100%; border:1px solid #ddd; } #intro .facilityArea .topArea .tabList ul li:hover{color:#20a494; font-weight: bold;} #intro .facilityArea .topArea .tabList ul li::before{display: none;} #intro .facilityArea .topArea .tabList ul li:hover::before, #intro .facilityArea .topArea .tabList ul li.on::before{display: none;} #intro .facilityArea .topArea .tabList ul li{padding:0; text-align: center;} #intro .facilityArea .topArea .tabList span{display: block; text-align: center;} #intro .artcenterArea .detailArea .imgArea{float: none; width:100%!important; margin-top:1%!important;} #intro .artcenterArea .detailArea .imgArea.fr.top{display: none;} #intro .artcenterArea .detailArea .imgArea.mobile{display: block;} #intro .history .historyBox .historyTxt .txtBox ul li .txt.letter2{letter-spacing: 0;} #intro .history .historyBox .historyTxt .txtBox.fl{text-align: left;} #intro .history .historyBox .historyTxt .imgBox{padding:0;} #intro .qualityArea .video {height: 170px;} } @media all and (max-width:500px){ #intro .allSchollArea .txtBoxArea{margin-top:20px;} #intro .allSchollArea .txtBoxArea .txtBox{padding:15px 0;} #intro .allSchollArea .txtBoxArea .txtBox p{margin-top:5px;} #intro .allSchollArea .txtBoxArea .txtBox .title span{margin-left:1%; font-size:16px; letter-spacing: -0.5px;} #intro .allSchollArea .txtBoxArea .txtBox .title .green{margin-right: 0;} #intro .history .historyBox .historyTxt .txtBox ul li .txt{letter-spacing: -1px;} #intro .history .historyBox.left .txtBox ,#intro .history .historyBox.right .txtBox{padding-left:0; } #intro .history .historyBox.left .txtBox ul li .bold{padding-right:1%;} #intro .history .historyBox .historyTxt .txtBox ul{margin-top:10px;} #intro .history .historyBox .historyTxt .txtBox ul li span{display: inline;} #intro .explianArea .boldTxt {text-align: left;} #intro .explianArea > .leftArea.fl img{width:100%;} #intro .explianArea > .rightArea img{width:100%;} #intro .explianArea .boldTxt > span, #intro .explianArea .ciTxt{font-size:16px;} #intro .explianArea .para p{font-size:13px;} #intro .explianArea .para .signature img{width:auto;} #intro .visionArea .visionTitle {padding:10px; background-size:cover;} #intro .visionArea .visionTitle p {font-size:14px;} #intro .visionArea .contentBox.v2{padding:15px;} #intro .visionArea .contentBox .topArea .fl p{font-size:14px; } #intro .visionArea .contentBox .topArea .fr .img img{width:100%;} #intro .visionArea .contentBox .btmArea{background-size: 100%;} #intro .visionArea .contentBox .btmArea .txt .title{font-size:16px;} #intro .visionArea .contentBox .btmArea .txt .subTxt{font-size:14px;} #intro .visionArea .developerArea .txtBox ul{padding:5px 15px;} #intro .visionArea .developerArea .txtBox ul li{padding: 5px 0 5px 10px; font-size:14px; letter-spacing: 0;} #intro .visionArea .developerArea .txtBox ul li::before{top:12px;} #intro .teacherArea .organization{width:100%; height:1000px; margin-top:40px; background: url(../images/intro/m-org.jpg) no-repeat top; background-size: contain;} #intro .teacherArea .organization > *{display: none;} #intro .teacherArea .teacherList{margin-top:30px;} #intro .ciArea .txtArea span:first-child {font-size:18px;} #intro .ciArea .uniformArea .imgArea{float: none; width:100%; margin-bottom:10px;} #intro .ciArea .subTitleArea:last-child .contentBox{padding: 20px;} #intro .directionArea #mapArea {height:250px;} #intro .directionArea .methodArea th, #intro .directionArea .methodArea td {display: block;} #intro .directionArea .methodArea table td{padding:5px 10px; text-align: center; font-size:13px;} #intro .directionArea .methodArea table td:nth-child(2) {padding:0 0 5px 32px; text-align: left;} #intro .directionArea .methodArea table td span{line-height:1.8; font-size:13px;} #intro .remind .bgGray {padding:10px;} #intro .remind .subTitle .fl{width:100%;} #intro .remind .subTitle .explain{position: absolute; top:30px; left:0; width:auto;} #intro .remind .fl > ul{margin-top:50px;} #intro .remind .subTitleArea:nth-child(2) .contentBox{margin-top:50px;} #intro .remind .subTitleArea:nth-child(2) .subTitle .explain{top:12%;} #intro .remind .imgArea{float:none; width:100%; margin-bottom:5px;} #intro .facilityArea .btmArea .floorList > span {display: block; width:100%; font-size:20px;} #intro .facilityArea .btmArea ul {width:100%;} #intro .facilityArea .btmArea ul li {margin-top:20px; padding:0 4%;} #intro .facilityArea .btmArea .floorContent {padding:20px 10px;} #intro .facilityArea .btmArea .floorContent .title {font-size:16px;} #intro .facilityArea .btmArea .floorContent .first img {width:100%;} #intro .promotionArea .brochureArea {height:auto;} #intro .promotionArea .brochureArea iframe {display:none; visibility: hidden; opacity: 0} #intro .promotionArea .brochureArea .moblieArea{display: block;} #intro .subTitleArea.video {height:250px;} #intro .sponsorship table th, #intro .sponsorship table td {padding:10px 20px;} } /* 교육안내 */ #edu .mt20{margin-top:20px;} #edu p{text-align: justify; line-height:1.8} #edu .txtBox {margin-top:30px;} #edu .txtBox .itailc{position: relative; padding:0 15px; font-style: italic; font-weight: 400; line-height: 28px;} #edu .txtBox .itailc::before{content: "\0022"; position: absolute; top:-10px; left:0; font-size:30px;} #edu .txtBox .itailc::after{content: "\0022"; position: absolute; right:0; bottom:-10px; font-size:30px;} #edu .txtBox .fr{display: block; margin-top:20px; font-weight: bold; color:#333;} #edu .normalTitle{display: block; color:#222; font-weight:bold; font-size:20px;} #edu .imgArea img{width:100%;} #edu .explainArea .bgGray{width:100%; padding:55px 65px; background: url(../images/edu/explainBg.jpg) no-repeat center;} #edu .explainArea .bgGray .title{position: relative; display: block; margin-bottom:55px; font-size:24px; font-weight:bold; color:#333; } #edu .explainArea .bgGray .title::after{content: ""; position: absolute; bottom:-33px; left:0; width:20px; height: 2px; background:#20a494;} #edu .explainArea .leftArea{width:5%; margin-right:5%;} #edu .explainArea .leftArea span{display: block; font-size:18px; margin-top:30px; color:#20a494; font-weight: bold;} #edu .explainArea .leftArea span:nth-child(2){margin-top:142px;} #edu .explainArea .leftArea span:nth-child(3){margin-top:205px;} #edu .explainArea .rightArea{width:90%;} #edu .explainArea .bgGray p {line-height: 28px;} #edu .explainArea .paperArea{position: relative;} #edu .explainArea .paperArea::before{content: ""; position: absolute; top:90px; left:45%; width:0; height:0; border-top:30px solid #e7e7e7; border-bottom:30px solid transparent; border-right:30px solid transparent; border-left:30px solid transparent; transform: translateX(-50%);} #edu .explainArea .paperArea .title{position: absolute; top:-140px; width:100%; height:70px; background: #f8f8f8; line-height: 70px; color:#333; text-align: center;} #edu .explainArea .paperArea .topArea{overflow: hidden;} #edu .explainArea .paperBox{position: relative; margin-top:140px;} #edu .explainArea .overflow{overflow: hidden;} #edu .explainArea .lastMent{position: relative; float: left; display: block; width:100%; height: 60px; margin-top:70px; background: #20a494; color:#fff; text-align: center; line-height: 60px ;} #edu .explainArea .lastMent::before{content: ""; position: absolute; top:-50px; left:50%; width:0; height:0; border-top:30px solid #e7e7e7; border-bottom:30px solid transparent; border-right:30px solid transparent; border-left:30px solid transparent; transform: translateX(-50%);} #edu .explainArea .eduList{padding: 0 175px;} #edu .explainArea .eduList .eduTxtBox {display: flex; justify-content: center; align-items: center;} #edu .explainArea .eduList .eduTxtBox + .eduTxtBox {margin-top:15px;} #edu .explainArea .eduList .eduTxtBox .pentagon{display: block; width:243px; height:58px; margin-right:35px; background: url(../images/edu/edulistBg.png) no-repeat center; color:#fff; line-height: 45px; text-align: center;} #edu .explainArea .eduList .eduTxtBox .borderTxt{display: block; width:58%; padding-bottom: 15px; border-bottom:1px solid #ccc;} #edu .explainArea .txtBoxArea .txtBox{overflow: hidden; padding: 25px 0; margin-top:0; border-bottom: 1px solid #ddd;} #edu .explainArea .txtBoxArea .txtBox .title{font-family:"noto"; font-size:18px; color:#333; font-weight: bold;} #edu .explainArea .txtBoxArea .txtBox .title .green{margin-right: 10px; color: #20a494; } #edu .explainArea .txtBoxArea .txtBox ul{margin-top:20px; line-height: 28px;} #edu .explainArea .txtBoxArea .txtBox ul li{padding-left:10px; text-indent: -10px;} #edu .explainArea .txtBoxArea .txtBox:last-child{border-bottom:0;} #edu .explainArea .imgArea{display: flex; align-items: center; justify-content: space-between; margin-top:25px;} #edu .explainArea .imgArea > div {width:49%} #edu .detailArea .bold{color:#222; font-weight: bold;} #edu .detailArea .basicTable table{margin-top:0;} #edu .detailArea .subTxt{position: relative; padding-left:10px; margin-top:10px; font-size:16px; color:#666; font-weight: normal;} #edu .detailArea .subTxt::before{content:""; position: absolute; top:50%; left:0; width:4px; height:4px; border-radius: 50%; background: #20a494; transform: translateY(-50%);} #edu .detailArea .basicTable th{font-size:14px; border-right:1px solid #ddd;} #edu .detailArea .basicTable th:last-child{border-right:0;} #edu .detailArea .basicTable th.slash{overflow: hidden; position: relative;} #edu .detailArea .basicTable table th span {display: inline-block;} #edu .detailArea .basicTable table td.gray{background:#fafafa;} #edu .detailArea .basicTable table td.bdr{border-right:1px solid #ddd;} #edu .detailArea .basicTable table td span{display: block; line-height: 1.8;} #edu .detailArea .basicTable.w50{width:50%;} #edu .detailArea .basicTable.w50:first-child table{border-right:1px solid #ddd} #edu .majorArea{overflow: hidden;} #edu .majorArea table .green{color:#20a494} #edu .majorArea table td:last-child{padding-left:10px; text-align: left;} #edu .majorArea .leftArea{width:50%;} #edu .majorArea .rightArea{width:50%; border-left:1px solid #ddd;} #edu .physicalArea .rightTxt img{float:left; margin-top:50px; text-align: left;} #edu .physicalArea .subTitleArea .contentBox{margin-top:5px;} #edu .physicalArea .subTitleArea .imgArea{margin-bottom:5px;} #edu .physicalArea .subTitleArea .tableTxt{display: block; margin:45px 0 15px;} #edu .physicalArea .listTitleArea{position: relative; margin-top:60px} #edu .physicalArea .listTitleArea span{display: block;} #edu .physicalArea .listTitleArea .title{font-family:"noto"; font-weight:bold; font-size:26px; color:#222;} #edu .physicalArea .listTitleArea .title strong{color:#20a494} #edu .physicalArea .listTitleArea .listParagraph{margin-top:50px;} #edu .physicalArea .listTitleArea .listParagraph span{position: relative; padding-left:10px; color:#444; font-size:20px;} #edu .physicalArea .listTitleArea .listParagraph span:before{content:""; position: absolute; top:50%; left:0; width:4px; height:4px; border-radius: 50%; background: #20a494; transform: translateY(-50%);} #edu .physicalArea .listTitleArea .listParagraph ul li{line-height: 1.8;} #edu .physicalArea .listTitleArea .listParagraph .lastList + .lastList {margin-top:25px;} #edu .physicalArea .listTitleArea .listParagraph .lastList li:first-child{color:#222; font-weight:bold;} #edu .physicalArea .listTitleArea .listParagraph .lastList .left20{padding-left:20px;} #edu .physicalArea .listTitleArea .listParagraph p{margin-top:30px; text-align: justify;} #edu .physicalArea .listTitleArea .listParagraph p + p{margin-top:25px;} #edu .physicalArea .bgGray{overflow: hidden; padding: 55px 60px; background: url(../images/edu/physicalBg.jpg) no-repeat center; background-size: 100%;} #edu .physicalArea .imgFrame{overflow: hidden; margin-top:55px;} #edu .physicalArea .imgFrame .w50{width:49%;} #edu .physicalArea .imgFrame .w50 img{width: 100%;} #edu .physicalArea .basicTable.fr{width:55%;} #edu .physicalArea .basicTable.fr table{margin-top:0;} #edu .physicalArea .basicTable.fr .bold{color:#222; font-weight:bold; background: #fafafa;} #edu .teacherArea .bgGray{padding: 70px 50px; background: url(../images/edu/teacher-bg.jpg) no-repeat center;} #edu .teacherArea .subTitleArea.sub{margin-top:30px;} #edu .teacherArea .subTitleArea.sub .subTitle span{color:#666; font-size:16px;} #edu .teacherArea .subTitleArea.sub .contentBox{margin-top:15px;} #edu .teacherArea .subTitleArea .contentBox .imgArea{width:100%; height:177px; padding:30px 0; text-align: center; background: url(../images/edu/teacherBg_1.jpg) no-repeat center; background-size: 100%;} #edu .teacherArea .subTitleArea.sub table td:nth-child(5){padding:10px 20px; text-align: left;} #edu .teacherArea .basicTable table.left td:last-child{padding-left:20px; text-align: left;} #edu .teacherArea .imgArea{overflow: hidden; margin-top:30px;} #edu .teacherArea .imgArea > div {width:49%;} #edu .lectureArea .bgGray{padding:65px 50px; background: url(../images/edu/lectureBg.jpg) no-repeat center;} #edu .lectureArea p + p{margin-top:20px;} #edu .lectureArea .basicTable{margin-top:50px;} #edu .lectureArea .basicTable table{margin-top:0;} #edu .lectureArea .basicTable table td:last-child{padding-left:20px; text-align: left;} #edu .lectureArea .imgArea .fl + .fl{margin-left:4%;} #edu .group .bgGray{padding :50px 60px;} #edu .group .bgGray p{text-align: center!important;} #edu .symposiumArea .bgGray{padding:50px 60px; background: url(../images/edu/symposiumBg.jpg) no-repeat center; background-size: 100%;} #edu .symposiumArea .basicTable{margin-top:10px;} #edu .symposiumArea .imgArea{margin-bottom: 30px;} #edu .globalArea .basicTable{margin-top:10px;} #edu .globalArea .basicTable .pd10{padding:0 16px;} #edu .globalArea .visitArea + .visitArea{margin-top:50px;} #edu .globalArea .visitArea .green{color:#20a494; font-weight: bold;} #edu .globalArea .visitArea ul > li {min-height: 28px; line-height: 28px;} #edu .globalArea .visitArea ul > li .bold{font-weight: bold; color:#333;} #edu .globalArea .imgArea{margin-top:0;} #edu .globalArea .imgArea .title{display:block; font-weight: bold; color:#333;} #edu .globalArea .imgArea ul{padding-left:20px; } #edu .globalArea .imgArea ul li{padding-left:10px; text-indent: -10px; letter-spacing: -1px;} #edu .globalArea .imgArea img{margin-top:10px;} #edu .globalArea .imgArea .fr ul{padding-left:0;} #edu .globalArea .imgArea > .w26{width:26%;} #edu .globalArea .imgArea > .w71{width:71%;} #edu .researchArea .bgGray{padding:52px 60px; background: url(../images/edu/researchBg.jpg) no-repeat center; background-size: 100%;} #edu .researchArea .txtBox{margin-top:40px;} #edu .researchArea .txtBox .itailc::after{right:125px; bottom:0;} #edu .researchArea .imgArea{margin-top:0;} #edu .diagnosisArea .basicTable.v2 td{padding-left:20px; text-align: left;} #symposium {width:100%; height:185px;} #symposium a {display: block; height:100%; background:url(../images/symposium_Banner_14th.jpg) no-repeat center; } @media all and (max-width:767px) { #symposium {width:100%; height:130px;} #symposium a {display: block; height:100%; background:url(../images/m_symposium_Banner_14th.jpg) no-repeat center; background-size:100%} #symposium a img {width:100%;} } @media all and (max-width:1180px){ #edu .explainArea .txtArea{height:auto; background: #fafafa;} #edu .explainArea .txtArea p{width:100%; padding:20px 30px;} #edu .explainArea .contentBox > .leftArea{display: none;} #edu .explainArea .rightArea{float: none; width:100%;} #edu .explainArea .paperArea .paperBox{width:calc(100% / 3 - 26px);} #edu .explainArea .paperArea .paperBox .topArea .titleBox span{font-size:16px;} #edu .explainArea .paperArea .paperBox .btmArea{padding:10px 15px;} #edu .explainArea .paperArea::before{left:50%;} #edu .teacherArea .subTitleArea .contentBox img{width:100%;} } @media all and (max-width:767px){ #edu .explainArea .bgGray{padding:20px;} #edu .explainArea .bgGray .title{margin-bottom: 30px; font-size:20px;} #edu .explainArea .bgGray .title::after{display: none;} #edu .explainArea .eduList{padding:0;} #edu .majorArea .leftArea, #edu .majorArea .rightArea{float: none; width:100%;} #edu .explainArea .txtBoxArea .txtBox{padding:10px 0;} #edu .explainArea .txtBoxArea .txtBox .title{font-size:16px;} #edu .explainArea .txtBoxArea .txtBox .title .green{margin-right:1%;} #edu .explainArea .paperArea .paperBox{width:100%;} #edu .explainArea .paperArea .paperBox .topArea .titleBox{transform: translate(-50%, -50%);} #edu .explainArea .paperArea::before{display: none;} #edu .explainArea .paperBox{margin-top:140px;} #edu .explainArea .paperBox + .paperBox{margin-top:180px;} #edu .explainArea .paperBox::after{content: ""; position: absolute; top: -50px; left: 50%; width: 0; height: 0; border-top: 30px solid #e7e7e7; border-bottom: 30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid transparent; transform: translateX(-50%);} #edu .detailArea .basicTable.w50{width:100%;} #edu .detailArea .basicTable.w50:first-child{border:0;} #edu .majorArea .basicTable.v2 table th{padding:15px 10px;} #edu .majorArea .basicTable.v2 table th .fl, #edu .majorArea .basicTable.v2 table th .fr{float:none; width:100%; text-align: left;} #edu .majorArea .basicTable.v2 table th .fr{margin-top:5px;} #edu .majorArea .imgArea.fl{float: none; width:100%;} #edu .majorArea .teacherList{float: none; width:100%; margin-top:20px;} #edu .majorArea .teacherList .nameBox .name{font-weight:bold; border-bottom:1px solid #ddd;} #edu .physicalArea .rightTxt img{float: none; width:100%; margin-top:30px;} #edu .physicalArea .listTitleArea{margin-top:30px;} #edu .physicalArea .listTitleArea .title{font-size:20px;} #edu .physicalArea .listTitleArea .listParagraph{margin-top:25px;} #edu .physicalArea .listTitleArea .listParagraph span{font-size:18px;} #edu .physicalArea .listTitleArea .listParagraph p{margin-top:15px;} #edu .physicalArea .listTitleArea .title{font-size:18px;} #edu .physicalArea .listTitleArea .title strong{font-size:18px;} #edu .physicalArea .bgGray{padding: 20px; background-size: cover;} #edu .physicalArea .bgGray p{float:none; width:100%; padding:15px 0;} #edu .physicalArea .bgGray img{float: none; width:100%;} #edu .physicalArea .imgFrame{margin-top:35px;} #edu .physicalArea .imgFrame .imgArea.fl{float: none; width:100%; text-align: center;} #edu .physicalArea .basicTable.fr{float: none; width:100%; margin-top:10px;} #edu .physicalArea .imgFrame .w50{float: none; width:100%; margin-bottom:10px; } #edu .teacherArea .bgGray{padding:30px 20px; background: #fafafa;} #edu .teacherArea .bgGray p br{display: none;} #edu .group .bgGray{padding:40px 20px;} #edu .teacherArea .subTitleArea .contentBox .imgArea{height:540px; margin:0; padding:0; background: url(../images/edu/m_teacherBg_1.jpg) no-repeat top center; background-size: contain;} #edu .globalArea .imgArea ul li{letter-spacing: 0;} #edu .globalArea .imgArea > .w26, #edu .globalArea .imgArea > .w71{width:100%;} #edu .researchArea .bgGray{padding:15px 20px; background-size: cover} #edu .researchArea .bgGray br{display: none;} #edu .researchArea .imgArea > div {width:100%;} #edu .txtBox .fr {margin-top:0;} #edu .txtBox .itailc::after, #edu .txtBox .itailc::before{display: none;} #edu .lectureArea .imgArea .fl + .fl {margin:0;} } @media all and (max-width:500px){ #edu .explainArea .txtBoxArea .txtBox .title{letter-spacing: 0; padding-left:20px; text-indent: -16px; line-height: 20px;} #edu .explainArea .txtBoxArea .txtBox ul{margin-top:10px;} #edu .majorArea .teacherList .nameBox span{float: none; height: auto; } #edu .majorArea .teacherList .nameBox .name{width:100%; text-align: left; padding-left:3%;} #edu .majorArea .basicTable.v2 table th .fr br{display: none;} #edu .majorArea .teacherList .nameBox span:last-child{width:100%;} #edu .group .bgGray{padding:20px;} #edu .group .bgGray p{text-align: justify!important;} #edu .explainArea .bgGray .title{line-height: 26px; font-size:16px;} #edu .explainArea .eduList .eduTxtBox{display: block;} #edu .explainArea .eduList .eduTxtBox .pentagon{width:100%;} #edu .explainArea .eduList .eduTxtBox .borderTxt{width:100%; padding-bottom:0; padding:5px 0; margin-top:10px; text-align:center; font-size:12px;} #edu .explainArea .txtBoxArea .txtBox ul li {letter-spacing: -1.5px; text-indent:-5px; padding-left:5px;} #edu .explainArea .paperArea .paperBox .topArea .titleBox span{font-size:14px;} #edu .teacherArea .subTitleArea .contentBox .imgArea {height:600px;} #edu .teacherArea .subTitleArea .contentBox .imgArea > div{width:100%; } #edu .teacherArea .subTitleArea .contentBox .imgArea > div + div{margin-top:20px;} #edu .symposiumArea .bgGray{padding:5px 10px; background-size: cover;} #edu .symposiumArea .bgGray br{display: none;} #edu .lectureArea .bgGray {padding:20px;} /* #edu .majorArea table td {display: block;} #edu .majorArea table td:first-child {color:#20a494;} #edu .majorArea table td:last-child {border-left:0; text-align: center} */ #edu .majorArea .rightArea {border-left:0;} #edu .globalArea .subTitleArea + .subTitleArea .imgArea > div {float: none; width:100%;} #edu .symposiumArea .imgArea.flex {display: block;} #edu .symposiumArea .imgArea.flex div {width:48%; margin:5px 0;} #edu .symposiumArea .imgArea.flex div:nth-child(2n-1) {float: left;} #edu .symposiumArea .imgArea.flex div:nth-child(2n) {float: right;} } /* 학교입학 */ #admission .mt20{margin-top:20px;} #admission p{text-align: justify;} #admission .calulaterArea .txt{padding:20px 50px; background:url(../../assets/images/admission/transferBg.jpg) no-repeat center} #admission .calulaterArea .txt > span{color:#333;} #admission .calulaterArea .txt strong {color:#333;} #admission .calulaterArea .txt > ul{margin-top: 37px;} #admission .calulaterArea .txt > ul li{line-height: 1.8;} #admission .calulaterArea .txt > ul li:first-child{color:#222;} #admission .calulaterArea .basicTable span {display: block; margin-bottom:10px;} #admission .calulaterArea .basicTable td {padding:10px 0;} #admission .calulaterArea .basicTable .select {width:85%; height:30px; margin:0 auto;} #admission .calulaterArea .basicTable .select select {background: #fff url(../images/icon-arrow.png) no-repeat 95% center;} #admission .calulaterArea .resultArea {width:520px; height:100px; margin:0 auto;text-align: center; line-height: 100px; background: #fafafa; } #admission .calulaterArea .resultArea span {display: inline-block; font-size:18px; font-weight:bold;} #admission .calulaterArea .resultArea .count {padding-left:30px ;font-size:22px; color:#20a494;} #admission .calulaterArea .cautionArea {padding:30px; margin-top:60px; border:1px solid #ccc;} #admission .calulaterArea .cautionArea ul {line-height: 1.8;} #admission .calulaterArea .cautionArea ul li span {display: block;} #admission .calulaterArea .cautionArea ul li.indent {padding-left:25px;} #admission .application ul{line-height: 1.8;} #admission .application .bgGray{padding:50px 30px; background: url(../images/admission/transferBg.jpg) no-repeat center;} #admission .application .bgGray strong{color:#20a494; font-size:20px;} #admission .application .bgGray ul{margin-top:20px;} #admission .application .contentBox > .bgGray{margin-top:0; padding:40px;} #admission .application .basicTable table{margin-top:0} #admission .application .halfArea{overflow: hidden;} #admission .application .halfArea > div{width:50%; margin-top:50px;} #admission .application .btnArea{margin:0; margin-top:60px;} #admission .application .btnArea span{font-size:14px; color:#e7e7e7} #admission .application .subTitleArea .contentBox .btnArea{text-align: left;margin:10px 0 30px;} #admission .application .subTitleArea .contentBox .btnArea .btn{width:240px; height:40px; padding:0 0 0 20px; margin:0; text-align: left; line-height:40px;} #admission .application .subTitleArea .contentBox .btnArea.fl{margin:0} #admission .application .subTitleArea .contentBox .btnArea.fr{margin:0;} #admission .application .subTitleArea .contentBox .btnArea.fr .btn{width: auto; height:auto; margin:0; padding:12px 40px; line-height:normal;} #admission .application .subTitleArea .tableBtn{padding:10px 20px; background: #666; color:#fff; cursor: pointer;} #admission .application .subTitleArea .contentBox .btnArea .btn {width:350px;} #admission .application .subTitleArea .contentBox .btnArea .btn.v2 {width:385px;} #admission .research .basicTable.v2 table th, #admission .research .basicTable.v2 table td{padding:20px; text-align: left; font-size:15px;} #admission .research .tel{display: flex; width:50%; align-items: center; justify-content: space-around;} #admission .research .tel > input, #admission .research .tel > select{height:30px;} #admission .research .tel > span{margin:0 1%;} #admission .research table{margin-top:0;border-collapse: separate;} #admission .research table .openDate{padding:15px 0; line-height: 1.8;} #admission .research table .openDate span{display: block;} #admission .research table .input{height: 30px; display: inline-block;} #admission .research table .w50{width:50%; height:30px;} #admission .visitApplyResult button{padding:5px 20px; color:#fff;} #admission .visitApplyResult button.cancel{background: #666} #admission .visitApplyResult button.confirm{background:#20a494 } #admission .frashmanArea .title{color:#222; font-size:22px;} #admission .frashmanArea .subTitleArea .hana{text-align: left;} #admission .frashmanArea .bgGray{margin-top:0;} #admission .frashmanArea .brochureArea{width:100%; height:100%; padding:50px 0; background:#efefef; text-align: center;} #admission .frashmanArea .brochureArea img {display: none;} #admission .frashmanArea .btnArea .main{padding:12px 62px; background-position: 90% center;} #admission .transferArea .bgGray{padding:40px; background: url(../../assets/images/admission/transferBg.jpg) no-repeat center;} #admission .transferArea .bgGray ul{margin-top:40px; line-height: 26px;} #admission .transferArea .searchArea{margin-top:20px;} #admission .transferArea .accordionArea{margin-top:20px;} #admission .halfArea{overflow: hidden; } #admission .halfArea .imgArea {width:49%; margin-top:30px;} #admission .socialCareArea .bgGray{padding:50px 70px; background: url(../images/admission/socialBg.jpg) no-repeat center;} #admission .calulaterArea .basicTable select {width:80%;} /* 20-10-23 */ #admission .application .table {margin-top:10px;} #admission .application .table th, #admission .application .table td {padding:10px 0; border-right:1px solid #ccc; border-top:1px solid #ccc;} #admission .application .table th:last-child, #admission .application .table td:last-child {border-right:0;} #admission .application .table td {padding-left:10px;} #admission .application .table tr:last-child {border-bottom:1px solid #ccc;} #admission .application .table thead th {background:#e4e4e4; color:#333; text-align: center;} #admission .application .listArea .btmTxt {display:block; margin-top:5px; font-size:14px;} #admission .application .videoArea {margin-top:50px;} #admission .application .videoArea .videoBox + .videoBox {margin-top:50px;} #admission .application .videoArea .videoBox .title {display: block; color:#333; font-size:18px; text-align: center; font-weight: bold; white-space: pre;} #admission .application .videoArea .videoBox .video {width:686px; height:400px; margin:20px auto 0;} #admission .application .videoArea .videoBox .video img {width:100%;} @media all and (max-width:1180px){ #admission .frashmanArea .title strong{font-size:18px;} } @media all and (max-width:767px){ #admission .calulaterArea .txt {padding: 20px 30px; background-size:cover;} #admission .transferArea .bgGray{padding:20px; margin-top:0;} #admission .transferArea .bgGray ul{margin-top:20px;} #admission .socialCareArea{display: block;} #admission .calulaterArea .resultArea{width:100%;} #admission .application .contentBox > .bgGray, #admission .application .bgGray{padding:20px;} #admission .application .halfArea > div{float: none; width:100%; margin-top: 30px;} #admission .application .bgGray strong{font-size:18px;} #admission .application .btnArea{margin-top:30px;} #admission .active .basicTable.v2 table th, #admission .active .basicTable.v2 table td,#admission .research .basicTable.v2 table th, #admission .research .basicTable.v2 table td{padding:5px; font-size:14px;} #admission .active .basicTable.v2 table input, #admission .research .basicTable.v2 table .tel select{width:33%; padding-left:1%;} #admission .active .basicTable.v2 table .tel select, #admission .research .basicTable.v2 table .tel select{width:30%; padding-left:1%;} #admission .active .basicTable.v2 table .tel input{width:30%;} #admission .socialCareArea .bgGray{ padding:10px 15px;} #admission .socialCareArea .bgGray p br{display: none;} #admission .application .subTitleArea .contentBox .btnArea .btn.v2 {width:100%; height:auto; padding:10px; line-height: 1;} #admission .application .videoArea {margin-top:25px;} #admission .application .videoArea .videoBox .title {font-size:16px;} #admission .application .videoArea .videoBox .video {width:100%; height:165px;} } @media all and (max-width:500px){ #admission .research table .w50 {width:100%;} #admission .research .tel {display: block; width:100%;} #admission .research .tel > * {margin:5px 0;} #admission .frashmanArea .btnArea .main {padding:12px 25px; margin:0;} #admission .frashmanArea .brochureArea {padding: 0;} #admission .frashmanArea .brochureArea iframe {display: none;} #admission .frashmanArea .brochureArea img {display: block; width:100%; border:1px solid #ccc;} #admission .research table .input {width:100%;} #admission .active .basicTable.v2 span, #admission .research .basicTable.v2 span{display: block; margin-top:5px;} #admission .active .basicTable.v2 table input, #admission .research .basicTable.v2 table input{width:100%;} #admission .active .basicTable.v2 table .tel select, #admission .research .basicTable.v2 table .tel select{width:100%; padding-left:1%;} #admission .active .basicTable.v2 table .tel input, #admission .research .basicTable.v2 table .tel input{width:100%;} #admission .active .basicTable.v2 table .tel span, #admission .research .basicTable.v2 table .tel span{display: none;} #admission .calulaterArea .tableScroll table{width:925px!important;} #admission .application.temp .subTitleArea .contentBox .btnArea .btn {width:auto; padding:0 20px;} #admission .application.temp .mainTitle {font-size:20px;} #admission p br.none {display: none;} } /* 학교생활 */ p {text-align: justify;} .scheduleArea .calendarArea{margin-top:50px; height:740px;} .scheduleArea .calendarArea img{width:100%} .cafeteriaArea .dateArea{overflow: hidden; position: relative; margin-bottom:50px; padding:50px; border:1px solid #ddd;} .cafeteriaArea .dateArea .choiceDate{margin-bottom: 30px; text-align: center; } .cafeteriaArea .dateArea .choiceDate span{display: inline-block; font-size:20px; color:#222; vertical-align: middle; font-weight:bold;} .cafeteriaArea .dateArea .fl{width:47%;} .cafeteriaArea .dateArea .fl .topSelect * {display:inline-block; vertical-align: middle;} .cafeteriaArea .dateArea .fl .topSelect select{width:30%; height:30px; margin-left:15px; background: #fff url(../images/icon-arrow.png) no-repeat 95% center;} .cafeteriaArea .dateArea .fl .datepicker{margin-top:30px;} .cafeteriaArea .ui-widget.ui-widget-content{width:100%; height:295px; border:0; border-top:2px solid #222;} .cafeteriaArea .ui-datepicker .ui-datepicker-header{padding:0; border:0;} .cafeteriaArea .ui-datepicker td span, .cafeteriaArea .ui-datepicker td a{position: relative; padding:0.7em; text-align: center; background: none; z-index: 0;} .cafeteriaArea .ui-state-default{border:1px solid #ddd; color:#222;} .cafeteriaArea .ui-widget-content .ui-state-highlight{position: relative; background: none;} .cafeteriaArea .ui-widget-content .ui-state-active{position: relative; } .cafeteriaArea .ui-widget-content .ui-state-active:after{content:""; position: absolute; top:50%; left:50%; width:25px; height:25px; border-radius: 50%; background: #d2edea; transform: translate(-50%, -50%); z-index: -1;} .cafeteriaArea .ui-datepicker .ui-datepicker-week-end:first-child{color:#de4847;} .cafeteriaArea .ui-datepicker .ui-datepicker-week-end:last-child{color:#399de9;} .cafeteriaArea .ui-datepicker table td:first-child > a{color:#de4847; font-weight:bold;} .cafeteriaArea .ui-datepicker table td:last-child > a{color:#399de9; font-weight:bold;} .cafeteriaArea .ui-datepicker-title{position: absolute; top:-62px; left:18%; width:50%; margin:0; line-height: 100%;} .cafeteriaArea .ui-datepicker-title *{display: inline-block;} .cafeteriaArea .ui-datepicker-title select{width:40%; height:30px; margin-right:3%;} cafeteriaArea .ui-datepicker .ui-datepicker-prev{position: absolute; top:-120px; left:87%;} .cafeteriaArea .ui-datepicker .ui-datepicker-prev > span{background: url(../images/daily/left-arrow.png) no-repeat center;} .cafeteriaArea .ui-datepicker .ui-datepicker-next{position: absolute; top:-120px; right:-28%;} .cafeteriaArea .ui-datepicker .ui-datepicker-next > span{background: url(../images/daily/right-arrow.png) no-repeat center;} .cafeteriaArea .dateArea .overflow {position: relative;} .cafeteriaArea .dateArea .overflow:after {content: ""; display: block; clear: both;} .cafeteriaArea .dateArea .fr{width:47%;} .cafeteriaArea .dateArea .fr .topTabArea{border:0;} .cafeteriaArea .dateArea .fr .topTabArea > button{height:50px; line-height: 50px; border-bottom:1px solid #ddd;} .cafeteriaArea .dateArea .fr .topTabArea > button:hover, .cafeteriaArea .dateArea .fr .topTabArea > button.on{border-top:2px solid #20a494; border-bottom:0; border-left:1px solid #ddd; border-right:1px solid #ddd; background: #fff; color:#222; font-weight:bold; } .cafeteriaArea .dateArea .fr .resultTab{margin-top:20px; padding:40px; background: #fafafa;} .cafeteriaArea .dateArea .mealMenu span{color:#222; font-weight:bold;} .cafeteriaArea .dateArea .mealMenu .mealList {overflow: auto; max-height: 295px; margin-top:30px; padding:10px 20px; border-top:2px solid #222; background:#fafafa;} .cafeteriaArea .dateArea .mealMenu .mealList table th { text-align: left; vertical-align: top; color:#222;} .cafeteriaArea .dateArea .mealMenu .mealList table td {padding-bottom:15px; font-size:15px; letter-spacing: -0.20px; line-height: 20px;} .cafeteriaArea .dateArea .mealImg {display: flex; align-items: center; justify-content: center; margin-top:30px;} .cafeteriaArea .dateArea .mealImg .imgBox {max-width: 200px;} .cafeteriaArea .dateArea .mealImg span {display: block; margin-top:10px; text-align: center; color:#222;} .cafeteriaArea .dateArea .mealImg img {width:100%; padding: 0 10px;} .dormitoryArea p{letter-spacing: -1px;} .dormitoryArea .imgArea.moblie {display: none;} .dormitoryArea .contentBox > .fr{display: inline-block; padding: 5px 15px 5px 35px; margin-top:30px; text-align: right; font-size: 14px; background: #f7f7f7 url(../images/intro/telephone.png) no-repeat 10px center;font-weight: bold;} .dormitoryArea .bdb{padding-bottom:25px; border-bottom:2px solid #333;} .dormitoryArea .dormiTxt{padding:30px 0; border-bottom:1px solid #ddd;} .dormitoryArea .dormiTxt:first-child{padding:0; padding-bottom:30px;} .dormitoryArea .dormiTxt .title{font-family:"noto"; font-size:22px; font-weight: bold; color:#333;} .dormitoryArea .dormiTxt p{margin-top:30px;} .dormitoryArea .contentBox .basicTable > table{width:50%;} .dormitoryArea .contentBox .basicTable > table:last-child{border-left:1px solid #ddd;} .dormitoryArea .contentBox .basicTable > table th{color:#20a494} .councilArea .subTitleArea{overflow: hidden;} .councilArea .subTitleArea .basicTable{margin-top:30px;} .councilArea .subTitleArea.table .basicTable{margin-top: 0;} .councilArea .subTitleArea.table > div {width:50%;} .councilArea .fr .basicTable{border-left:1px solid #ddd;} .councilArea .subTitleArea.table > div .title{display: block; margin-bottom:30px; font-size:17px; color:#333; font-weight: bold;} .activityArea .activityList{margin-top:30px} .activityArea .activityList .listTxt{font-size:17px; color:#333; font-weight: bold;} .activityArea .activityList .basicTable{margin-top:20px;} .activityArea .subTitleArea.sub{margin-top:30px;} .activityArea .subTitleArea.sub .subTitle span{font-size:20px; color:#20a494; font-weight:bold;} .activityArea .subTitleArea.sub .contentBox{margin-top:15px;} .activityArea .subTitleArea.sub .imgArea.v2 > div, .activityArea .subTitleArea.sub .imgArea.v2 img{width:auto;} .activityArea .subTitleArea.sub .imgArea.v2 > div{margin-right:2%;} .subTxt {margin-top:40px;} .subTxt span {display: block; font-weight:bold; font-size:16px;} .subTxt ul {magin-top:20px; line-height: 28px;} .imgArea.v2 .fl.w29{width:29%; margin-right:2%;} @media all and (max-width:1180px){ .cafeteriaArea .dateArea{padding:30px;} } @media all and (max-width:767px){ .cafeteriaArea .ui-datepicker .ui-datepicker-prev, .cafeteriaArea .ui-datepicker .ui-datepicker-next{top:-111px;} .cafeteriaArea .ui-datepicker .ui-datepicker-prev{left:38%;} .cafeteriaArea .ui-datepicker .ui-datepicker-next{right:38%;} .cafeteriaArea .dateArea .fr{float: none; width:100%; margin-top:10px;} .cafeteriaArea .dateArea .fr .resultTab{padding:20px;} .cafeteriaArea .dateArea .mealImg {overflow: hidden; display: block;} .cafeteriaArea .dateArea .mealImg > div {width:49%;} .cafeteriaArea .dateArea .mealImg > div:nth-child(2n-1) {float: left;} .cafeteriaArea .dateArea .mealImg > div:nth-child(2n) {float:right;} .cafeteriaArea .dateArea .mealMenu .mealList {margin-top:10px;} .dormitoryArea .contentBox .basicTable > table{width:100%;} .dormitoryArea .contentBox .basicTable > table:last-child{border-top:2px solid #333; border-left:0} .dormitoryArea .dormiTxt:first-child{padding-bottom:20px;} .dormitoryArea .dormiTxt p{margin-top:20px;} .dormitoryArea .dormiTxt .title{font-size:20px;} } @media all and (max-width:500px){ .cafeteriaArea .ui-datepicker-title{top:-40px; left:0; width:100%;} .cafeteriaArea .dateArea{padding:15px;} .cafeteriaArea .dateArea .choiceDate, .cafeteriaArea .ui-datepicker .ui-datepicker-prev, .cafeteriaArea .ui-datepicker .ui-datepicker-nex{display: none;} .cafeteriaArea .dateArea .fl {float:none; width:100%;} .cafeteriaArea .dateArea .fl .topSelect *{display: block; width:100%; font-size:16px; color:#222; font-weight: bold;} .cafeteriaArea .dateArea .fl .datepicker{margin-top:45px;} .cafeteriaArea .dateArea .mealMenu .mealList table td {font-size:13px;} .cafeteriaArea .dateArea .mealMenu .mealList table td:last-child {padding-bottom:5px;} .cafeteriaArea .dateArea .mealImg > div {float: none!important; width:100%!important} .cafeteriaArea .dateArea .mealImg img {padding:0;} .cafeteriaArea .dateArea .mealImg span {margin:10px 0;} .cafeteriaArea .ui-datepicker td a{padding:1em 0.3em;} .cafeteriaArea .ui-datepicker-title select{width:48.5%;} .cafeteriaArea .ui-datepicker-title select:last-child{margin-right:0;} .activityArea .imgArea.flex > div{text-align: center;} .activityArea .imgArea.flex img{width:auto;} .councilArea .subTitleArea.table > div {float:none; width:100%;} .councilArea .fr {margin-top:20px;} .councilArea .subTitleArea.table > div .title{margin-bottom: 15px; font-size:14px;} .dormitoryArea .contentBox > .fr {width:100%; font-size:12px; padding:5px 0 5px 15px; text-align: center;} .dormitoryArea .imgArea {display:none;} .dormitoryArea .imgArea.moblie {display: block;} .dormitoryArea .dormiTxt {padding:10px 0;} .dormitoryArea .dormiTxt .title {font-size:16px;} .dormitoryArea .dormiTxt p {margin-top:10px;} .subTxt {margin-top:20px;} .subTxt span {display: block; color:#20a594; font-size:16px;} .subTxt ul {magin-top:10px; line-height: 28px;} .imgArea.v2 .fl.w29{width:100%;} .councilArea .fr .basicTable {border-left:0;} .subTitleArea:nth-child(4) .imgArea:first-child > .fl, .subTitleArea:nth-child(4) .imgArea:first-child > .fr {float: none; width:100%;} .activityArea .subTitleArea.sub .imgArea.v2 {overflow: hidden;} .activityArea .subTitleArea.sub .imgArea.v2 > div { width:48%; text-align: center;} .activityArea .subTitleArea.sub .imgArea.v2 img {width:100%;} .activityArea .imgArea.flex {display: block;} .activityArea .imgArea.flex > div:nth-child(2n) {float: right;} .activityArea .imgArea.flex > div:nth-child(2n-1) {float:left;} .activityArea .imgArea.flex img {width:100%;} } /* 학교소식 */ #notice .mt40 {margin-top:40px;} #notice .swiper-button-prev{top:50%; left:0; background:#fff url(../images/swiper-left.png) no-repeat center; z-index: 10; line-height: 75px;} #notice .swiper-button-prev:after{display: none;} #notice .swiper-button-next{top:50%; right:0; background:#fff url(../images/swiper-right.png) no-repeat center; z-index: 10; line-height: 75px;} #notice .swiper-button-next:after{display: none;} #notice .menu_area{height:75px; border-top:2px solid #222; border-bottom:1px solid #ddd; line-height: 75px;} #notice .swiper-slide{text-align:center; cursor: pointer; color:#222; font-size:14px; z-index: 0;} #notice .swiper-slide.selected span{color:#20a494; font-weight:bold;} #notice .swiper-button-next.swiper-button-disabled, #notice .swiper-button-prev.swiper-button-disabled{opacity: 1;} #notice .list_area .newsArea{overflow: hidden;} #notice .list_area .newsArea .newsBox{overflow: hidden; width:45%; height:740px; margin:0 0 15px;} #notice .list_area .newsArea .newsBox .imgArea{display:block; width:100%; margin-top:0;} #notice .list_area .newsArea .newsBox .imgArea img {width:100%; border:1px solid #ccc; } #notice .list_area .newsArea .newsBox:nth-child(2n-1){float: left;} #notice .list_area .newsArea .newsBox:nth-child(2n){float: right;} #notice .list_area .newsArea .txtArea{position: relative; margin-top:10px; text-align:center;} #notice .list_area .newsArea .txtArea a{display:inline-block; padding:9px 17px 9px 44px; margin:0 10px; border:1px solid #ddd; background: url(../images/notice/icon-down.png) no-repeat 15px center;} #notice .list_area .newsArea .txtArea a.no {opacity: 0.5;} #notice .honorlist select {width:150px; height:35px;} #notice .honorlist .rightTxt {float:left; padding:4px 0; margin-right:20px;} #notice .honorlist .txtBox > div{overflow: hidden; padding:15px 20px;} #notice .honorlist .txtBox > div span.fl{width:75%;} #notice .honorlist .txtBox > div span.fl > * {display: inline-block; vertical-align: middle;} #notice .honorlist .txtBox > div span.fl span:first-child {width:50px;} #notice .honorlist .txtBox > div span.fl span:last-child {overflow: hidden; width:75%; text-overflow: ellipsis; white-space: nowrap;} #notice .honorlist .txtBox > div span.fr{width:20%; text-align: right;} #notice .honorlist .txtBox .questionBox{background: none;} #notice .honorlist .txtBox .answerBox .tableArea{margin:0 20px 0 95px; border-top:1px solid #ccc;} #notice .honorlist .txtBox .answerBox .tableArea th, #notice .honorlist .txtBox .answerBox .tableArea td{padding:10px 0 10px 20px; border-bottom:1px solid #ccc; text-align: left;} #notice .honorlist .txtBox .answerBox .tableArea th{background: #fff; } #notice .honorlist .txtBox .answerBox .tableArea td strong{color:#333;} #notice .honorlist .txtBox.medal .answerBox {padding:50px 0; background:#fafafa url(../images/notice/icon-medal.png) no-repeat 25px 50px;} #notice .honorlist .txtBox.trophy .answerBox{padding:50px 0; background:#fafafa url(../images/notice/icon-trophy.png) no-repeat 25px 50px;} #notice .routineArea .imgArea.mobile {display: none;} #notice .routineArea .contentArea{padding:0;} #notice .routineArea .contentArea .basicTable + .basicTable {margin-top:30px;} #notice .routineArea .contentArea .basicTable + .basicTable td{padding-left:0; text-align: center;} #notice .routineArea .contentArea .basicTable + .basicTable td:first-child{padding-left:20px; text-align:left;} #notice .routineArea .contentArea table th{background: #e4e4e4;} #notice .routineArea .contentArea table td{padding-left:20px; text-align: left;} #notice .routineArea .contentArea table .lightGreen{background:#e9f3df;} #notice .routineArea .contentArea table .lightRed{background:#f9ecef;} #notice .routineArea .contentArea table .lightBlue{background:#e2f2f1;} #notice .routineArea .contentArea table .lightGray{background:#f8f8f8;} #notice .routineArea .tableTxt{display: block; margin-top:10px; font-size:15px; font-weight:bold;} #notice .routineArea .txtBox{padding:40px 0; border-bottom:1px solid #ccc;} #notice .routineArea .txtBox:nth-child(3){border-bottom:0;} #notice .routineArea .txtBox span{display: block; font-family:"noto"; font-size:22px; color:#333; font-weight: bold;} #notice .routineArea .txtBox p{margin-top:30px;} #notice .answerArea span{display:inline-block; vertical-align: middle;} #notice .answerArea .infoTxt {margin: 0 0 10px;} #notice .answerArea .bold{font-weight:bold; color:#333;} #notice .answerArea .txtArea{padding:0 15px;} #notice .paperTxt {margin:30px 0 20px;} #notice .paperTxt ul li span {color:#20a494; font-weight:bold;} #notice .writeArea{position: relative; border-top:2px solid #333;} #notice .writeArea table th, #notice .writeArea table td {padding:10px; border-bottom:1px solid #ccc;} #notice .writeArea table th{background: #f4f4f4;} #notice .writeArea table .inputArea{display: flex; align-items:center; justify-content: space-between;} #notice .writeArea table .inputArea .input {width:26%;} #notice .writeArea table .inputArea span {margin:0 10px;} #notice .writeArea table .inputArea .select {width:40%; height:30px;} #notice .writeArea table .input {height: 30px; } #notice .writeArea table .input input[type="text"] {height:100%;} #notice .writeArea table .txtArea textarea {height:255px; padding:10px; resize: none; box-sizing: border-box;} #notice .writeArea .check {display: inline-block; margin-left:4%;} #notice .detailPage {margin-top:80px;} #notice .paperViewArea div { margin:50px 0 20px; text-align:center;} #notice .paperViewArea .imgArea img {width:auto;} #notice .paperViewArea span {display:inline-block; font-weight: bold; font-size:22px;} #notice .paperViewArea .green {color:#20a494;} @media all and (max-width:767px){ #notice .list_area .newsArea .newsBox {height:500px;} #notice .routineArea .txtBox{padding:20px 0;} #notice .routineArea .txtBox p{margin-top:20px;} #notice .routineArea .txtBox span{font-size:20px;} #notice .writeArea table .inputArea {display: block;} #notice .writeArea table .inputArea .input {display:inline-block; width:44%;} #notice .writeArea table .inputArea span {margin:0 1%;} #notice .writeArea table .inputArea .select {width:100%; height:30px; margin-top:10px;} } @media all and (max-width:500px){ #notice br.none {display: none;} #notice .detailPage {margin-top:0;} #notice .list_area{max-height: unset;} #notice .routineArea .imgArea {display: none;} #notice .routineArea .imgArea.mobile {display: block;} #notice .routineArea .txtBox{padding:15px 0;} #notice .routineArea .txtBox p{margin-top:15px;} #notice .routineArea .txtBox span{font-size:16px;} #notice .routineArea .tableTxt{font-size:14px;} #notice .honorlist .txtBox > div{padding:10px 15px;} #notice .honorlist .txtBox > div span.fl {width:70%;} #notice .honorlist .txtBox > div span.fr {width:30%;} #notice .honorlist .txtBox > div span.fl span:first-child {width:30px;} #notice .writeArea .check {display: block; margin-left:25px;} #notice .honorlist .txtBox .answerBox .tableArea table td, #notice .honorlist .txtBox .answerBox .tableArea table th {display: block;} #notice .honorlist .topArea .fl {float:none; display: block;} #notice .honorlist select {margin-top:10px;} #notice .honorlist .rightTxt {position: absolute; top:0; float:none; width:100%; padding:0; margin:0; text-align: left;} #notice .routineArea .contentArea table td {padding-left:5px; text-align: center;} #notice .list_area .newsArea .newsBox {width:100%; margin:0; height:auto;} #notice .list_area .newsArea .newsBox + .newsBox {margin-top:30px;} #notice .list_area .newsArea .newsBox:nth-child(2n-1), #notice .list_area .newsArea .newsBox:nth-child(2n) {float:none;} #notice .list_area .newsArea .txtArea a {display: inline-block; width:auto; margin: 5px 0;} #notice .routineArea .contentArea .basicTable + .basicTable td:first-child {padding:5px 10px 5px 0; text-align: left;} } @media all and (max-width:360px) { } #information p {text-align: justify;} #information .complaintArea .contentBox.bnone{border-bottom: 0;} #information .complaintArea .contentBox {padding-bottom: 50px; border-bottom:1px solid #ddd;} #information .complaintArea .contentBox .link {display:inline-block; padding-right:15px; color:#20a494; background:url(../images/infor/icon-window-g.png) no-repeat right center;} #information .complaintArea .plaintTxt {margin-top: 30px;} #information .complaintArea .plaintTxt .title {font-weight:bold; color:#20a494;} #information .complaintArea .plaintTxt .title > span {color:#727272; display: inline-block; font-weight: normal;} #information .complaintArea .plaintTxt ul {line-height: 28px;} #information .complaintArea .plaintTxt .blankBox {padding:10px; margin:0;} #information .complaintArea .plaintTxt .blankBox ul {margin:0;} #information .complaintArea .btnArea {text-align: left;} #information .contractArea .cont {width:100%; height:800px;} @media all and (max-width: 1180px){ #information .complaintArea .contentBox{padding-bottom: 20px;} } @media all and (max-width:500px) { #information .contractArea .cont {width:100%; height:800px;} } /* 기타부분 */ #etc p {text-align: justify;} #etc .green{color:#20a494;} #etc .red{color:#f05773;} #etc .txtArea {overflow:hidden;} #etc .txtArea .fl {color:#333; font-weight:bold; font-size:20px;} #etc .txtArea .rightTxt {width:200px;} #etc .etcArea{padding:30px 50px; border:1px solid #ddd; line-height: 1.8;} #etc .etcArea .block{display: block;} #etc .etcArea .mt20{margin-top:20px!important;} #etc .etcArea .list li:nth-child(2n){padding-left:20px;} #etc .etcArea .etcTxtArea{margin-top:40px;} #etc .etcArea .etcTxtArea .title{display: block; color:#222; font-weight: bold ;} #etc .etcArea .etcTxtArea p{margin-top:5px} #etc .etcArea .etcTxtArea table{margin-top:5px; border-top:2px solid #222;} #etc .etcArea .etcTxtArea table th{height:40px; border-bottom:1px solid #ddd; background: #f4f4f4; text-align: center; font-size:14px;} #etc .etcArea .etcTxtArea table td{padding:10px; text-align: center; font-size:14px; border-bottom:1px solid #ddd;} #etc .etcArea .etcTxtArea table td, #etc .etcArea .etcTxtArea table th{border-right:1px solid #ddd;} #etc .etcArea .etcTxtArea table td:last-child, #etc .etcArea .etcTxtArea table th:last-child{border-right: 0;} #etc .etcArea .etcTxtArea table.left td:last-child{padding-left:20px; text-align: left;} #etc .etcArea .etcTxtArea .txt-1{display: block; margin-top:20px; } #etc .etcArea .etcTxtArea .subTxtArea{margin-top:30px} #etc .etcArea .etcTxtArea .subTxtArea .title{color:#666;} #etc .etcArea .etcTxtArea .subTxtArea p{margin-top:0;} #etc .etcArea .etcTxtArea .subTxtArea ul{margin-top:20px;} #etc .etcArea .etcTxtArea .subTxtArea ul.left{padding-left:20px} #etc .agreeArea{padding:30px 50px; border:1px solid #ddd; line-height: 1.8;} #etc .agreeArea span{display: block;} #etc .agreeArea .title{font-size:20px; color:#222; font-weight: bold;} #etc .agreeArea .subTitle{font-size:18px; color:#222; margin-top:20px;} #etc .agreeArea p{margin-top:10px;} #etc .agreeArea ul li{padding-left:15px; margin-top:5px; text-indent: -15px; line-height: 1.8;} #etc .resultArea{margin-top:40px} #etc .resultArea .resultTitle{font-size:26px; color:#333; font-weight:bold;} #etc .resultArea .resultList{margin-top:30px;} #etc .resultArea .resultList .listBox{padding:30px; border-bottom:1px solid #ccc;} #etc .resultArea .resultList .listBox:first-child{border-top:1px solid #333;} #etc .resultArea .resultList .listBox span{font-size:18px; color:#333;} #etc .resultArea .resultList .listBox ul{margin-top:20px;} #etc .resultArea .resultList .listBox ul > li{position: relative; display: inline-block; padding:0 5px;} #etc .resultArea .resultList .listBox ul > li::after{content: ">"; position: absolute; top:50%; right:0; transform: translateY(-50%);} #etc .resultArea .resultList .listBox ul > li:first-child{padding:0; padding-right:15px;} #etc .resultArea .resultList .listBox ul > li:last-child::after{display: none;} #etc .tableArea {margin-top:50px;} #etc .tableArea .txt{font-size:18px;} #etc .tableArea .new img{margin-left:1%;} @media all and (max-width:500px){ #etc .resultArea .resultTitle {font-size:20px;} #etc .tableArea {margin-top:30px;} #etc .etcArea .etcTxtArea table td{padding:5px;} #etc .etcArea, #etc .agreeArea {padding:15px 20px;} #etc .tableArea .table table tbody td:nth-child(1) {width:500px;} } .moblieScroll {display:none; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;} .moblieScroll > img {width:100%; position: absolute; top:50%; left:50%; width:70px!important; height:70px!important; transform:translate(-50%, -50%)} @media all and (max-width:500px) { .moblieScroll {display:block;} } /* 2020.10. 첨부파일 이미지 아이콘 margin */ .btmArea .fileList img {margin-right:5px;} /*** 2023-04-04 개인정보처리방침 수정 ***/ #etc .etcArea .etcLabelling { margin:15px 0 0; border:1px solid #eee; } #etc .etcArea .etcLabelling h3 { background:#e9eff9; padding:15px 0 10px; text-align:center; border-bottom:1px solid #eee; } #etc .etcArea .etcLabelling .labeling ul { display:flex; flex-wrap:wrap; } #etc .etcArea .etcLabelling .labeling ul li { width:33%; text-align:center; padding:20px 15px; } #etc .etcArea .etcLabelling .labeling ul li .subject { font-size:15px; text-align:center; color:#333; font-weight:600; } #etc .etcArea .etcLabelling .labeling ul li .description { font-size:13px; text-align:center; } #etc .etcArea .etcLabelling .labeling ul li img { margin:10px 0; } #etc .etcArea .etcLabelling .listUp ul { padding:20px; } #etc .etcArea .etcLabelling .listUp ul li { } #etc .etcArea .etcTxtArea { /* padding:100px 0 0; */ } #etc .etcArea .etcTxtArea .title{display: flex; color:#0129c4; font-weight: bold ;} #etc .etcArea .etcTxtArea .title div { margin-left:auto; display:flex; } #etc .etcArea .etcTxtArea .title div img { width:35px; height:35px; margin-left:5px; } #etc .etcArea .etcTxtArea .fc-red { color:red; } #etc .etcArea .etcTxtArea .fc-red a { color:red; } #etc .etcArea .etcTxtArea .box { margin:10px 0 0; border:1px solid #e1e1e1; padding:15px; } #etc .etcArea .etcTxtArea .box .txtWrap { text-align:center; margin:20px 0; } #etc .etcArea .etcTxtArea .box .txtWrap a { padding:5px 10px; color:#333; border:1px solid #444; } #etc .etcArea .etcTxtArea .tableScroll table { table-layout:fixed; } #etc .etcArea .etcTxtArea .tableScroll table.nofixed { table-layout:auto; } #etc .etcArea .etcTxtArea .tableScroll table .text-left { text-align:left; } #etc .etcArea .etcTxtArea .tableScroll table .text-center { text-align:center; } #etc .etcArea .etcTxtArea .tableScroll table .text-right { text-align:right; } #etc .etcArea a.link { color:#333; text-decoration:underline; }