/* PC */ section.main { position:relative; width:100%; } .visual .slidesjs-container{overflow: visible;} .visual#slides {display:none;position:relative; width:100%; height:auto;} .visual img {cursor:pointer; width:100%; height: 100%;} @media screen and (max-width:950px){ .visual#slides{display:block;} } /*메인슬라이드 s*/ #slides {position:relative;} #slides, #slides .slidesjs-control, #slides .slidesjs-container, #slides .slidesjs-slide {width:100%;height:auto;z-index:0;} #slides .slidesjs-navigation { margin-top:0px; } #slides a.slidesjs-next, #slides a.slidesjs-previous{ display:block; width:7%; height:18%; text-indent: -9999px; z-index:100; } #slides a.slidesjs-next { background-image: url('/img/index/btns-next.png'); background-repeat: no-repeat; background-size:cover; position:absolute; top:40%; right:3%; } #slides a:hover.slidesjs-next { } #slides a.slidesjs-previous { background-image: url('/img/index/btns-prev.png'); background-repeat: no-repeat; background-size:cover; position:absolute; top:40%; left:3%; } #slides a:hover.slidesjs-previous { } /*190422 수정 s */ #slides a.slidesjs-play { position:absolute; bottom:5%; left:50%; margin-left:-10px; width:20px; height:0; padding-top: 15px; background-image: url(../img/index/pagination.png); background-repeat:no-repeat; background-position: 0 -56px; z-index:1000000; text-indent:-9999px; overflow: hidden; } #slides a:hover.slidesjs-play { width:20px; height:0; padding-top: 15px; background-position: 0 -56px; } #slides a.slidesjs-stop { position:absolute; bottom:5%; left:50%; margin-left:-10px; width:20px; height:0; padding-top: 15px; background-image: url(../img/index/pagination.png); background-repeat:no-repeat; background-position: 0 -40px; z-index:1000000; text-indent:-9999px; overflow: hidden; } #slides a:hover.slidesjs-stop { width:20px; height:0; padding-top: 15px; background-position: 0 -40px; } /*190422 수정 e */ #slides .slidesjs-pagination { position:absolute; top:340px; left:375px; margin: 0; float: right; list-style: none; border:0px solid red; z-index:10000; } #slides .slidesjs-pagination li { float: left; margin: 0 1px; } #slides .slidesjs-pagination li a { display: block; width: 22px; height: 0px; padding-top: 22px; margin:0 1px; /* background-image: url('/img/index/pagination.png'); */ background-position: 0 22px; float: left; overflow: hidden; z-index:100; } #slides .slidesjs-pagination li a.active, #slides .slidesjs-pagination li a:hover.active { background-position: 0 0 } #slides .slidesjs-pagination li a:hover { background-position: 0 0 } #slides .navbar { overflow: hidden } /*메인슬라이드 e*/ .main_board_wr {position:relative; width:1300px; margin:0px auto; overflow:hidden;} .main_board_01 {float:left; width:49%; padding-right:1.2%; margin:25px 0 25px;} .main_board_02 {float:left; width:49%; padding-left:1.2%; margin:25px 0 25px;} .main_board_03 {float:left; width:49%; padding-right:1.2%;} .main_board_04 {float:left; width:49%; padding-left:1.2%;} .main_board_tt {height:50px; line-height:50px; font-size:20px; color:#000; font-weight:900; letter-spacing:-1px; margin-bottom:10px;background:#f9f9f9;position:relative;} .main_board_tt p {border-bottom:2px solid #405a73;width:190px;padding-left:10px;display:inline-block;} .main_board_tt h2 {font-size:20px;border-bottom:2px solid #405a73;width:190px;padding-left:10px;display:inline-block;} .main_board_tt button{position:absolute;top:50%;right:20px;transform: translateY(-50%);cursor:pointer;background-color:transparent;} .main_board_tt span {color:#3386f1} .main_board_list ul {height:142px; border:0px solid red} /* 수정190108 */ .main_board_list ul li {position:relative; border-bottom:1px solid #dedede; vertical-align:middle; padding:7px 10px 4px; font-size:15px;} .main_board_list ul li .lt_list {display:inline-block; width:73%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main_board_list ul li .new_icon {display:inline-block; padding:2px 4px; background:#333; font-weight:bold; border-radius:3px; font-size:14px; color:#fff; } .main_board_list ul li .lt_date {position:absolute; text-align:right; top:8px; right:15px; font-size:14px; color:#666; } .main_board_list ul li a {color:#444} .main_board_list ul li a:hover {color:#000} @media (max-width: 1300px) { .main_board_wr {position:relative; width:97%; padding:0 10px;} .main_board_list ul li .lt_date {font-size:14px;} } @media (max-width: 520px) { .main_board_list ul {height:auto;} /* 수정190108 */ .main_board_01, .main_board_02, .main_board_03, .main_board_04 {float:none; width:100%; padding-right:0; margin:20px 0 10px;} } .main_tile {position:relative; width:100%; height:auto; margin:0px auto; padding:3% 0; border:0px solid red; overflow:hidden} .main_tile ul li { float:left; width: 100%; width:20%; height: 0; overflow: hidden; padding-bottom: 20%; text-align:center; } .main_tile ul li.main_tile01 {background:#688097; text-align:center; line-height:1em} .main_tile ul li.main_tile01 {background:url('/img/index/main_tile01.png') no-repeat #688097 center; background-size:50%;} .main_tile ul li.main_tile02 {background:url('/img/index/main_tile02.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile03 {background:#1773cf} .main_tile03, .main_tile05, .main_tile07, .main_tile09 {cursor:pointer} .main_tile ul li .img {text-align:center; line-height:1em; padding-top:18%; padding-bottom:3%} .main_tile ul li .img img {width:35%;} .main_tile ul li .title_w {line-height:60px; height:80px; font-size:25px; color:#fff; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_w.png') no-repeat 50% 80%} .main_tile ul li .text_eng_w {font-size:15px; color:rgba(250,250,250,0.5); font-weight:700; } .main_tile ul li .title_b {line-height:60px; height:80px; font-size:25px; color:#4c4747; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_b.png') no-repeat 50% 80%} .main_tile ul li .text_eng_b {font-size:15px; color:rgba(76,71,71,0.25); font-weight:700; } .main_tile ul li.main_tile04 {background:url('/img/index/main_tile04.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile05 {background:#405a73} .main_tile ul li.main_tile06 {background:url('/img/index/main_tile06.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile07 {background:#f7f7f7} .main_tile ul li.main_tile08 {background:url('/img/index/main_tile08.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile09 {background:#f7f7f7} .main_tile ul li.main_tile10 {background:url('/img/index/main_tile10.jpg') no-repeat; background-size:cover; font-size:23px; } @media (max-width: 1280px){ .main_tile ul li.main_tile10 {background:url('/img/index/main_tile10.jpg') no-repeat; background-size:cover; font-size:18px; } } .main_tile ul li.main_tile10 .title {padding-top:30%; padding-bottom:5%; font-size:1em; color:#404040; letter-spacing:-1px; font-weight:bold} .main_tile ul li.main_tile10 .title span {color:#c23231} .main_tile ul li.main_tile10 img {width:60%} /*팝업리스트*/ .main_pop_wrap {position:relative; width:100%; margin:0 auto; padding:2% 0 6% 0;/* 추가 */display:inline-block;text-align:center;} .main_pop_wrap .main_pop_tt {margin-bottom:20px; margin-left:30px; } .main_pop_wrap .popup_list {float: right;position:relative;z-index:1;width:68%;} /* .main_pop_wrap .popup_list li {float:left; } */ .main_pop_wrap .popup_list a img {width:100%; /*width:inherit;*/ height:400px; border:4px solid #fff; box-shadow:3px 3px 7px rgba(0,0,0,0.1)} .main_pop_wrap .popup_list li a {display:block;} .main_pop_wrap .bx-start{background:url('/img/index/slide_play.png') no-repeat; top:0px; left:100px;position:absolute; width:41px; height:41px} .main_pop_wrap .bx-stop{background:url('/img/index/slide_stop.png') no-repeat; top:0px; left:150px;position:absolute; width:41px; height:41px} .main_pop_wrap .bx-wrapper {position:relative;display:inline-block} .main_pop_wrap .bx-controls {position:absolute; /* top:-60px; left:260px;*/right:20%;bottom:-12px;} .main_pop_wrap .bx-controls a {text-indent: -9999px; display:block} .main_pop_wrap .bx-prev, .main_pop_wrap .bx-next {position:absolute; width:41px; height:41px} /* .main_pop_wrap .bx-prev {top:0px; left:00px; background:url('/img/index/larr.png') no-repeat} .main_pop_wrap .bx-next {top:0px; left:50px; background:url('/img/index/rarr.png') no-repeat} */ .main_pop_wrap_600 {display:none;} @media (max-width: 1300px){ .main_pop_wrap {position:relative; width:100%; margin:0 auto; padding:1% 2% 3%;/* 추가 */display:inline-block } .main_pop_wrap .main_pop_tt {margin-bottom:20px; margin-left:10px; } } @media (max-width: 700px) { .main_pop_wrap {margin:0 0 15%; padding:5% 10px 0;/* 추가 */display:inline-block} } @media (max-width: 660px) { .main_pop_wrap {display:none} .main_pop_wrap_600 {display:block; padding:5% 3% 5%; } .main_pop_wrap_600 .main_pop_tt {margin-bottom:10px; margin-left:10px; } .main_pop_wrap_600 .main_pop_tt img {width:50%; } .main_pop_wrap_600 .popup_list_600 {float:left; z-index:100; position:relative; } .main_pop_wrap_600 .popup_list_600 li {float:left; } .main_pop_wrap_600 .popup_list_600 li img {width:100%; /*width:inherit;*/ height:370px; border:4px solid #fff; box-shadow:3px 3px 7px rgba(0,0,0,0.1)} .main_pop_wrap_600 .popup_list_600 li a {display:block;} .main_pop_wrap_600 .bx-wrapper {position:relative;display:inline-block} .main_pop_wrap_600 .bx-controls {position:absolute; top:-45px; left:55%;} .main_pop_wrap_600 .bx-controls a {text-indent: -9999px; display:block} .main_pop_wrap_600 .bx-prev, .main_pop_wrap_600 .bx-next {position:absolute; width:41px; height:41px} .main_pop_wrap_600 .bx-prev {top:0px; left:00px; background:url('/img/index/larr.png') no-repeat} .main_pop_wrap_600 .bx-next {top:0px; left:50px; background:url('/img/index/rarr.png') no-repeat} } @media (max-width: 500px) { .main_pop_wrap_600 .popup_list_600 li img {width:100%; /*width:inherit;*/ height:250px; border:4px solid #fff; box-shadow:3px 3px 7px rgba(0,0,0,0.1)} } /*하단배너*/ #link_wrap {position:relative; width:100%; height:90px; border-top:1px solid #e5e5e5; overflow:hidden; display: flex; justify-content: center; align-items: center} #link_wrap .link_wrap_1300 {position:relative; width:1100px;} #link_wrap .link_wrap_1300+a{width: 220px; display: flex; align-items: center} @media (max-width: 1300px) { #link_wrap .link_wrap_1300 {position:relative; width:calc(100% - 240px); margin:0 auto;} } #link_wrap .link_tt {width:11%; margin-left:5px; line-height:90px;} #link_wrap .link_tt img {width:100%;} .linkBtn{float:left;} .linkBtn button{background-color: transparent;} #link_wrap .link_banner {float:left;position:relative;z-index:1;width:85%;margin-left: 42px;} @media (max-width: 1024px) { #link_wrap .link_banner {margin-left: 20px;} } #link_wrap .link_banner li {float:left} #link_wrap .link_banner li img {width:160px; height:40px} #link_wrap .link_banner li a {display:block;} #link_wrap .bx-wrapper {position:absolute; top:20px; left:9.5%; border:0px solid red} #link_wrap .bx-viewport {max-width:100%; margin-left:4%; border:0px solid red} #link_wrap .bx-controls {position:absolute; top:0; left:-9%; width:100px; height:41px; } #link_wrap .bx-controls a {text-indent: -9999px; display:block} #link_wrap .bx-prev, #link_wrap .bx-next {position:absolute; width:41px; height:41px} #link_wrap .bx-prev {top:5px; left:0px; background:url('/img/index/larr.png') no-repeat} #link_wrap .bx-next {top:5px; left:47px; background:url('/img/index/rarr.png') no-repeat} /* #link_wrap .bx-start{background:url('/img/index/slide_play.png') no-repeat; top:5px; left:100px;position:absolute; width:41px; height:41px} #link_wrap .bx-stop{background:url('/img/index/slide_stop.png') no-repeat; top:5px; left:150px;position:absolute; width:41px; height:41px} */ .slideBtn{position: absolute;bottom:-52px;right:0;} .slideBtn button{background-color: #fff;cursor:pointer;} /* 1150px */ @media (max-width: 1150px) { .main_tile {position:relative; width:100%; height:auto; margin:0px auto; padding:7% 0; border:0px solid red; overflow:hidden} .main_tile ul li { float:left; width: 100%; width:20%; height: 0; overflow: hidden; padding-bottom: 20%; text-align:center; } .main_tile ul li.main_tile01 {background:#688097; text-align:center; line-height:1em} .main_tile ul li.main_tile01 {background:url('/img/index/main_tile01.png') no-repeat #688097 center; background-size:50%;} .main_tile ul li.main_tile02 {background:url('/img/index/main_tile02.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile03 {background:#1773cf} .main_tile03, .main_tile05, .main_tile07, .main_tile09 {cursor:pointer} .main_tile ul li .img {text-align:center; line-height:1em; padding-top:18%;} .main_tile ul li .img img {width:35%;} .main_tile ul li .title_w {line-height:40px; height:55px; font-size:20px; color:#fff; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_w.png') no-repeat 50% 80%} .main_tile ul li .text_eng_w {font-size:14px; color:rgba(250,250,250,0.5); font-weight:700; } .main_tile ul li .title_b {line-height:40px; height:55px; font-size:20px; color:#4c4747; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_b.png') no-repeat 50% 80%} .main_tile ul li .text_eng_b {font-size:14px; color:rgba(76,71,71,0.25); font-weight:700; } .main_tile ul li.main_tile04 {background:url('/img/index/main_tile04.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile05 {background:#405a73} .main_tile ul li.main_tile06 {background:url('/img/index/main_tile06.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile07 {background:#f7f7f7} .main_tile ul li.main_tile08 {background:url('/img/index/main_tile08.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile09 {background:#f7f7f7} .main_tile ul li.main_tile10 {background:url('/img/index/main_tile10.jpg') no-repeat; background-size:cover; font-size:18px; } .main_tile ul li.main_tile10 .title {padding-top:30%; padding-bottom:5%; font-size:1em; color:#404040; letter-spacing:-1px; font-weight:bold; word-break:keep-all} .main_tile ul li.main_tile10 .title span {color:#c23231} .main_tile ul li.main_tile10 img {width:60%} .main_pop_wrap .popup_list{z-index: 30;} } /* 960px */ @media (max-width: 960px) { .main_tile {position:relative; width:100%; height:100%; margin:0px auto; padding:6% 0; border:0px solid red; overflow:hidden} .main_tile ul li { float:left; width: 100%; width:33.3%; height: 0; overflow: hidden; padding-bottom: 33.3%; text-align:center; } .main_tile ul li.main_tile01 {display:none;} .main_tile ul li.main_tile01 {background:url('/img/index/main_tile01.png') no-repeat #688097 center; background-size:50%;} .main_tile ul li.main_tile02 {background:url('/img/index/main_tile02.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile03 {background:#1773cf} .main_tile03, .main_tile05, .main_tile07, .main_tile09 {cursor:pointer} .main_tile ul li .img {text-align:center; line-height:1em; padding-top:18%;} .main_tile ul li .img img {width:36%;} .main_tile ul li .title_w {line-height:30px; height:50px; font-size:20px; color:#fff; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_w.png') no-repeat 50% 80%; background-size:10%; } .main_tile ul li .text_eng_w {font-size:12px; color:rgba(250,250,250,0.5); font-weight:700; } .main_tile ul li .title_b {line-height:30px; height:50px; font-size:20px; color:#4c4747; font-weight:500; letter-spacing:-2px; background:url('/img/index/main_tile_bar_b.png') no-repeat 50% 80%; background-size:10%;} .main_tile ul li .text_eng_b {font-size:12px; color:rgba(76,71,71,0.25); font-weight:700; } .main_tile ul li.main_tile04 {background:url('/img/index/main_tile04.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile05 {background:#405a73} .main_tile ul li.main_tile06 {background:url('/img/index/main_tile06.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile07 {background:#f7f7f7} .main_tile ul li.main_tile08 {background:url('/img/index/main_tile08.jpg') no-repeat; background-size:cover;} .main_tile ul li.main_tile09 {background:#f7f7f7} .main_tile ul li.main_tile10 {background:url('/img/index/main_tile10.jpg') no-repeat; background-size:cover; font-size:18px; } .main_tile ul li.main_tile10 .title {padding-top:20%; padding-bottom:5%; font-size:1em; color:#404040; letter-spacing:-1px; font-weight:bold; word-break:keep-all} .main_tile ul li.main_tile10 .title span {color:#c23231} .main_tile ul li.main_tile10 img {width:70%} /*팝업리스트*/ .main_pop_wrap .popup_list a img {width:100%; /*width:inherit;*/ height:250px; border:4px solid #fff; box-shadow:3px 3px 7px rgba(0,0,0,0.1)} /*하단배너*/ #link_wrap {position:relative; width:100%; height:90px; border-top:1px solid #e5e5e5; overflow:hidden} #link_wrap .link_tt {display:none;} #link_wrap .link_banner {float:left; z-index:100; position:relative; line-height:80px;width:82%;margin-left: 10px} #link_wrap .link_banner li {float:left} #link_wrap .link_banner li img {width:160px; height:40px} #link_wrap .link_banner li a {display:block;} #link_wrap .bx-wrapper {position:absolute; top:20px; left:1%; border:0px solid red;z-index:20} #link_wrap .bx-viewport {max-width:100%; margin-left:100px; border:0px solid red} #link_wrap .bx-controls {position:absolute; top:0; left:0px; width:100px; height:41px; } #link_wrap .bx-controls a {text-indent: -9999px; display:block} #link_wrap .bx-prev, #link_wrap .bx-next {position:absolute; width:41px; height:41px} #link_wrap .bx-prev {top:5px; left:0px; background:url('/img/index/larr.png') no-repeat} #link_wrap .bx-next {top:5px; left:47px; background:url('/img/index/rarr.png') no-repeat} } @media (max-width: 786px){ #link_wrap .link_banner{width: calc(100% - 140px);} } /* 660px */ @media (max-width: 660px) { /*하단배너*/ #link_wrap .link_banner {float:left;position:relative;line-height:80px;width:68%; margin-left: 10px} #link_wrap .link_banner li {float:left; width:33%} #link_wrap .link_banner li img {width:85%; height:40px} #link_wrap .link_banner li a {display:block;} #link_wrap .bx-wrapper {position:absolute; top:20px; left:5%; border:0px solid red} #link_wrap .bx-viewport {max-width:73%; margin-left:23%; border:0px solid red} /* #link_wrap .bx-controls {display:none;} */ #link_wrap .linkBtn img{width: 32px} #link_wrap .link_wrap_1300+img{width: 40%} } /* 480px */ @media (max-width: 480px) { .main_tile ul li .img {text-align:center; line-height:1em; padding-top:14%; padding-bottom:1%} .main_tile ul li .title_w {font-weight:bold; line-height:30px; height:30px; font-size:15px; background:none} .main_tile ul li .text_eng_w {font-size:14px; line-height:10px} .main_tile ul li .title_b {font-weight:bold; line-height:30px; height:30px; font-size:15px; background:none} .main_tile ul li .text_eng_b {font-size:14px; line-height:10px} .main_tile ul li.main_tile10 {font-size:14px; } .main_tile ul li.main_tile10 .title {padding-top:16%; padding-bottom:5%; font-size:1em;} } /* 480px */ @media (max-width: 480px){ #link_wrap .link_wrap_1300{width: 54%; margin: 0} #link_wrap .link_banner{width:55%;margin-left: 5px;} #link_wrap .link_wrap_1300+a{width: 150px;} #link_wrap .link_wrap_1300+a img{width: 100%} } .mainpopNew{max-width:1300px;text-align:center;margin:0 auto;position: relative;} div.main_tile10 {background:url('/img/index/main_tile10.jpg') no-repeat; background-size:cover; font-size:23px;position:relative; width:32%; height:400px; margin:0px auto; padding:3% 0; border:0px solid red; overflow:hidden;display:inline-block; } div.main_tile10 .title {padding-top:30%; padding-bottom:5%; font-size:1em; color:#404040; letter-spacing:-1px; font-weight:bold} div.main_tile10 .title span {color:#c23231} div.main_tile10 img {width:60%} @media (max-width: 1300px){ .mainpopNew{margin:5% auto;} } @media (max-width: 1294px){ .mainpopNew{margin:7% auto;} .mainpopNew .bx-wrapper{max-width:73% !important;} .main_pop_wrap .bx-controls{right:28%;} } @media (max-width: 960px){ div.main_tile10{height:255px;} .main_pop_wrap .bx-controls{right: 34%;} }