@charset "utf-8"; /* CSS Document */ button {-webkit-tap-highlight-color : transparent;} a {-webkit-tap-highlight-color : transparent;} input {-webkit-tap-highlight-color : transparent;} /****** 헤더 탑 *****/ #hdTopBanner {height: 100px; position: relative; z-index: 105; background-color: #fafafa;} #hdTopBanner .btn_hdT {width: 45px; height: 45px; border-radius: 50%; background-color: rgba(0,0,0,0.2); color: #fff; transition: all .25s ease; position: absolute; top: 30%; z-index: 100;} #hdTopBanner .btn_hdT:hover, #hdTopBanner .btn_hdT:focus {background-color: rgba(0,0,0,0.5);} #hdTopBanner .btn_hdT.prev {left: 20px;} #hdTopBanner .btn_hdT.next {right: 20px;} #hdTopBanner .btn_hdT2 { width: 22px; height: 22px; border-radius: 50%; background-color: #fff; margin: 0 5px; vertical-align: middle; transition: all .25s ease;} #hdTopBanner .btn_hdT2:hover {background-color: #005a70; color: #fff;} #hdTopBanner .hdTopNavWrap {position: absolute; right: 70px; bottom: 10px; z-index: 50; background-color: rgba(0,0,0,0.05); padding: 5px 10px; border-radius: 100px;} #hdTopBanner .hdTopNavWrap .nav1 {display: inline-block; vertical-align: middle; margin-right: 5px;} #hdTopBanner .hdTopNavWrap .nav1 .swiper-pagination-bullet {margin: 0 5px; vertical-align: middle; width: 7px; height: 7px; background-color: rgba(255,255,255,0.9); transition: all .25s ease;} #hdTopBanner .hdTopNavWrap .nav1 .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: transparent; border: 2px solid rgba(255,255,255,0.5); width: 15px; height: 15px;} #hdTopBanner .hdTopNavWrap .oneday {display: inline-block; vertical-align: middle;} #hdTopBanner .hdTopNavWrap .oneday label {font-size: 14px; color: #fff;} #hdTopBanner .hdTopBaSlide {width: 100%; height: 100%;} #hdTopBanner .hdTopBannerSl {width: 100%; height: 100%;} #hdTopBanner .one {width: 100%; height: 100px;} #hdTopBanner .one a {display: block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat;} @media all and (max-width:1900px){ #hdTopBanner .one a {background-size: cover;} } @media all and (max-width:1000px){ /** #hdTopBanner {display: none;} **/ } /**** 본문바로가기 ****/ #accessibility {width:100%; text-align: center; background-color:#333; position:absolute; top:-31px; left:0; z-index: 500; height:30px;} #accessibility a {color:#fff; font-size: 13px; display: inline-block; padding:6px 10px 6px;} .skip-navi{display:block;position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px;text-align:center;color:#fff !important;z-index:9999;} .skip-navi:focus,.skip-navi:active{padding:5px 0;width:100%; color:#fff; height:auto; background:#333} /**** 본문 ****/ #wrap {position:relative; width:100%; height:100%; overflow: hidden; min-height: 100vh;} .inner1300 {width:1300px; margin:0 auto; position:relative;} .inner1300:after {content: ""; display: block; clear: both;} .dpnone {display: none !important;} @media all and (max-width:1300px){ .inner1300 {width:100%; padding:0 10px;} } /******* 모바일 메뉴 *******/ .mobile_menu {display: none;} .mobile_menu_black {display: none;} @media all and (max-width:1000px){ /* 검정배경 */ .mobile_menu_black {position: fixed; left: 0; top: 0; z-index: 2400; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);} /* 모바일 메뉴 */ .mobile_menu {display: block; position: fixed; right: -300px; top: 0; z-index: 2500; width: 300px; height: 100%; background-color: #fff;} .mobile_menu .top_ul {display: flex; flex-wrap: wrap; height: auto; background-color: #222; border-bottom: 1px solid #555;} .mobile_menu .top_ul li {border-right: 1px solid #555; flex-grow: 1; border-top: 1px solid #555; margin-top: -1px;} .mobile_menu .top_ul li:last-of-type {border-right: none;} .mobile_menu .top_ul li a {display: block; height: 100%; display: flex; align-items: center; justify-content: center; padding:10px 10px; color: #fff; font-size: 14px;} .mobile_menu .top_ul li a.btn_close i {font-size: 27px; color: rgba(255,255,255,0.7);} .mobile_menu .search_b {height: 50px; width: 100%; border-bottom: 1px solid #eee;} .mobile_menu .search_b::after {content: ""; display: block; clear: both;} .mobile_menu .search_b input[type="text"] {float: left; width: 70%; height: 100%; font-size: 13px; border: none;} .mobile_menu .search_b button {float: left; width: 30%; height: 100%; font-size: 13px; background-color: #aaa; color: #fff;} .mobile_menu .bott_box {height: calc(100% - 142px); width: 100%; overflow-y: auto;} .mo_gnb {width: 100%;} .mo_gnb > li {border-bottom: 1px solid #e0e0e0;} .mo_gnb > li > a {display: block; padding: 18px 45px 17px 20px; position: relative;} .mo_gnb > li > a .txt {font-size: 17px; font-weight: 500; color: #333; letter-spacing: 0.02em;} .mo_gnb > li > a .icon {position: absolute; right: 18px; top: 18px; display: flex; justify-content: center; align-items: center; width: 23px; height: 23px; border:1px solid #e5e5e5;} .mo_gnb > li > a .icon i {font-size: 13px; color: #999;} .mo_gnb > li > a.active {} .mo_gnb > li > a.active .txt {color: #006f6f;} .mo_gnb > li > a.active .icon {border-color: #006f6f;} .mo_gnb > li > a.active .icon i {color: #006f6f;} .mo_gnb_depth2 {display:none; width: 100%; background-color: #f0f0f0;} .mo_gnb_depth2 > li {border-top: 1px solid #e0e0e0;} .mo_gnb_depth2 > li > a {display: block; padding: 13px 33px 12px 27px; position: relative; background-color: #f7f7f7;} .mo_gnb_depth2 > li > a .txt {font-size: 15px; color: #777;} .mo_gnb_depth2 > li > a .icon {position: absolute; right: 20px; top: 13px;} .mo_gnb_depth2 > li > a .icon i {font-size: 13px; color: #777;} .mo_gnb_depth2 > li > a.active {background-color: #e5ecff} .mo_gnb_depth2 > li > a.active .txt {color: #222;} .mo_gnb_depth2 > li > a.active .icon i {color: #222;} .mo_gnb_depth3 {display:none; width: 100%; background-color: #fff;} .mo_gnb_depth3 > li {border-top: 1px solid #e0e0e0;} .mo_gnb_depth3 > li > a {display: block; padding: 13px 33px 12px 35px; position: relative;} .mo_gnb_depth3 > li > a .txt {font-size: 15px; color: #777;} .mo_gnb_depth3 > li > a .icon {position: absolute; right: 20px; top: 13px;} .mo_gnb_depth3 > li > a .icon i {font-size: 13px; color: #777; transition: all .25s ease;} .mo_gnb_depth3 > li > a.active {background-color: #eaf7ff;} .mo_gnb_depth3 > li > a.active .txt {color: #222;} .mo_gnb_depth3 > li > a.active .icon i {color: #222; transform: rotate(180deg);} .mo_gnb_depth4 {display:none; width: 100%; background-color: #fff; padding: 18px 20px 18px 25px;} .mo_gnb_depth4 > li {margin-top: 7px;} .mo_gnb_depth4 > li:first-child {margin-top: 0;} .mo_gnb_depth4 > li > a {display: block; padding-left: 15px; position: relative; font-size: 14px;} .mo_gnb_depth4 > li > a::before {content: ""; width: 5px; height: 1px; background-color: #888; position: absolute; left: 0; top: 11px;} /* color */ /* 블루 */ .mobile_menu.blue .top_ul {background-color: #2557be; border-bottom-color: #3977f6;} .mobile_menu.blue .top_ul li {border-right-color: #3977f6; border-top-color: 1px solid #3977f6;} .mo_gnb > li > a.active .txt {color: #2557be;} .mo_gnb > li > a.active .icon {border-color: #2557be;} .mo_gnb > li > a.active .icon i {color: #2557be;} /* 그린 */ .mobile_menu.green .top_ul {background-color: #00a162; border-bottom-color: #00b871;} .mobile_menu.green .top_ul li {border-right-color: #00b871; border-top-color: 1px solid #00b871;} .mobile_menu.green .mo_gnb > li > a.active .txt {color: #00a162;} .mobile_menu.green .mo_gnb > li > a.active .icon {border-color: #00a162;} .mobile_menu.green .mo_gnb > li > a.active .icon i {color: #00a162;} /* 오렌지 */ .mobile_menu.orange .top_ul {background-color: #ff9000; border-bottom-color: #ffab3c;} .mobile_menu.orange .top_ul li {border-right-color: #ffab3c; border-top-color: 1px solid #ffab3c;} .mobile_menu.orange .mo_gnb > li > a.active .txt {color: #ff9000;} .mobile_menu.orange .mo_gnb > li > a.active .icon {border-color: #ff9000;} .mobile_menu.orange .mo_gnb > li > a.active .icon i {color: #ff9000;} /* 퍼플 */ .mobile_menu.purple .top_ul {background-color: #7638a3; border-bottom-color: #9e3ee2;} .mobile_menu.purple .top_ul li {border-right-color: #9e3ee2; border-top-color: 1px solid #9e3ee2;} .mobile_menu.purple .mo_gnb > li > a.active .txt {color: #7638a3;} .mobile_menu.purple .mo_gnb > li > a.active .icon {border-color: #7638a3;} .mobile_menu.purple .mo_gnb > li > a.active .icon i {color: #7638a3;} /* 컬러 */ /* 블루 */ #wrap.blue .mobile_menu .top_ul {background-color: #2557be; border-bottom-color: #3977f6;} #wrap.blue .mobile_menu .top_ul li {border-right-color: #3977f6; border-top-color: 1px solid #3977f6;} #wrap.blue .mo_gnb > li > a.active .txt {color: #2557be;} #wrap.blue .mo_gnb > li > a.active .icon {border-color: #2557be;} #wrap.blue .mo_gnb > li > a.active .icon i {color: #2557be;} /* 그린 */ #wrap.green .mobile_menu .top_ul {background-color: #00a162; border-bottom-color: #00b871;} #wrap.green .mobile_menu .top_ul li {border-right-color: #00b871; border-top-color: 1px solid #00b871;} #wrap.green .mobile_menu .mo_gnb > li > a.active .txt {color: #00a162;} #wrap.green .mobile_menu .mo_gnb > li > a.active .icon {border-color: #00a162;} #wrap.green .mobile_menu .mo_gnb > li > a.active .icon i {color: #00a162;} /* 오렌지 */ #wrap.orange .mobile_menu .top_ul {background-color: #ff9000; border-bottom-color: #ffab3c;} #wrap.orange .mobile_menu .top_ul li {border-right-color: #ffab3c; border-top-color: 1px solid #ffab3c;} #wrap.orange .mobile_menu .mo_gnb > li > a.active .txt {color: #ff9000;} #wrap.orange .mobile_menu .mo_gnb > li > a.active .icon {border-color: #ff9000;} #wrap.orange .mobile_menu .mo_gnb > li > a.active .icon i {color: #ff9000;} /* 퍼플 */ #wrap.purple .mobile_menu .top_ul {background-color: #7638a3; border-bottom-color: #9e3ee2;} #wrap.purple .mobile_menu .top_ul li {border-right-color: #9e3ee2; border-top-color: 1px solid #9e3ee2;} #wrap.purple .mobile_menu .mo_gnb > li > a.active .txt {color: #7638a3;} #wrap.purple .mobile_menu .mo_gnb > li > a.active .icon {border-color: #7638a3;} #wrap.purple .mobile_menu .mo_gnb > li > a.active .icon i {color: #7638a3;} /* 청록 */ #wrap.teal .mobile_menu .top_ul {background-color: #005975; border-bottom-color: #017092;} #wrap.teal .mobile_menu .top_ul li {border-right-color: #017092; border-top-color: 1px solid #017092;} #wrap.teal .mobile_menu .mo_gnb > li > a.active .txt {color: #005975;} #wrap.teal .mobile_menu .mo_gnb > li > a.active .icon {border-color: #005975;} #wrap.teal .mobile_menu .mo_gnb > li > a.active .icon i {color: #005975;} } /******* 헤더 탑 *******/ #hd_top {width:100%; background-color: #222;} #hd_top .inner1300 {display: flex; flex-wrap: wrap; height: 35px;} #hd_top .lb {margin-right: auto; height: 100%;} #hd_top .rb {height: 100%;} #hd_top .hd_tMenu {height: 100%; display: flex;} #hd_top .hd_tMenu > li {height: 100%; margin: 0 10px;} #hd_top .hd_tMenu > li:first-of-type {margin-left:0;} #hd_top .hd_tMenu > li a {line-height: 35px; color: #fff; font-size: 14px; font-weight: 400;} #hd_top .hd_tMenu > li a:hover, #hd_top .hd_tMenu > li a:focus {text-decoration: underline;} #hd_top .sear_txt {height: 100%; border: 1px solid #eee; width: 200px; font-size: 14px; border-top: none;} #hd_top .sear_txt::placeholder {font-size: 13px; color:#aaa; font-weight: 300;} #hd_top .btn_searT {height: 100%; background-color: gray; color: #fff; margin: 0 0 0 -5px; width: 60px; font-weight: 400; transition: all .25s ease;} /* color */ /* 블루 */ #hd_top.blue {background-color: #2557be;} #hd_top.blue .btn_searT {background-color: #477eec;} #hd_top.blue .btn_searT:hover, #hd_top.blue .btn_searT:focus {background-color: #3288e4;} /* 그린 */ #hd_top.green {background-color: #00a162;} #hd_top.green .btn_searT {background-color: #04c47a;} #hd_top.green .btn_searT:hover, #hd_top.green .btn_searT:focus {background-color: #0cb172;} /* 오렌지 */ #hd_top.orange {background-color: #ff9000;} #hd_top.orange .btn_searT {background-color: #ffb351;} #hd_top.orange .btn_searT:hover, #hd_top.orange .btn_searT:focus {background-color: #e29735;} /* 퍼플 */ #hd_top.purple {background-color: #7638a3;} #hd_top.purple .btn_searT {background-color: #913fcc;} #hd_top.purple .btn_searT:hover, #hd_top.purple .btn_searT:focus {background-color: #6f27a3;} /* 컬러 */ /* 블루 */ #wrap.blue #hd_top {background-color: #2557be;} #wrap.blue #hd_top .btn_searT {background-color: #477eec;} #wrap.blue #hd_top .btn_searT:hover, #wrap.blue #hd_top .btn_searT:focus {background-color: #3288e4;} #wrap.blue .headerTrans {height: 100%; background: #2557be; border: none; height: 100%; color: #fff; font-weight: 400; font-size: 14px;} /* 그린 */ #wrap.green #hd_top {background-color: #00a162;} #wrap.green #hd_top .btn_searT {background-color: #04c47a;} #wrap.green #hd_top .btn_searT:hover, #wrap.green #hd_top .btn_searT:focus {background-color: #0cb172;} #wrap.green .headerTrans {height: 100%; background: #00a162; border: none; height: 100%; color: #fff; font-weight: 400; font-size: 14px;} /* 오렌지 */ #wrap.orange #hd_top {background-color: #ff9000;} #wrap.orange #hd_top .btn_searT {background-color: #ffb351;} #wrap.orange #hd_top .btn_searT:hover, #wrap.orange #hd_top .btn_searT:focus {background-color: #e29735;} #wrap.orange .headerTrans {height: 100%; background: #ff9000; border: none; height: 100%; color: #fff; font-weight: 400; font-size: 14px;} /* 퍼플 */ #wrap.purple #hd_top {background-color: #7638a3;} #wrap.purple #hd_top .btn_searT {background-color: #913fcc;} #wrap.purple #hd_top .btn_searT:hover, #wrap.purple #hd_top .btn_searT:focus {background-color: #6f27a3;} #wrap.purple .headerTrans {height: 100%; background: #7638a3; border: none; height: 100%; color: #fff; font-weight: 400; font-size: 14px;} /* 청록 */ #wrap.teal #hd_top {background-color: #005975;} #wrap.teal #hd_top .btn_searT {background-color: #037496;} #wrap.teal #hd_top .btn_searT:hover, #wrap.teal #hd_top .btn_searT:focus {background-color: #0493be;} #wrap.teal .headerTrans {height: 100%; background: #005975; border: none; height: 100%; color: #fff; font-weight: 400; font-size: 14px;} @media all and (max-width:1000px){ #hd_top {display: none;} } /******* 헤더 *******/ #hd {width: 100%; height: 90px; position: relative; z-index: 1888;} #hd .inner {width: 1300px; margin: 0 auto;} #hd .inner::after {content: ""; display: block; clear: both;} #hd .logo_box {float: left; margin-top: 28px; width: 500px;} #hd .logo_box a {display: flex; align-items: center;} #hd .logo_box a .img_1 {} #hd .logo_box a .line {display: block; width:2px; height: 20px; background-color: #3f4646; margin: 5px 12px 0;} #hd .logo_box a .txt {font-size: 19px; font-weight: 500; color:#231815; margin-top: 3px; line-height: 1; letter-spacing: -0.07em;} #hd .right_box {float: right; width: calc(100% - 500px);} #hd .right_box::after {content: ""; display: block; clear: both;} #hd .main_menu_box {float:left; width: calc(100% - 65px); height: 90px;} #gnb {width: 100%; display: flex;} #gnb > li {flex-grow: 1; position: relative;} #gnb > li > a {display: block; line-height: 90px; height: 90px; text-align: center;} #gnb > li > a span {display: inline-block; position: relative; font-size: 19px; font-weight: 400; transition: all .25s ease; line-height: 35px; padding-top: 30px;} #gnb > li:hover > a span, #gnb > li > a:focus span {color: #222; font-weight: 500;} #gnb .gnb_depth2 {display:none; position: absolute; left: -10%; top: calc(100% - 10px); z-index: 10; width: 120%; padding: 25px 10px; background-color: #00163b; text-align: center;} #gnb .gnb_depth2 > li {margin-top: 10px;} #gnb .gnb_depth2 > li:first-child {margin-top: 0;} #gnb .gnb_depth2 > li > a {display: block; font-size: 15px; font-weight: 400; color: #fff;} #gnb .gnb_depth2 > li > a:hover, #gnb .gnb_depth2 > li > a:focus {text-decoration: underline; color: #f5f53b;} #hd .btn_box {float:right; width:65px; line-height: 90px; text-align: right; padding-right: 5px;} #hd .btn_box .btn_siteMap {margin-left: 12px; background-color: #222; width: 50px; height: 50px; padding-left: 10px; transition: all .25s ease;} #hd .btn_box .btn_siteMap .line {display: block; width: 70%; height: 3px; background-color: #fff; margin-top: 6px; transition: all .25s ease;} #hd .btn_box .btn_siteMap .line:first-of-type {margin-top: 0;} #hd .btn_box .btn_siteMap .line.short {width: 50%;} #hd .btn_box .btn_siteMap:hover, #hd .btn_box .btn_siteMap:focus {background-color: #555;} #hd .btn_box .btn_siteMap:hover .line, #hd .btn_box .btn_siteMap:focus .line {} #hd .btn_box .btn_siteMap:hover .line.short, #hd .btn_box .btn_siteMap:focus .line.short {width: 70%;} #hd .btn_box .btn_MobileMenu {width: 20px; margin-left: 12px; display: none;} #hd .btn_box .btn_MobileMenu .line {display: block; width: 100%; height: 2px; background-color: #111; margin-top: 5px; transition: all .25s ease;} #hd .btn_box .btn_MobileMenu .line:first-of-type {margin-top: 0;} #hd .btn_box .btn_MobileMenu .line.short {width: 70%;} #hd .btn_box .btn_MobileMenu:hover .line, #hd .btn_box .btn_MobileMenu:focus .line {background-color: #015252;} #hd .btn_box .btn_MobileMenu:hover .line.short, #hd .btn_box .btn_MobileMenu:focus .line.short {width: 100%;} /* color */ /* 블루 */ #gnb.blue > li:hover > a span, #gnb.blue > li > a:focus span {color: #2557be; font-weight: 500;} #gnb.blue .gnb_depth2 {background-color: #2557be;} #hd .btn_box .btn_siteMap.blue {background-color: #2557be;} #hd .btn_box .btn_siteMap.blue:hover, #hd .btn_box .btn_siteMap.blue:focus {background-color: #4795e5;} /* 그린 */ #gnb.green > li:hover > a span, #gnb.green > li > a:focus span {color: #00a162; font-weight: 500;} #gnb.green .gnb_depth2 {background-color: #00a162;} #hd .btn_box .btn_siteMap.green {background-color: #00a162;} #hd .btn_box .btn_siteMap.green:hover, #hd .btn_box .btn_siteMap.green:focus {background-color: #03c97d;} /* 오렌지 */ #gnb.orange > li:hover > a span, #gnb.orange > li > a:focus span {color: #ff9000; font-weight: 500;} #gnb.orange .gnb_depth2 {background-color: #ff9000;} #gnb.orange .gnb_depth2 > li > a:hover, #gnb.orange .gnb_depth2 > li > a:focus {text-decoration: underline; color: #fff;} #hd .btn_box .btn_siteMap.orange {background-color: #ff9000;} #hd .btn_box .btn_siteMap.orange:hover, #hd .btn_box .btn_siteMap.orange:focus {background-color: #ffa42d;} /* 퍼플 */ #gnb.purple > li:hover > a span, #gnb.purple > li > a:focus span {color: #7638a3; font-weight: 500;} #gnb.purple .gnb_depth2 {background-color: #7638a3;} #hd .btn_box .btn_siteMap.purple {background-color: #7638a3;} #hd .btn_box .btn_siteMap.purple:hover, #hd .btn_box .btn_siteMap.purple:focus {background-color: #954bca;} /* 컬러 */ /* 블루 */ #wrap.blue #gnb > li:hover > a span, #wrap.blue #gnb > li > a:focus span {color: #2557be; font-weight: 500;} #wrap.blue #gnb .gnb_depth2 {background-color: #2557be;} #wrap.blue #hd .btn_box .btn_siteMap {background-color: #2557be;} #wrap.blue #hd .btn_box .btn_siteMap:hover, #wrap.blue #hd .btn_box .btn_siteMap:focus {background-color: #4795e5;} /* 그린 */ #wrap.green #gnb > li:hover > a span, #wrap.green #gnb > li > a:focus span {color: #00a162; font-weight: 500;} #wrap.green #gnb .gnb_depth2 {background-color: #00a162;} #wrap.green #hd .btn_box .btn_siteMap {background-color: #00a162;} #wrap.green #hd .btn_box .btn_siteMap:hover, #wrap.green #hd .btn_box .btn_siteMap:focus {background-color: #03c97d;} /* 오렌지 */ #wrap.orange #gnb > li:hover > a span, #wrap.orange #gnb > li > a:focus span {color: #ff9000; font-weight: 500;} #wrap.orange #gnb .gnb_depth2 {background-color: #ff9000;} #wrap.orange #gnb .gnb_depth2 > li > a:hover, #wrap.orange #gnb .gnb_depth2 > li > a:focus {text-decoration: underline; color: #fff;} #wrap.orange #hd .btn_box .btn_siteMap {background-color: #ff9000;} #wrap.orange #hd .btn_box .btn_siteMap:hover, #wrap.orange #hd .btn_box .btn_siteMap:focus {background-color: #ffa42d;} /* 퍼플 */ #wrap.purple #gnb > li:hover > a span, #wrap.purple #gnb > li > a:focus span {color: #7638a3; font-weight: 500;} #wrap.purple #gnb .gnb_depth2 {background-color: #7638a3;} #wrap.purple #hd .btn_box .btn_siteMap {background-color: #7638a3;} #wrap.purple #hd .btn_box .btn_siteMap:hover, #wrap.purple #hd .btn_box .btn_siteMap:focus {background-color: #954bca;} /* 청록 */ #wrap.teal #gnb > li:hover > a span, #wrap.teal #gnb > li > a:focus span {color: #005975; font-weight: 500;} #wrap.teal #gnb .gnb_depth2 {background-color: #005975;} #wrap.teal #hd .btn_box .btn_siteMap {background-color: #005975;} #wrap.teal #hd .btn_box .btn_siteMap:hover, #wrap.teal #hd .btn_box .btn_siteMap:focus {background-color: #008bb6;} @media all and (max-width:1500px){ #hd .inner {width: 100%; padding: 0 10px;} #gnb .gnb_subMenu .info .in {padding:60px 10px 0 20px; margin: 0; width: 100%;} #gnb .gnb_subMenu .menu_b {width: 69.8%;} #gnb .gnb_subMenu .gnb_depth2 {width: 33.33%;} #hd .wrap_menu .bg_01_sub {} #hd .wrap_menu .bg_01_sub .left_txt {left: 0; width: auto; margin-left: 0;} #hd .wrap_menu .bg_01_sub .left_txt .txt {font-size: 13px;} #hd .wrap_menu .bg_01_sub .left_txt .gnb_title {} #hd .wrap_menu .bg_01_sub .left_txt .gnb_title .txt2 {font-size: 17px;} #hd .wrap_menu .bg_01_sub .left_txt .gnb_title .circle {width: 20px; height: 20px; font-size: 12px; margin-left: 5px;} #gnb .gnb_depth2 > li > a {font-size: 14px;} #hd .btn_box .btn_siteMap {margin-left: 10px; width: 40px; height: 40px; padding-left: 10px;} #hd .btn_box .btn_siteMap .line {height: 2px;} } @media all and (max-width:1200px){ /******* 헤더 *******/ #hd {} #hd .logo_box {margin-top: 32px; width: 250px; padding-right: 10px;} #hd .logo_box a {display: flex; align-items: center;} #hd .logo_box a .img_1 {} #hd .logo_box a .img_1 img {width: 110px;} #hd .logo_box a .line {width:1px; height: 15px; margin: 5px 5px 0;} #hd .logo_box a .txt {font-size: 15px;} #hd .right_box {width: calc(100% - 250px);} #hd .main_menu_box {width: calc(100% - 100px);} #gnb > li > a span {font-size: 18px;} #gnb .gnb_subMenu .info {width: 23%;} #gnb .gnb_subMenu .menu_b {width: 77%; background-color: #f4f4f4;} } @media all and (max-width:1000px){ #hd {height: 70px !important; display: flex;} #hd .wrap_menu {height: 70px !important;} #hd .logo_box {margin-top: 20px; width: auto; margin-left: 10px; padding-right: 0;} #hd .logo_box a {display: flex; align-items: center;} #hd .logo_box a .img_1 {} #hd .logo_box a .img_1 img {width: 95px;} #hd .logo_box a .line {width:1px; height: 13px; margin: 5px 5px 0;} #hd .logo_box a .txt {font-size: 13px;} #hd .right_box {width: auto;} #hd .main_menu_box {display: none;} #hd .btn_top_search {display: none;} #hd .btn_siteMap {display: none;} #hd .btn_box {line-height: 60px;} #hd .btn_box .btn_MobileMenu {display: inline-block;} } /******* 풋터 메뉴 *******/ .ft_menu_wrap {width: 100%; background-color: #4d4d4d;} .ft_menu_wrap .ft_menu {width: 100%; display: flex; flex-wrap: wrap;} .ft_menu_wrap .ft_menu > li {width: 20%; border-right: 1px solid #5a5a5a;} .ft_menu_wrap .ft_menu > li:first-of-type {border-left: 1px solid #5a5a5a;} .ft_menu_wrap .ft_menu > li a {display: block; text-align: center; font-size: 15px; color: #999; padding: 16px 10px 14px; font-weight: 400; transition: all .25s ease;} .ft_menu_wrap .ft_menu > li a.yellow {color: #ffd200;} .ft_menu_wrap .ft_menu > li a:hover, .ft_menu_wrap .ft_menu > li a:focus {text-decoration: underline; color: #ffd200; background-color: #222;} .ft_snsbtn {margin-top:20px;} .ft_snsbtn ul {display:flex; justify-content:flex-end; align-items:center;} .ft_snsbtn ul li {margin:0 6px;} .ft_snsbtn ul li a {} .ft_snsbtn ul li a img {} .top_box {display : contents;} @media all and (max-width:1000px){ /******* 풋터 메뉴 *******/ .ft_menu_wrap {} .ft_menu_wrap .inner1300 {padding: 0;} .ft_menu_wrap .ft_menu {width: 100%; display: flex; flex-wrap: wrap;} .ft_menu_wrap .ft_menu > li {width: 33.33%; border-right: 1px solid #5a5a5a; border-top: 1px solid #5a5a5a;} .ft_menu_wrap .ft_menu > li a {font-size: 12px; padding: 12px 5px 10px;} } /******* 풋터 *******/ #ft {width: 100%; background-color: #353535; padding:33px 0;} #ft .inner1300 {display: flex;} #ft .lb {margin-right: auto;} #ft .logo_box {margin-bottom: 25px;display: flex; align-items: center;} #ft .logo_box p{color: #999; font-size: 21px; font-weight:500} #ft address {} #ft address p {color: #999; font-size: 14px;} #ft address p b {color: #fff; font-weight: 400;} #ft address .eng {color: #666; margin-top: 5px; font-weight: 400;} #ft .rb {text-align: right; padding-top: 5px;} #ft .ft_menu {display: inline-flex; margin-bottom: 25px;} #ft .ft_menu > li {padding: 0 17px;} #ft .ft_menu > li:last-child {padding-right: 0;} #ft .ft_menu > li > a {color: #aaa; font-size: 15px; color: #999; font-weight: 400;} #ft .ft_menu > li > a.yellow {color: #ffee8a;} #ft .ft_menu > li > a:hover, #ft .ft_menu > li > a:focus {text-decoration: underline; color: #fff;} #ft .ft_select {min-width: auto; background-color: #2d2d2d; color: #999; height: 40px; font-size: 15px; font-weight: 400; border-radius: 25px; padding: 0 30px 0 65px; background-image: url('/resources/user/class/img/icon/icon_ft_hamburger.png'); background-repeat: no-repeat; background-position: left 35px center; border: none;} #ft .ft_select option {padding-left: 0; color: #222; color: #fff; } @media all and (max-width:1000px){ /******* 풋터 *******/ #ft {padding:20px 10px;} #ft .inner1300 {display: block;} #ft .lb {text-align: center; margin-bottom: 10px;} #ft .logo_box {margin-bottom: 10px; justify-content: center;} /* #ft .logo_box img {width: 250px;} */ #ft .logo_box img {width: 131px;} #ft .logo_box p {font-size: 14px;} #ft address {} #ft address p {font-size: 12px; word-break: keep-all;} #ft address p b {font-weight: 400;} #ft address .eng {margin-top: 5px; font-weight: 400;} #ft .rb {text-align: center; padding-top: 5px;} #ft .ft_menu {display:flex; flex-wrap: wrap; margin-bottom: 25px;} #ft .ft_menu > li {padding:2px 5px; text-align: center; width: 50%;} #ft .ft_menu > li > a {font-size: 13px;} #ft .ft_select {width:100%; margin: -1px 0 0; height: 40px; font-size: 14px; padding: 0 50px 0 62px;} .ft_snsbtn ul {justify-content:center;} .ft_snsbtn ul li {margin:0 10px;} .ft_snsbtn ul li a img {width:30px;} } /*********** 컨텐츠 ***********/ /* 공통 */ #contents {} #contents:after { visibility: hidden;display:block;font-size: 0;content:".";clear: both;height: 0;*zoom:1;} .sub_Mcontents {padding: 55px 0 80px;} .sub_Mcontents.db {background-color: #f9f9f9; padding-top: 67px;} .sub_Mcontents.db .sub_conStart {background-color: #fff; padding: 45px 40px;} .sub_r_conStart {float:right; width: 80.5%; padding-left: 4%; min-height: 550px;} /* 블라인드 */ span.tn {display: block; width: 0; height: 0; overflow:hidden; text-indent: -9999px;} /* 서브타이틀 */ .sub_title_wrap {margin-bottom: 50px;} .sub_title_wrap h2 {font-size: 30px; font-weight: 500; color: #222; line-height: 1.2; display: inline;} .subExplain {width: 800px; display: inline-block; margin-left: 20px; font-size: 14px;} @media all and (max-width:1300px){ .subExplain {width: 600px; display: inline-block; margin-left: 10px; font-size:12px;} } @media all and (max-width:700px){ .subExplain {width: 100%; display: inline-block; margin-left: 0px; margin-top:10px; font-size:12px;} } @media all and (max-width:1400px){} @media all and (max-width:1000px){ /*서브*/ .sub-content {min-height: auto;} .sub_Mcontents {padding: 30px 5px 35px;} .sub_Mcontents.db {padding-top: 30px;} .sub_Mcontents.db .sub_conStart {padding: 25px 10px;} .sub_r_conStart {float:none; width: 100%; padding-left: 0; min-height: auto;} /* 서브타이틀 */ .sub_title_wrap {margin-bottom: 25px;} .sub_title_wrap h2 {font-size: 20px;} } /****** 서브왼쪽 메뉴 *****/ .sub_left_menu_wrap {float:left; width: 19.5%;} .sub_left_menu_wrap .title {width: 100%; border-bottom: 3px solid #00163b; padding:5px 10px 37px;} .sub_left_menu_wrap .title h1 {font-size: 25px; font-weight: 500; color: #111; line-height: 1;} .sub_left_menu {width: 100%;} .sub_left_menu > li {width: 100%; position: relative;} .sub_left_menu > li > a {display:block; width: 100%; padding: 24px 10px 23px 20px; border-bottom: 1px solid #e3e3e3; font-size: 16px; color: #111; font-weight: 400; transition: all .25s ease;} .sub_left_menu > li:first-child > a {border-top: 1px solid #e3e3e3;} .sub_left_menu > li > a:hover, .sub_left_menu > li > a:focus {color: #222; text-decoration: underline; font-weight: 500;} .sub_left_menu > li > a.active {background-color: #222; color: #fff; border-color: #222;} /* color */ /* 블루 */ .sub_left_menu.blue > li > a:hover, .sub_left_menu.blue > li > a:focus {color: #2557be;} .sub_left_menu.blue > li > a.active {background-color: #2557be; border-color: #2557be; color: #fff;} /* 그린 */ .sub_left_menu.green > li > a:hover, .sub_left_menu.green > li > a:focus {color: #00a162;} .sub_left_menu.green > li > a.active {background-color: #00a162; border-color: #00a162; color: #fff;} /* 오렌지 */ .sub_left_menu.orange > li > a:hover, .sub_left_menu.orange > li > a:focus {color: #ff9000;} .sub_left_menu.orange > li > a.active {background-color: #ff9000; border-color: #ff9000; color: #fff;} /* 퍼플 */ .sub_left_menu.purple > li > a:hover, .sub_left_menu.purple > li > a:focus {color: #7638a3;} .sub_left_menu.purple > li > a.active {background-color: #7638a3; border-color: #7638a3; color: #fff;} /* 컬러 */ /* 블루 */ #wrap.blue .sub_left_menu > li > a:hover, #wrap.blue .sub_left_menu > li > a:focus {color: #2557be;} #wrap.blue .sub_left_menu > li > a.active {background-color: #2557be; border-color: #2557be; color: #fff;} /* 그린 */ #wrap.green .sub_left_menu > li > a:hover, #wrap.green .sub_left_menu > li > a:focus {color: #00a162;} #wrap.green .sub_left_menu > li > a.active {background-color: #00a162; border-color: #00a162; color: #fff;} /* 오렌지 */ #wrap.orange .sub_left_menu > li > a:hover, #wrap.orange .sub_left_menu > li > a:focus {color: #ff9000;} #wrap.orange .sub_left_menu > li > a.active {background-color: #ff9000; border-color: #ff9000; color: #fff;} /* 퍼플 */ #wrap.purple .sub_left_menu > li > a:hover, #wrap.purple .sub_left_menu > li > a:focus {color: #7638a3;} #wrap.purple .sub_left_menu > li > a.active {background-color: #7638a3; border-color: #7638a3; color: #fff;} /* 청록 */ #wrap.teal .sub_left_menu > li > a:hover, #wrap.teal .sub_left_menu > li > a:focus {color: #005975;} #wrap.teal .sub_left_menu > li > a.active {background-color: #005975; border-color: #005975; color: #fff;} @media all and (max-width:1000px){ .sub_left_menu_wrap {display: none;} } /******* 서브 탑 컨텐츠 *******/ #subTopCon {width: 100%; position: relative;} #subTopCon .txt_box {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; top:0;} #subTopCon .txt_box h2 {font-size: 45px; color:#fff; font-weight: 400; text-shadow: 0 0 10px rgba(0,0,0,0.4); line-height: 1.4; margin:-25px 0 15px; letter-spacing: -0.05em;} #subTopCon .txt_box h2 .big {font-size: 1.05em;} #subTopCon .txt_box h3 {text-align: center; font-size: 30px; color: #fff; font-weight: 400; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.2); margin-top: -40px;} #subTopCon .img_box {width: 100%; height:200px; overflow: hidden; z-index: -1; position: relative;} /* #subTopCon .img_box::before {content: ""; display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 10;} */ #subTopCon .img_box img {max-width: none; min-width: 100%; min-height: 105%; animation:subBg 2s forwards;} #subTopCon .bad {background:url(/resources/user/class/sub/bad/sub/sub_top_img.jpg) no-repeat top center, #580b8b;} @media (max-width: 1500px) { #subTopCon .bad{background:url(/resources/user/class/sub/bad/sub/sub_top_img_text.jpg) no-repeat center left 10px, url(/resources/user/class/sub/bad/sub/sub_top_img_painting.jpg) no-repeat center right 10px, #580b8b;} } @media (max-width: 1200px) { #subTopCon .bad{background-size:340px, 185px;} } @media (max-width: 1000px) { #subTopCon .bad{background-size:200px, 145px;} } @media (max-width: 670px) { #subTopCon .bad{background:url(/resources/user/class/sub/bad/sub/sub_top_img_tmobile.jpg) no-repeat center left 10px, url(/resources/user/class/sub/bad/sub/sub_top_img_painting.jpg) no-repeat center right 10px, #580b8b;} #subTopCon .bad{background-size:140px, 100px;} } @media (max-width: 360px) { #subTopCon .bad{background:url(/resources/user/class/sub/bad/sub/sub_top_img_painting.jpg) no-repeat center right 10px, #580b8b;} #subTopCon .bad{background-size:100px;} } @keyframes subBg { 0% {transform: scale3d(1,1,1);} 100% {transform: scale3d(1.03,1.03,1.03);} } #subTopCon .subTop_menu {width: 100%; height: 50px; background-color: #005a70; border-bottom: 1px solid #ececec;} #subTopCon .subTop_menu .in {display:flex; width: 1400px; height: 100%; margin: 0 auto;} #subTopCon .subTop_menu .lb {margin-right: auto;} #subTopCon .subTop_menu .rb {margin-left: auto; position: relative;} .subMenu_ul {height: 100%;} .subMenu_ul::after {display:block; content:""; clear: both;} .subMenu_ul > li {float: left; height: 100%; position: relative;} .subMenu_ul > li .a1 {display:block; height: 100%; padding:14px 40px 16px 23px; transition: all 0.3s ease; min-width:200px; position: relative; } .subMenu_ul > li .a1::after {content:""; display:block; clear:both;} .subMenu_ul > li.home .a1 {min-width: auto; padding:14px 23px;} .subMenu_ul > li.home i {color:#fff; font-size:16px;} .subMenu_ul > li:hover .a1 {background-color:#111; } .subMenu_ul > li .a1 .txt {float:left; font-size:14px; color:#fff; font-weight: 400;} .subMenu_ul > li .a1 .arrow {position: absolute; top:11px; right: 18px; color:#fff;} .subMenu_ul > li .a1 .arrow i {font-size: 12px; transition: all 0.3s ease;} .subMenu_ul > li .a1.active .arrow i {transform: rotate(180deg);} .subMenu_in {display:none; position: absolute; left:-1px; top:49px; width: calc(100% + 2px); background-color: #fff; z-index: 5000; padding: 18px 20px; border:1px solid #ddd; } .subMenu_in li { margin-top: 10px; } .subMenu_in li:first-child { margin-top: 0px; } .subMenu_in li a { font-size:14px; font-weight: 500; color:#666; } .subMenu_in li a:hover { font-weight: 600; color:#222; } .subMenu_in li.active a { font-weight: 600; color:#222; } @media all and (max-width:1000px){ /******* 서브 탑 컨텐츠 *******/ .subMenu_in {top:44px; padding:13px 20px;} .subMenu_in li {margin-top:5px;} .subMenu_in li a {font-size:12px;} .subMenu_ul > li {height: auto; margin: 0px 0 0 -1px; } .subMenu_ul > li:nth-of-type(2) {display: none;} .subMenu_ul > li:nth-of-type(3) {display: none;} .subMenu_ul > li:last-of-type {display: block;} .subMenu_ul > li.home {width: auto;} .subMenu_ul > li.home .a1 {padding:10px 18px;} .subMenu_ul > li .a1 {padding:14px 40px 9px 23px; min-width:171px;} .subMenu_ul > li .a1 .txt {font-size:12px;} .subMenu_ul > li.home i {font-size:12px;} } /* 오른쪽 메뉴 */ #subTopCon .subTop_menu .btn_sTop {height: 100%; width:55px; margin-left: -5px; color: #fff; font-size: 16px; transition: all .25s ease} #subTopCon .subTop_menu .btn_sTop img {margin-top: -7px;} #subTopCon .subTop_menu .btn_sTop.sTopNormal {font-size: 16px;} #subTopCon .subTop_menu .btn_sTop:hover, #subTopCon .subTop_menu .btn_sTop:focus {background-color:#111;} .s-sns-wrap {display:none; position: absolute; right:0; top: 105%; background-color:#fff; z-index: 100; border:1px solid #ddd; padding:15px; width: 300px; } .s-sns-wrap .row {margin:7px 0 0;} .s-sns-wrap .row:first-of-type {margin-top:0;} .s-sns-wrap .tit {float:left; padding-top: 6px; width:22%; font-size: 13px; font-weight: 500; padding-left: 3px;} .s-sns-wrap .sns-b-ul {float:left;} .s-sns-wrap .sns-b-ul:after { visibility: hidden;display:block;font-size: 0;content:".";clear: both;height: 0;*zoom:1;} .s-sns-wrap .sns-b-ul li {float:left; margin:0 3px;} .s-sns-wrap .sns-b-ul li a {display: block;} .s-sns-wrap .sns-b-ul li a .icon {display: block; width: 29px; height: 29px; background-image:url('/resources/img/icon/icon_sub_sns_01.jpg'); background-repeat: no-repeat;} .s-sns-wrap .sns-b-ul li a .icon.face {background-position: 0 0;} .s-sns-wrap .sns-b-ul li a .icon.twitter {background-position: -29px 0;} .s-sns-wrap .sns-b-ul li a .icon.google {background-position: -58px 0;} .s-sns-wrap .sns-b-ul li a .icon.kakao {background-position: -87px 0;} .s-sns-wrap .sns-b-ul li a .icon.band {background-position: -116px 0;} .s-sns-wrap .sns-b-ul li a .icon.kakaotalk {background-position: -145px 0;} .s-sns-wrap .clo-b {float: right; margin:5px 0 0 10px;} .s-sns-wrap .clo-b i {font-size: 18px;} .s-sns-wrap .url-box {float:left; width: 60%; background-color:#fff; border:1px solid #ddd; font-size: 14px; padding:5px 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing: 0; } .s-sns-wrap .btn-copy {float:right; display: block; width: 16%; margin-left: 2%; background-color:#555; border-radius: 12px; color:#fff; height: 30px; font-size: 12px; } @media all and (max-width:1400px){ #subTopCon .subTop_menu {width: 100%;} #subTopCon .subTop_menu .in {width: 100%;} } @media all and (max-width:1000px){ /******* 서브 탑 컨텐츠 *******/ #subTopCon {height: auto;} #subTopCon .txt_box {} #subTopCon .txt_box h3 {font-size: 20px; margin-top: -40px;} #subTopCon .txt_box .search_box {width: 100%; height: 40px; padding: 0 20px;} #subTopCon .txt_box .search_box .txt_db1 {padding: 0 71px 0 30px; font-size: 15px;} #subTopCon .txt_box .search_box .btn_db1 {position: absolute; right: 35px; top: 8px;} #subTopCon .txt_box .search_box .btn_db1 img {width: 20px;} #subTopCon .img_box {height:150px;} #subTopCon .img_box img {left:50%; margin-left: -85%; max-width: none; width:300%;} #subTopCon .subTop_menu {height:auto; top: auto; flex-wrap: wrap;} #subTopCon .subTop_menu .lb {margin-right: auto; border-bottom: 1px solid rgba(255,255,255,0.1);} #subTopCon .subTop_menu .rb {margin-left: auto;} #subTopCon .subTop_menu .btn_home {width: 30px; height: 40px; font-size: 15px;} #subTopCon .subTop_menu .btn_home img {width: 15px;} #subTopCon .subTop_menu .menu_b {min-width: auto;} #subTopCon .subTop_menu .menu_b a {padding: 0 15px 0 5px; font-size: 11px;} #subTopCon .subTop_menu .menu_b:first-of-type a {padding-left: 10px;} #subTopCon .subTop_menu .menu_b i {right: 0px; top: 15px; font-size: 11px;} #subTopCon .subTop_menu .sub_top_in_letter {padding: 0 10px;} #subTopCon .subTop_menu .sub_top_in_letter .btn_let {width: 15px; height: 15px; border: 1px solid #fff; font-size: 10px;} #subTopCon .subTop_menu .sub_top_in_letter .btn_txt {font-size: 12px; color: #fff; margin: 0 10px;} #subTopCon .subTop_menu .btn_sTop {width: 35px; height: 40px; font-size: 15px;} #subTopCon .subTop_menu .btn_sTop img {width: 14px; margin-top: 0;} #subTopCon .subTop_menu .btn_sTop:not(.sTopShare) {display: none;} .s-sns-wrap {top: 39px; padding:15px; width: 270px; } .s-sns-wrap .row {} .s-sns-wrap .tit {padding-top: 3px; font-size: 12px; padding-left: 3px;} .s-sns-wrap .sns-b-ul li {} .s-sns-wrap .sns-b-ul li a .icon {width: 22px; height: 22px; background-size: 132px auto;} .s-sns-wrap .sns-b-ul li a .icon.face {background-position: 0 0;} .s-sns-wrap .sns-b-ul li a .icon.twitter {background-position: -22px 0;} .s-sns-wrap .sns-b-ul li a .icon.google {background-position: -44px 0;} .s-sns-wrap .sns-b-ul li a .icon.kakao {background-position: -66px 0;} .s-sns-wrap .sns-b-ul li a .icon.band {background-position: -88px 0;} .s-sns-wrap .sns-b-ul li a .icon.kakaotalk {background-position: -110px 0;} .s-sns-wrap .clo-b {float: right; margin:2px 10px 0 10px;} .s-sns-wrap .clo-b i {font-size: 15px;} .s-sns-wrap .url-box {font-size: 11px; padding:5px 10px;} .s-sns-wrap .btn-copy {height: 26px; font-size: 11px; } } /* color */ /* 블루 */ #subTopCon .subTop_menu.blue {background-color: #1f2c45;} #subTopCon .subTop_menu.blue .btn_home {background-color: #2557be; border-color: transparent;} #subTopCon .subTop_menu.blue .btn_home:hover, #subTopCon .subTop_menu.blue .btn_home:focus {background-color: #004fec;} /* 그린 */ #subTopCon .subTop_menu.green {background-color: #0d5753;} #subTopCon .subTop_menu.green .btn_home {background-color: #00a162; border-color: transparent;} #subTopCon .subTop_menu.green .btn_home:hover, #subTopCon .subTop_menu.green .btn_home:focus {background-color: #02c77b;} /* 오렌지 */ #subTopCon .subTop_menu.orange {background-color: #544025;} #subTopCon .subTop_menu.orange .btn_home {background-color: #ff9000; border-color: transparent;} #subTopCon .subTop_menu.orange .btn_home:hover, #subTopCon .subTop_menu.orange .btn_home:focus {background-color: #faa02b;} /* 퍼플 */ #subTopCon .subTop_menu.purple {background-color: #2b153b;} #subTopCon .subTop_menu.purple .btn_home {background-color: #7638a3; border-color: transparent;} #subTopCon .subTop_menu.purple .btn_home:hover, #subTopCon .subTop_menu.purple .btn_home:focus {background-color: #9c50d3;} /* 컬러 */ /* 블루 */ #wrap.blue #subTopCon .subTop_menu {background-color: #1f2c45;} #wrap.blue #subTopCon .subTop_menu .btn_home {background-color: #2557be; border-color: transparent;} #wrap.blue #subTopCon .subTop_menu .btn_home:hover, #wrap.blue #subTopCon .subTop_menu .btn_home:focus {background-color: #004fec;} #wrap.blue #subTopCon .subTop_menu .subMenu_ul > li {border-right:1px solid rgba(40, 58, 99, 0.5);} #wrap.blue #subTopCon .subTop_menu .subMenu_ul > li:first-child {border-left:1px solid rgba(40, 58, 99, 0.5); border-right:1px solid rgba(40, 58, 99, 0.5);} /* 그린 */ #wrap.green #subTopCon .subTop_menu {background-color: #0d5753;} #wrap.green #subTopCon .subTop_menu .btn_home {background-color: #00a162; border-color: transparent;} #wrap.green #subTopCon .subTop_menu .btn_home:hover, #wrap.green #subTopCon .subTop_menu .btn_home:focus {background-color: #02c77b;} #wrap.green #subTopCon .subTop_menu .subMenu_ul > li {border-right:1px solid rgba(24, 114, 114, 0.5);} #wrap.green #subTopCon .subTop_menu .subMenu_ul > li:first-child {border-left:1px solid rgba(24, 114, 114, 0.5); border-right:1px solid rgba(24, 114, 114, 0.5);} /* 오렌지 */ #wrap.orange #subTopCon .subTop_menu {background-color: #544025;} #wrap.orange #subTopCon .subTop_menu .btn_home {background-color: #ff9000; border-color: transparent;} #wrap.orange #subTopCon .subTop_menu .btn_home:hover, #wrap.orange #subTopCon .subTop_menu .btn_home:focus {background-color: #faa02b;} #wrap.orange #subTopCon .subTop_menu .subMenu_ul > li {border-right:1px solid rgba(124, 89, 51, 0.5);} #wrap.orange #subTopCon .subTop_menu .subMenu_ul > li:first-child {border-left:1px solid rgba(124, 89, 51, 0.5); border-right:1px solid rgba(124, 89, 51, 0.5);} /* 퍼플 */ #wrap.purple #subTopCon .subTop_menu {background-color: #2b153b;} #wrap.purple #subTopCon .subTop_menu .btn_home {background-color: #7638a3; border-color: transparent;} #wrap.purple #subTopCon .subTop_menu .btn_home:hover, #wrap.purple #subTopCon .subTop_menu .btn_home:focus {background-color: #9c50d3;} #wrap.purple #subTopCon .subTop_menu .subMenu_ul > li {border-right:1px solid rgba(66, 35, 102, 0.5);} #wrap.purple #subTopCon .subTop_menu .subMenu_ul > li:first-child {border-left:1px solid rgba(66, 35, 102, 0.5); border-right:1px solid rgba(66, 35, 102, 0.5);} /* 청록 */ #wrap.teal #subTopCon .subTop_menu {background-color: #113945;} #wrap.teal #subTopCon .subTop_menu .btn_home {background-color: #005975; border-color: transparent;} #wrap.teal #subTopCon .subTop_menu .btn_home:hover, #wrap.teal #subTopCon .subTop_menu .btn_home:focus {background-color: #0084ac;} #wrap.teal #subTopCon .subTop_menu .subMenu_ul > li {border-right:1px solid rgba(23, 83, 104, 0.5);} #wrap.teal #subTopCon .subTop_menu .subMenu_ul > li:first-child {border-left:1px solid rgba(23, 83, 104, 0.5); border-right:1px solid rgba(23, 83, 104, 0.5);} /******* 프린트 *******/ @media print { .hd_top_box, .quick_menu_wrap, .hd_top_box, #subTopCon, #hd, #ft, .ft_menu_wrap {display: none;} .board_search_box {display: none !important;} #wrap, .inner1400, .sub_content {width: 100%;} .sub_Mcontents {padding:20px;} .sub_Mcontents.db {padding:20px;} .sub_Mcontents.db .sub_conStart {padding: 0;} a:focus, button:focus {border: none;} .sub_left_menu_wrap, .quick_menu_wrap {display:none;} .sub_r_conStart {float:none; width: 100%; padding-left: 0;} /* body {width: 250%;height: 250%; margin: -10% 0;} */ /* html {transform: scale(0.5); transform-origin: 0 0;} */ /* body {display:table; width: 100%; height: 100%; zoom: 50%;} */ /* html {zoom :0.3;} */ /* body {transform: scale(0.7);} */ } @page { /* size: 7in 9.25in; */ /* margin: 10mm 10mm 10mm 10mm; */ /* zoom: 0.8%; */ size : A4; /* zoom:50%; */ } /* 학과 게시판 카테고리 */ .subMenuTabBox {margin-bottom: 45px;} .boardCategoryRow {width:100%; display: flex; flex-wrap: wrap;} .boardCategoryRow > li {flex-basis: 24%; flex-grow: 1; border: 1px solid #ddd; margin: -1px 0 0 -1px;} .boardCategoryRow > li > a {display: block; text-align: center; padding: 18px 10px 17px; font-size: 18px; line-height: 1.2;} #wrap.blue .boardCategoryRow > li.active {background-color: #2557be; border-color: #2557be;} #wrap.green .boardCategoryRow > li.active {background-color: #00a162; border-color: #00a162;} #wrap.orange .boardCategoryRow > li.active {background-color: #ff9000; border-color: #ff9000;} #wrap.purple .boardCategoryRow > li.active {background-color: #7638a3; border-color: #7638a3;} #wrap.teal .boardCategoryRow > li.active {background-color: #005975; border-color: #005975;} .boardCategoryRow > li.active > a {color:#fff;} @media all and (max-width:1000px){ /* 학과 게시판 카테고리 */ .subMenuTabBox {margin-bottom: 25px;} .boardCategoryRow {} .boardCategoryRow > li {flex-basis: 50%; width: 50%; flex-grow: 0;} .boardCategoryRow > li > a {padding: 12px 5px 10px; font-size: 14px;} } @media all and (max-width:1000px){}