@charset "utf-8"; @font-face { font-family: 'NanumSquareNeo'; font-weight: 400; src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format('truetype'); } @font-face { font-family: 'NanumSquareNeo'; font-weight: 700; src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format('truetype'); } @font-face { font-family: 'NanumSquareNeo'; font-weight: 800; src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format('truetype'); } @font-face { font-family: 'NanumSquareNeo'; font-weight: 900; src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format('truetype'); } @font-face { font-family: 'NanumSquareNeo'; font-weight: 300; src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format('truetype'); } /* Variable */ @font-face { font-family: 'NanumSquareNeoVariable'; src: url(fonts/NanumSquareNeo/NanumSquareNeo-Variable.eot); src: url(fonts/NanumSquareNeo/NanumSquareNeo-Variable.eot?#iefix) format('embedded-opentype'), url(fonts/NanumSquareNeo/NanumSquareNeo-Variable.woff2) format('woff2'), url(fonts/NanumSquareNeo/NanumSquareNeo-Variable.woff) format('woff'), url(fonts/NanumSquareNeo/NanumSquareNeo-Variable.ttf) format('truetype'); } @font-face { font-family: 'GmarketSansMedium'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GmarketSansBold'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight:700; font-style: normal; } /* 초기화 */ html {overflow-y:scroll} body {margin:0;padding:0;font-family:"NanumSquareNeo", 'Malgun Gothic', dotum, sans-serif;background:#fff} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:"NanumSquareNeo", 'Malgun Gothic', dotum, sans-serif} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul, dl,dt,dd {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1em} input, button {margin:0;padding:0;font-family:"NanumSquareNeo", 'Malgun Gothic', dotum, sans-serif;font-size:1em} input[type="submit"] {cursor:pointer} label, button {cursor:pointer} textarea, select {font-family:"NanumSquareNeo", 'Malgun Gothic', dotum, sans-serif;font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#000;text-decoration:none} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input[type=text],input[type=password], textarea { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none; } input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { -webkit-box-shadow:0 0 5px #9ed4ff; -moz-box-shadow:0 0 5px #9ed4ff; box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important; } #hd .inner, #ft .inner, #ft_banner .inner, #wrapper .inner {margin:0 auto;padding:0 15px;max-width:1440px;width:100%} /* 상단 레이아웃 */ #hd {position:fixed;width:100%;z-index:1000} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #tnb {margin:0 auto;background:#305589} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #hd_login {float:right;text-align:right} #hd_login:after {display:block;visibility:hidden;clear:both;content:""} #hd_login li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #fff;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_login li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_login li span {display:block;margin-top:5px;font-size:0.92em} #hd_login li a {display:inline-block;color:#fff} #hd_wrapper {position:absolute;padding:27px 0 0;margin:0 auto;width:100%;height:140px;background:#fff;border-bottom:1px solid #ddd;zoom:1} #hd_wrapper1:after {display:block;visibility:hidden;clear:both;content:""} #hd_wrapper .inner {position:relative;display:flex;align-items:center;} /*#hd_wrapper.gnb_over {height:393px;overflow:hidden}*/ #hd_wrapper.gnb_over {height:auto;overflow:inherit} #hd_wrapper.gnb_over {background:#fff;box-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.15);z-index:104;/*border-bottom:8px solid #305589*/} #hd_wrapper.gnb_over .inner {background:url(/main/img/gnb_bg.png) no-repeat bottom left / 18%} #hd_wrapper .login, #hd_wrapper .logout, #hd_wrapper .mypage {display:inline-block;width:45px} #hd_wrapper .login a, #hd_wrapper .logout a, #hd_wrapper .mypage a {display:block;width:45px;height:45px;} #hd_wrapper .login a {background:url(/main/img/login.gif) center no-repeat;} #hd_wrapper .logout a {background:url(/main/img/logout.gif) center no-repeat;} #hd_wrapper .mypage a {background:url(/main/img/mypage.gif) center no-repeat;} #logo {position:absolute;top:21px;/*padding:5px 0 0*/} /* 메인메뉴 */ #gnb {position:relative;background:#fff;padding:25px 0 0;width:100%;margin:0 auto 0 18%;max-width:70.923%;} #gnb {margin-left:18%;max-width:75.887%} #gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #gnb #gnb_1dul {display: flex;} #gnb .gnb_1dli {flex-grow:1;flex-basis:0;padding:0 3px} /*#gnb .gnb_1da.on, #gnb .gnb_1dli:hover .gnb_1da, #gnb .gnb_1dli .gnb_1da:focus {color:#007bc6;}*/ #gnb .gnb_1da {position:relative;display:block;padding:5px 0 27px;font-size:21px;font-weight:bold} #gnb .gnb_1da:after {display:block; content:""; position:absolute; left: 27%; bottom: 25%; transform:translateX(-50%); width:0; height:3px; background:linear-gradient(to right,#f2931b 0%, #7c509d 50%, #007bc7 75%, #009cbd 100%); transition:all 0.3s;} #gnb .gnb_1da.on:after, #gnb .gnb_1dli:hover .gnb_1da:after, #gnb .gnb_1dli .gnb_1da:focus:after {width:55%;} .gnb_2dul{display:none;opacity:0;animation-duration:0.3s;animation-fill-mode:forwards;animation-name:fadeInDepth;margin-left:-15px;} .gnb_2dul > li + li {padding-top:6px} .gnb_over .gnb_2dul{display:block;margin:0 auto;padding-bottom:27px;animation-duration:0.3s;animation-fill-mode:forwards;animation-name:fadeInDepth;} .gnb_2da {display: inline-block;padding:5px 5px;font-size:15px;font-weight:600;color:#555;border-radius:8px} .gnb_2da.plus {position:relative;padding-right:20px} .gnb_2da.plus:after {display: block;position: absolute;top:49%;right:5px;-webkit-transform: translatey(-50%);-moz-transform: translatey(-50%);-ms-transform: translatey(-50%);-o-transform: translatey(-50%);transform: translatey(-50%);content: "+";font-size: 14px} .gnb_2dli.on .gnb_2da.plus:after {content:'';width:10px;height:1px;background:#333} /*.gnb_2dli.on .gnb_2da.plus:hover:after, .gnb_2dli.on .gnb_2da.plus:focus:after {background:#007bc6;}*/ .gnb_2dli.on .gnb_2da.plus:hover:after, .gnb_2dli.on .gnb_2da.plus:focus:after {background:#000;} /*.gnb_2da:hover, .gnb_2da:focus {color:#007bc6;font-weight:800;background:#eee}*/ .gnb_2da:hover, .gnb_2da:focus {color:#212121;font-weight:800;text-decoration:underline;text-underline-offset:5px} .gnb_3dul{-moz-transition: all .5s ease;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;visibility: hidden;opacity: 0;height: 0;overflow: hidden;} .gnb_2dli.on .gnb_3dul {height: auto;opacity: 1;visibility: visible;padding: 5px 0;} .gnb_3dli {padding:10px 0 0 3px;} .gnb_3dli:first-child {padding-top:0} .gnb_3da {padding:5px 5px;font-size:14px;letter-spacing:-1px;color:#58585a;border-radius:8px;} /*.gnb_3da:hover, .gnb_3da:focus {color:#007bc6;background:#eee}*/ .gnb_3da:hover, .gnb_3da:focus {color:#212121;font-weight:600;text-decoration:underline;text-underline-offset:5px} .sitemap_wr {position:absolute;top:21px;right:15px} .sitemap_wr .sitemap_btn {display:flex;flex-direction:column;align-items:end;justify-content:space-between;width:36px;height:24px} .sitemap_wr .sitemap_btn span {display:inline-block;width:100%;height:2px;background-color:#000} .sitemap_wr .sitemap_btn span:nth-child(2) {width:85%} .sitemap_wr .sitemap_btn span:nth-child(3) {width:70%} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* 중간 레이아웃 */ #wrapper {padding-top:141px;} #container_wr:after {display:block;visibility:hidden;clear:both;content:""} #container_wr {margin:0 auto;zoom:1} #container {position:relative;min-height:500px;height:auto !important} #container:after {display:block;visibility:hidden;clear:both;content:""} /* 하단 레이아웃 */ #ft_banner {margin-top:80px;border-top:1px solid #a5d3e8} #ft_banner .inner {overflow:hidden} #ft_banner .swiper-slide {display:flex;align-items:center;justify-content:center} #ft_banner .img img {display:inline-block;margin:10px auto;max-height:58px} /*#ft {background:#dfdfdf;padding:30px 0;font-size:14px;color:#696969;}*/ #ft {background:#444;padding:30px 0;font-size:14px;color:#ddd;} #ft .inner {position:relative} /*#ft_link {border-bottom:1px solid #d1d2d3}*/ #ft_link {border-bottom:1px solid #777} #ft_link ul {text-align:right;padding-bottom:20px;} #ft_link ul li {display:inline-block;margin-left:16px} #ft_link ul li a {color:#ddd/*#696969*/} #ft .logo {position:absolute;top:65px;} #ft address {text-align:right;padding-top:20px} #ft address li {font-style:normal;line-height:160%} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);clip-path: polygon(0 0, 0 0, 0 0);border: 0;} /* 메인 화면 */ #main_banner_wr {margin:0 auto;padding:15px 0 40px;background:rgba(216,216,216,.2);} #main_banner_wr .inner {display:flex;margin:0 auto} #main_banner {width:73.845%;max-height:370px;overflow:hidden;} #main_banner .swiper {position:relative} #main_banner .swiper-slide {background-repeat:no-repeat;background-position:center;background-size:cover;overflow:hidden} #main_banner .swiper-slide a {display:inline-block;width:100%;padding-top:37%} #main_banner .main_banner_control {background-color: rgba(34, 34, 34, 0.8);border-radius: 20px 0 0 0;position: absolute;right: 0;bottom: 0;z-index: 1;color: #fff;padding: 17px 10px;width: 165px;display: flex;align-items: center;justify-content: space-between} #main_banner .main_banner_control .swiper-pagination {position: static;width: 100px;color: #fff;font-weight: 500;font-size: 16px;margin-right:5px} #main_banner .main_banner_control .swiper-pagination .swiper-pagination-total {color: #aaa;} #main_banner .main_banner_control .navi_control {display: flex;align-items: center;} #main_banner .main_banner_control .navi_control .control_btn {width:12px;height:15px;margin: 0 5px;padding: 0;overflow: hidden;background-position: center;background-size: 11px;background-repeat: no-repeat;white-space: nowrap;border:0;background-color: transparent;} #main_banner .main_banner_control .navi_control .control_btn.prev {background-image: url(/main/img/icon_prev4.png)} #main_banner .main_banner_control .navi_control .control_btn.next {background-image: url(/main/img/icon_next4.png)} #main_banner .main_banner_control .navi_control .control_btn.pause {background-image: url(/main/img/icon_stop.png);background-size: 8px} #main_banner .main_banner_control .navi_control .control_btn.play {background-image: url(/main/img/icon_play.png);background-size: 14px} #main_quick {display:flex;flex-direction:column;justify-content:space-between;margin-left:15px;width:calc(30.232% - 15px)} #main_quick .visual_icons {padding:0;height:100%;background:#fff} #main_quick .visual_icons ul {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;height:100%} #main_quick .visual_icons ul li {display:flex;width:33.3%;height:33.3%;border:1px solid #ddd} #main_quick .visual_icons ul li + li {border-top:0 none} #main_quick .visual_icons li a {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;} #main_quick .visual_icons .icon_wrap {width:50px;height:50px;display:flex;align-items:center;justify-content:center;} #main_quick .visual_icons a:hover .icon_wrap {background:rgba(241, 147, 25, .9);} #main_quick .visual_icons .icon_wrap img {width:32px;/*transition: all 0.2s linear;*/} #main_quick .visual_icons li a:hover img {filter:brightness(0) invert(1);} #main_quick .visual_icons li p {padding-top:5px;font-size:13px;font-family:'GmarketSansMedium';} #main_shortcut {display:flex;flex-direction:column;/*margin-top:40px;*/padding:40px 50px;width:100%;border-radius:14px} #main_shortcut ul {display:flex;flex-wrap:wrap;align-items:center;justify-content:start;gap:35px 0} #main_shortcut li {width:calc(100% / 9)} #main_shortcut li a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;} #main_shortcut li p {margin-top:5px;font-size:15px;font-weight:700} #main_shortcut .icon_wrap img {width:40px} #main_shortcut a {height:130px;background-repeat:no-repeat;background-size:contain;transition:.3s;-webkit-transition:.3s} #main_shortcut .ico1 {background-image:url(/main/img/main/main_shct01.png);} #main_shortcut .ico1:hover {background-image:url(/main/img/main/main_shct01_on.png);} #main_shortcut .ico2 {background-image:url(/main/img/main/main_shct02.png);} #main_shortcut .ico2:hover {background-image:url(/main/img/main/main_shct02_on.png);} #main_shortcut .ico3 {background-image:url(/main/img/main/main_shct03.png);} #main_shortcut .ico3:hover {background-image:url(/main/img/main/main_shct03_on.png);} #main_shortcut .ico4 {background-image:url(/main/img/main/main_shct04.png);} #main_shortcut .ico4:hover {background-image:url(/main/img/main/main_shct04_on.png);} #main_shortcut .ico5 {background-image:url(/main/img/main/main_shct05.png);} #main_shortcut .ico5:hover {background-image:url(/main/img/main/main_shct05_on.png);} #main_shortcut .ico6 {background-image:url(/main/img/main/main_shct06.png);} #main_shortcut .ico6:hover {background-image:url(/main/img/main/main_shct06_on.png);} #main_shortcut .ico7 {background-image:url(/main/img/main/main_shct07.png);} #main_shortcut .ico7:hover {background-image:url(/main/img/main/main_shct07_on.png);} #main_shortcut .ico8 {background-image:url(/main/img/main/main_shct08.png);} #main_shortcut .ico8:hover {background-image:url(/main/img/main/main_shct08_on.png);} #main_shortcut .ico9 {background-image:url(/main/img/main/main_shct09.png);} #main_shortcut .ico9:hover {background-image:url(/main/img/main/main_shct09_on.png);} #main_shortcut .ico10 {background-image:url(/main/img/main/main_shct10.png);} #main_shortcut .ico10:hover {background-image:url(/main/img/main/main_shct10_on.png);} #main_shortcut .ico11 {background-image:url(/main/img/main/main_shct11.png);} #main_shortcut .ico11:hover {background-image:url(/main/img/main/main_shct11_on.png);} #main_shortcut .ico12 {background-image:url(/main/img/main/main_shct12.png);} #main_shortcut .ico12:hover {background-image:url(/main/img/main/main_shct12_on.png);} #main_shortcut .ico13 {background-image:url(/main/img/main/main_shct13.png);} #main_shortcut .ico13:hover {background-image:url(/main/img/main/main_shct13_on.png);} #main_shortcut .ico14 {background-image:url(/main/img/main/main_shct14.png);} #main_shortcut .ico14:hover {background-image:url(/main/img/main/main_shct14_on.png);} #main_shortcut .ico15 {background-image:url(/main/img/main/main_shct15.png);} #main_shortcut .ico15:hover {background-image:url(/main/img/main/main_shct15_on.png);} #main_shortcut .ico16 {background-image:url(/main/img/main/main_shct16.png);} #main_shortcut .ico16:hover {background-image:url(/main/img/main/main_shct16_on.png);} #main_shortcut .ico17 {background-image:url(/main/img/main/main_shct17.png);} #main_shortcut .ico17:hover {background-image:url(/main/img/main/main_shct17_on.png);} #main_shortcut .ico18 {background-image:url(/main/img/main/main_shct18.png);} #main_shortcut .ico18:hover {background-image:url(/main/img/main/main_shct18_on.png);} #main_shortcut2 {margin-top:40px;width:100%;height:100px;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:8px} #main_shortcut2 ul {display:flex;flex-wrap:wrap;align-items:center;justify-content:start;} #main_shortcut2 li {height:100px} #main_shortcut2 li a {display:inline-block;width:100px;height:100px;background-repeat:no-repeat;background-size:contain;transition:.3s;-webkit-transition:.3s} #main_shortcut2 .ico01 {background-image:url(/main/img/main/main_short_ico01.png?v=1);} #main_shortcut2 .ico01:focus, #main_shortcut2 .ico01:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico01_on2.png);} #main_shortcut2 .ico02 {background-image:url(/main/img/main/main_short_ico02.png?v=1);} #main_shortcut2 .ico02:focus, #main_shortcut2 .ico02:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico02_on2.png);} #main_shortcut2 .ico03 {background-image:url(/main/img/main/main_short_ico03.png?v=1);} #main_shortcut2 .ico03:focus, #main_shortcut2 .ico03:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico03_on2.png);} #main_shortcut2 .ico04 {background-image:url(/main/img/main/main_short_ico04.png?v=1);} #main_shortcut2 .ico04:focus, #main_shortcut2 .ico04:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico04_on2.png);} #main_shortcut2 .ico05 {background-image:url(/main/img/main/main_short_ico05.png?v=1);} #main_shortcut2 .ico05:focus, #main_shortcut2 .ico05:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico05_on2.png);} #main_shortcut2 .ico06 {background-image:url(/main/img/main/main_short_ico06.png?v=1);} #main_shortcut2 .ico06:focus, #main_shortcut2 .ico06:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico06_on2.png);} #main_shortcut2 .ico07 {background-image:url(/main/img/main/main_short_ico07.png?v=1);} #main_shortcut2 .ico07:focus, #main_shortcut2 .ico07:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico07_on2.png);} #main_shortcut2 .ico08 {background-image:url(/main/img/main/main_short_ico08.png?v=1);} #main_shortcut2 .ico08:focus, #main_shortcut2 .ico08:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico08_on2.png);} #main_shortcut2 .ico09 {background-image:url(/main/img/main/main_short_ico09.png?v=1);} #main_shortcut2 .ico09:focus, #main_shortcut2 .ico09:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico09_on2.png);} #main_shortcut2 .ico10 {background-image:url(/main/img/main/main_short_ico10.png?v=1);} #main_shortcut2 .ico10:focus, #main_shortcut2 .ico10:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico10_on2.png);} #main_shortcut2 .ico11 {background-image:url(/main/img/main/main_short_ico11.png?v=1);} #main_shortcut2 .ico11:focus, #main_shortcut2 .ico11:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico11_on2.png);} #main_shortcut2 .ico12 {background-image:url(/main/img/main/main_short_ico12.png);} #main_shortcut2 .ico12:focus, #main_shortcut2 .ico12:hover {background-color:#fff;background-image:url(/main/img/main/main_short_ico12_on.png);} #main_shortcut2 .ico13 {background-image:url(/main/img/main/main_short_ico13.png?v=1);} #main_shortcut2 .ico13:focus, #main_shortcut2 .ico13:hover {background-image:url(/main/img/main/main_short_ico13_on2.png);} #main_event {margin-top:40px;padding:0 15px} #main_event .inner {/*background:rgba(216,216,216,.2);*/border-radius:16px} #main_event .inner .box {position:relative;padding:50px 50px;border-radius:14px} #main_event .swiper {padding:15px;width:100%;overflow:hidden} #main_event h2 {margin-bottom:30px;font-family:'GmarketSansMedium';font-size:32px;} #main_event h2 span {font-family:'GmarketSansBold';font-weight:700} #main_event .swiper-slide {} #main_event .swiper-slide a {display:block;margin-bottom:10px;width:96.538%;/*376px;*/box-shadow : 5px 5px 10px 0px #dcdcdc;} /*#main_event .swiper-slide .mark {position:absolute;top:10px;left:20px;padding:7px 8px 4px;font-family:'GmarketSansMedium';font-size:13px;color:#fff;line-height:1;border-radius:3px;}*/ #main_event .swiper-slide .mark {position:absolute;top:-15px;left:-15px;display:flex;justify-content:center;align-items:center;width:60px;height:60px;padding:4px 9px 0;font-family:'GmarketSansMedium';font-size:15px;color:#fff;line-height:1.2;text-align:center;border-radius:8px;} #main_event .swiper-slide .mark.c1 {background:#f19319} #main_event .swiper-slide .mark.c2 {background:#7c4f9c} #main_event .swiper-slide .mark.c3 {background:#007bc6} #main_event .swiper-slide .mark.c4 {background:#009cbd} #main_event .swiper-slide .mark.c5 {background:#007bc6} #main_event .swiper-slide .img_wrap {position:relative;width:100%;max-height:406px;overflow:hidden} #main_event .swiper-slide .img_wrap img {width:100%} /*#main_event .swiper-slide .desc_wrap {position:absolute;bottom:10px;padding:5% 6%;width:calc(100% - 11px);font-size:16px;line-height:140%;background-color:#fff} #main_event .swiper-slide .desc_wrap ul li {font-family:'GmarketSansMedium';font-size:15px} #main_event .swiper-slide .desc_wrap ul li:nth-child(1) {display:-webkit-box;height:46px;font-size:18px;font-weight:600;line-height:23px;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical} #main_event .swiper-slide .desc_wrap ul li:nth-child(2) {display:-webkit-box;padding-top:15px;height:37px;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical} #main_event .swiper-slide .desc_wrap ul li:nth-child(3) {padding-top:15px}*/ /*#main_event .swiper-slide .desc_wrap {position:absolute;top:0;left:0;padding:40px 30px;width:100%;height:100%;color:#fff;font-size:16px;line-height:140%;opacity:0;background:rgba(0,0,0,0.8);transition:all 0.15s}*/ #main_event .swiper-slide .desc_wrap {position:absolute;top:0;left:0;padding:40px 25px;width:100%;height:100%;color:#fff;font-size:16px;line-height:140%;background:rgba(0,0,0,0.8);transform:translateY(100%);transition:all .3s ease-out} /*#main_event .swiper-slide a:hover .desc_wrap {opacity:1}*/ #main_event .swiper-slide a:hover .desc_wrap, #main_event .swiper-slide a:focus .desc_wrap {transform:translateY(0);} #main_event .swiper-slide .desc_wrap ul li {font-family:'GmarketSansMedium';font-size:14px} #main_event .swiper-slide .desc_wrap ul li:nth-child(1) {display:-webkit-box;margin:40px 0 20px;height:69px;font-size:17px;line-height:23px;text-align:center;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical} #main_event .swiper-slide .desc_wrap ul li:nth-child(2) {text-align:center} #main_event .swiper-slide .desc_wrap ul li .more_btn {display:inline-block;margin:0 auto 40px;padding:8px 20px 5px;box-sizing: border-box;text-align: center;color: #fff;background:#009fe8;border-radius:5px;} #main_event .swiper-slide .desc_wrap ul li:nth-child(3) {display:-webkit-box;padding-top:15px;height:37px;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical} #main_event .swiper-slide .desc_wrap ul li:nth-child(4) {padding-top:15px} #main_event .swiper-slide .desc_wrap ul li span {margin-right:3px;padding:6px 8px 3px;background:#f66475;font-size:14px;color:#fff;border-radius:3px;} #main_event .swiper-button-next:after, #main_event .swiper-button-prev:after {color:#000} #main_event .swiper-scrollbar-drag {top:-6px;height:16px;background:#666;} #main_notice {position:relative;margin-top:50px;padding:0 15px;background:rgba(216,216,216,.2)} #main_notice .inner {padding:30px 15px} #main_notice .inner .box {position:relative;padding:50px 50px;border-radius:14px} #main_notice h2 {font-size:32px;font-family:'GmarketSansMedium'} #main_notice h3 {position:absolute;top:62px;font-size:23px;font-weight:700} #main_notice h3:nth-last-of-type(6) {left:24%/*right:65%*/} #main_notice h3:nth-last-of-type(5) {left:34%/*right:65%*/} #main_notice h3:nth-last-of-type(4) {left:44%/*right:53%*/} #main_notice h3:nth-last-of-type(3) {left:54%/*right:41%*/} #main_notice h3:nth-last-of-type(2) {left:64%/*right:29%*/} #main_notice h3:nth-last-of-type(1) {left:74%/*right:17%*/} /*#main_notice h3 a:nth-child(1):after {display:block;content:'';background:#f05150;left:0;height:2px;position:absolute;bottom:-3px;right:0;transform:scale(0);transition:transform 0.3s;} #main_notice h3.on a:nth-child(1):after {transform:scale(1);}*/ #main_notice h3 a.tit {padding:10px 16px;border-radius:8px;-webkit-transition: all .35s ease-in-out;-moz-transition: all .35s ease-in-out;-ms-transition: all .35s ease-in-out;-o-transition: all .35s ease-in-out;transition: all .35s ease-in-out} #main_notice h3.on a.tit {background:#333;color:#fff;} #main_notice h3 a.more {display:none;position:absolute;top:10px;left:22px;right:22px;font-size:0;text-indent:-999em;height:19px;transition:.25s ease-out;opacity:0} #main_notice h3.on a.more {display:block;top:-22px;opacity:1} #main_notice h3 a.more:before {position:absolute;top:0;left:0;right:0;bottom:0;display:block;content:'';background:url(../img/bbs_more.png) center no-repeat;} #main_notice h3 a.bbs_more {display:none;position:absolute;top:-6px;width:40px;height:40px;font-size:26px;font-weight:400;background:#fff;border-radius:100%;align-items:center;justify-content:center;box-shadow:5px 5px 15px 0 rgba(0, 0, 0, 0.05)} #main_notice h3.on a.bbs_more {display:flex} #main_notice .bbs_list {display:none;position:relative;margin-top:15px;padding-top:20px;height:280px;border-top:2px solid #7b7b7b} #main_notice .bbs_list.on {display:block} #main_notice .bbs_list ul {margin:0 auto;width:84%} #main_notice .bbs_list li a {display:block;height:100%;overflow:hidden;transition:.25s ease-out;color:#000;padding:0 10px;font-size:18px;font-weight:400;line-height:calc(280px / 4);position:relative;} #main_notice .bbs_list li a span.ca {display: block;width: 200px;float: left;} #main_notice .bbs_list li a span.ic_new {margin-top:-3px;margin-left:5px} #main_notice .bbs_list li a b {display: block;float: left;white-space: nowrap;-ms-text-overflow: ellipsis;text-overflow: ellipsis;width: calc(100% - 370px);overflow: hidden;font-size: 20px;font-weight:400;transition: .25s ease-out;} #main_notice .bbs_list li a em {display:block;float:right;font-style:normal;width:120px;text-align:center} #main_youtu {margin:80px 0;padding:0 15px} #main_youtu .inner {padding:25px 15px} #main_youtu .inner .box {position:relative;padding:10px 50px;border-radius:14px;display:flex;gap:2%} #main_youtu h2 {padding:0 50px;font-size:32px;font-family:'GmarketSansMedium';} #main_youtu .yt_list {width:80%} #main_youtu .yt_list ul {display:flex;justify-content:space-between;gap:2%} #main_youtu .yt_list li {position:relative;width:48%} /*#main_youtu .yt_list li a {position:absolute;top:0;right:0;font-size:16px;padding-right:20px} #main_youtu .yt_list li a:after {display: block;position: absolute;top:49%;right:5px;-webkit-transform: translatey(-50%);-moz-transform: translatey(-50%);-ms-transform: translatey(-50%);-o-transform: translatey(-50%);transform: translatey(-50%);content: "+";font-size: 14px}*/ #main_youtu .yt_list li a {position:absolute;top:-20px;right:0;} #main_youtu .yt_list li a:after {display: flex;align-items:center;justify-content:center;width:40px;height:40px;content: "+";font-size:26px;border:1px solid #ddd;border-radius:100%;box-shadow:5px 5px 10px 0 rgba(0, 0, 0, 0.05);} #main_youtu .yt_list li a:hover:after {border-color:#333} #main_youtu .yt_list .video-container {margin-top:25px} .video-container {position:relative;height:0;padding-bottom:56.25%;} .video-container iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #main_youtu .sns_list {width:18%} #main_youtu .sns_list ul {padding-top:10%;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;} #main_youtu .sns_list ul li {position:relative;width:100%;height:calc(100% / 4)} #main_youtu .sns_list li > a {position:absolute;top:50%;left:50%;padding-left:70px;display:flex;width:100%;height:90%;border:1px solid #eee;border-radius:16px;align-items:center;justify-content:flex-start;background:#fff;/*box-shadow: -22px 34px 55px 0px rgba(0,0,0,.2);*/-webkit-transition: all .15s ease;-moz-transition: all .15s ease;-ms-transition: all .15s ease;-o-transition: all .15s ease;transition: all .15s ease;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size:15px;} #main_youtu .sns_list li > a:hover, #main_youtu .sns_list li > a:focus {width:110%;height:99%;font-weight:700;font-size:18px;z-index:1} #main_youtu .sns_list li > a:before {content:"";margin-left:5px;display:inline-block;position:absolute;width:54px;height:54px;left:0} /*#main_youtu .sns_list li.sns1 > a:before {background: url(/main/img/main/main_sns_logo1.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns2 > a:before {background: url(/main/img/main/main_sns_logo2.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns3 > a:before {background: url(/main/img/main/main_sns_logo3.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns4 > a:before {background: url(/main/img/main/main_sns_logo4.png) no-repeat center center/65% auto}*/ #main_youtu .sns_list li.sns1 > a:hover:before, #main_youtu .sns_list li.sns1 > a:focus:before, #main_youtu .sns_list li.sns2 > a:hover:before, #main_youtu .sns_list li.sns2 > a:focus:before, #main_youtu .sns_list li.sns3 > a:hover:before, #main_youtu .sns_list li.sns3 > a:focus:before, #main_youtu .sns_list li.sns4 > a:hover:before, #main_youtu .sns_list li.sns4 > a:focus:before {background-size:75%} #main_youtu .sns_list li.sns1 > a:before {background: url(/main/img/main/main_sns_ico1.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns2 > a:before {background: url(/main/img/main/main_sns_ico2.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns3 > a:before {background: url(/main/img/main/main_sns_ico3.png) no-repeat center center/65% auto} #main_youtu .sns_list li.sns4 > a:before {background: url(/main/img/main/main_sns_ico4.png) no-repeat center center/65% auto} .w100p {width:100%;vertical-align:top;display:block;} /* 서브 페이지 */ #contents {width:100%;max-width:1280px;padding:70px 0 70px;margin:0 auto;} .sub_top {position:fixed;margin-top:-1px;width:100%;z-index:999/*background: linear-gradient(to right, #f19319, #7c4f9c, #007bc6);text-align: center;padding: 45px 0;color: #fff;*/} .sub_top.cate3 {background: linear-gradient(to right, #770207, #081160)} .sub_top.cate7 {background: linear-gradient(to right, #5e4258, #a7c9b9)} .sub_title {padding-bottom:80px;font-size:40px;font-weight:700;text-align:center} .sub_loc {font-size: 13px;font-weight: 300;padding-top: 10px;} .sub_loc li {display:inline-block} .sub_loc li:after{content: '/';margin: 0 3px 0 5px;font-weight: 300;} .sub_loc li:last-child:after {content:""} .sub_lnb {background-color:#28378e;} .sub_lnb .lnb_wrap {display:flex;align-items:center;justify-content: space-between;width:1280px;margin:0 auto} .sub_lnb .locates {display:flex} .sub_lnb .locate {display:flex;align-items:center;color:#999999} .sub_lnb .locate img {display:inline-block;margin-right:15px} .sub_lnb .box-locate {height:50px;position:relative} .sub_lnb .box-locate > button {display:flex; align-items:center; justify-content:space-between; min-width:280px;height:100%;margin:0;padding:0 20px;font-size:15px;color:#fff;background:none;border:none 0} .sub_lnb .box-locate > button img {margin-left:20px;} .sub_lnb .box-locate .subs {display:none;width:100%; position:absolute; top:100%; left:0; background-color:#28378e; border:1px solid rgba(255,255,255,0.3); border-top:none; z-index:3;} .sub_lnb .box-locate .subs > a {display:block; padding:16px 20px; text-align:left; font-size:15px;color:#fff; border-top:1px solid rgba(255,255,255,0.3);} .sub_lnb .box-locate:before {content: ""; display:inline-block; width:1px; height:17px; position:absolute; top:50%; left:0; transform:translateY(-50%); background-color:#fff;} .sub_lnb .box-locate:first-child:before {display:none;} .sub_lnb .box_depth03 {margin-bottom:60px;} .sub_lnb .depth03 {display:inline-block; min-width:250px; margin:2px 0; padding:10px 30px; font-size:18px; color:#666666; background-color:#e6e6e6; transition:background-color .3s, color .3s;} .sub_lnb .depth03:focus {color:#fff; background-color:#f6841f;} .sub_lnb .depth03:hover {color:#fff; background-color:#f6841f;} .sub_lnb .depth03.active {color:#fff; background-color:#f6841f;} #detail_con>.ready {text-align:center; margin-top:30px;} #detail_con>.ready p.stit {display:inline-block; padding:10px 100px; color:#fff; background:#000;} #detail_con>.ready p.con {position:relative; margin-top:30px; margin-bottom:200px; font-size:25px;} #detail_con>.ready p.con:after {display:block; content:""; position:absolute; left:50%; top:160%; width:1px; height:125px; background:#a8a8a8;} #detail_con>.ready .end {color:#4e4e4e;} @media screen and (max-width: 1480px){ #main_quick .visual_icons {padding:20px 40px} } @keyframes fadeInDepth { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOutDepth { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }