.mscroll-wrap {position:absolute;left:0;bottom:20px;width:100%;text-align:center;z-index:1000;} .mscroll-wrap .mscroll {display:inline-block;width:50px;height:27px;text-indent:-9999px;background:url(/kr/_Img/Main/section_arr.png) no-repeat 0 0;} .mscroll-wrap .mscroll.gray {background:url(/kr/_Img/Main/section_arr2.png) no-repeat 0 0;} @media all and (max-width:460px) { .mscroll-wrap .mscroll {width:37px;height:20px;background-size:auto 20px} .mscroll-wrap .mscroll.gray {background-size:auto 20px} } /* 비주얼 */ #mvis {position:relative;} #mvis .mvisual-wrap {position:relative;height:710px;overflow:hidden;} .mvisual-wrap .visual-slide {position:absolute; left:50%; width:2000px; margin-left:-1000px; overflow:hidden; z-index:5} .mvisual-wrap .visual-ctrl {position:absolute;bottom:320px;left:50%;width:22px;height:22px;margin-left:45px;text-align:center;z-index:9} .mvisual-wrap .visual-ctrl a {display:inline-block;width:22px;height:22px;background:url(/kr/_Img/Main/visual-ctrl.png) no-repeat -1px 0;} .mvisual-wrap .visual-ctrl a.stop {background-position:-53px 0;display:inline-block;} .mvisual-wrap .visual-ctrl a.play {background-position:-82px 0;display:none;} .mvisual-wrap .owl-controls {position:absolute; bottom:320px;left:0;width:100%;} .mvisual-wrap .owl-pagination {display:block;text-align:right;padding-right:48%;} .mvisual-wrap .owl-page {display:inline-block;cursor:pointer;height:22px;width:22px;margin:0 3px;background:url(/kr/_Img/Main/visual-ctrl.png) no-repeat -22px 0;vertical-align:top;} .mvisual-wrap .owl-page.active {background:url(/kr/_Img/Main/visual-ctrl.png) no-repeat 0 0;} .mvisual-wrap .owl-controls {display:block;text-align:center;padding-right:48%;} .mvisual-wrap .owl-dot {display:inline-block;cursor:pointer;height:22px;width:22px;margin:0 3px;background:url(/kr/_Img/Main/visual-ctrl.png) no-repeat -22px 0;vertical-align:top;} .mvisual-wrap .owl-dot.active {background:url(/kr/_Img/Main/visual-ctrl.png) no-repeat 0 0;} /*이거없음 owl-jqeury 익스9안됨*/ .visual-item {position:relative;} .slide-item {position:relative;} .owl-item {float:left;} .owl-carousel .owl-wrapper {display: none;position:relative;-webkit-transform:translate3d(0px, 0px, 0px);} #mvis .mrequest-btn {position:absolute;width:100%;left:0;bottom:100px;z-index:1000;} #mvis .mrequest-btn ul {width:930px;margin:0 auto;overflow:hidden;} #mvis .mrequest-btn ul li {float:left;width:31%;margin-left:3.5%;text-align:left;} #mvis .mrequest-btn ul li:first-child {margin-left:0} #mvis .mrequest-btn ul li a {position:relative;display:block;color:#fff;padding:0 30px;height:190px;} #mvis .mrequest-btn ul li a:before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:90% 80%;} #mvis .mrequest-btn .bg01 a:before {background-image:url(/en/_Img/Main/mrequest_bg01.png);} #mvis .mrequest-btn .bg02 a:before {background-image:url(/en/_Img/Main/mrequest_bg02.png);} #mvis .mrequest-btn .bg03 a:before {background-image:url(/en/_Img/Main/mrequest_bg03.png);} #mvis .mrequest-btn .bg01 a {background-color:rgba(0,46,121,0.9);} #mvis .mrequest-btn .bg01 a:hover {background:url(/en/_Img/Main/mrequest_ov01.jpg) no-repeat 0 0;} #mvis .mrequest-btn .bg02 a {background-color:rgba(14,115,210,0.9);} #mvis .mrequest-btn .bg02 a:hover {background:url(/en/_Img/Main/mrequest_ov02.jpg) no-repeat 0 0;} #mvis .mrequest-btn .bg03 a {background-color:rgba(4,185,194,0.9);} #mvis .mrequest-btn .bg03 a:hover {background:url(/kr/_Img/Main/mrequest_ov03.jpg) no-repeat 0 0;} #mvis .mrequest-btn .ov-bg {display:none;position:absolute;left:0;top:0;width:100%;height:100%;} #mvis .mrequest-btn .tit {display:block;font-weight:bold;font-size:22px;margin-bottom:10px;padding-top:40px;background:url(/kr/_Img/Main/mrequest_ico.png) no-repeat 0 0;} #mvis .mrequest-btn .eng {display:block;font-weight:bold;font-size:14px;} #mvis .mrequest-btn .lnk {display:inline-block;width:33px;height:33px;margin-top:53px;border:1px solid rgba(255,255,255,0.6);background:transparent;text-indent:-9999em;background:url(/kr/_Img/Main/mrequest_arr.png) no-repeat 50% 48%;} #mvis .mrequest-btn a:hover .lnk {border-color:#fff} @media all and (max-width:960px) { #mvis .mvisual-wrap {height:600px;} #mvis .item img {height:600px;} .mvisual-wrap .visual-slide {width:1690px;margin-left:-845px;} #mvis .mrequest-btn ul {width:94%;padding:0 3%;} } @media all and (max-width:820px) { #mvis .mvisual-wrap {height:400px;} #mvis .item img {height:400px;} .mvisual-wrap .visual-slide {width:1126px;margin-left:-563px;} .mvisual-wrap .owl-controls, .mvisual-wrap .visual-ctrl {bottom:165px} #mvis .mrequest-btn {bottom:60px} #mvis .mrequest-btn ul li a {height:90px;padding:0 20px} #mvis .mrequest-btn ul li a:before {background-position:90% 65%;background-size:25px} #mvis .mrequest-btn .tit {font-size:18px;padding-top:25px;margin-bottom:5px;background-size:8px auto} #mvis .mrequest-btn .eng {font-size:12px;line-height:1.2;} } @media all and (max-width:680px) { #mvis .mrequest-btn ul li a:before {background-position:90% 15%;} } @media all and (max-width:460px) { #mvis .mvisual-wrap {height:250px;} #mvis .item img {height:250px;} .mvisual-wrap .visual-slide {width:700px;margin-left:-350px;} .mvisual-wrap .owl-controls, .mvisual-wrap .visual-ctrl {bottom:10px} #mvis .mrequest-btn {position:relative;margin-top:15px;margin-bottom:15px;bottom:auto;left:auto;} #mvis .mrequest-btn ul li {width:100%;margin-left:0;} #mvis .mrequest-btn ul li a {height:70px;} #mvis .mrequest-btn ul li a:before {background-position:90% 45%;} #mvis .mrequest-btn .bg01 a:hover {background-size:cover} #mvis .mrequest-btn .bg02 a:hover {background-size:cover} #mvis .mrequest-btn .bg03 a:hover {background-size:cover} #mvis .mrequest-btn .tit {padding-top:15px;background-size:6px auto} #mvis .mscroll-wrap {display:none;} } @media all and (max-width:320px) { #mvis .mvisual-wrap {height:200px;} #mvis .item img {height:200px;} .mvisual-wrap .visual-slide {width:560px;margin-left:-280px;} } /* JBG Services */ #service-sec {position:relative;height:870px;background:url(/kr/_Img/Main/mservice_bg.jpg) no-repeat center 0;} #service-sec .ctit {font-size:35px;color:#333;font-family:Godo;font-weight:700;line-height:1;padding:100px 0 15px 0;} #service-sec .stxt, #network-sec .stxt {font-size:20px;color:#333;font-family:Godo;font-weight:400;line-height:1.2;opacity:0.3;} #service-sec .comm {font-size:24px;color:#6e6b6c;font-family:Godo;font-weight:400;line-height:1.2;margin-top:75px;text-align:center;word-break:keep-all} #service-sec .serv-link {overflow:hidden;margin-top:70px;} #service-sec .serv-link li {opacity:0;float:left;width:18.5%;height:350px;margin:0.7%;vertical-align:top;background:#fff;} #service-sec .serv-link li a {position:relative;display:block;height:100%;} #service-sec .serv-link li a:after {opacity:0;content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:url(/kr/_Img/Main/service_ov.gif) no-repeat center 0;transition:all 0.5s ease;} #service-sec .serv-link li a:hover:after {opacity:1;} #service-sec .serv-link li .tit {display:block;font-size:17px;color:#333;font-weight:bold;padding:20px 20px 20px 20px;} #service-sec .serv-link li .txt {font-size:13px;color:#555;padding:0 20px 20px 20px;word-break:keep-all} @media all and (max-width:1200px) { #service-sec {height:auto;padding:60px 0 100px 0;} #service-sec .ctit {padding-top:0;} #service-sec .serv-link {margin-top:40px;} #service-sec .serv-link li a:after {background-size:cover;} } @media all and (max-width:800px) { #service-sec {background-size:cover;padding-bottom:80px} #service-sec .serv-link li {width:29%;margin:2.1%;height:330px;box-shadow:0 0 1px rgba(0,0,0,0.2);} #service-sec .serv-link li .tit {padding-top:20px;} #service-sec .comm {color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);margin-top:50px;} } @media all and (max-width:640px) { #service-sec {padding-top:50px;} } @media all and (max-width:480px) { #service-sec .serv-link li {width:48%;margin:1%;} #service-sec .comm {font-size:20px;} } @media all and (max-width:360px) { #service-sec {padding-top:30px;padding-bottom:60px} #service-sec .ctit {font-size:28px} #service-sec .stxt {font-size:17px;} #service-sec .serv-link li {height:270px;width:49%;margin:0;margin-bottom:2%;} #service-sec .serv-link li:nth-child(odd) {margin-right:2%;} #service-sec .serv-link li .tit {padding:15px 10px;font-size:15px;} #service-sec .serv-link li .txt {padding:0 10px 10px 10px;} #service-sec .comm {margin-top:30px;} } /* Global Network */ #network-sec {position:relative;height:870px;background:url(/kr/_Img/Main/map_bg.gif) no-repeat center 0;} #network-sec .ctit {font-size:35px;color:#333;font-family:Godo;font-weight:700;line-height:1;padding:80px 0 15px 0;} .nation .flag {position:relative;display:inline-block;width:90px;background:#2e3948;text-align:center;font-size:13px;color:#fff;padding:5px 10px;} .nation .flag:after {content:'';position:absolute;right:-8px;top:9px;width:0;height:0;border-top:6px solid transparent;border-left:8px solid #2e3948;border-bottom:6px solid transparent;} .n-america .flag:after {left:-8px;border-top:6px solid transparent;border-right:8px solid #2e3948;border-bottom:6px solid transparent;border-left:0} .nation .flag:hover {background:#126fc3;} .nation .flag:hover:after {border-left-color:#126fc3;} .n-america .flag:hover:after {border-right-color:#126fc3;} .nation .panel {display:none;position:absolute;left:0;top:33px;width:340px;padding:20px 25px;border:1px solid #ccc;background:rgba(255,255,255,0.8);z-index:100;} .nation.n-america .panel {left:auto;right:0} .nation.cs-america .panel {left:auto;right:0;top:auto;bottom:33px} .nation.oceania .panel {left:auto;right:0;top:auto;bottom:33px} .nation .na-list li {float:left;padding-left:10px;background:url(/kr/_Img/Main/board_bul.gif) no-repeat 0 9px;margin:3px 15px 3px 0;} .nation .close {position:absolute;right:0;top:0;width:25px;height:25px;background:#888 url(/kr/_Img/Main/panel_close.png) no-repeat center center;} #nation-wrap .nation {position:absolute;} #nation-wrap .nation.asia {top:313px;left:306px;} #nation-wrap .nation.eu {top:317px;left:90px;} #nation-wrap .nation.africa {top:483px;left:86px;} #nation-wrap .nation.midsea {top:388px;left:175px;} #nation-wrap .nation.oceania {top:653px;left:577px;} #nation-wrap .nation.n-america {top:329px;left:894px;} #nation-wrap .nation.cs-america {top:592px;left:875px;} @media all and (min-width:1001px) and (max-width:1280px) { #nation-wrap .nation {margin-left:-100px;} } @media all and (min-width:561px) and (max-width:1000px) { #network-sec {height:600px;background-size:auto 600px} #nation-wrap .nation {margin-top:100px;} #nation-wrap .nation.asia {top:110px;left:50%;margin-left:-120px;} #nation-wrap .nation.eu {top:113px;left:50%;margin-left:-270px;} #nation-wrap .nation.africa {top:227px;left:50%;margin-left:-271px;} #nation-wrap .nation.midsea {top:162px;left:50%;margin-left:-326px;} #nation-wrap .nation.oceania {top:346px;left:50%;margin-left:-47px;} #nation-wrap .nation.n-america {top:122px;left:50%;margin-left:206px;} #nation-wrap .nation.cs-america {top:303px;left:50%;margin-left:156px;} .nation .panel {padding:10px 15px;} .asia .flag:after, .eu .flag:after, .africa .flag:after {left:-8px;border-top:6px solid transparent;border-right:8px solid #2e3948;border-bottom:6px solid transparent;border-left:0} .asia .flag:hover:after, .eu .flag:hover:after, .africa .flag:hover:after {border-right-color:#126fc3;} } @media all and (max-width:1000px) { #network-sec .ctit {padding-top:40px;} } @media all and (max-width:560px) { #network-sec {height:auto;background-size:cover;padding-bottom:70px;} #network-sec .ctit {padding:40px 15px 15px 15px;} #network-sec .stxt {padding:0 15px 40px 15px;} #nation-wrap {margin:0;} #nation-wrap .nation {position:relative;left:auto;top:auto;bottom:auto;right:auto;} #nation-wrap .nation.asia, #nation-wrap .nation.eu, #nation-wrap .nation.africa, #nation-wrap .nation.midsea, #nation-wrap .nation.oceania, #nation-wrap .nation.n-america, #nation-wrap .nation.cs-america {left:auto;top:auto;bottom:auto;right:auto} .nation .flag {display:block;width:100%;font-size:15px;padding:15px 0;border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(0,0,0,0.3)} .nation .flag:after {display:none;} .nation .panel {position:relative;left:initial;top:initial;width:94%;padding:3%;overflow:hidden;background:#fff;border:0} .nation .close {display:none;} .nation.cs-america .panel, .nation.oceania .panel {bottom:initial;} } @media all and (max-width:360px) { #network-sec .ctit {font-size:28px;padding-top:30px;} #network-sec .stxt {font-size:17px;padding-bottom:30px;} } /* 공지사항 */ #mboard-sec {padding:70px 0;background:url(/kr/_Img/Main/board_bg.gif) repeat 0 0;} #mboard-sec .mnotice-box {float:left;width:49%;margin-bottom:20px;} #mboard-sec .mnotice {position:relative;background:#e6edf3;padding:0 1px;border-radius:12px;border:1px solid #b2c6d1;text-align:left;height:358px;} #mboard-sec .mnotice dt {float:left;min-height:50px;border-right:1px solid #b2c6d1} #mboard-sec .mnotice dt a {display:block;font-size:17px;font-weight:bold;height:100%;line-height:50px;padding:0 45px;min-height:50px;} #mboard-sec .mnotice .first dt {position:relative;} #mboard-sec .mnotice .first dt a {border-top-left-radius:12px;} #mboard-sec .mnotice .isOn dt a {display:block;background:#fff;} #mboard-sec .mnotice dd {display:none;position:absolute;top:50px;left:0;width:90%;height:267px;padding:20px 5%;background:#fff;border-bottom-right-radius:12px;border-bottom-left-radius:12px;} #mboard-sec .mnotice .isOn dd {display:block;} #mboard-sec .mnotice .spc-sec {margin-bottom:15px;} #mboard-sec .mnotice .spc-sec .tit-line {overflow:hidden;width:100%;margin-bottom:15px;} #mboard-sec .mnotice .spc-sec .tit {float:left;margin-right:10px;color:#2272cb;border-bottom:1px solid #2272cb;vertical-align:top;} #mboard-sec .mnotice .spc-sec .txt {float:left;color:#333;width:85%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #mboard-sec .mnotice .spc-sec .comm {position:relative;padding-left:190px;height:115px;} #mboard-sec .mnotice .spc-sec .comm .pimg {position:absolute;left:0;top:0;} #mboard-sec .mnotice .spc-sec .comm .subject {display:block;height:80px;overflow:hidden;line-height:1.5;} #mboard-sec .mnotice .spc-sec .comm .date {display:block;margin-top:10px;} #mboard-sec .mnotice dd .item {padding:4px 0 4px 13px;background:url(/kr/_Img/Main/board_bul.gif) no-repeat 0 10px;} #mboard-sec .mnotice dd .item a {display:block;width:100%;font-size:13px;line-height:17px;min-height:17px;overflow:hidden;} #mboard-sec .mnotice dd .item a:hover .subject {text-decoration:underline;font-weight:bold} #mboard-sec .mnotice dd .item .subject {float:left;width:69%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #mboard-sec .mnotice dd .item .date {float:right;width:30%;text-align:right;} #mboard-sec .mnotice dd a.btn-more {width:50px;height:50px;display:block;position:absolute;top:-50px;right:0;border-left:1px solid #b2c6d1;transition:all 0.5s ease-in-out 0s;} #mboard-sec .mnotice dd a.btn-more:after {content:"";display:block;position:absolute;top:0;left:0;width:50px;height:50px;background:url(/kr/_Img/Main/board_more.png) no-repeat center center;transition:all 0.5s ease-in-out 0s;} #mboard-sec .mnotice dd a.btn-more:hover:after {transform:rotate(360deg)} #mboard-sec .mnotice dd .no-data {text-align:center;color:#fff;background:none;margin-top:60px} /* 갤러리 */ #mboard-sec .mgallery-box {float:right;position:relative;width:49%;margin-bottom:20px;} #mboard-sec .mgallery {background:#fff;border-radius:12px;border:1px solid #ccc;padding:30px;} #mboard-sec .mgallery .tit {font-size:18px;color:#333;font-weight:bold;padding-bottom:25px;line-height:1;} #mboard-sec .mgallery-item {position:relative;width:100%;height:115px;overflow:hidden;} #mboard-sec .mgallery-item .owl-item {float:left;width:33.3%;text-align:center;} #mboard-sec .mgallery-item .txt {display:block;width:100%;margin-top:5px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #mboard-sec .gallery-ctrl {position:absolute;right:20px;top:30px;} #mboard-sec .gallery-ctrl a {float:left;width:24px;height:24px;background:url(/kr/_Img/Main/gallery-ctrl.gif) no-repeat 0 0;} #mboard-sec .gallery-ctrl a.prev {background-position:0 0;} #mboard-sec .gallery-ctrl a.stop {background-position:-24px 0;} #mboard-sec .gallery-ctrl a.play {background-position:-48px 0;display:none;} #mboard-sec .gallery-ctrl a.next {background-position:right 0;} .mgallery .owl-item img {width:155px; height:86px;} /* 자료실 */ #mboard-sec .mdata-box {float:left;position:relative;width:49%;} #mboard-sec .mdata {background:#fff;border-radius:12px;border:1px solid #ccc;padding:30px;height:147px;} #mboard-sec .mdata .tit {font-size:18px;color:#333;font-weight:bold;padding-bottom:20px;line-height:1;} #mboard-sec .mdata li {padding:6px 0 7px 13px;background:url(/kr/_Img/Main/board_bul.gif) no-repeat 0 10px;line-height:1;} #mboard-sec .mdata li.no-data {background:none;padding-top:30px;} #mboard-sec .mdata li a {display:block;width:100%;overflow:hidden;} #mboard-sec .mdata li .subject {float:left;width:69%;font-size:14px;color:#555;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} #mboard-sec .mdata li a:hover .subject {text-decoration:underline;} #mboard-sec .mdata li .date {float:left;width:30%;font-size:13px;color:#555;text-align:right;vertical-align:top;} #mboard-sec .mdata .btn-more, #mboard-sec .mvod .btn-more {position:absolute;right:30px;top:25px;width:20px;height:20px;background:url(/kr/_Img/Main/board_more.png) no-repeat center center;} /* 홍보동영상 */ #mboard-sec .mvod-box {float:right;position:relative;width:49%;} #mboard-sec .mvod .tit {font-size:18px;color:#333;background:#fff;font-weight:bold;padding:27px 30px;line-height:1;border-radius:12px 12px 0 0;border:1px solid #ccc;border-bottom:0} #mboard-sec .mvod iframe {border-radius:0 0 12px 12px;} @media all and (max-width:1280px) { #mboard-sec .mnotice dd {width:88%;padding:20px 6%} } @media all and (max-width:800px) { #mboard-sec {padding:40px 0;} #mboard-sec .mnotice-box {width:100%;} #mboard-sec .mgallery-box {width:100%;} #mboard-sec .mvod-box {width:100%;margin-bottom:20px;} #mboard-sec .mdata-box {width:100%;} } @media all and (max-width:480px) { #mboard-sec {padding:25px 10px} #mboard-sec .mvod-box .tit{ border-radius:0} #mboard-sec .mnotice {height:348px; border-radius:0} #mboard-sec .mnotice dt {min-height:40px} #mboard-sec .mnotice dt a {font-size:15px;padding:0 30px;line-height:40px; min-height:40px} #mboard-sec .mnotice dd {top:40px; border-radius:0} #mboard-sec .mnotice dd a.btn-more {width:40px;height:40px;top:-40px;border-left:0} #mboard-sec .mnotice dd a.btn-more:after {width:40px;height:40px;} #mboard-sec .mgallery {padding:20px; border-radius:0} #mboard-sec .gallery-ctrl {top:20px;} #mboard-sec .mvod .tit {padding:20px;} #mboard-sec .mdata {padding:20px; border-radius:0} #mboard-sec .mdata .btn-more, #mboard-sec .mvod .btn-more {right:20px;top:20px;} #mboard-sec .mnotice .first dt a{border-radius:0} #mboard-sec .mvod iframe {border-radius:0;} } @media all and (max-width:380px) { #mboard-sec .mnotice .spc-sec .comm {padding-left:130px;} #mboard-sec .mnotice .spc-sec .comm .pimg {width:120px;} } /* JBG 이야기 */ #mstory-sec {background:#0a3a5b;height:865px;background:url(/kr/_Img/Main/mstory_bg.jpg) no-repeat center 0;} #mstory-sec .ctit {font-size:35px;color:#fff;font-family:Godo;font-weight:700;line-height:1;padding:80px 0 15px 0;text-shadow:0 1px 1px rgba(0,0,0,0.2);} #mstory-sec .stxt {font-size:20px;color:#fff;font-family:Godo;font-weight:400;line-height:1.2; opacity:0.3;} .mstory-wrap {margin-top:55px;} .mstory-wrap:after {content:'';clear:both;display:block;} .mstory-wrap .sec-01, .mstory-wrap .sec-02, .mstory-wrap .sec-03, .mstory-wrap .sec-04, .mstory-wrap .sec-05 {opacity:0;margin-top:-50px;height:260px;} .mstory-wrap .sec-01 {float:left;width:49%;margin-right:2%;margin-bottom:2%;background:url(/kr/_Img/Main/story_img01.jpg) no-repeat right 0;} .mstory-wrap .sec-02 {float:left;width:49%;margin-bottom:2%;background:url(/kr/_Img/Main/story_img02.jpg) no-repeat right 0;} .mstory-wrap .sec-03 {float:left;width:23.5%;margin-right:2%;background:#415f81 url(/kr/_Img/Main/story_bg01.gif) repeat 0 0;} .mstory-wrap .sec-04 {float:left;width:23.5%;margin-right:2%;background:#fff;} .mstory-wrap .sec-05 {float:left;width:49%;background:url(/kr/_Img/Main/story_img03.jpg) no-repeat right 0;} .mstory-wrap .sec-01 a {background:#ff6f2a;} .mstory-wrap .sec-02 a {background:#157dc6;} .mstory-wrap .sec-03 a {display:block;height:110px;padding-top:150px;text-align:center;font-size:20px;font-weight:bold;color:#fff;background:url(/kr/_Img/Main/story_ico01.png) no-repeat center 90px;} .mstory-wrap .sec-04 a {display:block;height:110px;padding-top:150px;text-align:center;font-size:20px;font-weight:bold;color:#415f81;background:url(/kr/_Img/Main/story_ico02.png) no-repeat center 90px;} .mstory-wrap .sec-05 a {background:#30baca;} .mstory-wrap .img-sec a {position:relative;display:block;width:48.5%;height:190px;padding-top:70px;text-align:center;color:#fff;transition:all 0.3s ease} .mstory-wrap .img-sec a:hover {width:100%;} .mstory-wrap .img-sec a:hover:after {display:none;} .mstory-wrap .img-sec a:after {content:'';position:absolute;right:-15px;top:50%;margin-top:-10px;width:0;height:0;} .mstory-wrap .img-sec .tit {position:relative;display:block;font-size:20px;font-weight:bold;margin-bottom:60px;text-shadow:0 1px 1px rgba(0,0,0,0.2);} .mstory-wrap .img-sec .tit:after {content:'';position:absolute;left:50%;bottom:-30px;width:6px;height:6px;border-radius:6px;background:#fff;} .mstory-wrap .img-sec .txt {display:block;font-size:15px;word-break:keep-all} .mstory-wrap a:hover .tit, .mstory-wrap a:focus .tit {text-decoration:underline;} @media all and (min-width:769px) { .mstory-wrap .sec-01 a:after {border-top:10px solid transparent;border-left:15px solid #ff6f2a;border-bottom:10px solid transparent;} .mstory-wrap .sec-02 a:after {border-top:10px solid transparent;border-left:15px solid #157dc6;border-bottom:10px solid transparent;} .mstory-wrap .sec-05 a:after {border-top:10px solid transparent;border-left:15px solid #30baca;border-bottom:10px solid transparent;} } @media all and (min-width:461px) and (max-width:768px) { .mstory-wrap .img-sec {background-size:cover;} .mstory-wrap .sec-01, .mstory-wrap .sec-02, .mstory-wrap .sec-05 {height:280px;} .mstory-wrap .sec-03, .mstory-wrap .sec-04 {width:49%;margin-right:2%;margin-bottom:2%;height:133px;} .mstory-wrap .sec-04 {margin-bottom:0;} .mstory-wrap .sec-05 {position:absolute;right:0;bottom:0} .mstory-wrap .img-sec a {width:100%;padding-top:15px;height:100px;} .mstory-wrap .img-sec a:hover {padding-top:100px;height:180px;} .mstory-wrap .img-sec a:after {top:107%;right:50%;margin-right:-7.5px;} .mstory-wrap .img-sec .tit {margin-bottom:25px} .mstory-wrap .img-sec .tit:after {bottom:-16px} .mstory-wrap .sec-01 a:after {border-left:10px solid transparent;border-top:15px solid #ff6f2a;border-right:10px solid transparent;} .mstory-wrap .sec-02 a:after {border-left:10px solid transparent;border-top:15px solid #157dc6;border-right:10px solid transparent;} .mstory-wrap .sec-05 a:after {border-left:10px solid transparent;border-top:15px solid #30baca;border-right:10px solid transparent;} .mstory-wrap .sec-03 a, .mstory-wrap .sec-04 a {height:48px;padding-top:85px;background-position:center 30px} } @media all and (max-width:640px) { #mstory-sec {height:820px;background-size:cover} #mstory-sec .ctit {padding-top:50px;} } @media all and (max-width:460px) { #mstory-sec {height:auto;padding-bottom:50px;} .mstory-wrap .sec-01, .mstory-wrap .sec-02, .mstory-wrap .sec-03, .mstory-wrap .sec-04, .mstory-wrap .sec-05 {width:100%;margin-bottom:2%;height:160px;background-size:auto 190px} .mstory-wrap .sec-03, .mstory-wrap .sec-04 {width:49%;margin-right:1%;background-size:auto} .mstory-wrap .sec-04 {margin-left:1%;margin-right:0;} .mstory-wrap .sec-03 a, .mstory-wrap .sec-04 a {font-size:18px;padding-top:110px;background-position:center 50px;background-size:auto 30px} .mstory-wrap .img-sec a {padding-top:30px;height:130px;width:49.5%;} .mstory-wrap .sec-01 a:after {border-top:10px solid transparent;border-left:15px solid #ff6f2a;border-bottom:10px solid transparent;} .mstory-wrap .sec-02 a:after {border-top:10px solid transparent;border-left:15px solid #157dc6;border-bottom:10px solid transparent;} .mstory-wrap .sec-05 a:after {border-top:10px solid transparent;border-left:15px solid #30baca;border-bottom:10px solid transparent;} .mstory-wrap .img-sec .tit {font-size:18px;margin-bottom:40px} .mstory-wrap .img-sec .tit:after {bottom:-20px;} .mstory-wrap .img-sec .txt {font-size:13px;} } @media all and (max-width:360px) { #mstory-sec {padding-bottom:30px;} #mstory-sec .ctit {padding-top:30px;font-size:28px} #mstory-sec .stxt {font-size:17px;} .mstory-wrap {margin-top:30px} }