@charset "utf-8"; /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// 공통 /////////////////////////////////////////////////////////////////////////////////////////////////////////// */ .mlayout {position:relative;max-width:1240px;width: 100%;margin: 0 auto;} .mlayout:after{content:"";display:block;clear:both;} .main_ir {margin: 0 auto;background-image: url(/images/main/main_ir.png);background-repeat: no-repeat;font-size: 0 !important;} /* #container .tit {margin-bottom: 20px;} #container .tit strong{font-size:22px; color:#000;} #container .tit strong > span {font-family:'themario'; font-size:27px; font-weight:300; color:#0c70b9; text-align:center; margin-top:0; margin-bottom:30px;} */ #container .more {position:absolute;top:0;right:0;display:block;font-size: 0;} #container .more a{font-size:0;display:block;width:30px;height:30px;background: #eee;border-radius: 50px; transition: all 0.5s ease-in-out} #container .more a:hover{background: #107fd0;box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);} #container .more a:before, #container .more a:after{content:""; display:inline-block; position:absolute; background-color:#959b9f; transition: all 0.2s ease-in-out} #container .more a:before{top:14px; left:7px; width:15px; height:1px} #container .more a:after{top:7px; left:14px; width:1px; height:15px} #container .more a:hover:after, #container .more a:hover:before{transform: rotate(90deg);background-color:#fff;} .tabList {position:relative;text-align: center;z-index: 999;margin-bottom:calc(3em + ((1200px / 5 - 1em) * 0.85) + 90px);} .tabList:after {content:""; display:block; clear:both;} .tabList > li {display: inline-block;margin: 0 10px;} .tabList > li > button, .tabList > li > a {height:3em; padding:0 1em 0 0.5em; font-size:1.1em;background: none; color:#000; position:relative;font-family: 'gmarket'; transition: all 0.3s ease-in-out;} .tabList > li > a {display:table; text-align: center;} .tabList > li > a > em {display:table-cell; vertical-align: middle;} .tabList > li > button > em {display: inline-block;line-height: 32px;font-size: 18px;font-weight: 500;vertical-align: top;} /*.tabList > li > button:before, .tabList > li > a:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:0; background:#107fd0;border-radius: 6px; transition: all 0.3s ease-in-out;} */ .tabList > li > button.active, .tabList > li > a.active {background:#107fd0;border-radius: 6px;box-shadow: 8px 8px 10px 5px rgba(0,0,0,0.1);} .tabList > li .main_ir {display:inline-block;width:38px;height:32px;margin:0;} .tabList > li .t1 {background-position: 0 -79px;} .tabList > li .t2 {background-position: -39px -79px;} .tabList > li .t3 {background-position: -78px -79px;} .tabList > li .t4 {background-position: -117px -79px;} .tabList > li .t5 {background-position: -206px -79px;} .tabList > li > button.show, .tabList > li > a.show {color:#fff; font-weight:bold;} .tabList > li > button.show:before, .tabList > li > a.show:before {width:100%;} .tabList > li > button.hide:before, .tabList > li > a.hide:before {width:0; left:auto; right:0;} .tabList > li > .tabContent {display:none; opacity:0;text-align: left; position:absolute; top:calc(3em * 1.1); left:0; right:0; padding-top:30px; transform:translateX(30%); transition: all 0.5s ease-in-out;} .tabList > li > button.active + .tabContent, .tabList > li > a.active + .tabContent {display:block;} .tabList > li > button.show + .tabContent, .tabList > li > a.show + .tabContent {opacity:1; transform:translateX(0);} .tabList > li > button.hide + .tabContent, .tabList > li > a.hide + .tabContent {opacity:0; transform:translateX(-30%);} .tabList > li > button br, .tabList > li > a br {display:none;} .tabList .itemList > div > a {display:block; /*border:1px solid #ddd;*/ position:relative;} .tabList .itemList .img {padding-bottom:68%; overflow:hidden; position:relative; background:#333;} .tabList .itemList .img img {position:absolute; /* max-width:none; min-width:100%; min-height:100%; */ width:100%; left:50%; top:50%; transform: translate(-50%,-50%);} .tabList .itemList .no_img {background:#ddd;} .tabList .itemList .no_img:after {content:"No Image"; color:#fff; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center;} .tabList .itemList .txt {height:90px; padding: 10px; position:relative;} .tabList .itemList .tit {/* text-overflow:ellipsis; white-space: nowrap; */overflow:hidden; font-size:0.95em;} .tabList .itemList .sumry {font-size: 0.85em; color:#777; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;} .tabList .itemList .date {position:absolute; bottom:10px; right:10px; font-size:0.8em; color:#777; line-height:1;} .tabList .itemList .img {padding-bottom:85%;} .tabList .slick-slide {margin:0 0.5em; /* opacity:0; visibility:hidden; */ transition: all 0.5s ease-in-out;} .tabList .slick-slide > a {display:block;} .slick-controls {position: absolute;transform: translate(-50%,100%);left: 50%;bottom:0;padding-right: 30px;} /*.slick-controls .slick-dots {float:left;}*/ .slick-controls .slick-play {position:absolute; top:0; right:0; width:24px; height:24px; text-indent:-9999px; overflow:hidden; background:url(/images/main/ico_controls.png) no-repeat;} .slick-controls .slick-play:before {content:""; display:block; border-radius:50%; position:absolute; top:0; left:0; right:0; bottom:0; border:2px solid #333;} .slick-controls .slick-play.played {background-position: 0 -24px;} .slick-controls .slick-play.paused {background-position: -24px -24px;} .tabList .slick-arrow {display: block; width: 56px;height: 56px;border: none;border-radius: 50%;background: #d9e0e7;padding: 0px;z-index: 99;} .tabList .slick-prev {left:-85px;} .tabList .slick-next {right:-85px;} .tabList .slick-prev:before, .tabList .slick-next:before {position: absolute;top: 17px;width:20px;height: 20px;border-width: 1px;border-style: solid;border-color: #000;} .tabList .slick-prev:before {content: '';left: 23px;border-width: 1px 0 0 1px;transform: rotate(-45deg);} .tabList .slick-next:before {content: '';right: 23px;border-width: 1px 0 0 1px;transform: rotate(135deg);} .tabList .slick-dots li {margin: 0;} .tabList .slick-dots li button:before {font-size: 22px;} .mainEvent .tabList .itemList .item {} .mainEvent .tabList .itemList .item > a{margin:4%;height:240px;display:block;background:#fff;border-radius:12px 12px 40px 12px;overflow:hidden;transition:0.3s;box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);} .mainEvent .tabList .itemList .item > a .text_box {padding:30px 35px 20px 35px;} .mainEvent .tabList .itemList .item > a .text_box h4 {display:block; font-size:18px; font-weight:400; color:#000; line-height:26px; padding-left:0; margin-bottom:0; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} .mainEvent .tabList .itemList .item > a .text_box h4:before {display:none;} .mainEvent .tabList .itemList .item > a .text_box h4.title_type1 {white-space:normal; min-height:52px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;margin-top: 8px;} .mainEvent .tabList .itemList .item > a .text_box p {margin-top:15px;margin-bottom: 0; font-size:14px; font-weight:400; color:#2d2d2d;font-family: 'nsr';} .mainEvent .tabList .itemList .item > a .cont_box {border-top:1px solid #c9d3d6; /*padding-top:20px;*/display: flex;align-items: center;padding: 33px 25px;} .mainEvent .tabList .itemList .item > a .cont_box:after{display:block;content:"";clear:both;} /*.mainEvent .tabList .itemList .item > a .cont_box .l_box {float:left;height:auto;margin-left:35px;}*/ .mainEvent .tabList .itemList .item > a .cont_box .l_box2 {float:left;height:auto;margin-left:35px;width:55%;position: relative;} .mainEvent .tabList .itemList .item > a .cont_box .bull_box {/*float:right;margin-right:35px;*/margin: 0 0 0 auto;} .mainEvent .tabList .itemList .item > a .cont_box .day_num2 {color:#737373; padding-top:10px; display:block; text-align:right;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn {/*display: inline-block;*/display: flex;align-items: center;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn li {/*float:left; position:relative; padding-left:37px; padding-top:10px;*/font-size: 15px;display: flex;align-items: center;margin-right: 10px;} /*.mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn li:first-child{margin-right:10px;}*/ .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn li .point {margin-left: 5px;} .mainEvent .tabList li:nth-child(3) .itemList .item > a .cont_box .l_box .veiw_icn li {padding-left:0;} .mainEvent .tabList li:nth-child(4) .itemList .item > a .cont_box .l_box .veiw_icn li {padding-left:0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn {width:34px; height:34px; /*display:block; position:absolute; top:0; left:0;*/display: inline-block;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn.ico1 {background:url(/images/contents/like_up.png) no-repeat 0 0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn.ico2 {background:url(/images/contents/like_down.png) no-repeat 0 0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn.ico3 {background:url(/images/contents/list_icon.png) no-repeat 0 0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn.ico4 {background:url(/images/contents/list_icon.png) no-repeat -35px 0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .icn.ico5 {background:url(/images/contents/list_icon.png) no-repeat -70px 0;} .mainEvent .tabList .itemList .item > a .cont_box .l_box .veiw_icn .bull_type2.day {float:right; width:30%; height:auto;} .mainEvent .tabList .itemList .item > a .cont2_box {border-top:1px solid #c9d3d6; padding-top:20px; } .mainEvent .tabList .itemList .item > a .cont2_box .l_box {float:left; width:60%; height:auto;margin-left:35px;} .mainEvent .tabList .itemList .item > a .cont2_box .l_box .veiw_icn li {width: 20%;padding: 8px 0;margin: 0;float: left;} .mainEvent .tabList .itemList .item > a:hover{box-shadow: 10px 10px 0px 2px rgb(197 208 212 / 100%);} #container #mainContents .item-buttons {position: absolute;bottom: -32px;right: 0;} #container #mainContents .item-buttons button{} #container #mainContents .item-buttons .pause {display: inline-block; width: 24px;height: 24px;font-size: 0;background: url(/images/main/main_ir.png) no-repeat;background-position: -156px -79px;} #container #mainContents .item-buttons .play {display: inline-block;width: 24px;height: 24px;font-size: 0;background: url(/images/main/main_ir.png) no-repeat;background-position:-181px -79px;} .slick-dotted.slick-slider {margin-bottom:0 !important;} /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// Main -PC /////////////////////////////////////////////////////////////////////////////////////////////////////////// */ #container {} #container #mainContents {width: 100%;margin: 0 auto;} #container #mainContents .main-visual{overflow:hidden;position:relative;height:570px;} #container #mainContents .main-visual:before{display:block;content:"";position:absolute;top:0;left:0;width: 50%;height: 100%;background:#3d94de;z-index: -1;} #container #mainContents .main-visual:after{display:block;content:"";position:absolute;top:0;left:50%;width: 50%;height: 100%;background:#d2e8ff;z-index: -2;} #container #mainContents .main-visual .quicklink {float: left;margin-top: 105px;width:calc(100% - 850px);} #container #mainContents .main-visual .quicklink strong{display:none;} #container #mainContents .main-visual .quicklink ul{} #container #mainContents .main-visual .quicklink ul li {position:relative;float: left;width:45%;height: 158px;margin-right:5%;margin-bottom:5%;border-radius: 12px 12px 40px 12px;background:#fff;box-shadow: 8px 8px 10px 5px rgba(0,0,0,0.1);-webkit-transition: all 0.2s ease;transition: 0.2s;} #container #mainContents .main-visual .quicklink ul li span {position: relative;display:block;margin: 0 auto;text-align: center;width: 100%;height: 100%;color:#625f6d;font-size:17px;font-family: 'godo'; -webkit-animation: fade-in-down .4s; animation: fade-in-down .4s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } #container #mainContents .main-visual .quicklink ul li span .main_ir {display:block;width:78px;height:78px;margin:20px auto 12px auto;} #container #mainContents .main-visual .quicklink ul li span .ico1 {background-position: -82px 0;} #container #mainContents .main-visual .quicklink ul li span .ico2 {background-position: -161px 0;} #container #mainContents .main-visual .quicklink ul li span .ico3 {background-position: -240px 0;} #container #mainContents .main-visual .quicklink ul li span .ico4 {background-position: -319px 0;} #container #mainContents .main-visual .quicklink ul li .link-btn {display: none;} #container #mainContents .main-visual .quicklink ul li .card_btn {display: none;text-align: center;padding: 20px;height: 0;color: #424242; -webkit-animation: fade-in .8s; animation: fade-in .8s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } #container #mainContents .main-visual .quicklink ul li .card_btn a{display: block;padding: 15px 20px;margin:5px auto;font-size:15px;text-align:center;border-top-right-radius: 10px; border-bottom-left-radius: 10px;background: #eef4f6;} #container #mainContents .main-visual .quicklink ul li .card_btn a:first-child{margin-top: 22px;} #container #mainContents .main-visual .quicklink ul li .card_btn a:hover{color:#fff;background: #107fd0;} #container #mainContents .main-visual .quicklink ul li:hover {} #container #mainContents .main-visual .quicklink ul li:hover span {display:none;} #container #mainContents .main-visual .quicklink ul li:hover .card_btn{display: block;height: 100%;} #container #mainContents .main-visual #main-news{position: relative;margin-top:72px;float: right;width:765px;height:405px;} #container #mainContents .main-visual #main-news .single-item{width:100%;height:405px;box-shadow: 8px 8px 10px 5px rgba(0,0,0,0.1);} #container #mainContents .main-visual #main-news .single-item img{width:100%;} #container #mainContents .main-visual #main-news .single-item .slick-arrow {display: block; width: 56px;height: 56px;border: none;border-radius: 50%;background: #fff;padding: 0px;z-index: 99;} #container #mainContents .main-visual #main-news .single-item .slick-prev:before, #container #mainContents .main-visual #main-news .single-item .slick-next:before {position: absolute;top: 17px;width:20px;height: 20px;border-width: 1px;border-style: solid;border-color: #000;} #container #mainContents .main-visual #main-news .single-item .slick-prev:before {content: '';left: 23px;border-width: 1px 0 0 1px;transform: rotate(-45deg);} #container #mainContents .main-visual #main-news .single-item .slick-next:before {content: '';right: 23px;border-width: 1px 0 0 1px;transform: rotate(135deg);} #container #mainContents .main-visual #main-news .single-item .slick-dots {position: absolute;width: initial;bottom: -30px;right: 35px;text-align:right;} #container #mainContents .main-visual #main-news .single-item .slick-dots li {margin: 0;} #container #mainContents .main-visual #main-news .single-item .slick-dots li button:before {font-size: 22px;} #container #mainContents .main-visual #main-news .single-item .slick-track {overflow: hidden;height:405px;} #container #mainContents #cont1 {overflow: hidden;position:relative;padding:90px 0;background:#eaf1f7} /*#container #mainContents #cont1:before {content:"";position:absolute;top:0;left:0;width:562px;height:394px;background:url(/images/main/cont1_deco1.png) no-repeat 0 0;}*/ #container #mainContents #cont1 div.deco2{content:"";position:absolute;bottom:0;right:0;width:428px;height:264px;background:url(/images/main/cont1_deco2.png) no-repeat 0 0;} #container #mainContents #cont1 .tit {text-align: center;margin-bottom: 35px;} #container #mainContents #cont1 .tit strong{font-size:30px;} #container #mainContents #cont1 .tit strong > span { font-size:45px; font-weight:300; color:#0c70b9; text-align:center; margin-top:0; margin-bottom:30px;} #container #mainContents #cont2 {overflow: hidden;position: relative;padding: 90px 0;background: #fff;} #container #mainContents #cont2 .mlayout > div {position: relative;float: left;width:30.666%;margin-right:4%;padding: 0;z-index: 0;} #container #mainContents #cont2 .mlayout > div:nth-child(3){margin-right:0;} #container #mainContents #cont2 .group3 {overflow: hidden;position: relative;} #container #mainContents #cont2 .group3 .grap{overflow:hidden;position:relative;width:100%;padding-bottom: 73%;border-radius: 12px 12px 12px 12px;border: 1px solid #c8cfd1;z-index:11;} #container #mainContents #cont2 .group3 .obj{overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;} #container #mainContents #cont2 .group3 .obj .item{overflow: hidden;position:absolute;top:0;left:0;width:100%;height:100%;} #container #mainContents #cont2 .group3 .obj .item a{display:block;position:relative;text-align: center;width:100%;height:100%;} #container #mainContents #cont2 .group3 .thumb {width: 100%;height: 100%;padding: 0 0 19%;} #container #mainContents #cont2 .group3 .thumb span {overflow: hidden;display:block;/*padding-bottom: 50%;*/position:relative;width:100%;height:100%;background: #cfdaea;} #container #mainContents #cont2 .group3 .thumb span img {position:absolute;left:50%;top:50%;width:auto;min-width:100%;max-width: 1000%;height:100%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);} #container #mainContents #cont2 .group3 .thumb span.ytube img {width: 100%;height: auto;} #container #mainContents #cont2 .group3 .title {position: absolute;left: 0;bottom: 0;width: 100%;padding: 5% 8%;height: 24%;z-index: 1;} #container #mainContents #cont2 .group3 .title strong {display: block;overflow: hidden;color: #222;text-align: left;line-height: 1.4;font-size: 17px;font-weight: 400; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 85%;} #container #mainContents #cont2 .group3 a:hover .title strong, #container #mainContents #cont2 .group3 a:focus .title strong {text-decoration:underline} #container #mainContents #cont2 .group3 .count{display: none;margin-right: 10px;padding:3px 10px;color:#efefef;font-size:14px;} #container #mainContents #cont2 .group3 .count *{vertical-align:middle;font-family:'nsr','Malgun Gothic';} #container #mainContents #cont2 .group3 .count b{font-size: 15px;line-height: 1.4;color:#fff;} #container #mainContents #cont2 .group3 .control{display:inline-block;position:absolute;top:0;right:45px;height:30px;z-index: 9999;} #container #mainContents #cont2 .group3 .control *{padding:0;vertical-align:middle} #container #mainContents #cont2 .group3 .control .state{display:inline-block;margin:0;} #container #mainContents #cont2 .group3 .control .state button, #container #mainContents #cont2 .group3 .control .more button{display:inline-block;width:30px;height:30px;font-size:0;background:url(/images/main/zone_control.png) no-repeat} #container #mainContents #cont2 .group3 .control .state button[data-type="play"]{display:none;background-position:-139px 0} #container #mainContents #cont2 .group3 .control .state button[data-type="stop"]{background-position:-36px 0} #container #mainContents #cont2 .group3 .control .state button[data-type="prev"]{background-position:0 0} #container #mainContents #cont2 .group3 .control .state button[data-type="next"]{background-position:-70px 0} #container #mainContents #cont2 .mlayout > div ul {} #container #mainContents #cont2 .mlayout > div ul:after {display:block; clear:both; visibility:hidden; content:'';} #container #mainContents #cont2 .mlayout > div ul li {overflow: hidden;float:left;width:100%;border: 1px solid #c8cfd1;border-radius: 12px;} #container #mainContents #cont2 .mlayout > div ul li a {display:block;overflow: hidden;position: relative;width:100%;height:100%;} #container #mainContents #cont2 .mlayout > div ul li .face{position: relative;width: 100%;height:100%;} #container #mainContents #cont2 .mlayout > div ul li .front:after {display:none; position:absolute; left:0; bottom:0; content:''; width:100%; height:164px; background:url(/images/kr/main/bg.png)repeat-x;} #container #mainContents #cont2 .mlayout > div ul li .front .thumb {width:100%;height:100%;padding:0 0 19%;} #container #mainContents #cont2 .mlayout > div ul li .front .thumb span {overflow: hidden;display:block;padding-bottom: 55%;position:relative;width:100%;height:100%;background: #cfdaea;} #container #mainContents #cont2 .mlayout > div ul li .front .thumb span img {position:absolute;left:50%;top:50%;width:auto;min-width:100%;max-width: 1000%;height:100%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);} #container #mainContents #cont2 .mlayout > div ul li .front .thumb span.ytube img {width: 100%;height: auto;} #container #mainContents #cont2 .mlayout > div ul li .front .cate {position:absolute;left: 25px;top: 25px;z-index:1;padding: 15px 18px;background:#2b8ada;background: linear-gradient(to bottom, #2b8ada , #00b59e);color:#fff;font-weight: 700;font-size: 17px;line-height: 1.2;} #container #mainContents #cont2 .mlayout > div ul li .front .title {padding:5% 8%; height:24%; position:absolute; left:0; bottom:0; width:100%; z-index:1;} #container #mainContents #cont2 .mlayout > div ul li .front strong {display: block;overflow: hidden;color: #222;line-height: 1.4;font-size: 17px;font-weight: 400; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 85%;} #container #mainContents #cont2 .mlayout > div ul li a:hover .front strong, #container #mainContents #cont2 .mlayout > div ul li a:focus .front strong {text-decoration:underline} #container #mainContents #cont3 {position: relative;overflow: hidden;padding: 90px 0; background: rgb(61,148,222); /* Old browsers */ background: -moz-linear-gradient(120deg, rgb(61,148,222) 40%, rgb(0, 161, 156) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(120deg, rgb(61,148,222) 40%, rgb(0, 161, 156) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(120deg, rgb(61,148,222) 40%, rgb(0, 161, 156) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d94de', endColorstr='#0fadcf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #container #mainContents #cont3:before {display: block;content: '';position: absolute;top: 0;left: 0;width: 250px;height: 250px;background: url(/images/main/bg_main_left_top.png) no-repeat center center;background-size: contain;} .content .visual::after {display: block;content: '';position: absolute;top: -60px;right: 40%;margin-right:-220px;width: 220px;height: 305px;background: url(/img/bg_main_right_top.png) no-repeat center center;background-size: contain;} #container #mainContents #cont3:after{display:block; position:absolute; content:''; left:0; bottom:0; width:100%; height:229px; background:#f3f4f8;} #container #mainContents #cont3 .tit {text-align: center;margin-bottom: 35px;} #container #mainContents #cont3 .tit strong{font-size:30px;color:#fff;} #container #mainContents #cont3 .tit strong > span { font-size:45px; font-weight:300;color:#fff;text-align:center; margin-top:0; margin-bottom:30px;} #container #mainContents #cont3 .tabList > li > button.active, #container #mainContents #cont3 .tabList > li > a.active {background: #12aeca;} #container #mainContents #cont3 .tabList > li > button, .tabList > li > a {color: #fff;padding:0 1em;} .mainNowCne .tabList .itemList > div {float: left;width:23.2%;margin-right:2.4%;box-sizing: border-box;} .mainNowCne .tabList .itemList > div > a {position:relative;overflow: hidden;display: block;border-radius: 6px;transition: 0.3s;box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);} .mainNowCne .tabList .itemList > div > a :before{content:"";position:absolute; left:0; bottom:0; height:90%; width:100%;background:#fff;z-index: -1;} .mainNowCne .tabList .itemList > div > a .thumb {position: relative;overflow:hidden; width:100%;padding-bottom: 68%;background: #264157} .mainNowCne .tabList .itemList > div > a .thumb span {display:block;position:relative; width:100%; height:100%;} .mainNowCne .tabList .itemList > div > a .thumb img {position: absolute;top: 50%;left: 50%;max-width: 200%;height: 100%;transform: translate(-50%,-50%);} .mainNowCne .tabList .itemList > div > a .info {padding:13px 30px;} .mainNowCne .tabList .itemList > div > a .info strong {display:block; overflow:hidden; line-height:1; margin:0 0 15px;color: #222;line-height: 1.4;font-size: 17px;font-weight: 400; text-overflow: ellipsis;white-space: nowrap;} .mainNowCne .tabList .itemList > div > a .info p {margin-bottom: 0;text-overflow: ellipsis;white-space: normal;font-size:14px;color:#000;} .mainNowCne .tabList .itemList > div > a .info span {position:relative;color:#0b87e1;padding-right:7px;margin-right:7px;} .mainNowCne .tabList .itemList > div > a .info span:after{display:block; position:absolute; content:''; right:0; top: 7px; width:1px;height:10px;background:#b9b9b9;} .mainNowCne .tabList .itemList > div:last-child, .mainNowCne .tabList .itemList > div:nth-child(4) {margin-right:0;} /* #container #mainContents #cont3 .swiper-scrollbar {left: 0;right: 0;bottom: 50px;width: 100%;height: 2px;border-radius: 0;background: #b0afb6;} #container #mainContents #cont3 .swiper-scrollbar .swiper-scrollbar-drag {background: #ed7616;} #container #mainContents #cont3 .swiper-scrollbar .swiper-scrollbar-drag:after {display:block; position:absolute; content:''; left:50%; top: -49px; width:98px; height:98px; background: url(/images/main/scroll.png)no-repeat ;-webkit-transform:translateX(-50%);transform:translateX(-50%);} */ #container #mainContents #cont4 {overflow: hidden;position: relative;padding: 90px 0;background: #fff;} #container #mainContents #cont4 .group {position: relative;float: left;width:47%;} #container #mainContents #cont4 .group .inner{position: relative;} #container #mainContents #cont4 .group strong{display:block;margin-bottom: 20px;font-size: 22px;color: #000;} #container #mainContents #cont4 .group li{overflow: hidden;width: 100%;height: 100%;padding: 28px 0;border-bottom: 1px solid #dfdede;} #container #mainContents #cont4 .group li:first-child {border-top: 1px solid #dfdede;} #container #mainContents #cont4 .group li a:after {content:"";display:block;clear:both;} #container #mainContents #cont4 .group li a {display: block;line-height:1.8;} #container #mainContents #cont4 .group li a span{position:relative;display:inline-block;float:left;padding-left:16px;overflow:hidden;width:75%;text-align:left;white-space:nowrap;text-overflow:ellipsis;color:#474747;font-size:15px;} #container #mainContents #cont4 .group li a span:before{position: absolute;top: 50%;left:3px;width: 3px;height: 3px;background-color: #7f7a82;content: "";margin-top: -1px;border-radius: 50%;} #container #mainContents #cont4 .group li a em {color: #9b9b9b;font-size: 14px;float:right;} #container #mainContents #cont4 .group2 {position: relative;float: right;width:47%;height: 214px;} #container #mainContents #cont4 .group2 #main-qna{} #container #mainContents #cont4 .group2 #main-qna .single-item-url{width:100%;height:214px;background:#32b3ca url(/images/main/cont4_deco1.png) no-repeat right bottom;border-radius: 12px 12px 40px 12px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-list{width:100%;height:100%;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-arrow {display: block; width: 42px;height: 42px;border: none;border: 1px solid #dcdcdc; border-radius: 5px;background: #fff;padding: 0px;z-index: 999;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-prev:before, #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-next:before {position: absolute;top: 13px;width:14px;height: 14px;border-width: 1px;border-style: solid;border-color: #000;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-prev:before {content: '';left: 18px;border-width: 1px 0 0 1px;transform: rotate(-45deg);} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-next:before {content: '';right: 18px;border-width: 1px 0 0 1px;transform: rotate(135deg);} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-dots {position: absolute;width: initial;bottom: -30px;right: 35px;text-align:right;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-dots li {margin: 0;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slick-dots li button:before {font-size: 22px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box {height: 214px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a {position: relative;width: 100%;height: 100%;display: block;padding: 55px 55px 0 105px;cursor: pointer;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a span.main_ir {position: absolute;top: 55px;left: 55px;width: 38px;height:38px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a span.ico1{background-position: -398px 0;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a strong {display:inline-block;width: 80%;color:#fff;font-size:19px;font-weight: normal;line-height: 1.3;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a p {color:#fff;margin-top:30px;} /* /////////////////////////////////////////////////////////////////////////////////////////////////////////// ������ /////////////////////////////////////////////////////////////////////////////////////////////////////////// */ @media screen and (max-width:1300px) { .mlayout {max-width: 92%;} #container #mainContents .main-visual {height: 470px;} #container #mainContents .main-visual .quicklink {margin-top: 80px;width: calc(100% - 750px);} #container #mainContents .main-visual #main-news{margin-top:60px;width:650px;height:345px;} #container #mainContents .main-visual #main-news .single-item {height:345px;} #container #mainContents #cont1, #container #mainContents #cont2, #container #mainContents #cont3, #container #mainContents #cont4 {padding: 50px 0;} #container #mainContents .content-wrap section .slick-slide {width: 363px;} .mainEvent .tabList .slick-prev {left: -10px;} .mainEvent .tabList .slick-next {right: -10px;} #container #mainContents #cont1 .tit strong {font-size: 27px;} #container #mainContents #cont1 .tit strong > span {font-size: 37px;} #container #mainContents #cont3 .tabs_wrap .slider .slick-prev {left: -10px;} #container #mainContents #cont3 .tabs_wrap .slider .slick-next {right: -10px;} #container #mainContents #cont3 .tit strong {font-size: 27px;} #container #mainContents #cont3 .tit strong > span {font-size: 37px;} } @media screen and (max-width:1200px) { #container #mainContents .main-visual .quicklink {width: calc(100% - 700px);} } @media screen and (max-width:1100px) { #container #mainContents .main-visual .quicklink {width: calc(100% - 680px);margin-top: 99px;} #container #mainContents .main-visual .quicklink ul li {height: 128px;} #container #mainContents .main-visual .quicklink ul li span .main_ir{width: 46px;height:46px;background-size: 300px 300px;} #container #mainContents .main-visual .quicklink ul li span .ico1 {background-position:-50px 0} #container #mainContents .main-visual .quicklink ul li span .ico2 {background-position:-97px 0} #container #mainContents .main-visual .quicklink ul li span .ico3 {background-position:-144px 0} #container #mainContents .main-visual .quicklink ul li span .ico4 {background-position:-192px 0} #container #mainContents .main-visual .quicklink ul li .card_btn {display: none;animation: none;width: 100%;height:100%;padding:0;} #container #mainContents .main-visual .quicklink ul li .card_btn a:hover{display:none;} #container #mainContents .main-visual .quicklink ul li:hover .card_btn{display: none;height: 100%;} #container #mainContents .main-visual .quicklink ul li .link-btn{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;} #container #mainContents .main-visual .quicklink ul li .link-btn a{width: 100%; height: 100%;display: block;font-size:0;} #container #mainContents .main-visual .quicklink ul li:hover span {display:block;} } @media screen and (max-width:1024px) { #container #mainContents .main-visual {height: auto;} #container #mainContents .main-visual .quicklink {width:100%;margin-top: 25px;} #container #mainContents .main-visual .quicklink ul li {width:23.5%;height:80px;margin-right: 2%;margin-bottom: 0;border-radius: 6px;} #container #mainContents .main-visual .quicklink ul li:last-child{margin-right:0} #container #mainContents .main-visual .quicklink ul li span{line-height: 80px;padding-left: 50px;} #container #mainContents .main-visual .quicklink ul li span .main_ir{margin: 0;position: absolute;left: 37%;top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #container #mainContents .main-visual #main-news {width:100%;height: auto;margin:50px auto;} #container #mainContents .main-visual #main-news .single-item {height: auto;} #container #mainContents .main-visual:before {width: 100%;height: 130px;} #container #mainContents .main-visual:after {top: initial;bottom: 0;width: 100%;height: 100%;left: 0;} #container #mainContents .main-visual #main-news .single-item .slick-track {height:auto;} #container .tit strong {font-size: 18px;} #container #mainContents #cont2 .group3 .title strong, #container #mainContents #cont2 .mlayout > div ul li .front strong {font-size: 15px;} #container #mainContents #cont3:after {height: 191px;} #container #mainContents #cont3 .swiper-wrapper .swiper-slide {width:50%;} #container #mainContents #cont4 .group2 #main-qna .single-item-url {background-size: 200px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a {padding: 30px 30px 0 74px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a span.main_ir {top: 30px;left: 30px;} } @media screen and (max-width:760px) { .tabList {margin-bottom:calc(3em + ((1200px / 7 - 1em) * 0.85) + 90px);} .tabList > li > button, .tabList > li > a {padding: 0 1em;} #container #mainContents #cont2 .mlayout > div:nth-child(1) {width:48%;margin-bottom: 4%;margin-top: calc(3em + ((100vw / 2 - 1em) * 0.9) + 90px);} #container #mainContents #cont2 .mlayout > div:nth-child(2) {width:48%;margin-right:0;margin-bottom: 4%;margin-top:calc(3em + ((100vw / 2 - 1em) * 0.9) + 90px);} #container #mainContents #cont2 .mlayout > div:nth-child(3) {width:100%;margin-top: 0;position: absolute;top: 0;} #container #mainContents #cont2 .group3 .grap {padding-bottom: 60%;} #container #mainContents #cont2 .group3 .title {height: 24%;} #container #mainContents #cont2 .group3 .thumb {padding: 0px 0 14%;} #container #mainContents #cont2 .group3 .thumb span img {min-width: auto;max-width: none;} #container #mainContents #cont2 .group3 .thumb span.ytube img {width: unset;height: inherit;} #container #mainContents #cont3:after {height: auto;} .mainNowCne .tabList {margin-bottom: calc(3em + ((((50% - 0.5em) * 0.68) + 90px) * 2) + 1em)} .mainNowCne .tabList .itemList > div {width:47.6%;margin-right: 4.5%;margin-bottom: 4.5%;} /*.mainNowCne .tabList .itemList > div:nth-child(n+2){margin-bottom:0;}*/ .mainNowCne .tabList .itemList > div:nth-child(2n){margin-right: 0;} #container #mainContents #cont3 .tabList > li > button {height: auto;} #container #mainContents #cont4 .group {float: none;width: 100%;} #container #mainContents #cont4 .group li {padding: 15px 0;} #container #mainContents #cont4 .group2 {float: none;width: 100%;height: 180px;margin-top: 30px;margin-bottom: 30px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url {height: 180px;} #container #mainContents #cont4 .group2 #main-qna .single-item-url .slider-box a strong {font-size: 17px;} } @media screen and (max-width:640px) { #container #mainContents #cont1, #container #mainContents #cont2, #container #mainContents #cont3, #container #mainContents #cont4 {padding: 30px 0;} #container #mainContents #cont1 .tit strong, #container #mainContents #cont3 .tit strong, #container #mainContents #cont4 .group strong, #container .tit strong {font-size: 17px;} #container #mainContents .tabs_wrap nav li a {padding: 5px 10px; background: rgb(0, 0, 0, 0.05);} #container #mainContents .main-visual .quicklink {margin-top: 20px;} #container #mainContents .main-visual .quicklink ul li {height: auto;} #container #mainContents .main-visual .quicklink ul li span {line-height: 50px;padding-top: 40px;padding-left: 0;} #container #mainContents .main-visual .quicklink ul li span .main_ir {left: 50%;top: 33%;} #container #mainContents .main-visual #main-news {width: 100%;} #container #mainContents .main-visual #main-news .single-item .slick-arrow {width: 40px;height: 40px;} #container #mainContents .main-visual #main-news .single-item .slick-next:before {right: 16px;} #container #mainContents .main-visual #main-news .single-item .slick-prev:before {left: 16px;} #container #mainContents .main-visual #main-news .single-item .slick-prev:before, #container #mainContents .main-visual #main-news .single-item .slick-next:before {top: 13px;width: 15px;height: 15px;} #container #mainContents #cont1 .tit {margin-bottom:20px;} #container #mainContents #cont1 .tit strong > span {font-size: 26px;} #container #mainContents #cont2 .mlayout > div ul li .front .title {height: 27%;} #container #mainContents #cont2 .mlayout > div ul li .front .thumb .mainEvent .slick-slide {margin: 0;} .tabList > li > button{height: 80px;padding:0.5em 0.8em;} .tabList > li > button > em {font-size: 16px;} .tabList > li .main_ir {display:block;} .tabList > li > .tabContent {top: calc(3em * 1.4);} .tabList > li {margin: 0} .mainEvent .tabList .itemList .item a {height: auto;} .mainEvent .tabList .itemList .item a .text_box {padding: 20px;} .mainEvent .tabList .itemList .item a .cont_box {padding-top: 10px;} /*.mainEvent .tabList .itemList .item a .cont_box .l_box {margin-left: 20px;}*/ .mainEvent .tabList .slick-arrow {width: 40px;height: 40px;} .mainEvent .tabList .slick-next:before {right: 16px;} .mainEvent .tabList .slick-prev:before {left: 16px;} .mainEvent .tabList .slick-prev:before, .mainEvent .tabList .slick-next:before {top: 13px;width: 15px;height: 15px;} #container #mainContents #cont3 .tit {margin-bottom:20px;} #container #mainContents #cont3 .tit strong > span {font-size: 26px;} #container #mainContents #cont3 .tabs_wrap nav{margin-bottom: 0;} #container #mainContents #cont3 .tabs_wrap nav ul {max-width: 55%;} #container #mainContents #cont3 .tabs_wrap .slider .slick-arrow {width: 40px;height: 40px;} #container #mainContents #cont3 .tabs_wrap .slider .slick-next:before {right: 16px;} #container #mainContents #cont3 .tabs_wrap .slider .slick-prev:before {left: 16px;} #container #mainContents #cont3 .tabs_wrap .slider .slick-prev:before, #container #mainContents #cont3 .tabs_wrap .slider .slick-next:before {top: 13px;width: 15px;height: 15px;} } @media screen and (max-width:450px) { #container #mainContents #cont2 .group3 .thumb {padding: 0px 0 19%;} #container #mainContents #cont2 .group3 .title {height: 31%;} #container #mainContents #cont2 .mlayout > div ul li .front .thumb {padding: 0 0 30%;} #container #mainContents #cont2 .mlayout > div ul li .front .title {height: 33%;} .slick-controls {bottom: 20px;} } /* 앱 메뉴 */ .app_menu {display: none;} @media screen and (max-width: 1024px) { .app_menu {display: block;position: fixed;bottom: 0;width: 100%;padding: 20px 0;background: #fff;border-top: 1px solid #e2e1e6;z-index: 9999;} .app_menu ul {width: 100%;text-align: center;} .app_menu ul:after {display: block;clear: both;content: '';} .app_menu ul li {width: 25%;float: left;} .app_menu ul li a {display: block;width: 100%;height: 100%;font-size: 20px;color: #454545;} .app_menu ul li a:before {display: block;content: '';width: 35px;height: 35px;margin: 0 auto 8px auto;} .app_menu ul .app_menu_home a:before {background:url(/images/main/app_ico_01.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_report a:before {background:url(/images/main/app_ico_02.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_suggest a:before {background:url(/images/main/app_ico_03.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_mypage a:before {background:url(/images/main/app_ico_04.png) no-repeat top center;background-size: contain;} /* on */ .app_menu ul li.on a {font-weight: 600;} .app_menu ul .app_menu_home.on a:before {background:url(/images/main/app_ico_01_on.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_report.on a:before {background:url(/images/main/app_ico_02_on.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_suggest.on a:before {background:url(/images/main/app_ico_03_on.png) no-repeat top center;background-size: contain;} .app_menu ul .app_menu_mypage.on a:before {background:url(/images/main/app_ico_04_on.png) no-repeat top center;background-size: contain;} } @media screen and (max-width: 768px) { .app_menu {padding: 10px 0;} .app_menu ul li a {font-size: 18px;} .app_menu ul li a:before {width: 30px;height: 30px;} } @media screen and (max-width: 500px) { .app_menu ul li a {font-size: 14px;} .app_menu ul li a:before {width: 26px;height: 26px;} }