/*slick < > button */ .my-btn-box .btn-my-perv, .my-btn-box .btn-my-next { position: absolute; display: block !important; background: transparent; border: 0; cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .my-btn-box .btn-my-perv { left: -50px; padding-bottom: 40px; } .my-btn-box .btn-my-next { right: -50px; padding-bottom: 40px; } /*visual*/ .mv .slick-list {height:100%;} .mv .slick-list .slick-track {height:100%;} .mv .mv-item { position: relative; overflow: hidden; max-width:100% !important;height:100% !important } .mv .mv-item.v-1 { text-align:center;} .mv .mv-item.v-2 { text-align:center} .mv .mv-item.v-3 { text-align:center} .mv .mv-item.v-2 .mvi-text-box.mvi-center { width: 100%; max-width: 100%; text-align: center; height: 100%; } .mv .mv-item.v-2 .mvi-text-box.mvi-center.on { top: 48%; } .mv .mv-item.v-2 .mvi-img { position: static; } .mv .mv-item.v-2 .mvi02-img1 { z-index: 1; position: absolute; bottom: -4.5%; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .mv .mv-item.v-2 .mvi02-img2 { max-width: none; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .mv .mv-item.v-2 .mvi02-img3, .mv .mv-item.v-2 .mvi02-img4, .mv .mv-item.v-2 .mvi02-img5 { display: none; width: 100%; } .mv .mv-item.v-2 .mvi02-img3, .mv .mv-item.v-2 .mvi02-img5 { vertical-align: middle; } .mv .mv-item.v-2 .mvi02-img4 { z-index: 1; bottom: -10%; position: absolute; left: 0%; } .mv .mv-item img { display: inline; width: auto; max-width: 100%; vertical-align: middle; height:100%;} .mv .mv-item .mvi-text-box { color: #fff; word-break: keep-all; -webkit-transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, opacity 0.5s; -moz-transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, opacity 0.5s; -o-transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, opacity 0.5s; -ms-transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, opacity 0.5s; transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, opacity 0.5s; } .mv .mv-item .mvi-text-box > * { z-index: 1; position: relative; } .mv .mv-item .mvi-text-box .mvi-tit { font-weight: 400; } .mv .mv-item .mvi-center { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; top: 55%; opacity: 0; } .mv .mv-item .mvi-center.on { top: 50%; opacity: 1; } @media all and (max-width: 1441px) { .mv .mv-item { background-position: 80% bottom; max-width:100%} } @media all and (max-width: 1219px) { .mv .mv-item { background-position: 80% bottom; max-width:100% } .mv .mv-item .mvi-center { width: 50%; } } @media all and (max-width: 1024px) { .mv .mv-item { background-position: 80% center; background-size: cover; max-width:100% } .mv .mv-item .mvi-text-box.mvi-center { width: 80%; } .mv .mv-item.v-2 .mvi02-img2 { display: none; } .mv .mv-item.v-2 .mvi-text-box.mvi-center { width: 100%; max-width: 100%; top: 50%; left: 0; text-align: center; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .mv .mv-item.v-2 .mvi-text-box.mvi-center.on { top: 48%; } .mv .mv-item.v-2 .mvi02-img1 { bottom: 0px; } .mv .mv-item.v-2 .mvi02-img5 { display: inline; max-width: none; width: auto; height: 100%; top: -42%; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } } @media all and (max-width: 768px) { .mv .mv-item { background-size: cover; max-width:100%} .mv .mv-item.v-1 { background: url(../images/main/visual01_m.jpg) no-repeat center bottom; background-size: cover; } .mv .mv-item.v-2 { background: url(../images/main/visual02.jpg) no-repeat center center; } .mv .mv-item.v-2 .mvi-text-box.mvi-center { height: 910px; margin-top: -455px; } .mv .mv-item.v-2 .mvi-img { position: static; } .mv .mv-item.v-2 .mvi02-img1 { display: none; } .mv .mv-item.v-2 .mvi02-img3 { display: inline; position: absolute; left: 0; top: 50%; margin-top: -87%; } .mv .mv-item.v-2 .mvi02-img4 { display: block; } .mv .mv-item.v-2 .mvi02-img5 { display: none; } .mv .mv-item .mvi-text-box.mvi-center { width: 100%; } /* .mv .mv-item { height: 910px; }*/ .mv .mv-item .logo-img img { height: 22px; } .mv .mv-item .mvi-text-box .mvi-sub-tit { font-size: 21px; } .mv .mv-item .mvi-text-box .mvi-tit { font-size: 51px; } .mv .mv-item .mvi-text-box .mvi-tit + p.fs-26 { font-size: 20px; } } @media all and (max-width: 500px) { .mv .mv-item.v-2 .mvi-text-box.mvi-center { height: 700px; margin-top: -350px;max-width:100% } .mv .mv-item.v-2 .mvi02-img4 { bottom: -5%; } /* .mv .mv-item { height: 700px; }*/ .mv .mv-item .logo-img img { height: 17px; } .mv .mv-item .mvi-text-box .mvi-sub-tit { font-size: 16px; } .mv .mv-item .mvi-text-box .mvi-tit { font-size: 39px; } .mv .mv-item .mvi-text-box .mvi-tit + p.fs-26 { font-size: 15px; } } .mv .mvi-img-2 .mvi01-img3 { display: none; } .mv .mvi-img { position: relative; z-index: 0; } .mv .mvi-img .mvi01-img1 { position: absolute; left: -65%; top: -100px; } .mv .mvi-img .mvi01-img2 { margin-bottom: -40px; } @media all and (max-width: 1024px) { .mv .mvi-img .mvi01-img1 { top: -200px; left: -17%; } } @media all and (max-width: 768px) { .mv .mvi-img .mvi01-img2 { margin-bottom: -24px; height: 33.6px; } .mv .mvi-img .mvi01-img1 { left: -17%; top: -160px; width: 308px; } .mv .mvi-img-2 .mvi01-img3 { display: block; position: absolute; bottom: -10%; width: 100%; } } @media all and (max-width: 500px) { .mv .mvi-img .mvi01-img2 { margin-bottom: -16px; height: 22.4px; } .mv .mvi-img .mvi01-img1 { left: -17%; top: -120px; width: 231px; } .mv .mvi-img-2 .mvi01-img3 { bottom: -5%; } } /*main-info*/ .main-info { overflow: hidden; } .main-info::after { display: block; content: ""; clear: both; } .main-info .mi-text-box, .main-info .mi-move-box { width: 50%; float: left; margin-top: 90px; margin-bottom: 120px; } .main-info .mi-move-box { position: relative; } .main-info .mi-move-box .btn-play { display: block; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; border: 0; padding: 0; overflow: hidden; font-size: 0; text-indent: -1000px; cursor: pointer; background: rgba(0, 0, 0, 0); } .main-info .mi-move-box .btn-play:active span { -webkit-transform: scale(0.97); -moz-transform: scale(0.97); -o-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); } .main-info .mi-move-box .btn-play span { -webkit-transition: background 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; -moz-transition: background 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: background 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; -ms-transition: background 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; transition: background 0.2s ease-out, font-size 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out; display: block; width: 100px; height: 100px; background: rgba(0, 0, 0, 0) url(../images/main/main_video_play.png) no-repeat center center; background-size: contain; } .main-info .mi-btn-box .btn { width: 270px; height: 100px; line-height: 100px; font-size: 20px; padding: 0; text-align: center; margin-right: 20px; box-shadow: 0 0 0; } .main-info .mi-btn-box .btn.btn-color-01:hover { box-shadow: 5px 5px 10px #91ade5; } .main-info .mi-btn-box .btn.btn-color-02:hover { box-shadow: 5px 5px 10px #80c2ff; } @media all and (max-width: 1219px) { .main-info { text-align: center; padding: 40px 0 70px; } .main-info .mi-text-box, .main-info .mi-move-box { display: inline-block; float: none; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; } .main-info .mi-text-box { width: 100%; max-width: 700px; } .main-info .mi-text-box p br { display: none; } .main-info .mi-text-box .mi-btn-box .btn { margin: 0 1%; } .main-info .mi-move-box { width: 95%; max-width: 650px; } /*main-info*/ .main-info .mi-tit-box .mi-tit { margin-top: 30px; font-size: 52px; } .main-info .mi-tit-box img { height: 34px; } .main-info .mi-text-box p { font-size: 26px; } .main-info .mi-move-box .btn-play { width: 100px; height: 100px; } .main-info .mi-move-box .btn-play span { width: 100px; height: 100px; } .main-info .mi-btn-box { margin: 50px -45px 0; } .main-info .mi-btn-box .btn { width: 42%; max-width: 310px; height: 100px; line-height: 100px; font-size: 26px; } .main-info .mi-btn-box .btn.btn-color-01 { box-shadow: 5px 5px 10px #91ade5; } .main-info .mi-btn-box .btn.btn-color-02 { box-shadow: 5px 5px 10px #80c2ff; } } @media all and (max-width: 768px) { /*main-info*/ .main-info .mi-tit-box .mi-tit { margin-top: 23px; font-size: 39px; } .main-info .mi-tit-box img { height: 26px; } .main-info .mi-text-box p { font-size: 20px; } .main-info .mi-move-box .btn-play { width: 75px; height: 75px; } .main-info .mi-move-box .btn-play span { width: 75px; height: 75px; } .main-info .mi-btn-box { margin: 38px -34px 0; } .main-info .mi-btn-box .btn { width: 42%; max-width: 233px; height: 75px; line-height: 75px; font-size: 20px; } .main-info .mi-btn-box .btn.btn-color-01 { box-shadow: 4px 4px 8px #91ade5; } .main-info .mi-btn-box .btn.btn-color-02 { box-shadow: 4px 4px 8px #80c2ff; } } @media all and (max-width: 500px) { /*main-info*/ .main-info .mi-tit-box .mi-tit { margin-top: 20px; font-size: 34px; } .main-info .mi-tit-box img { height: 22px; } .main-info .mi-text-box p { font-size: 17px; } .main-info .mi-move-box .btn-play { width: 65px; height: 65px; } .main-info .mi-move-box .btn-play span { width: 65px; height: 65px; } .main-info .mi-btn-box { margin: 33px -29px 0; } .main-info .mi-btn-box .btn { width: 42%; max-width: 202px; height: 65px; line-height: 65px; font-size: 17px; } .main-info .mi-btn-box .btn.btn-color-01 { box-shadow: 3px 3px 7px #91ade5; } .main-info .mi-btn-box .btn.btn-color-02 { box-shadow: 3px 3px 7px #80c2ff; } } @media all and (max-width: 375px) { /*main-info*/ .main-info .mi-tit-box .mi-tit { margin-top: 15px; font-size: 26px; } .main-info .mi-tit-box img { height: 17px; } .main-info .mi-text-box p { font-size: 13px; } .main-info .mi-move-box .btn-play { width: 50px; height: 50px; } .main-info .mi-move-box .btn-play span { width: 50px; height: 50px; } .main-info .mi-btn-box { margin: 25px -23px 0; } .main-info .mi-btn-box .btn { width: 42%; max-width: 155px; height: 50px; line-height: 50px; font-size: 13px; } .main-info .mi-btn-box .btn.btn-color-01 { box-shadow: 3px 3px 5px #91ade5; } .main-info .mi-btn-box .btn.btn-color-02 { box-shadow: 3px 3px 5px #80c2ff; } } /*main-info2*/ .main-info2 { overflow: hidden; padding: 130px 0; background: url(../images/main/main_info.jpg) no-repeat top center; background-size: cover; } .main-info2 .mi2-item { display: block; text-align: center; color: #fff; width: 25%; float: left; } @media all and (max-width: 1024px) { .main-info2 { background: url(../images/main/main_info_m.jpg) no-repeat top center; background-size: 100% 100%; } .main-info2 .mi2-item { padding: 2.5%; width: 50%; margin-bottom: 10%; } } @media all and (max-width: 375px) { .main-info2 { background-size: 150% 100%; } } /*main-youtube-box*/ .main-youtube-box { position: relative; margin-bottom: 10px;border:0px solid blue !important } .main-youtube-box .my { margin-top: 1em; } .main-youtube-box .my .my-item { text-align: center; outline: 0 !important; padding-bottom: 40px; } .main-youtube-box .my .my-item img { width: 230px; } .main-youtube-box .my .my-item a { outline: 0 !important; display: inline-block; text-align: center; color: #222; } .main-youtube-box .my .my-item a span { margin-top: 1em; display: block; } .main-youtube-box .my .my-item a i { vertical-align: middle; margin: 0 5px 5px 0; } .main-youtube-box .my .my-item.slick-active img { border-radius: 0%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } .main-youtube-box .my .my-item:hover .myi-img { position: relative; } /*.main-youtube-box .my .my-item:hover .myi-img:after { content: ''; display: block; background: url(../images/main/my_item_hover.png) no-repeat top center; background-size: cover; position: absolute; top: 0; border-radius: 100%; width: 100%; height: 100%; } */ .main-youtube-box .my .my-item.none .myi-img { position: relative; } .main-youtube-box .my .my-item.none .myi-img:after { content: attr(data-day); display: block; background: url(../images/main/my_item_hover2.png) no-repeat top center; background-size: cover; position: absolute; top: 0; border-radius: 100%; width: 100%; height: 100%; line-height: 210px; color: #fff; font-weight: bold; border-radius: 100%; } .main-youtube-box .my .slick-dots { text-align: center; } .main-youtube-box .my .slick-dots li { display: inline-block; margin: 0 0.1em; } .main-youtube-box .my .slick-dots button { background: transparent; width: 10px; height: 10px; border: 1px solid #235acb; border-radius: 100%; padding: 0; overflow: hidden; text-indent: -1000px; } .main-youtube-box .my .slick-dots li.slick-active button { background: #235acb; } .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { position: absolute; display: block !important; background: transparent; border: 0; cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .main-youtube-box .my-btn-box .btn-my-perv { left: -50px; padding-bottom: 40px; } .main-youtube-box .my-btn-box .btn-my-next { right: -50px; padding-bottom: 40px; } @media all and (max-width: 1441px) { .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { display: none !important; } } @media all and (max-width: 1219px) { /*main-youtube-box*/ .main-youtube-box .my .my-item { width: 300px; } .main-youtube-box .my .my-item img { width: 233px; } .main-youtube-box .my .my-item.slick-active img { box-shadow: 0 0 0; } .main-youtube-box .my .my-item:hover a img, .main-youtube-box .my .my-item.slick-current img { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } .main-youtube-box .my .my-item i { vertical-align: middle; margin: 0 4px 4px 0; } .main-youtube-box .my .my-item:hover .myi-img { position: relative; } .main-youtube-box .my .my-item:hover .myi-img:after { display: none; } .main-youtube-box .my .my-item.none .myi-img:after { display: block !important; } .main-youtube-box .my .slick-dots li { margin: 0 0.25em; } .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { display: none !important; } } @media all and (max-width: 768px) { /*main-youtube-box*/ .main-youtube-box .my .my-item { width: 300px; } .main-youtube-box .my .my-item img { width: 233px; } .main-youtube-box .my .my-item i { margin: 0 4px 4px 0; } .main-youtube-box .my .my-item.none .myi-img:after { line-height: 218px; } } @media all and (max-width: 500px) { /*main-youtube-box*/ .main-youtube-box .my .my-item { width: 260px; } .main-youtube-box .my .my-item img { width: 202px; } .main-youtube-box .my .my-item i { margin: 0 3px 3px 0; } .main-youtube-box .my .my-item.none .myi-img:after { line-height: 189px; } } @media all and (max-width: 375px) { /*main-youtube-box*/ .main-youtube-box .my .my-item { width: 200px; } .main-youtube-box .my .my-item img { width: 155px; } .main-youtube-box .my .my-item i { margin: 0 3px 3px 0; } .main-youtube-box .my .my-item.none .myi-img:after { line-height: 145px; } } /*main-youtube-box*/ .main-youtube-box { position: relative; margin-bottom: 10px; } .main-youtube-box .my2 { margin-top: 1em; } .main-youtube-box .my2 { margin-top: 1em; } .main-youtube-box .my2 .my-item { text-align: center; outline: 0 !important; padding-bottom: 40px; } .main-youtube-box .my2 .my-item img { width: 230px; } .main-youtube-box .my2 .my-item a { outline: 0 !important; display: inline-block; text-align: center; color: #222; } .main-youtube-box .my2 .my-item a span { margin-top: 1em; display: block; } .main-youtube-box .my2 .my-item a i { vertical-align: middle; margin: 0 5px 5px 0; } .main-youtube-box .my2 .my-item.slick-active img { border-radius: 0%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } .main-youtube-box .my2 .my-item:hover .myi-img { position: relative; } /*.main-youtube-box .my .my-item:hover .myi-img:after { content: ''; display: block; background: url(../images/main/my_item_hover.png) no-repeat top center; background-size: cover; position: absolute; top: 0; border-radius: 100%; width: 100%; height: 100%; } */ .main-youtube-box .my2 .my-item.none .myi-img { position: relative; } .main-youtube-box .my2 .my-item.none .myi-img:after { content: attr(data-day); display: block; background: url(../images/main/my_item_hover2.png) no-repeat top center; background-size: cover; position: absolute; top: 0; border-radius: 100%; width: 100%; height: 100%; line-height: 210px; color: #fff; font-weight: bold; border-radius: 100%; } .main-youtube-box .my2 .slick-dots { text-align: center; } .main-youtube-box .my2 .slick-dots li { display: inline-block; margin: 0 0.1em; } .main-youtube-box .my2 .slick-dots button { background: transparent; width: 10px; height: 10px; border: 1px solid #235acb; border-radius: 100%; padding: 0; overflow: hidden; text-indent: -1000px; } .main-youtube-box .my2 .slick-dots li.slick-active button { background: #235acb; } .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { position: absolute; display: block !important; background: transparent; border: 0; cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .main-youtube-box .my-btn-box .btn-my-perv { left: -50px; padding-bottom: 40px; } .main-youtube-box .my-btn-box .btn-my-next { right: -50px; padding-bottom: 40px; } @media all and (max-width: 1441px) { .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { display: none !important; } } @media all and (max-width: 1219px) { /*main-youtube-box*/ .main-youtube-box .my2 .my-item { width: 300px; } .main-youtube-box .my2 .my-item img { width: 233px; } .main-youtube-box .my2 .my-item.slick-active img { box-shadow: 0 0 0; } .main-youtube-box .my2 .my-item:hover a img, .main-youtube-box .my .my-item.slick-current img { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); } .main-youtube-box .my2 .my-item i { vertical-align: middle; margin: 0 4px 4px 0; } .main-youtube-box .my2 .my-item:hover .myi-img { position: relative; } .main-youtube-box .my2 .my-item:hover .myi-img:after { display: none; } .main-youtube-box .my2 .my-item.none .myi-img:after { display: block !important; } .main-youtube-box .my2 .slick-dots li { margin: 0 0.25em; } .main-youtube-box .my-btn-box .btn-my-perv, .main-youtube-box .my-btn-box .btn-my-next { display: none !important; } } @media all and (max-width: 768px) { /*main-youtube-box*/ .main-youtube-box .my2 .my-item { width: 300px; } .main-youtube-box .my2 .my-item img { width: 233px; } .main-youtube-box .my2 .my-item i { margin: 0 4px 4px 0; } .main-youtube-box .my2 .my-item.none .myi-img:after { line-height: 218px; } } @media all and (max-width: 500px) { /*main-youtube-box*/ .main-youtube-box .my2 .my-item { width: 260px; } .main-youtube-box .my2 .my-item img { width: 202px; } .main-youtube-box .my2 .my-item i { margin: 0 3px 3px 0; } .main-youtube-box .my2 .my-item.none .myi-img:after { line-height: 189px; } } @media all and (max-width: 375px) { /*main-youtube-box*/ .main-youtube-box .my2 .my-item { width: 200px; } .main-youtube-box .my2 .my-item img { width: 155px; } .main-youtube-box .my2 .my-item i { margin: 0 3px 3px 0; } .main-youtube-box .my2 .my-item.none .myi-img:after { line-height: 145px; } } /*main-event*/ .main-event { overflow: hidden; position: relative; padding: 100px 0; background: url(../images/main/main_event_bg.jpg) no-repeat top center; background-size: cover; } .main-event .me-item { width: 798px; padding-bottom: 15px; outline: 0 !important; } .main-event .me-item a { outline: 0 !important; position: relative; width: 760px; display: block; background: #fff; color: #222; } .main-event .me-item a::after { display: block; content: ""; clear: both; } .main-event .me-item img { display: block; } .main-event .me-item .mei-img, .main-event .me-item .mei-text { float: left; width: 50%; } .main-event .me-item .mei-text { padding: 40px; word-break: keep-all; } .main-event .me-item .mei-text h3 { max-height: 7em; overflow: hidden; } .main-event .me-item .mei-text .mei-link { display: inline-block; position: absolute; bottom: 40px; border-bottom: 1px solid #222; } .main-event .me-item .mark { display: inline-block; padding: 0.5em; background: #222; color: #fff; line-height: 1em; font-weight: 200; margin-bottom: 0.5em; } .main-event .me-item .mark.color-1 { background: #1e5ea5; } .main-event .me-item .mark.color-2 { background: #f99104; } .main-event .me-item:hover a, .main-event .me-item.slick-current a { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); } .main-event .me-btn-box { top: -78px; right: 10%; position: absolute; } .main-event .me-btn-box .btn-me-perv, .main-event .me-btn-box .btn-me-next { display: inline-block !important; background: transparent; border: 0; padding: 0; cursor: pointer; } .main-event .me-btn-box .btn-me-perv { left: -50px; } .main-event .me-btn-box .btn-me-next { right: -50px; } @media all and (max-width: 1024px) { .main-event { background: url(../images/main/main_event_bg_m.jpg) no-repeat top center; background-size: cover; } .main-event .me-item a { width: 100%; } .main-event .me-item img { width: 100%; display: block; } .main-event .me-item .mei-img, .main-event .me-item .mei-text { float: none; width: 100%; } .main-event .me-item .mei-text h3 { max-height: none; overflow: inherit; } .main-event .me-item .mei-text .mei-link { position: static; } .main-event .me-btn-box .btn-me-perv, .main-event .me-btn-box .btn-me-next { display: none !important; } .main-event { padding: 64px 0; } .main-event .me-item { width: 458px; padding: 0 15px 11px; } .main-event .me-item .mei-text { padding: 30px; } .main-event .me-item .mei-text .mei-link { margin-top: 30px; font-size: 18px; } .main-event .me-item .mei-text mark { font-size: 18px; } .main-event .me-item .mei-text h3 { font-size: 27px; } .main-event .me-item .mei-text p { font-size: 20px; } .main-event .me-item:hover a, .main-event .me-item.slick-current a { box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); } } @media all and (max-width: 768px) { .main-event { padding: 55px 0; } .main-event .me-item { width: 397px; padding: 0 13px 10px; } .main-event .me-item .mei-text { padding: 26px; } .main-event .me-item .mei-text .mei-link { margin-top: 26px; font-size: 16px; } .main-event .me-item .mei-text mark { font-size: 16px; } .main-event .me-item .mei-text h3 { font-size: 23px; } .main-event .me-item .mei-text p { font-size: 17px; } .main-event .me-item:hover a, .main-event .me-item.slick-current a { box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.1); } } @media all and (max-width: 500px) { .main-event { padding: 43px 0; } .main-event .me-item { width: 305px; padding: 0 10px 8px; } .main-event .me-item .mei-text { padding: 20px; } .main-event .me-item .mei-text .mei-link { margin-top: 20px; font-size: 12px; } .main-event .me-item .mei-text mark { font-size: 12px; } .main-event .me-item .mei-text h3 { font-size: 18px; } .main-event .me-item .mei-text p { font-size: 13px; } .main-event .me-item:hover a, .main-event .me-item.slick-current a { box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); } } .main-cheer-wrap { position: relative; overflow: hidden; width: 100%; padding: 100px 0; background: url(../images/main/cheer_bg.jpg) no-repeat top center; background-size: cover; } .main-cheer-wrap .wrap { position: relative; } .main-cheer-wrap .mc-more-btn { min-width: 5em; position: absolute; display: inline-block; top: 120px; right: 0; } .main-cheer-wrap .mc-itme { width: 100%; outline: 0 !important; } .main-cheer-wrap .mci-wrap a { outline: 0 !important; display: table; table-layout: fixed; width: 100%; max-width: 798px; margin: 0 auto; } .main-cheer-wrap .mci-wrap a > .mci-img, .main-cheer-wrap .mci-wrap a > .mci-text { display: table-cell; vertical-align: middle; } .main-cheer-wrap .mci-wrap a .mci-tit { position: relative; } .main-cheer-wrap .mci-wrap a .mci-tit:before { content: ''; display: block; width: 35px; height: 28px; background: url(../images/main/mm_tit_img.png) no-repeat center center; background-size: contain; position: absolute; top: -40px; left: 0; } .main-cheer-wrap .mci-wrap a > .mci-img { width: 45%; text-align: center; padding: 0 2%; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { position: relative; overflow: hidden; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con:before { content: ''; display: block; padding-top: 62%; background: #000; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con img { display: block; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main-cheer-wrap .mci-wrap a > .mci-text { width: 55%; word-break: keep-all; color: #fff; font-weight: 200; } .main-cheer-wrap .mc-btn-box .btn-mc-perv, .main-cheer-wrap .mc-btn-box .btn-mc-next { position: absolute; display: block !important; background: transparent; border: 0; cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .main-cheer-wrap .mc-btn-box .btn-mc-perv { left: -50px; } .main-cheer-wrap .mc-btn-box .btn-mc-next { right: -50px; } @media all and (max-width: 1219px) { .main-cheer-wrap { background: url(../images/main/cheer_bg_m.jpg) no-repeat center center; background-size: cover; } .main-cheer-wrap .wrap { position: relative; } .main-cheer-wrap .mc-more-btn { min-width: 5em; position: absolute; display: inline-block; left: 50%; right: auto; margin-left: -2.5em; } .main-cheer-wrap .mc-itme { width: 100%; } .main-cheer-wrap .mci-wrap a { display: block; width: 100%; margin: 0 auto; } .main-cheer-wrap .mci-wrap a > .mci-img, .main-cheer-wrap .mci-wrap a > .mci-text { display: block; } .main-cheer-wrap .mci-wrap a > .mci-img { width: 100%; padding: 0 2%; text-align: center; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { margin: 0 auto; } .main-cheer-wrap .mci-wrap a > .mci-img img { display: inline-block; width: 100%; } .main-cheer-wrap .mci-wrap a > .mci-text { width: 100%; text-align: center; max-width: 580px; margin: 0 auto; } .main-cheer-wrap .mci-wrap a .mci-tit { width: 100%; } .main-cheer-wrap .mci-wrap a .mci-tit:before { left: 50%; } .main-cheer-wrap .mc-btn-box .btn-mc-perv { left: 2%; } .main-cheer-wrap .mc-btn-box .btn-mc-next { right: 2%; } .main-cheer-wrap { padding: 80px 0 100px; } .main-cheer-wrap .wrap.mc-wrap { padding: 0 100px; } .main-cheer-wrap .mc { margin-top: 50px; } .main-cheer-wrap .mc-more-btn { top: 220px; } .main-cheer-wrap .mci-wrap a > .mci-img { margin-bottom: 100px; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { max-width: 370px; } .main-cheer-wrap .mci-wrap a .mci-tit:before { width: 40px; height: 35px; top: -70px; margin-left: -20px; } } @media all and (max-width: 768px) { .main-cheer-wrap { padding: 60px 0 75px; } .main-cheer-wrap .wrap.mc-wrap { padding: 0 75px; } .main-cheer-wrap .mc { margin-top: 38px; } .main-cheer-wrap .mc-more-btn { top: 165px; } .main-cheer-wrap .mci-wrap a > .mci-img { margin-bottom: 75px; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { max-width: 278px; } .main-cheer-wrap .mci-wrap a .mci-tit:before { width: 30px; height: 26px; top: -53px; margin-left: -15px; } } @media all and (max-width: 500px) { .main-cheer-wrap { padding: 52px 0 65px; } .main-cheer-wrap .wrap.mc-wrap { padding: 0 65px; } .main-cheer-wrap .mc { margin-top: 33px; } .main-cheer-wrap .mc-more-btn { top: 143px; } .main-cheer-wrap .mci-wrap a > .mci-img { margin-bottom: 65px; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { max-width: 241px; } .main-cheer-wrap .mci-wrap a .mci-tit:before { width: 26px; height: 23px; top: -46px; margin-left: -13px; } } @media all and (max-width: 375px) { .main-cheer-wrap { padding: 40px 0 50px; } .main-cheer-wrap .wrap.mc-wrap { padding: 0 50px; } .main-cheer-wrap .mc { margin-top: 25px; } .main-cheer-wrap .mc-more-btn { top: 110px; } .main-cheer-wrap .mci-wrap a > .mci-img { margin-bottom: 50px; } .main-cheer-wrap .mci-wrap a > .mci-img .mci-img-con { max-width: 185px; } .main-cheer-wrap .mci-wrap a .mci-tit:before { width: 20px; height: 18px; top: -35px; margin-left: -10px; } } .video_con2 { position: relative; overflow: hidden; max-width: 1200px; margin-right: auto; margin-left: auto; } .video_con2:before { content: ''; display: block; padding-top: 56.5%; } .video_con2 .video_box2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .video_con2 .video_box2 iframe { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup{ position: fixed; top: 50%; left: 50%; z-index: 6000; max-width: 830px; width: 90%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup img{ width: 100%; } .popup .popup-con{ position: absolute; display: block; overflow: hidden; top: 200px; left: 35px; right: 25px; bottom: 35px; text-align: justify; text-align-last: center; width: 95%; max-width: 770px; padding: 5%; overflow-y: auto; } .popup .popup-con ul:after{ content: ''; display: inline-block; min-width: 1em; } .popup .popup-con li{ display: inline-block; margin-bottom: 1em; min-width: 5.5em; font-size: 17px; } @media all and (max-width: 940px) { .popup .popup-con{ width: auto; top: 27%; left: 3%; right: 3%; bottom: 5.5%; padding: 2% 5%; overflow-y: auto; } .popup .popup-con li{ font-size: 2vw; margin-bottom: 0.5em; } } /* ################################### index start ##################################### */ /* ... 처리*/ .mainCutstr { border:0px solid blue; width:calc(100% - 10px); overflow:hidden !important; text-overflow:ellipsis !important; white-space: nowrap !important; } /* 메인 블럭간 마진 조정 */ .mgTop10 {width:100%;margin-top:10px} .mgTop20 {width:100%;margin-top:20px} .mgTop30 {width:100%;margin-top:30px} .mgTop40 {width:100%;margin-top:40px} .mgTop50 {width:100%;margin-top:50px} /* 최근글 text */ .recentSubject {letter-spacing:0.3px !important;vertical-align:middle} .recentRegdate {letter-spacing:0.3px !important;vertical-align:middle} .itemSubject {letter-spacing:0.3px !important;font-weight:500} @media all and (max-width: 1250px) { #indexRecent .indexRecentTR {height:48px !important} } @media all and (max-width: 900px) { #indexRecent .indexRecentTR {height:44px !important} .recentRegdate {letter-spacing:0.3px !important;vertical-align:middle;font-size:14px !important} } @media all and (max-width: 600px) { .recentRegdate {letter-spacing:0.3px !important;vertical-align:middle;font-size:12px !important;border:0px solid red;text-align:center} } @media all and (max-width: 700px) { .indexTitle {font-size:24px;font-weight:700} .mgTop30 {width:100%;margin-top:10px} .maintitleBox {width:auto;padding:15px 0 10px 0;text-align:center} } /*상단퀵 : 로그인 회원가입 등 */ .topQuickmenu {width:100%;height:74px;background-color:#FFFFFF;border-bottom:0px solid #7f7f7f;position:fixed;top:0;left:0;right:0;z-index:999;padding-top:15px} .topQuickmenu > .wrap {text-align:right;padding-top:10px;color:#7f7f7f} .topQuickmenu > .wrap > a:link, a:visited, a:hover {color:#7f7f7f;text-decoration:none;font-weight:300} @media all and (max-width: 500px) { .topQuickmenu {width:100%;height:60px;background-color:#FFFFFF;border:0px solid #7f7f7f;position:fixed;top:0;left:0;right:0;z-index:999;padding-top:5px} .topQuickmenu .wrap {text-align:center !important;border:0px solid red;height:auto} } /*검색 */ .searchWraper {width:250px;height:50px;border:0px solid blue;margin-top:-6px;float:right;border:0px solid red;margin-left:20px} .searchInput {border:1px solid #CCCCCC;width:100%;overflow:hidden;border-radius:60px !important;height:38px;text-align:center;} .searchInputTXT {box-sizing:border-box;width:72%;border:0px solid #CCCCCC;padding:6px;font-size:16px} .searchimgButton {width:20px;height:20px;background-color:transparent;} #recentkeyWord {height:38px !important;clear:both;width:100%;border:0px solid red;margin-top:15px;text-align:center !important ;overflow:hidden} /* 메인동영상 */ .jb-box { width: 100%; height: 600px; overflow: hidden;margin-top:60px; position: relative; border:0px solid green;} video { width: 100%; height:600px; border:0px solid blue;object-fit: cover !important} @media (max-width: 1180px) { .jb-box { width: 100%; height: 400px; overflow: hidden;margin-top:160px; position: relative; border:0px solid green} } /*비디오 사이즈 조정 https://www.resize-video.com/ko/ */ .jb-text { text-align:center;width:70%;border:0px solid red;position: absolute; top: 50%; left:50%;transform: translate(-50%, -50%)} .jb-text .mainCali {display:none} @media (max-width: 1920px) { .jb-text {width:60% !important} } @media (max-width: 1280px) { .jb-text {width:80% !important} .jb-box { width: 100%; height: 500px;} } @media (max-width: 800px) { .jb-box { width: 100%; height: 400px;} } @media (max-width: 600px) { .jb-box { width: 100%; border:0px solid yellow !important} .jb-text { width: 100% !important; border:0px solid red !important} .jb-text img{ width: 100%; border:0px solid blue !important} } /* 메인 비쥬얼 타이틀 + description */ .subdesc {display: none;} .maintitle {display: none;} .subdesc2 {display: none;} /* 메인 타이틀 */ .indexTitle { padding:30px 0; font-size : 28px; box-sizing : border-box; font-weight : 700; text-align:center; border:0px solid red; } .indexTitle20 { font-size : 28px; box-sizing : border-box; font-weight : 700; text-align:center; border:0px solid blue; background-color:#FFF; padding:20px 0; } /* 메인용 더보기 버튼 : 제목 우측에 위치시키기*/ .moreRead { /*transform: translate(-50%,-50%);text-align:center;*/ position:absolute;top:0;right:10px;font-size:16px;border:0px solid blue;height:auto; display: table-cell; vertical-align: middle !important;padding-top:5px;font-weight:700 !important } .moreRead > a:link {font-weight:bold} .moreRead > a:hover {font-weight:bold;color:#000000 !important} .moreInfo {font-weight:bold !important} @media all and (max-width: 500px) { .moreInfo {font-size:12px;font-weight:bold} a:.moreinfo:link {font-size:12px;font-weight:bold} a:.moreinfo:hover {font-size:12px;font-weight:bold} a:.moreinfo:visited {font-size:12px;font-weight:bold} .indexTitle {font-size:22px;font-weight:700} .indexTitle2 {font-size:20px;font-weight:700} .moreRead > a:link {font-size:12px;font-weight:bold} } /* 제목자르기*/ .mainCutstr { border:0px solid blue; width:calc(100% - 20px); overflow:hidden !important; text-overflow:ellipsis !important; white-space: nowrap !important; } .mainCutstrMulti { border:0px solid #FFFFFF; /* height:62px; */ overflow:hidden; width:calc(100% - 10px); text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } /*학술활동 및 행사 */ /*2컬럼 70% - 30% */ .flex2colum_7030 {border:0px solid red;display:flex;width:100%;overflow:hidden;flex-wrap:wrap;box-sizing:border-box} .flex2colum_7030 > .flexleft7030 {width:70%;padding:0px;border:0px solid green;} .flex2colum_7030 .flexleft7030 .content_header { display:inline-block; font-size:26px; font-weight:500; color:#FFF; text-align:center !important; width:100%; margin-top:10px; } .flex2colum_7030 .flexleft7030 .content_desc { display:inline-block; color:#FFF; margin-top:10px; letter-spacing:1; font-size:18px; line-height:190% !important; text-align:center !important; width:100%; } .flex2colum_7030 > .flexright7030 {width:30%;padding:0px;border:0px solid blue} @media all and (max-width: 700px) { .flex2colum_7030 .flexleft7030 .content_header { display:inline-block; font-size:20px; font-weight:500; color:#FFF; text-align:center !important; margin:0 auto; border:0px solid yellow; width:100%; padding:0 20px; width:100%; overflow:hidden !important; } .flex2colum_7030 .flexleft7030 .content_desc { display:inline-block; color:#FFF; margin-top:10px; letter-spacing:1; font-size:14px; line-height:190% !important; text-align:center !important; width:100%; padding:0 15px; } .slickprev {display:none !important;} .slicknext{display:none !important;} } /*slick arrwo < > */ .slickprev { position: absolute; top: 50%; left: 30px; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); color:#FFF; font-weight:700; } .slicknext { position: absolute ; top: 50%; right: 30px; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); color:#FFF; font-weight:700; } /*자료검색 input , select */ /*select input box */ .mainSearchTBLWrap {background-color:#EEE;border:1px solid #EEE;height:100%;width:100% } .mainSearchTBL {background-color:#EEEEEE;width:98%;margin-top:10px;margin-right:10px} .mainSearchText {width:80px;color:#000;font-size:16px;font-weight:500;text-align:right} .maininputBox { margin-left:10px; border-radius:0px !important; border:1px solid #CCCCCC; height:40px; padding:3px 10px; width:94% !important; background-color:#FFF; } .mainSelectBox { margin-left:10px; border-radius:0px !important; border:1px solid #CCCCCC; height:40px; padding:3px 10px; width:94% !important; appearance:none; background:url('/images/selectarrow.gif') no-repeat right 10px center; background-color:#FFF; } .mainSearchButton { background-color:#0a5ab9; color:#FFF; font-weight:700; padding:10px 20px; width:98%; border:0; font-size:20px; } /* 우측 검색 */ @media (max-width: 1000px) { .mainSearchTBL {width:98%;} .mainSearchText {width:60px;color:#000;font-size:14px;font-weight:500;text-align:right} .maininputBox{ width:94% !important; } .mainSelectBox { width:94% !important;background-image:none;font-size:14px;font-family: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mainSearchButton {font-size:18px;} } @media (max-width: 700px) { .flex2colum_7030 {height:auto !important} .flexleft7030 {width:100% !important;margin-bottom:30px;} .flexright7030 {margin-top:30px;width:100% !important;padding-bottom:15px !important;border:0px solid red !important} .mainSearchText {width:80px;color:#000;font-size:16px;font-weight:500;text-align:right} .maininputBox{ width:96% !important;font-size:16px } .mainSelectBox { width:96% !important;font-size:16px} .mainSearchButton {width:98%;} } /*KIFA 새소식 */ /*사각강좌 - 뉴스 - 자료 4개짜리 */ .forceWhite {background-color:#FFF !important} .tapWrap {width:auto;text-align:center;margin-bottom:20px} .kifaNewsTap { background-color:#FFF; color:#000; font-weight:500; padding:8px 20px; border:0; font-size:18px; margin-right:8px; border:1px solid #DDD; } .kifaNewsTapOn { background-color:#0066ff; color:#FFF; font-weight:700; padding:8px 20px; border:0; font-size:18px; margin-right:8px; } .tapWrap button:last-child {margin-right:0} .kifanewsWrap {background-color:#f6f6f6;width:100%;margin-top:30px;background-image:url('/images/newsbackground.png');background-size:100%;border:0px solid red;overflow:hidden;padding-bottom:50px } .kifanews {display:flex;flex-wrap:wrap;border:0px solid red} .kifanewsitem{width:33.3%;padding:5px;border:0px solid blue;} .kifanewsitemInner{border:0px solid #DDDDDD;height:100%;width:100%;background-color:#FFF;overflow:hidden} .programitemDate {border:0px solid red;font-size:14px;color:#a8a8a8;width:100%;box-sizing:border-box;padding:15px 15px 0 15px;line-height:180%;letter-spacing:0px} .programitemHeader {width:100%;box-sizing:border-box;padding:10px 15px 10px 15px;font-size:18px;font-weight:500;letter-spacing:0px;border:0px solid red} .programitemDesc { width:100%; box-sizing:border-box; padding:0 15px 15px 15px; line-height:180%; letter-spacing:0px; border:0px solid blue } .moreViewWrap {width:100%;padding:10px;text-align:right} @media (max-width: 1200px) { .kifanewsitem {width:33.3%;padding:5px;border:0px solid blue} } @media (max-width: 820px) { .kifanewsitem {width:50%;padding:5px;border:0px solid blue} } @media (max-width: 640px) { .kifanewsitem {width:100%;padding:5px} } /*논문관련 퀵배너*/ .quickWrap {background-color:#f4f4f4;width:100%;margin-top:50px;padding:15px 0} .quickbox {display:flex;flex-wrap:wrap;border:0px solid red;justify-content:space-between} .quickboxitem {width:25%;border:0px solid blue;padding:5px} .quickboxitem img {display:block} @media (max-width: 720px) { .quickWrap {background-color:#f4f4f4;width:100%;margin-top:20px;padding:15px 0} .quickboxitem {width:50%;border:0px solid blue} .quickboxitem img {width:100%} } /*국제금융연구 */ .sliderItem {display:flex !important;flex-wrap:nowrap;overflow:hidden;border:0px solid black } .sliderItemLeft { border:1px solid #EEE !important; display:flex; align-items:center; justify-content:center; border:0px solid green; width:314px !important; height:389px; background-image:url('/images/magazinebg.gif'); background-size:cover; } .kifabook {border:0px solid red;width:auto;height:auto;text-align:center;font-size:24px;font-weight:900;} .sliderItemRight {border:1px solid #EEE;padding:10px 0 0 40px;flex:1 0;} .articleYear { font-size:16px;font-weight:500;color:#000;} .kifaSubject {font-size:20px !important;font-weight:700;padding-top:6px} .articleAuthor { font-size:16px;font-weight:300;padding:4px 0;} @media (max-width: 980px) { .sliderItemRight {border:0px solid blue;padding:5px 0 0 20px;flex:1 0;} .kifaSubject {font-size:16px !important;font-weight:700;padding-top:6px} .kifaTBL {margin-top:6px !important} } @media (max-width: 760px) { .sliderItemRight {border:1px solid #EEE;padding:10px;flex:1 0;} .articleAuthor { font-size:13px;font-weight:100 !important;padding:2px 0;} .kifaTBL {margin-top:4px !important;} .sliderItemLeft { display:none;} } /*활동사진 */ .indexTitle2 {font-size:24px !important;font-weight:700;border:0px solid blue;width:100%} .activephoto {border:0px solid blue !important;overflow;auto !important;width:100% !important;} .activephoto-item { border:0px solid yellow !important;padding:3px;box-sizing:border-box} .activephoto-item > img {width:100%;height:100% !important } /*footer*/ #footer { border:0px solid yellow;background: #4f5265; padding-top: 20px; padding-bottom: 15px; margin-top:30px} #footer2 { border:0px solid yellow;background: #4f5265; padding-top: 20px; padding-bottom: 15px; margin-top:30px} #footer .wrap {border:0px solid blue} .footer-content { color:#FFFFFF;font-weight:300;text-align:center;line-height:185%; } .footer-topmenu {border:0px solid yellow;width:100%;text-align:center;padding:15px 0 25px 0} .footer-topmenu a {color:#FFFFFF !important;text-decoration:none} .footersnsWrap {width:100%;margin:10px 0;text-align:center } @media all and (max-width: 501px) { .footer500under {display:block !important} .footer {display:none !important} }