/* main */ .index-page{background: #f3f4f8; padding: 150px 0 100px !important;} #mainContent{} #mainContent .con-box h3{font-size: 18px; font-weight: 500;} #introBanner{width: 570px; height: 230px; padding: 58px 0 12px 50px; float: left; background: url('/images/main/intro_banner_002.jpg') 0 0 no-repeat; border: 1px solid #dcdcdc;} /* #introBanner h4{color: #fff; font-size: 28px; margin-bottom: 15px; line-height: 1.2;} 20231113 메인배너 css */ #introBanner h4{color: #fff; font-size: 28px; margin-bottom: 55px; line-height: 1.4;} #introBanner p{color: #fff; font-size: 16px; margin-bottom: 30px;} #introBanner a{border: 1px solid #fff; color:#fff;} #introBanner a:hover{background-color: rgba(0,0,0,0.1);} #quickBtn{width: 300px; height: 300px; float: right;} #quickBtn li{float: left;} #quickBtn li:nth-child(1){background: #4b5e6c url('/images/main/quick_btn_bg_001.png') 0 100% no-repeat;} #quickBtn li:nth-child(2){background: #393e45 url('/images/main/quick_btn_bg_002.png') 0 100% no-repeat;} #quickBtn li:nth-child(3){background: #b09b71 url('/images/main/quick_btn_bg_003.png') 0 100% no-repeat;} #quickBtn li:nth-child(4){background: #8f785d url('/images/main/quick_btn_bg_004.png') 0 100% no-repeat;} #quickBtn li a{display: block; width: 150px; height: 50px; padding-top: 100px; text-align: center; color: #fff; font-size: 16px;} #quickBtn li a{background-position: 50% 30px; background-repeat: no-repeat;} #quickBtn li a:hover{background-color: rgba(0,0,0,0.1);} #quickBtn li:nth-child(1) a{background-image: url('/images/main/quick_btn_001.png')} #quickBtn li:nth-child(2) a{background-image: url('/images/main/quick_btn_002.png')} #quickBtn li:nth-child(3) a{background-image: url('/images/main/quick_btn_003.png')} #quickBtn li:nth-child(4) a{background-image: url('/images/main/quick_btn_004.png')} #infoBanner{width: 460px; height: 300px; float: left; position: relative; margin-top: 20px; overflow: hidden;} #infoBanner h3{color: #fff; position: absolute; display: inline-block; top: 30px; left: 30px; border-bottom: 1px solid #ccc; padding-bottom: 5px; z-index: 5;} #infoBanner ul{} #infoBanner ul li{width: 460px; height: 300px; position: relative;} #infoBanner ul li:nth-child(1){background: url('/images/main/info_banner_001.png') 0 0 no-repeat;} #infoBanner ul li:nth-child(2){background: url('/images/main/info_banner_002.png') 0 0 no-repeat;} #infoBanner ul li:nth-child(3){background: url('/images/main/info_banner_003.png') 0 0 no-repeat;} #infoBanner ul li a{display: block; width: 400px; padding: 120px 30px 0; height: 190px; position: absolute; top: 0; left: 0; font-size: 16px;} #infoBanner ul li a em{position: relative; top: -7px; font-size: 15px; color: #fff; height: 26px; line-height: 26px; border-radius:28px; padding: 0 10px; border: 1px solid #fff; display: inline-block; margin-right: 10px;} #infoBanner ul li a strong{font-size: 28px; color: #fff; line-height: 0;} #infoBanner ul li a span{display: block; color: #ccc; margin-top: 10px; width: 280px; text-shadow: 1px 1px 10px rgba(0,0,0,0.4);} #infoBanner a{position: absolute; top: 30px; right: 30px; font-size: 0; z-index: 5;} #infoBanner ul.paging{position: absolute; bottom: 30px; right: 30px; z-index: 1;} #infoBanner ul.paging li{font-size: 0; text-indent: -9999px; float: left; width: 13px; height: 13px; background: #b09b71; border-radius:13px; margin-left: 8px; opacity: 0.5; transition:0.3s ease-in-out;} #infoBanner ul.paging li.on{width: 26px; opacity: 1;} #infoBanner ul.paging .swiper-pagination-bullet{width: 13px; height: 13px; background: #b09b71; border-radius:13px; margin-left: 8px; opacity: 0.5; transition:0.3s ease-in-out;} #infoBanner ul.paging .swiper-pagination-bullet-active{width: 26px; opacity: 1;} #mainBoard{width: 458px; height: 298px; overflow: hidden; float: right; margin-top: 20px; background: #fff; border: 1px solid #dcdcdc;} #mainBoard ul.board-title{width: 100%; background: #dddfe3;} #mainBoard ul.board-title li{float: left; background: #dddfe3;} #mainBoard ul.board-title li h3{width: 130px; text-align: center;} #mainBoard ul.board-title li h3 a{color: #858990; line-height: 45px; height: 45px; display: inline-block;} #mainBoard ul.board-title li.on h3{background: #fff;} #mainBoard ul.board-title li.on h3 a{color: #333; border-bottom: 1px solid #858990;} #mainBoard .board-list ul.main-schedule{display: none;} #mainBoard .board-list ul.main-schedule li{padding: 0 30px; width: 398px;} #mainBoard .board-list ul.main-schedule li a{display: block; padding:14px 0 8px; border-bottom: 1px solid #dcdcdc;} #mainBoard .board-list ul.main-schedule li:last-child a{border-bottom: 0;} #mainBoard .board-list ul.main-schedule li a:after{clear:both; content: ''; display: block;} #mainBoard .board-list ul.main-schedule li a > span{display: inline-block; float: left; width: 298px; font-size: 12px; color: #aaa;} #mainBoard .board-list ul.main-schedule li a > span > span{color: #ff5656; display: inline-block; margin-right: 10px;} #mainBoard .board-list ul.main-schedule li a span strong{display: block; font-size: 14px; color: #333;} #mainBoard .board-list ul.main-schedule li a em{margin-top: 5px; display: inline-block; width: 70px; float: right; color: #ff5656; height: 25px; text-align: center; line-height: 25px; border-radius:25px; border: 1px solid #ff5656;} #mainBoard .board-list ul.main-notice{} #mainBoard .board-list ul.main-notice li{padding: 0 30px; width: 398px;} #mainBoard .board-list ul.main-notice li a{display: block; padding:14px 0; border-bottom: 1px solid #dcdcdc;} #mainBoard .board-list ul.main-notice li a span{font-size: 12px; color: #aaa; float: right; display: inline-block; padding-top: 3px;} #mainBoard .board-list ul.main-notice li a strong{font-size: 14px;} #mainBoard .board-list ul.main-notice li:last-child a{border: 0;} #mainQuickMenu{width: 938px; height: 120px; padding: 13px 0; margin-top: 20px; float: left; background: #fff; border: 1px solid #dcdcdc;} #mainQuickMenu li{float: left; width: 16.666%;} #mainQuickMenu li a{display: block; width: 100%; height: 35px; padding-top: 85px; text-align: center; font-size: 16px; color: #333; border-right: 1px solid #e5e5e5;} #mainQuickMenu li:nth-child(1) a{background: url('/images/main/main_quick_001.png') 50% 20px no-repeat;} #mainQuickMenu li:nth-child(2) a{background: url('/images/main/main_quick_002.png') 50% 20px no-repeat;} #mainQuickMenu li:nth-child(3) a{background: url('/images/main/main_quick_003.png') 50% 20px no-repeat;} #mainQuickMenu li:nth-child(4) a{background: url('/images/main/main_quick_004.png') 50% 20px no-repeat;} #mainQuickMenu li:nth-child(5) a{background: url('/images/main/main_quick_005.png') 50% 20px no-repeat;} #mainQuickMenu li:nth-child(6) a{background: url('/images/main/main_quick_006.png') 50% 20px no-repeat;} #mainQuickMenu li:last-child a{border: 0;} #callBox{width: 238px; height: 168px; padding: 30px; float: left; background: #fff; border: 1px solid #dcdcdc; margin-top: 20px; margin-right: 20px;} #callBox h3{} #callBox strong{display: block; padding-left: 40px; margin-top: 10px; background: url('/images/common/telgificon.gif') 0 0 no-repeat;} #callBox strong a{font-family: 'Roboto Condensed', sans-serif; font-weight: 700; letter-spacing:-2px; color: #333; font-size: 38px;} #callBox span{margin-top: 5px; font-size: 14px; padding: 0 5px; display: inline-block; background: #6c8aa0; color:#fff;} #callBox ul{margin-top: 5px;} #callBox ul li{font-size: 14px; color: #666;} #callBox ul li em{display: inline-block; width: 70px; color: #6c8aa0;} #callBox > em{font-size: 12px; color: #666; margin-top: 5px; display: block;} #bottomQuickBtn{width: 218px; height: 228px; float: left; margin-top: 20px; background: #fff; border: 1px solid #dcdcdc;} #bottomQuickBtn li{} #bottomQuickBtn li a{padding-left: 20px; height: 45px; line-height: 45px; font-size: 16px; display: block; border-bottom: 1px solid #dcdcdc;} #bottomQuickBtn li:last-child a{border: 0;} #firstSite{width: 320px; height: 170px; padding: 30px;background: #333; float: right; margin-top: 20px; background: url('/images/main/first_site.png') 0 0 no-repeat;} #firstSite h3{color: #fff; margin-bottom: 10px;} #firstSite img{display: block; margin-bottom: 10px;} #firstSite p{color: #fff; font-size: 16px; margin-bottom: 20px;} @media screen and (max-width: 750px){ .index-page{padding: 0px !important;} #introBanner{float: none; width: 100%; height: auto; padding: 60px 5% 50px 8%; box-sizing:border-box; background-size:cover; background: url('/images/main/intro_banner_001_m.jpg') center no-repeat; background-size: 100%;} #infoBanner ul li:nth-child(1){background-size:100%;} #infoBanner ul li:nth-child(2){background-size:100%;} #introBanner h4{margin-bottom: 10px; font-size: 24px;} #introBanner p br{display: none;} #introBanner p{margin-bottom: 30px; font-size: 14px; letter-spacing: -0.5px; width: 95%;} #quickBtn{float: none; width: 100%; height: auto;} #quickBtn li{width: 50%; } #quickBtn li:nth-child(1){background: #4b5e6c url(/images/main/quick_btn_bg_001.png) 100% 100% no-repeat;} #quickBtn li:nth-child(2){background: #393e45 url(/images/main/quick_btn_bg_002.png) 100% 100% no-repeat;} #quickBtn li:nth-child(3){background: #b09b71 url(/images/main/quick_btn_bg_003.png) 100% 100% no-repeat;} #quickBtn li:nth-child(4){background: #8f785d url(/images/main/quick_btn_bg_004.png) 100% 100% no-repeat;} #mainQuickMenu li a{background-size:45px !important; padding-top: 75px;} #quickBtn li a{background-size:45px; width: 100%; padding-top: 80px; height: 40px; background-position: 50% 20px;} #infoBanner{float: none; width: 100%; height: 170px; margin-top: 0;} #infoBanner h3{top:20px; left:5%;} #infoBanner ul li a{width: 100%; height: auto; padding: 65px 5% 0; box-sizing:border-box;} #infoBanner ul li a em{font-size: 14px; height: 20px; line-height: 18px; display: none; top: -3px;} #infoBanner ul li a strong{font-size: 20px; color:#b09b71;} #infoBanner ul li a span{width: 80%; font-size: 14px;} #infoBanner > a{width: 17px; height: 17px; top:25px; right: 5%;} #infoBanner ul.paging{bottom: 25px; right: 5%;} #infoBanner ul.paging li{background:#fff;} #infoBanner ul.paging .swiper-pagination-bullet{background:#fff;} #infoBanner ul.paging .swiper-pagination-bullet-active{width: 26px; opacity: 1;} #mainBoard{float: none; width: 100%; height: auto; margin-top: 0; padding-bottom: 10px; border: 0;} #mainBoard ul.board-title li h3{width: 104px; text-align: center;} #mainBoard .board-list ul.main-schedule li{width: 100%; padding: 0 5%; box-sizing:border-box;} #mainBoard .board-list ul.main-schedule li a > span{width: auto;} #mainBoard .board-list ul.main-notice li{width: 100%; padding: 0 5%; box-sizing:border-box;} #mainQuickMenu{float: none; width: 100%; height: auto; margin-top: 0; padding: 0; border-left: 0; border-right: 0;} #mainQuickMenu li{width: 33.333%;} #mainQuickMenu li:nth-child(1),#mainQuickMenu li:nth-child(2),#mainQuickMenu li:nth-child(3){border-bottom: 1px solid #e5e5e5;} #callBox{float: none; width: 100%; height: auto; margin-top: 0; margin-right: 0; padding: 5%; border: 0; box-sizing:border-box;} #callBox h3{display: inline-block; padding-top: 8px; font-weight: 300 !important;} #callBox strong{display: inline-block; float: right; margin-top: 0;} #callBox span{display: none;} #callBox ul{display: none;} #callBox > em{display: none; display: inline-block;} #bottomQuickBtn{display: none;} #firstSite{float: none; width: 100%; height: auto; margin-top: 0; padding: 5% 5% 6.5%; background: url(/images/main/first_site.png) 50% 50% no-repeat; background-size: 102%; box-sizing:border-box; position: relative;} #firstSite h3{font-weight: 300 !important;} #firstSite p{margin-bottom: 0;} #firstSite a.btn{display: block; width: 100%; height: 100%; text-indent: -9999em; overflow: hidden; position: absolute; right: 0; top: 0; background: url(/images/common/plus_btn_w.png) 95% 16% no-repeat; border: 0;} } @media screen and (max-width: 480px){ .index-page{padding: 0px !important;} #introBanner{float: none; width: 100%; height: auto; padding: 60px 5% 50px 8%; box-sizing:border-box; background-size:cover; background: url('/images/main/intro_banner_001_m.jpg') center no-repeat;} #introBanner h4{margin-bottom: 10px; font-size: 24px;} #introBanner p br{display: none;} #introBanner p{margin-bottom: 30px; font-size: 14px; letter-spacing: -0.5px; width: 95%;} #quickBtn{float: none; width: 100%; height: auto;} #quickBtn li{width: 50%;} #quickBtn li:nth-child(1){background: #4b5e6c url(/images/main/quick_btn_bg_001.png) 100% 100% no-repeat;} #quickBtn li:nth-child(2){background: #393e45 url(/images/main/quick_btn_bg_002.png) 100% 100% no-repeat;} #quickBtn li:nth-child(3){background: #b09b71 url(/images/main/quick_btn_bg_003.png) 100% 100% no-repeat;} #quickBtn li:nth-child(4){background: #8f785d url(/images/main/quick_btn_bg_004.png) 100% 100% no-repeat;} #mainQuickMenu li a{background-size:45px !important; padding-top: 75px;} #quickBtn li a{background-size:45px; width: 100%; padding-top: 80px; height: 40px; background-position: 50% 20px;} #infoBanner{float: none; width: 100%; height: 170px; margin-top: 0;} #infoBanner h3{top:20px; left:5%;} #infoBanner ul li a{width: 100%; height: auto; padding: 65px 5% 0; box-sizing:border-box;} #infoBanner ul li a em{font-size: 14px; height: 20px; line-height: 18px; display: none; top: -3px;} #infoBanner ul li a strong{font-size: 20px; color:#b09b71;} #infoBanner ul li a span{width: 80%; font-size: 14px;} #infoBanner > a{width: 17px; height: 17px; top:25px; right: 5%;} #infoBanner ul.paging{bottom: 25px; right: 5%;} #infoBanner ul.paging li{background:#fff;} #infoBanner ul.paging .swiper-pagination-bullet{background:#fff;} #infoBanner ul.paging .swiper-pagination-bullet-active{width: 26px; opacity: 1;} #mainBoard{float: none; width: 100%; height: auto; margin-top: 0; padding-bottom: 10px; border: 0;} #mainBoard ul.board-title li h3{width: 104px; text-align: center;} #mainBoard .board-list ul.main-schedule li{width: 100%; padding: 0 5%; box-sizing:border-box;} #mainBoard .board-list ul.main-schedule li a > span{width: auto;} #mainBoard .board-list ul.main-notice li{width: 100%; padding: 0 5%; box-sizing:border-box;} #mainQuickMenu{float: none; width: 100%; height: auto; margin-top: 0; padding: 0; border-left: 0; border-right: 0;} #mainQuickMenu li{width: 33.333%;} #mainQuickMenu li:nth-child(1),#mainQuickMenu li:nth-child(2),#mainQuickMenu li:nth-child(3){border-bottom: 1px solid #e5e5e5;} #callBox{float: none; width: 100%; height: auto; margin-top: 0; margin-right: 0; padding: 5%; border: 0; box-sizing:border-box;} #callBox h3{display: inline-block; padding-top: 8px; font-weight: 300 !important;} #callBox strong{display: inline-block; float: right; margin-top: 0;} #callBox span{display: none;} #callBox ul{display: none;} #callBox > em{display: none; display: inline-block;} #bottomQuickBtn{display: none;} #firstSite{float: none; width: 100%; height: auto; margin-top: 0; padding: 5% 5% 6.5%; background: url(/images/main/first_site.png) 50% 50% no-repeat; background-size: 102%; box-sizing:border-box; position: relative;} #firstSite h3{font-weight: 300 !important;} #firstSite p{margin-bottom: 0;} #firstSite a.btn{display: block; width: 100%; height: 100%; text-indent: -9999em; overflow: hidden; position: absolute; right: 0; top: 0; background: url(/images/common/plus_btn_w.png) 95% 16% no-repeat; border: 0;} }