.main-body .width1200 {width:1200px; margin:0 auto; position: relative;} /* 메인에서 사용할때 .with1200 */ .main-wide {background:#f2f3f3; clear:both; } /* 메인 가로 100% */ /* 메인 - 비쥬얼 */ #mvisual { background: #333 none repeat 0 0 / cover ; /* height: 635px;*/ height: auto; overflow: hidden; position: relative; padding-top:0; } #mvisual .visual-txt {position:absolute; top:190px; width:100%; text-align:center; z-index:10; } #mvisual .visual-txt .txt1 {font-size:3.214em; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.75); font-family:'NanumMyeongjo'; line-height:150%;} #mvisual .visual-txt .txt1 span {display:block; font-size:1.4em; text-transform: uppercase; font-family:'NanumMyeongjo'; font-weight: 600; letter-spacing:-5px} #mvisual .visual-txt .txt1 span span {display:inline-block; font-size:0.9em;} #mvisual .visual-txt .txt-line {width:1px; height:30px; background-color:#fff; margin:10px auto 20px auto; } #mvisual .visual-txt .txt2 {color:#fff; font-size:1.143em; text-shadow:3px 3px 5px rgba(0,0,0,0.75);} #mvisual .obj { position: absolute; left:0; right:0; top:0; height: 100%; min-width: 1200px; } #mvisual .obj .item { background: rgba(0, 0, 0, 0) none no-repeat scroll 50% 0 / cover; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin:0; } #mvisual .obj .item { -webkit-animation-play-state:running; animation-play-state:running; -webkit-animation-name:circle-slide-zoom-development; animation-name: circle-slide-zoom-development; -webkit-animation-duration: 10s; animation-duration:10s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-direction:alternate; animation-direction: alternate; -webkit-animation-timing-function:linear; animation-timing-function: linear; } #mvisual .obj .item:first-child{display:block} #mvisual .obj .item img {height:100%; /*display:none;*/} #mvisual .obj .item img.vsl-tablet { display:none; } #mvisual .obj .item img.vsl-mobile { display:none; } #mvisual .visual-control {display: none; position:absolute; top:460px; width:100%; text-align:center; z-index: 200;} #mvisual .visual-control .visual-btn {background:none; border:none; width:30px; height:40px; display:inline-block;} #mvisual .visual-control .visual-btn i {color:#fff; font-size:3em; font-weight:700;} #mvisual .visual-control .visual-btn:nth-of-type(2) {background:url("/resources/webStyle/img/main/control_pause.png") 50% 17px no-repeat; } #mvisual .visual-control .visual-btn:nth-of-type(2):hover {background:url("/resources/webStyle/img/main/control_play.png") 50% 17px no-repeat; } @-webkit-keyframes circle-slide-zoom-development { 0% { width:100%;height:100%; } 100% { width:110%;height:110%;left:-5%; } } @keyframes circle-slide-zoom-development { 0% { width:100%;height:100%; } 100% { width:110%;height:110%;left:-5%; } } /* 메인 - 컨텐츠영역 */ .main-body { z-index:10; position: relative; width:100%;} .main-body .container {z-index:300; width:100%;} .main-body .container > .width1200 {margin-top:-310px;} /* 메인 - step01 */ .main-body {} .main-body .main-type { position:relative; text-align:center; margin: 25px 0 20px;/* position: absolute; top:-150px; right:0; z-index:1; width:600px;*/ border:;} .main-body .main-type div { float:left; display: inline-block;} .main-body .main-type div a {width:134px; height:134px; border-radius:67px; border:#fff 1px solid; color:#fff; font-size:1.35em; display: inline-block; text-align: center; padding-top:30%; transition: none;} .main-body .main-type div:hover a, .main-body .main-type div a:hover, .main-body .main-type div.active a {width:120px; height:120px; border-radius:60px; background:#1942c4; border:#1942c4 1px solid;} .main-body .main-type div:hover, .main-body .main-type div.active {border:#1942c4 1px solid; border-radius:67px; padding:6px;} .main-body .main-type ul {} .main-body .main-type ul li {/*float:left; margin-left:10px;*/ display: inline-block;} .main-body .main-type ul li a {padding:0 30px; border-right:1px solid #706f74; font-size:18px; font-size:1.8rem; color:#fff; font-weight:500} .main-body .main-type ul li:hover a, .main-body .main-type ul li a:hover, .main-body .main-type ul li.active a { color:#d1a700;} .main-body .main-type ul li:hover, .main-body .main-type ul li.active {color:#d1a700;} /* 메인 - step01 - 배너 */ .main-step01 {position: relative;} .main-step01 .step01-left {float:left; width:50%; } #main-bnr01, #main-bnr03, #main-bnr02 { background: #59595c; height: 380px; margin-bottom: 47px; position: relative; width: 100%; display: inline-block; } #main-bnr01 button i, #main-bnr03 button i, #main-bnr02 button i { margin-right: 0 !important; } #main-bnr01 .banner-box, #main-bnr03 .banner-box, #main-bnr02 .banner-box { background: rgba(0, 0, 0, 0.6); bottom: 0; height: 70px; left: 0; overflow: hidden; position: absolute; width: 100%; } #main-bnr01 .banner-box .banner-title, #main-bnr03 .banner-box .banner-title, #main-bnr02 .banner-box .banner-title { height: 1000%; margin-right: 200px; overflow: hidden; position: relative; } #main-bnr01 .banner-box .banner-title p, #main-bnr03 .banner-box .banner-title p, #main-bnr02 .banner-box .banner-title p { color: #ffffff; font-size: 1.286em; height: 10%; opacity: 0; overflow: hidden; margin: 0; padding-left: 30px; text-overflow: ellipsis; white-space: nowrap; width: 100%; } #main-bnr01 .banner-box .banner-title p::before, #main-bnr03 .banner-box .banner-title p::before, #main-bnr02 .banner-box .banner-title p::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } #main-bnr01 .banner-box .banner-control, #main-bnr03 .banner-box .banner-control, #main-bnr02 .banner-box .banner-control { position: absolute; right: 10px; top: 10px; } #main-bnr01 .banner-box .banner-control button, #main-bnr03 .banner-box .banner-control button, #main-bnr02 .banner-box .banner-control button { background: none; border: 0; } #main-bnr01 .banner-box .banner-control button[data-type], #main-bnr03 .banner-box .banner-control button[data-type], #main-bnr02 .banner-box .banner-control button[data-type] { float: left; height: 45px; width: 32px; } #main-bnr01 .banner-box .banner-control button[data-type] i, #main-bnr03 .banner-box .banner-control button[data-type] i, #main-bnr02 .banner-box .banner-control button[data-type] i { color: #ffffff; font-size: 3em; font-weight: 700; } #main-bnr01 .banner-box .banner-control button[data-type="play"], #main-bnr03 .banner-box .banner-control button[data-type="play"], #main-bnr02 .banner-box .banner-control button[data-type="play"] { display: none; } #main-bnr01 .banner-box .banner-all, #main-bnr03 .banner-box .banner-all, #main-bnr02 .banner-box .banner-all { background: rgba(0, 0, 0, 0.8); height: 100%; position: absolute; right: 0; top: 0; width: 65px; } #main-bnr01 .banner-box .banner-all:hover, #main-bnr03 .banner-box .banner-all:hover, #main-bnr02 .banner-box .banner-all:hover { background: #be222f; } #main-bnr01 .banner-box .banner-all button, #main-bnr03 .banner-box .banner-all button, #main-bnr02 .banner-box .banner-all button { background: none; border: 0; height: 30px; left: 0; margin: -15px auto 0; position: absolute; right: 0; top: 50%; width: 42px; font-size: 2em; color: #ffffff; } #main-bnr01 .banner-box .banner-page, #main-bnr03 .banner-box .banner-page, #main-bnr02 .banner-box .banner-page { height: 100%; padding-left: 40px; } #main-bnr01 .banner-box .banner-page::before, #main-bnr03 .banner-box .banner-page::before, #main-bnr02 .banner-box .banner-page::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } #main-bnr01 .banner-box .banner-page button, #main-bnr03 .banner-box .banner-page button, #main-bnr02 .banner-box .banner-page button { background-position: -275px -550px; display: inline-block; height: 13px; margin-right: 3px; vertical-align: middle; width: 13px; } /* #main-bnr01 .banner-box .banner-page button.ov { background-position: -250px -550px; } */ #main-bnr01 .banner-item-box, #main-bnr03 .banner-item-box, #main-bnr02 .banner-item-box { background-color: #59595c; height: 100%; overflow: hidden; position: relative; width: 100%; } #main-bnr01 .banner-item-box .bnr-list, #main-bnr03 .banner-item-box .bnr-list, #main-bnr02 .banner-item-box .bnr-list { height: 100%; overflow: hidden; position: relative; width: 1000%; } #main-bnr01 .banner-item-box .bnr-list .bnr-item, #main-bnr03 .banner-item-box .bnr-list .bnr-item, #main-bnr02 .banner-item-box .bnr-list .bnr-item { float: left; width: 10%; } #main-bnr01 .banner-item-box .bnr-list .bnr-item img, #main-bnr03 .banner-item-box .bnr-list .bnr-item img, #main-bnr02 .banner-item-box .bnr-list .bnr-item img { width: 100%; } #main-bnr01 .banner-item-box .bnr-list .bnr-item a, #main-bnr03 .banner-item-box .bnr-list .bnr-item a, #main-bnr02 .banner-item-box .bnr-list .bnr-item a { border: 10px solid rgba(0, 0, 0, 0); display: block; float: left; position: relative; width: 33.3%; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .bnr-thumb, #main-bnr03 .banner-item-box .bnr-list .bnr-item .bnr-thumb, #main-bnr02 .banner-item-box .bnr-list .bnr-item .bnr-thumb { height: 103px; width: 100%; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .bnr-thumb img, #main-bnr03 .banner-item-box .bnr-list .bnr-item .bnr-thumb img, #main-bnr02 .banner-item-box .bnr-list .bnr-item .bnr-thumb img { height: 103px; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .pt, #main-bnr03 .banner-item-box .bnr-list .bnr-item .pt, #main-bnr02 .banner-item-box .bnr-list .bnr-item .pt { color: #ffffff; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; top: 0; transition:opacity 150ms ease-in-out 150ms; -webkit-transition:opacity 150ms ease-in-out 150ms; z-index: 1; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .pt::before, #main-bnr03 .banner-item-box .bnr-list .bnr-item .pt::before, #main-bnr02 .banner-item-box .bnr-list .bnr-item .pt::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .pt span, #main-bnr03 .banner-item-box .bnr-list .bnr-item .pt span, #main-bnr02 .banner-item-box .bnr-list .bnr-item .pt span { display: inline-block; line-height: 1.3; padding: 0 10px; vertical-align: middle; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .mask, #main-bnr03 .banner-item-box .bnr-list .bnr-item .mask, #main-bnr02 .banner-item-box .bnr-list .bnr-item .mask { background-color: #000000; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity 200ms ease-out; -webkit-transition:opacity 200ms ease-out; } #main-bnr01 .banner-item-box .bnr-list .bnr-item a:hover .pt, #main-bnr01 .banner-item-box .bnr-list .bnr-item a:focus .pt, #main-bnr03 .banner-item-box .bnr-list .bnr-item a:hover .pt, #main-bnr03 .banner-item-box .bnr-list .bnr-item a:focus .pt, #main-bnr02 .banner-item-box .bnr-list .bnr-item a:hover .pt, #main-bnr02 .banner-item-box .bnr-list .bnr-item a:focus .pt { display: block; opacity: 1; } #main-bnr01 .banner-item-box .bnr-list .bnr-item a:hover .mask, #main-bnr01 .banner-item-box .bnr-list .bnr-item a:focus .mask, #main-bnr03 .banner-item-box .bnr-list .bnr-item a:hover .mask, #main-bnr03 .banner-item-box .bnr-list .bnr-item a:focus .mask, #main-bnr02 .banner-item-box .bnr-list .bnr-item a:hover .mask, #main-bnr02 .banner-item-box .bnr-list .bnr-item a:focus .mask { display: block; opacity: 0.6; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .new, #main-bnr03 .banner-item-box .bnr-list .bnr-item .new, #main-bnr02 .banner-item-box .bnr-list .bnr-item .new { position: relative; } #main-bnr01 .banner-item-box .bnr-list .bnr-item .new::before, #main-bnr03 .banner-item-box .bnr-list .bnr-item .new::before, #main-bnr02 .banner-item-box .bnr-list .bnr-item .new::before { background: rgba(0, 0, 0, 0) url("/images/kor/main/icon.png") no-repeat scroll -325px -550px; content: ""; height: 20px; left: -10px; position: absolute; top: -10px; width: 20px; z-index: 10; } #bnr-normal, #bnr-card, #bnr-normal-02, #bnr-card-02, #bnr-normal-03, #bnr-card-03 { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } #bnr-card .banner-box, #bnr-card-03 .banner-box, #bnr-card-02 .banner-box { background: rgba(0, 0, 0, 0.6); } #bnr-card .banner-item-box .bnr-list .bnr-item, #bnr-card-03 .banner-item-box .bnr-list .bnr-item, #bnr-card-02 .banner-item-box .bnr-list .bnr-item { padding: 25px; } #main-bnr01 .show-ready, #main-bnr03 .show-ready, #main-bnr02 .show-ready { display: block; opacity: 0; transition: opacity 300ms ease-in-out 0s; } #main-bnr01 .show-play, #main-bnr03 .show-play, #main-bnr02 .show-play { opacity: 1; } /* 메인 - step01 - SNS TIMELINE */ .main-step01 .step01-right {float:left; width:100%; height:auto; text-align:center; position: relative; } .main-step01 .sns-top {display:inline-block; font-size:1.429em; font-weight:400; color:#202020; margin:0 auto; width:100%; padding:30px; position: relative;} .main-step01 .sns-top em {position:absolute; top:50px; left:50%; margin-left:-40%; width:80%; height:1px; background-color:#838485; z-index:100;} .main-step01 .sns-top > div {position:absolute; top:30px; left:50%; margin-left:-20%; width:45%; background-color:#fff; display:block; z-index:200; } .main-step01 .sns-top > div .sns-title , .main-step01 .sns-top > div ul.tab-sns {float:left; } .main-step01 .sns-top > div .sns-title {padding:8px 2% 10px 4%; width:65%; letter-spacing:-1px;} .main-step01 .sns-top > div .sns-title span {font-weight: 600; } .main-step01 .sns-top > div ul.tab-sns {width:35%;} .main-step01 .sns-top > div ul.tab-sns li {float:left; width:45%; margin:0 0.5%; cursor: pointer;} .main-step01 .sns-top > div ul.tab-sns li:last-of-type {margin-right:3%;} .main-step01 .sns-list {position:relative; display:inline-block; width:100%; padding:30px; } .main-step01 .sns-list ul {width:100%; display:inline-block; margin-top:2px;} .main-step01 .sns-list ul li {overflow:hidden; padding:0 0 7px 5%; text-align:left; height:90px; margin-top:-20px; position: relative; font-size:0.9em;} .main-step01 .sns-list ul li:last-child {padding-bottom:50px; } .main-step01 .sns-list a {position:relative; display:inline-block; border:#ddd 1px solid; border-radius:3px; padding:12px 15px; margin-top:6px; height:65px; color:#707070; line-height:140%; width:100%; } .main-step01 .sns-list a span.con {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#707070;} .main-step01 .sns-list a:hover, .main-step01 .sns-list a:hover > span {color:#fff;} .main-step01 .sns-list a > span {width:100%; display:inline-block; color:#9e1915; line-height:120%; margin:0;} .main-step01 .sns-list a span:last-of-type {position: absolute; left:0; top:10px; margin-left:-7px; background:url("/resources/images/korean/main/sns_arrow.jpg") no-repeat 0 0; width:7px; height:11px; } .main-step01 .tab-sns a {width:39px; height:48px; display:inline-block;} .main-step01 .tab-sns a.sns-tab1 {background:url("/resources/images/korean/main/sns_facebook.jpg") 0 0 no-repeat; } .main-step01 .tab-sns .active a.sns-tab1 {background:url("/resources/images/korean/main/sns_facebook_over.jpg") 0 0 no-repeat; } .main-step01 .tab-sns a.sns-tab2 {background:url("/resources/images/korean/main/sns_twitter.jpg") 0 0 no-repeat; } .main-step01 .tab-sns .active a.sns-tab2 {background:url("/resources/images/korean/main/sns_twitter_over.jpg") 0 0 no-repeat; } .main-step01 .tab-sns a.sns-tab3 {background:url("/resources/images/korean/main/sns_youtube.jpg") 0 0 no-repeat; } .main-step01 .tab-sns .active a.sns-tab3 {background:url("/resources/images/korean/main/sns_youtube_over.jpg") 0 0 no-repeat; } .main-step01 .tab-sns a.sns-tab4 {background:url("/resources/images/korean/main/sns_blog.jpg") 0 0 no-repeat; } .main-step01 .tab-sns .active a.sns-tab4 {background:url("/resources/images/korean/main/sns_blog_over.jpg") 0 0 no-repeat; } .main-step01 .sns-list .sns-facebook li { background:url("/resources/images/korean/main/sns_facebook_line.png") no-repeat 0 0; } .main-step01 .sns-list .sns-facebook a:hover {background-color:#3b5998; border:#3b5998 1px solid;} .main-step01 .sns-list .sns-facebook a:hover span:last-of-type {background:url("/resources/images/korean/main/sns_facebook_arrow_over.png") no-repeat 0 0;} .main-step01 .sns-list .sns-twitter li { background:url("/resources/images/korean/main/sns_twitter_line.png") no-repeat 0 0; } .main-step01 .sns-list .sns-twitter a:hover {background-color:#31cdff; border:#31cdff 1px solid;} .main-step01 .sns-list .sns-twitter a:hover span:last-of-type {background:url("/resources/images/korean/main/sns_twitter_arrow_over.png") no-repeat 0 0;} .main-step01 .sns-list .sns-youtube li { background:url("/resources/images/korean/main/sns_youtube_line.png") no-repeat 0 0; } .main-step01 .sns-list .sns-youtube a:hover {background-color:#db2724; border:#db2724 1px solid;} .main-step01 .sns-list .sns-youtube a:hover span:last-of-type {background:url("/resources/images/korean/main/sns_youtube_arrow_over.png") no-repeat 0 0;} .main-step01 .sns-list .sns-blog li { background:url("/resources/images/korean/main/sns_blog_line.png") no-repeat 0 0; } .main-step01 .sns-list .sns-blog a:hover {background-color:#57a700; border:#57a700 1px solid;} .main-step01 .sns-list .sns-blog a:hover span:last-of-type {background:url("/resources/images/korean/main/sns_blog_arrow_over.png") no-repeat 0 0; } /* 메인 - step01 - 호서인 서비스 */ .hoseo-service {/*background:#be222f;*/ color:#fff; height:100%; /* padding:35px 0px;*/} .hoseo-service .service-title {background:url("/resources/images/korean/main/hoseo_title_bg.png") 2px 0 no-repeat; font-size:2em; font-weight:400; letter-spacing:-2px; text-align: left; padding-top:15px;} .hoseo-service .service-title span {font-size:0.5em; font-weight:200; letter-spacing:0; line-height:130%; margin-top:15px; display: inline-block;} .hoseo-service ul.service-link {margin:10px 0; /* display:inline-block;*/} .hoseo-service ul.service-link li {float:left; width:10%; /* width:20%; padding:10px 0.5%;*/ padding:6px 0.5%; height:120px;} .hoseo-service ul.service-link li a {color:#fff; font-weight:400; width:100%; height:100%; font-size:0.9em;} .hoseo-service ul.service-link li:hover {color:#fff; background:#851821; box-shadow:3px 3px 10px rgba(0,0,0,0.3); } .hoseo-service ul.service-link li a em { display:block; margin-top:-10px;font-style:normal;} /* 메인 - step01 - 호서인 서비스 2020추가 */ .hoseo-service ul.service-link.new01 {font-size:14px} .hoseo-service ul.service-link.new01 li {width:7%;/* width:7.6%; width:8.2%;*/ } /* 메인 - step02 - 취업률 */ .main-step02 {clear:both; width:100%; height:330px; display:inline-block; padding:5% 0 6% 0; } .main-step02 > div {float:left;} .main-step02 .step02-title {width:25%; background:url("/resources/images/korean/main/title_red.png") no-repeat 20px 0; font-size:3.6em; line-height: 110%; color:#202020; letter-spacing:-1px; padding-top:10px;} .main-step02 .step02-title span {font-weight:800; } .main-step02 .step02-body {width:75%;} .main-step02 .count-class {width:100%; display:inline-block;} .main-step02 .count-class ul {} .main-step02 .count-class ul li {float:left; width:33%; height:220px; border-right:#eeeff1 1px solid; text-shadow:3px 3px 0 rgba(0,0,0,0.25); font-weight:600; font-size:3em; margin-top:-18px;} .main-step02 .count-class ul li span { display:inline-block; font-size:0.35em; padding:5px 0 30px 30px;} .main-step02 .count-class ul li span.count-year {font-size:0.5em;} .main-step02 .count-class ul li span.count-year, .main-step02 .count-class ul li span.count-con {width:100%; text-shadow:none; font-weight:400;} .main-step02 .count-class ul li u { text-decoration: none; font-size:1.85em;} .main-step02 .count-class ul li span.counter-num {font-size:1em; position: relative;} .main-step02 .count-class ul li span.counter {font-size:1.95em; padding:0; } .main-step02 .count-class ul li span.counter01 {font-size:0.95em; padding:0; line-height:1.1em; padding-bottom:10px; color:#222c45;} .main-step02 .count-class ul li span.counter02 {font-size:1.45em; padding:0;} .main-step02 .count-class ul li:last-of-type {border:none;} .main-step02 .count-class ul li em { height:2px; width:50px; display:block; margin:15px 0 10px 30px;} .main-step02 .count-class #count-01 {color:#196a9e;} .main-step02 .count-class #count-02 {color:#222c45;} .main-step02 .count-class #count-02 .count-con {color:#c31e2a;} .main-step02 .count-class #count-03 {color:#c31e2a;} .main-step02 .count-class #count-03 .counter-num01 {color:#222c45; font-size:0.65em; padding:0 0 0 0;} .main-step02 .count-class #count-01 em {background:#196a9e;} .main-step02 .count-class #count-02 em {background:#222c45;} .main-step02 .count-class #count-03 em {background:#c31e2a;} /* 메인 - step02 - 호서인 공지사항 */ #main-type2 .main-step02 {padding:0; height:330px; } #main-type2 .main-step02 > div {float:none;} #main-type2 .main-step02 .pc-notice {display:block; margin-top:-25px;} #main-type2 .main-step02 .mobile-notice {display:none;} .main-step02 .step02-notice {width:31.3333%; margin-right:3%; float:left;} .main-step02 .step02-notice:last-of-type {margin-right:0;} .main-step02 .step02-notice .notice-title {width:100%; padding:33px 0 20px 0; text-align:left; font-weight:400; color:#333; font-size:1.4em; position: relative; border-bottom:#c8ced2 1px solid; letter-spacing:-1px;} .main-step02 .step02-notice .notice-btn {position:absolute; right:0; top:30px;} .main-step02 .step02-notice .notice-btn button {float:left; text-indent:-20000px; width:30px; width:30px; height:30px; margin-left:-1px; border:#c8ced2 1px solid; z-index:200;} .main-step02 .step02-notice .notice-btn button.list-up {background:url("/resources/images/korean/main/notice_up.png") 50% 50% no-repeat;} .main-step02 .step02-notice .notice-btn button.list-down {background:url("/resources/images/korean/main/notice_down.png") 50% 50% no-repeat;} .main-step02 .step02-notice .notice-btn button.list-more {background:url("/resources/images/korean/main/notice_more.png") 50% 50% no-repeat;} .main-step02 .step02-notice .notice-btn button:hover.list-up {background:url("/resources/images/korean/main/notice_up_over.png") 50% 50% no-repeat#be222f ;} .main-step02 .step02-notice .notice-btn button:hover.list-down {background:url("/resources/images/korean/main/notice_down_over.png") 50% 50% no-repeat #be222f;} .main-step02 .step02-notice .notice-btn button:hover.list-more {background:url("/resources/images/korean/main/notice_more_over.png") 50% 50% no-repeat #be222f;} .main-step02 .step02-notice .notice-btn button:hover {border:#be222f 1px solid; z-index:300;} .main-step02 .step02-notice .notice-list {margin-top:15px; } .main-step02 .step02-notice .notice-list li {float:left; width:100%; } .main-step02 .step02-notice .notice-list li > ul.clearfix {margin-bottom:5px;} .main-step02 .step02-notice .notice-list li li.notice-date {background:#ececec; width:17%; height:65px; text-align: center; color:#be222f; font-weight:400; font-size:1.786em; padding-top:10px !important; } .main-step02 .step02-notice .notice-list li li.notice-date span {display:block; color:#868383; font-size:0.4em; font-weight:200; text-align: center;} .main-step02 .step02-notice .notice-list li li {width:83%; padding:7px 10px;} .main-step02 .step02-notice .notice-list li li a {width:100%; display: inline-block;} .main-step02 .step02-notice .notice-list li li a span {display:block; width:100%; font-size:0.93em; color:#989898; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 24px; } .main-step02 .step02-notice .notice-list li li a span.list-title {font-size:1.07em; font-weight:400; color:#202020; } .main-step02 .step02-notice .notice-list li li a:hover span.list-title {color:#be222f;} /* 메인 - step03 - 교수자랑 */ .main-step03 { padding:5% 0; } .main-step03 .slider-pro {background:url("/resources/images/korean/main/mid_banner_con.jpg") 0 0 no-repeat; background-size:cover; } .main-step03 .mid-banner-con { color:#fff; padding:4%; } .main-step03 .mid-banner-con .banner-title {font-size:2em; color:#edeacc; font-weight: 600; padding-bottom:4%; letter-spacing:-1px; line-height:120%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family:NanumGothic,"나눔고딕",sans-serif; } .main-step03 .mid-banner-con .banner-con01 {font-size:1.18em; line-height: 1.6; padding-bottom:4%; height: auto; height: 150px; font-family:NanumGothic,"나눔고딕",sans-serif; } .main-step03 .mid-banner-con .banner-control {position:absolute; bottom:13px; right:18px; width:19%; height:50px;} .main-step03 .sp-layer img { -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); filter:grayscale(100%);height: 323px;width: 600px;} .main-step03 .sp-horizontal .sp-arrows { top: 85%; width:19%; right: -77px; left: auto; } .main-step03 .sp-horizontal .sp-arrow { position: relative; float: left; width:55px; height: 32px; } .main-step03 .sp-horizontal .sp-arrow::before { transform: none;} .main-step03 .sp-next-arrow::after, .main-step03 .sp-next-arrow::before, .main-step03 .sp-previous-arrow::after, .main-step03 .sp-previous-arrow::before { content: none; width: auto; height: auto; } .main-step03 .sp-next-arrow i.fa, .main-step03 .sp-previous-arrow i.fa { color: #ffffff; font-size: 3em; margin-right: 0; } .main-step03 .sp-stop-arrow { padding-top: 10px; } .main-step03 .sp-next-arrow { transform: none; } .textOverflow {overflow: hidden; text-overflow: ellipsis; } /* 메인 - step04 - 뉴스 */ .main-step04 { padding-top:50px;} .main-step04 .news-list {display: inline-block; width:100%;} .main-step04 .news-list ul {} .main-step04 .news-list ul li {float:left; width:25%; padding-right:1%; height:330px;/*height:365px;*/margin-bottom:25px; overflow:hidden; display: inline-block; } .main-step04 .news-list ul li:nth-of-type(4n) {padding:0;} .main-step04 .news-list ul li img:nth-of-type(1n) {width:100%; padding-left: 0px;} .main-step04 .news-list ul li img:nth-of-type(4n) {width:100%; padding-right: 0px;} .main-step04 .news-list ul li img {width:100%; padding: 0px; height:auto; min-height:194px;} .main-step04 .news-list ul li .news-date {font-size:0.929em; font-weight:400; color:#989898; padding:20px 0 10px 0; display: inline-block;} .main-step04 .news-list ul li .news-date .news-cate {margin-right:20px; color:#fff; font-size:0.929em; padding:6px 7px;} .main-step04 .news-list ul li .news-date .news-cate.news {background:#949494; } .main-step04 .news-list ul li .news-date .news-cate.event {background:#d86c75; } .main-step04 .news-list ul li .news-date .news-cate.tender {background:#3b5998; } .main-step04 .news-list ul li i {font-style: normal;} .main-step04 .news-list ul li dl {letter-spacing: -1px;} .main-step04 .news-list ul li dl dt {font-size:1.28em; color:#202020; margin-bottom:8px; font-weight:400; display: block; height: 58px; } .main-step04 .news-list ul li dl dt span { display: inline-block; height:58px; overflow:hidden; } .main-step04 .news-list ul li dl dd { display:none; font-size:1em; color:#727272; line-height:150%; } .main-step04 .news-list ul li dl dd span { display: inline-block; height:75px; text-align: justify; overflow:hidden;} /* 메인 - step05 - 최하단 박스 3개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 {} .main-step05 > div {float:left; /*width:33.333%;*/ width:25%; height:450px;} .main-step05 .step05-01 {background:url("/resources/images/korean/main/bottom_bg01.jpg") no-repeat 50% 50%; background-size: cover; } .main-step05 .step05-02 {background:url("/resources/images/korean/main/bottom_bg02.jpg") no-repeat 50% 50%; background-size: cover; } .main-step05 .step05-03 {background:url("/resources/images/korean/main/bottom_bg03.jpg") no-repeat 50% 50%; background-size: cover; } .main-step05 .step05-04 {background:url("/resources/images/korean/main/bottom_bg04.jpg") no-repeat 50% 50%; background-size: cover; } .main-step05 .box-list {position: relative; color:#fff;} .main-step05 .pic-title {font-size:3.0em; font-weight:600; letter-spacing:-2px; text-align: center; padding-top:100px; line-height:130%; } .main-step05 .pic-box {position:absolute; top:0; left:0; width:100%; height:450px;} .main-step05 .pic-box .mask {position:absolute; width:100%; height:450px; padding-top: 50px; top:0; left:0; opacity:0; -webkit-transition:all 0.6s ease; transition: all 0.6s ease; z-index:200;} .main-step05 .pic-box .mask.npt20 {padding-top: 20px;} .main-step05 .pic-box:hover { background-color: rgba(190,34,17,0.9); } .main-step05 .pic-box:hover .mask {opacity: 1; } .main-step05 .pic-box .caption {text-align: center; letter-spacing: -1px;} .main-step05 .pic-box .caption .over-title {font-size:3.0em; font-weight:600; letter-spacing:-2px;} .main-step05 .pic-box .caption .over-link {/*padding:0 65px;*/ padding:0 35px; margin-top:25px;} .main-step05 .pic-box .caption .over-link a i {padding-right:3%; font-size:1.1em; vertical-align: middle;} .main-step05 .pic-box .caption .over-link a {float:left; display:inline-block; font-size:1.1em; color:#fff; border:#fff 2px solid; width:48%; margin:4% 4% 0 0; /*padding:4% 5% 4% 3%;*/ padding:3.5% 5% 3.5% 3%; text-align:left; position: relative;} .main-step05 .pic-box .caption .over-link.w100 a { width:100%; font-size:1.8em; padding:20%} .main-step05 .pic-box .caption .over-link a::after {position:absolute; content:"\f101"; right:20px;} .main-step05 .step05-01 .pic-box .caption .over-link a {padding:3% 5% 3% 3%; margin:3% 4% 0 0;} .main-step05 .pic-box .caption .over-link a:nth-of-type(2n) {margin-right:0;} .main-step05 .pic-box .caption .over-link a:hover {background:rgba(0,0,0,0.4); border:2px solid #851821; box-shadow:3px 3px 15px rgba(0,0,0,0.4);} @media all and (max-width: 1640px) { /* 메인 - step05 - 최하단 박스 4개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 .pic-title, .main-step05 .pic-box .caption .over-title {font-size:2.8em;} .main-step05 .pic-box .caption .over-link {padding:0 6%;} .main-step05 .pic-box .caption .over-link a {font-size:1.1em;} .main-step05 .pic-box .caption .over-link a::after {right:10px;} } @media all and (max-width: 1530px) { /* 메인 - step05 - 최하단 박스 4개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 .pic-title, .main-step05 .pic-box .caption .over-title{font-size:2.5em;} } @media all and (max-width:1380px){ /* 메인 - step05 - 최하단 박스 4개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 .pic-box .caption .over-link a{font-size:1.0em;} } @media all and (max-width:1360px){ /* 메인 - step05 - 최하단 박스 4개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 .pic-title, .main-step05 .pic-box .caption .over-title{font-size:2.2em;} } @media all and (max-width: 1200px) { .main-body .width1200 {width:100%;} /* 메인 - 비쥬얼 */ #mvisual .visual-txt {top:150px;} #mvisual .visual-control {top:450px;} #mvisual .obj {min-width:100%;} /* 메인 - step01 - SNS TIMELINE */ .main-step01 .sns-top > div {width:80%; margin-left:-40%; top:20px;} .main-step01 .sns-top > div .sns-title {width:40%;} .main-step01 .sns-top > div ul.tab-sns {width:60%;} .main-step01 .sns-list {padding:20px;} .main-step01 .sns-list ul {margin-top:10px;} .main-step01 .sns-list ul li {padding-left:25px;} /* 메인 - step01 - 호서인 서비스 */ #main-bnr01, #main-bnr02 { margin-bottom: 5px; } .hoseo-service {padding:25px 20px;} .hoseo-service .service-title {font-size:1.6em;} .hoseo-service .service-title span {margin-top:5px; font-size:0.5em;} .hoseo-service ul.service-link li {padding:4px 0.5%;} /* 메인 - step02 - 호서인 공지사항 */ #main-type2 .main-step02 { padding: 0px 16px !important;} .main-step02 .step02-notice .notice-list li li {width:80%;} .main-step02 .step02-notice .notice-list li li.notice-date {width:20%; font-size:1.6em; } /* 메인 - step02 - 취업률 */ .main-step02 {height: auto; padding:20px;} .main-step02 .step02-title, .main-step02 .step02-body {width:100%;} .main-step02 .step02-title br {display:none; } .main-step02 .count-class ul li {margin-top:20px;} .main-step02 .step02-title { text-align:center; background:none; font-size:2em; border-bottom:#ddd 1px solid; padding:15px;} /* 메인 - step03 - 교수자랑 */ .main-step03 {padding:0 0 20px 0;} .main-step03 > div { height: auto; max-height:380px;} .main-step03 .mid-banner-con {padding-bottom:50px;} .main-step03 .mid-banner-con br {display:none;} /* 메인 - step04 - 뉴스 */ .main-step04 {padding:0 16px !important;} .main-step04 .news-list .tab-pane ul li {width:33.3%; height: 344px; margin-bottom: 31px; padding-right:1%;} .main-step04 .news-list .tab-pane ul li:nth-child(3) { padding-right:0px; } .main-step04 .news-list .tab-pane ul li dl dd, .main-step04 .news-list .tab-pane ul li dl dt { padding-right:6%; height: 52px; margin-bottom: 8px;} .main-step04 .news-list .tab-pane ul li .news-date {display:block;} /*.main-step04 .portfolio-item-inner {text-align:center;}*/ /* 메인 - step05 - 최하단 박스 3개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 {font-size:0.8em;} .main-step05 .pic-title {padding-top:50px; font-size:2.4em;} .main-step05 .pic-box .caption .over-link {padding:0 30px; margin-top:5px;} .main-step05 .pic-box .caption .over-link a {width:100%;} .main-step05 .pic-box .mask { padding-top:30px; } .main-step05 .pic-box .caption .over-title {font-size:2.4em; padding-bottom:10px;} .main-step05 .step05-01 .pic-box .caption .over-link a, .main-step05 .pic-box .caption .over-link a {margin-top:5px;} .main-step05 .pic-box .caption .over-link a{font-size:1.2em;} } @media all and (max-width: 950px) { /* 메인 - step01 - SNS TIMELINE */ .main-step01 .sns-top > div .sns-title {margin-top:-10px;} .main-step04 {padding: 15px 16px !important;} /* 메인 - step05 - 최하단 박스 3개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 > div {width:100%;} .main-step05 .pic-box{height:420px;} .main-step05 .pic-box .mask { padding-top:30px; height:420px;} .main-step05 > div{height:420px;} .main-step05 .pic-box .caption .over-link {margin-top:10px;} .main-step05 .step05-01,.main-step05 .step05-02,.main-step05 .step05-03,.main-step05 .step05-04{width:50%;} .main-step05 .step05-01 .pic-box .caption .over-link a, .main-step05 .pic-box .caption .over-link a {padding:6px 10px; margin:2% 4% 0 0;} .main-step05 .pic-box .caption .over-title{padding-bottom:5px;} } @media all and (max-width:1200px) and (min-width:768px) { /* 메인 - step02 - 취업률 */ .main-step02 .count-class ul li span.counter {font-size:1.7em;} /* 메인 - step01 - 호서인 서비스 */ .hoseo-service ul.service-link li ,.hoseo-service ul.service-link.new01 li {width:25%; height: auto;/* height:80px;*/} .hoseo-service ul.service-link.new01 li em { display:inline-block} .hoseo-service ul.service-link li img ,.hoseo-service ul.service-link.new01 li img {/*width:60%; width:50%;*/} .hoseo-service ul.service-link li a ,.hoseo-service ul.service-link.new01 li a{letter-spacing:-1px; font-weight:200;} #main-type2 .main-step02 .pc-notice { margin-top:0px;} } @media all and (max-width: 767px) { #mvisual {height: auto;/*height: 710px;*/} #mvisual .visual-txt .txt2 {font-size: 1.543em;} #mvisual .visual-txt .txt-line { height: 10px;} /* 메인 - 비쥬얼 */ #mvisual .visual-txt {font-size:0.65em; top:70px;} #mvisual .visual-txt .txt1 span {font-size:1.1em; letter-spacing: -1px;} #mvisual .visual-control {top:320px;} #mvisual .obj .item img.vsl-pc { display:none; } #mvisual .obj .item img.vsl-tablet { display:block; } #mvisual .obj .item img.vsl-mobile { display:none; } /* 메인 - step01 */ .main-body .main-step01 > div {width:100%;} .main-body .main-type {/*top:-110px; right:35%; margin-right:-50%; width: 390px; right:20%*/} .main-body .main-type ul li a {/* width:84px; height:84px; font-size:1.1em; padding-top:35%;*/} .main-body .main-type ul li:hover a, .main-body .main-type ul li a:hover, .main-body .main-type ul li.active a {width:70px; height:70px;} .main-body .main-type div a {width:84px; height:84px; font-size:1.0em; padding-top:20%;} .main-body .main-type div:hover a, .main-body .main-type div a:hover, .main-body .main-type div.active a {width:70px; height:70px;} /* main_tap */ .nav-red li { width: 49.2%; display: inline-block;} .nav-red li:nth-child(3) { margin-left: 0px; } /* 메인 - step01 - 배너 */ .main-step01 .step01-left {height:100%; float: none; } .main-step01 .step01-right {height:auto; float: none; } #main-bnr01, #main-bnr03, #main-bnr02 { display: block; margin-top: 0; padding-top: 46.75%; margin-bottom:0; padding-bottom: 50px; width: 100%; height: auto; } #main-bnr01 .banner-item-box, #main-bnr02 .banner-item-box, #main-bnr03 .banner-item-box { /* padding-top: 46.75%; */ /* 2022-09-30숨김처리*/} #main-bnr01 .banner-item-box .bnr-list, #main-bnr02 .banner-item-box .bnr-list, #main-bnr03 .banner-item-box .bnr-list { position: absolute; top: 0; left: 0; height: auto; } #main-bnr01 .banner-item-box .bnr-list .bnr-item, #main-bnr03 .banner-item-box .bnr-list .bnr-item, #main-bnr02 .banner-item-box .bnr-list .bnr-item { height: 100%; overflow: hidden; } #main-bnr01 .banner-item-box .bnr-list .bnr-item img, #main-bnr03 .banner-item-box .bnr-list .bnr-item img, #main-bnr02 .banner-item-box .bnr-list .bnr-item img { width: 100%; } #main-bnr01 .banner-box, #main-bnr03 .banner-box, #main-bnr02 .banner-box { height: 50px; } #main-bnr01 .banner-box .banner-title, #main-bnr03 .banner-box .banner-title, #main-bnr02 .banner-box .banner-title { margin-right: 0; } #main-bnr01 .banner-box .banner-title p, #main-bnr03 .banner-box .banner-title p, #main-bnr02 .banner-box .banner-title p { padding-left: 15px; } #main-bnr01 .banner-box .banner-control, #main-bnr03 .banner-box .banner-control, #main-bnr02 .banner-box .banner-control { top: 0; right: 0; } #main-bnr01 .banner-box .banner-all, #main-bnr03 .banner-box .banner-all, #main-bnr02 .banner-box .banner-all { display: none; } .main-step01 .sns-top {padding-top:80px;} .main-step01 .sns-top em {top:85px; width:90%; margin-left:-45%;} .main-step01 .sns-top > div {top:20px;} .main-step01 .sns-top > div .sns-title , .main-step01 .sns-top > div ul.tab-sns {width:100%} .main-step01 .sns-top > div .sns-title {margin:0 0 5px 0;} .main-step01 .sns-top > div ul.tab-sns li {width:50%; margin:0;} .main-step01 .sns-top > div ul.tab-sns li:last-of-type {margin:0;} .main-step01 .sns-list {padding:16px;} .main-step01 .sns-list ul {margin-top:10px;} .main-step01 .sns-list ul li {padding-left:25px;} /* 메인 - step01 - 호서인 서비스 */ .hoseo-service ul.service-link li {width:33.3333%;} .hoseo-service ul.service-link.new01 li {width:25%;} .hoseo-service ul.service-link li a ,.hoseo-service ul.service-link.new01 li a{font-size:0.8em;} /* 메인 - step02 - 취업률 */ .main-step02 {padding:20px 0; display: none; } .main-step02 > div {clear:both;} .main-step02 .step02-title {font-size:1.7em; border:none; letter-spacing: -1px; background:none; padding:15px; text-align:center;} .main-step02 .count-class ul li {width:100%; border-top:#ddd 1px solid; height:auto; padding-top:15px;} .main-step02 .count-class ul li:last-of-type {border-top:#ddd 1px solid;} .main-step02 .count-class ul li span {padding-left:0; text-align: center;} .main-step02 .count-class ul li span.counter-num {width:100%; padding-left:5%;} .main-step02 .count-class ul li em {margin:15px auto;} /* 메인 - step02 - 호서인 공지사항 */ #main-type2 .main-step02 {height:auto; padding:0 20px; display:block;} #main-type2 .main-step02 .pc-notice {display:none; margin-top:-10px;} #main-type2 .main-step02 .mobile-notice {display:block; margin:20px 0;} #main-type2 .main-step02 .mobile-notice .nav-red {margin-bottom:0;} #main-type2 .main-step02 .step02-notice {float:none;} .main-step02 .step02-notice {width:100%;} /* 메인 - step03 - 교수자랑 */ .main-step03 {padding:0; } .main-step03 > div {width:100%; height:auto;} .main-step03 .mid-banner-con {font-size:0.8em; line-height:140%; padding-bottom:50px;} .main-step03 .mid-banner-con br {display:none;} .main-step03 .mid-banner-con .banner-title {font-size:1.7em;} .main-step03 .mid-banner-con .banner-con02 {font-size:;} .main-step03 .mid-banner-con .banner-control {bottom:0; width:auto;} .sp-next-arrow::after, .sp-next-arrow::before, .sp-previous-arrow::after, .sp-previous-arrow::before {content: none;} .main-step03 .sp-next-arrow::after, .main-step03 .sp-next-arrow::before, .main-step03 .sp-previous-arrow::after, .main-step03 .sp-previous-arrow::before { content: none !important; } /* 메인 - 뉴스04 * .main-step04 .portfolio-item > a > span {padding-right:4%;} .main-step04 .news-list ul li { width: 50% ;height: 313px;} .main-step04 .news-list ul li dl dt { font-size:1.2em; height: 47px;text-align: justify; } .main-step04 .news-list ul li dl dd { text-align: justify;} .main-step04 .news-list ul li dl dt span { padding-right:6%;} .main-step04 .news-list ul li dl dd span { height: 70px; padding-right:6%;}*/ .main-step04 .news-list .tab-pane > ul > li { padding-right:1%; } .main-step04 .news-list .tab-pane > ul > li { width: 50% ;height: 325px;} .main-step04 .news-list .tab-pane > ul > li dl dd, .main-step04 .news-list .tab-pane > ul > li dl dt { font-size:1.2em; padding-right:6%; text-align: justify;} .main-step04 .news-list .tab-pane > ul > li dl dd span { font-size:0.85em; height: 70px; line-height: 1.6;} } @media all and (max-width: 640px) { /* 메인 - step01 */ .main-body .main-type {/* top:-110px; right:32%; margin-right:-45%;right:20%; */} .main-body .main-type ul li a {/* margin-left:5px */} /* 메인 - step04 - 뉴스 */ .main-step04 {padding:0;} .main-step04 .news-list .tab-pane ul li {width:100%; height: 295px ; margin-bottom:20px; padding-right: 0%;} .main-step04 .news-list .tab-pane ul li i {display:block; } .main-step04 .news-list .tab-pane ul li dl dd, .main-step04 .news-list .tab-pane ul li dl dd span { height: 62px; line-height: 1.4; } .main-step04 .news-list .tab-pane ul li dl dt, .main-step04 .news-list .tab-pane ul li dl dt span { height: 27px; margin-bottom: 5px;} .nav-red li:nth-child(2),.nav-red li:nth-child(3) { margin-left: 1px;} .news-date .news-cate {padding:2px 8px 2px 0;} /* 공지탭 */ .main-step04 .nav-red li {width:49%; } } @media all and (max-width:500px){ /* 메인 - step05 - 최하단 박스 3개 (국제교류협력, 학과사이트, 장학제도/학자금대출) */ .main-step05 .step05-01, .main-step05 .step05-02, .main-step05 .step05-03, .main-step05 .step05-04{width:100%;} .main-step05 .pic-title{font-size:2.8em;} .main-step05 .pic-box .caption .over-title{display:none;} .main-step05 .pic-box .mask{padding:0; height:375px;} .main-step05 .pic-box{height:375px;} .main-step05 > div{height:375px;} .hoseo-service ul.service-link.new01 li {width:33.3333%;/* width:50%;*/} } @media all and (max-width:420px) { /* 메인 - 비쥬얼 */ #mvisual .obj .item img.vsl-pc { display:none; } #mvisual .obj .item img.vsl-tablet { display:none; } #mvisual .obj .item img.vsl-mobile { display:block; } /* 메인 - step01 */ #mvisual .visual-txt .txt1 span { font-size: 0.9em;} .main-body .main-type { /*top:-110px;right:23%; margin-right:-42%; right:10%; right:1%;*/ } /* 메인 - step04 - 뉴스 */ .main-step04 {padding:0;} /*.main-step04 .nav-red li {width:100%; padding: 0 16px; }*/ .main-step04 .news-list .tab-pane ul li {width:100%; height: 313px ; /*padding-left: 16px; padding-right: 16px !important;*/ margin-bottom:20px;} .main-step04 .news-list .tab-pane ul li i {display:block; } /* 공지탭 */ .main-step04 .nav-red li { width: 100% ;margin-left: 0px; margin-right: 0px;} .news-date .news-cate {padding:2px 8px;} .main-step02 .nav-red li,.main-step04 .nav-red li { width: 100%; margin-left: 0px; margin-right: 0px; } } /* 2020-02-19 추가 */ /* 메인 - step02 - 예비호서인 안내 */ .main-prost {clear:both; width:100%; height:330px; display:inline-block; padding:3% 0 6% 0; } .main-prost > div {float:left;} .main-prost .prost-body {width:100%;} .main-prost .num-class {width:100%; display:inline-block;} .main-prost .num-class ul {} .main-prost .num-class ul li {float:left; width:25%; height:220px; border-right:#eeeff1 1px solid; text-shadow:3px 3px 0 rgba(0,0,0,0.25); font-weight:600; font-size:3em; margin-top:-18px; text-align:center;} .main-prost .num-class ul li span { display:inline-block; font-size:0.35em; padding:5px 0 30px 30px;} .main-prost .num-class ul li span.txt01 {font-size:0.4em;} .main-prost .num-class ul li span.txt01, .main-prost .num-class ul li span.contxt {width:100%; text-shadow:none; font-weight:400;} .main-prost .num-class ul li span.contxt.red {color:#c21525;} .main-prost .num-class ul li:last-of-type {border:none;} .main-prost .num-class ul li em { display:block; font-style:normal; font-size:1.25em;} .main-prost .num-class ul li span.num {font-size:1em; position: relative; line-height:1.1em;} .main-prost .num-class ul li span.num-t01 {font-size:1.95em; padding:0; color:#1f99a2;} .main-prost .num-class ul li span.num-t02 {font-size:1.95em; padding:0; color:#c21525;} .main-prost .num-class ul li span.num-t03 {font-size:1.1em; padding:0; color:#c21525; line-height:1.2em;} .main-prost .num-class ul li span.num-t04 {font-size:1.0em; padding:0; color:#7c5c8f;} .main-prost .num-class #count-01 {color:#2a2a2a;} .main-prost .num-class #count-02 {color:#9fa0a0;} .main-prost .num-class #count-03 {color:#c31e2a;} .main-prost .num-class #count-01 em {} .main-prost .num-class #count-02 em {} .main-prost .num-class #count-03 em {} @media all and (max-width:1200px) { .main-prost { padding:2% 0 6% 0; } .main-prost .num-class ul li span.num-t04 {font-size:0.85em; padding:0; color:#7c5c8f;} } @media all and (max-width:900px) { .main-prost .prost-body {width:95%;} } @media all and (max-width:768px) { .main-prost { padding:20px 0; display:none;} } /* 20201012 */ @media (max-width:650px){ /*#popup_2 {top: 60px !important;} #popup_2 div { width:350px !important; height:auto !important} #popup_2 img { width:100% !important;}*/ } /* 20201019 */ .all_warp { position:relative; margin:0; padding:0; width:520px; height:630px; background: url(/resources/images/gradgate/sub/popup202210/popup_bg01.jpg)} .div-con { position: absolute; height:200px; bottom:20px; left:5%;} .div-con ul { } .div-con ul li { width:100%; float:left; padding:5px 0} .layer_popup {/*padding: 15px 20px 5px 20px; border:solid 1px #a7a7a7;*/padding: 0px 0px 0px 0px; background:#e4e4e4;border-radius: 20px;} @media (max-width:1900px){ /*#popup_3{left:0 !important; top:860px !important;} #popup_4{left:450px !important; top:602px !important;}*/ } @media (max-width:1750px){ #popup_1 { top: 100px !important; left:0px !important;} #popup_2 { /*left:0px !important;*/} #popup_3 { left:370px !important;} #popup_4 { left:370px !important;} } @media (max-width:1500px){ /*#popup_2{ top: 603px !important; left:0px !important}*/ } @media (max-width:1200px){ /* #popup_1 { top: 650px !important; left:0px !important}*/ /*#popup_3{ /top: 500px !important; } #popup_2{ top: 800px !important; } #popup_1{ top: 1000px !important; left:0px !important; top: 560px !important; left:0px !important} #popup_3{top:1042px !important;}*/ #popup_1 { top: 100px !important; left:0px !important} /*#popup_2 {top:1080px !important; left:0px !important;}*/ #popup_3{top:1080px !important; left:0px !important;} #popup_4{top:1395px !important; left:0px !important;} } @media (max-width:1000px){ /*#popup_1 { top: 500px !important; left:0px !important} #popup_2{ top: 500px !important; left:0px !important} #popup_1 {top: 120px !important; top: 605px !important; left:0px !important} #popup_3{top:650px !important; left:0px !important}*/ #popup_2{top:530px !important; left:0px !important;} /*#popup_2 {top:1089px !important; } #popup_4 {top:1087px !important; left:0px !important}*/ } @media all and (max-width: 700px) { .all_warp { width:350px; height:424px; background-size: cover;} .div-con ul li img { width:100%;} /*#popup_1 img {width:400px !important; height:auto !important} #popup_2 img {width:400px !important; height:auto !important} #popup_3 img {width:400px !important; height:auto !important} #popup_3 img {width:400px !important; height:auto !important}*/ #popup_1 div{ width:400px !important; height:auto !important} #popup_1 img {width:400px !important; height:auto !important} #popup_2 { top: 530px !important;/*top: 420px !important;*/ left:0px !important} #popup_2 div{ width:400px !important; height:auto !important} #popup_2 img {width:400px !important; height:auto !important} #popup_3 { top: 850px !important;/*top: 420px !important;*/ left:0px !important} #popup_3 img {width:400px !important; height:auto !important} #popup_4 { top: 1050px !important;/*top: 420px !important;*/ left:0px !important} #popup_4 img {width:400px !important; height:auto !important} } @media (max-width:653px){ /*#popup_1 { top: 450px !important; left:0px !important}*/ /*#popup_1 div { width:300px !important; height:auto !important} #popup_1 img { width:100% !important;} #popup_2 img { width:100% !important;} #popup_3 img { width:100% !important;} */ /* #popup_1 { top: 440px !important;top: 420px !important; left:0px !important}*/ /*#popup_3 { top: 410px !important; }*/ #popup_1,#popup_2 {width:300px !important; height:auto !important;} #popup_1 div,#popup_2 div{ width:300px !important; height:auto !important} #popup_1 img {width:300px !important; height:auto !important} /*#popup_3 img {width:350px !important; height:auto !important}*/ /* #popup_2 { top: 810px !important; left:0px !important} #popup_2 div{ width:300px !important; height:auto !important} #popup_2 img{width: 280px !important; height:auto !important;}*/ #popup_2 { top: 530px !important; left:0px !important} #popup_3 { top: 850px !important;/*top: 420px !important;*/ left:0px !important} #popup_3 div { width:300px !important; height:auto !important} #popup_3 img {width:300px !important; height:auto !important} #popup_4 { top: 1050px !important; left:0px !important} #popup_4 div{ width:350px !important; height:auto !important} #popup_4 img{width: 350px !important; height:auto !important;} /* #popup_3 { top: 390px !important; left:0px !important} #popup_1 div { position:relative; width:350px!important; height:354px !important;} #popup_1 div .all_warp { position:relative; width:350px !important; height:424px !important; background-size: cover;} #popup_1 div .div-con { position: absolute; height:150px !important; bottom:10px;} #popup_1 div .div-con ul li img { width:60%;} #popup_1 .txt-center { height:30px !important;}*/ } /* 메인-퀵 재학생 */ .main_link_wrap{position:relative;width:100%;height:100%; background:#444444;overflow:hidden;} .main_link_box {position:relative;width:100%;height: auto;max-width: 1200px;margin:0 auto;overflow:hidden; text-align:center;} .main_link_box.type01 { max-width: 1350px;} @media screen and (max-width:1200px) { .main_link_box { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease } .main_link_box { height:auto; }/* 바로가기01 */ .main_link_box.type01 { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease } .main_link_box.type01 { height:auto; } } /* 메인 sns추가 */ .main_sns_wrap{position:relative;width:100%;height:100%; background:#fff;overflow:hidden;} .main_sns_box {position:relative;width:100%;height: auto;max-width: 1200px;margin:0 auto;overflow:hidden; padding:0px 0px 50px;} .snsnews{position:relative;width:100%;height:100%;} .snsnews h3{font-size:38px; color:#6d613e; background:none !important; margin: 20px 0 40px;} .snsnews h3 strong{ font-weight:bold} .snsnews h3 span { font-size:16px; color:#888888; padding-left:30px; font-weight:400;} .snsnews .sns-ico-wrap {position:absolute; top:40px; right:0; z-index:10;} .snsnews .sns-ico-wrap li {float:left; padding:0 5px 0 0; } .snsnews .sns-ico-wrap li:last-child { padding-right:0px} .snsnews .sns-ico-wrap li a {display:block; width:40px; height:38px; background:url('/resources/images/korean/main/sns_ico01_off.png') no-repeat center;background-size:37px; text-indent:-9999px;} .snsnews .sns-ico-wrap li.sns02 a {background-image:url('/resources/images/korean/main/sns_ico02_off.png');} .snsnews .sns-ico-wrap li.sns03 a {background-image:url('/resources/images/korean/main/sns_ico03_off.png');} .snsnews .sns-ico-wrap li.sns04 a {background-image:url('/resources/images/korean/main/sns_ico04_off.png');} .snsnews .sns-ico-wrap li.sns01:hover a, .snsnews .sns-ico-wrap li.sns01.on a {background-image:url('/resources/images/korean/main/sns_ico01_on.png');} .snsnews .sns-ico-wrap li.sns02:hover a, .snsnews .sns-ico-wrap li.sns02.on a {background-image:url('/resources/images/korean/main/sns_ico02_on.png');} .snsnews .sns-ico-wrap li.sns03:hover a, .snsnews .sns-ico-wrap li.sns03.on a {background-image:url('/resources/images/korean/main/sns_ico03_on.png');} .snsnews .sns-ico-wrap li.sns04:hover a, .snsnews .sns-ico-wrap li.sns04.on a {background-image:url('/resources/images/korean/main/sns_ico04_on.png');} .snsnews .sns-slide li a {display:block;} .snsnews .sns-slide .sns-text-wrap {position:relative; font-size:0; margin:0 auto; text-align:center} .snsnews .sns-slide .sns-text-wrap:before { display:none; } .snsnews .sns-slide .sns-text-wrap strong {font-size:20px; font-size:2.0rem; font-weight:500; color:#333;} .snsnews .sns-slide .sns-text-wrap p {margin:10px 0 0; line-height:126%; font-size:15px; font-size:1.5rem; color:#999; letter-spacing:-1px;} .snsnews .sns-slide .sns-text-wrap img {display:inline-block; vertical-align:middle;} .snsnews .sns-slide .sns-text-wrap .text-wrap {display:inline-block; width:60%; padding-left:20px; vertical-align:middle; text-align:left !important} .snsnews .bx-wrapper {padding:0 40px; box-sizing:border-box;} .snsnews .bx-wrapper .bx-prev {background-image:url('/resources/images/korean/main/sns_arro_left_off.png');} .snsnews .bx-wrapper .bx-prev:hover {background-image:url('/resources/images/korean/main/sns_arro_left_on.png');} .snsnews .bx-wrapper .bx-next {background-image:url('/resources/images/korean/main/sns_arro_right_off.png');} .snsnews .bx-wrapper .bx-next:hover {background-image:url('/resources/images/korean/main/sns_arro_right_on.png');} @media (max-width: 1200px){ .snsnew {padding-bottom:30px;} .snsnew .sns-slide .sns-text-wrap {padding:28px 19px; margin-top:25px; border:1px solid #d7d7d7; border-top:4px solid #344e85;} .snsnew .sns-slide .snsW02 .sns-text-wrap {border-top-color:#4cc2ff;} .snsnew .sns-slide .snsW03 .sns-text-wrap {border-top-color:#00c73c;} .snsnew .sns-slide .snsW04 .sns-text-wrap {border-top-color:#a22723;} .snsnew .sns-slide .sns-text-wrap:before {display:none;} .snsnew .sns-slide .sns-text-wrap strong {font-size:17px; font-size:1.7rem;} .snsnew .sns-slide .sns-text-wrap .text-wrap {width:100%; padding-left:0;} .snsnew .sns-slide .sns-text-wrap {text-align:center;} .snsnew .sns-slide .sns-text-wrap .text-wrap {padding-top:10px; text-align:left;} .snsnew .bx-wrapper {padding:0 28px;} .snsnew .sns-ico-wrap {top:31.5px; right:44px;} } @media (max-width: 768px){ .snsnews h3 { font-size:30px} .snsnews h3 span { padding-left:10px;} } @media (max-width: 640px){ .snsnews h3 { margin: 10px 0 10px;} .snsnews .sns-ico-wrap { position:relative; top:0px} .snsnews .bx-wrapper { padding: 30px 30px;} .snsnews .sns-slide .sns-text-wrap {text-align:left} } @media (max-width: 460px){ .main_sns_box { padding:0px 0px 0px;} } /* 메인슬라이더 기본*/ /* main-visual-slider */ .main-visual-slider { position: relative; } .main-visual-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .main-slider-navigation { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 1; } .main-visual-control { background-color: rgba( 0, 0, 0, 0.5); border-radius: 25px; display: inline-block; padding: 6px 15px 10px 30px; } .main-visual-control > a { padding-left: 10px; } .visual-control-container { display: inline-block; } .main-visual-control-nav li { margin: 0 3px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } .main-visual-control-paging li a { background: url(/resources/images/korean/main/main_visual_pager.png) no-repeat center; width: 20px; height:16px; display: block; cursor: pointer; text-indent: -9999px; } .main-visual-control-paging li a:hover, .main-visual-control-paging li a.main-visual-active { background-image: url(/resources/images/korean/main/main_visual_pager_hover.png); } .main-visual-control-paging li a.main-visual-active { cursor: default;} .main-visual-slider .fadeInDown {opacity:1; animation:fadeInDown 0.8s ease both 0.5s;} .main-visual-slider .fadeInRight {opacity:1; animation:fadeInRight 0.8s ease both 0.5s;} .main-visual-slider .fadeInLeft {opacity:1; animation:fadeInLeft 0.8s ease both 0.5s;} .main-visual-slider .bx-controls-direction a {display:block; top:0; width:135px; height:480px; margin-top:0;} .main-visual-slider .flex-direction-nav a {display: block; top:0; width:40px; height:77px; margin-top:0;} .main-visual-slider .flex-direction-nav a:before { content:""; background:url('/resources/images/korean/main/slide_btn_left.png') no-repeat left top; } .main-visual-slider .flex-direction-nav a.flex-next:before { content:""; background:url('/resources/images/korean/main/slide_btn_right.png') no-repeat;} .main-visual-slider .bx-prev {background:url('/resources/images/korean/main/slide_btn_left.png') no-repeat left top;} .main-visual-slider .bx-next {background:url('/resources/images/korean/main/slide_btn_right.png') no-repeat;} .main-visual-slider .bx-pager.container {position:absolute; right:0; bottom:30px; left:0; width:100%; text-align:center !important;} .main-visual-slider .bx-pager a span {width:0; height:0;} .main-visual-slider .bx-pager a {width:10px; height:10px; border-radius:50%;} .main-visual-slider .bx-pager a.active {background:#fff;} .main-visual-slider .slide-tit { position:absolute; bottom:75px; width:100%; vertical-align:bottom; font-size:1.8em; color:#fff; text-align: center; padding: 300px 135px 0 135px} @media (max-width: 1200px){ .main-visual-slider .slide-tit {position:relative; display:block; bottom:0; padding-top:490px; padding-bottom:30px; color:#555;} } @media screen and (min-width:1240px){ .main-visual-slider ul li a{text-shadow:0 0 10px rgba(0,0,0,1);} } @media all and (max-width: 767px) { /* main-visual-slider */ .main-slider-navigation { bottom: 15px; } .main-visual-slider .slides a { height: auto;/*height: 240px;*/ } .main-visual-slider .slides img { width: auto; height: auto;/* height: 100%;*/ } .main-visual-slider .slide-tit {padding:220px 16px 20px;} .mainvisual-wrap .not-mo{display:none !important} .mainvisual-wrap .only-mo{display:block !important} } /* 메인슬라이더 추가 */ .bx-viewport{height:auto !important} .mainvisual-wrap {position:relative; overflow: hidden;} .mainvisual-wrap ul {width:100%; position:absolute;/* display: inline-block;display:block;*/ } .mainvisual-wrap ul li {/* height:630px; */padding-bottom: 3.95%;} .mainvisual-wrap ul li a {position:absolute;/* display:block;*/opacity:0;bottom:0px;width:100%;/* padding: 320px 135px 0 135px; */color:#fff;text-align:center;height: 100%;vertical-align: bottom;box-sizing:border-box;} .mainvisual-wrap .slide-tit { display:none; /*display: inline-block; */font-size:40px; font-size:4.0rem;} .mainvisual-wrap ul li {display: inline-block;background:url('/resources/images/korean/main/visual.jpg') no-repeat center top;background-size: 100% auto;/*background-size:cover;*/} .mainvisual-wrap ul .slide01 {background-image:url('/resources/images/korean/main/visual.jpg');} .mainvisual-wrap ul .slide02 {background-image:url('/resources/images/korean/main/visual.jpg');} .mainvisual-wrap ul .slide03 {background-image:url('/resources/images/korean/main/visual.jpg');} .mainvisual-wrap .fadeInDown {opacity:1; animation:fadeInDown 0.8s ease both 0.5s;} .mainvisual-wrap .fadeInRight {opacity:1; animation:fadeInRight 0.8s ease both 0.5s;} .mainvisual-wrap .fadeInLeft {opacity:1; animation:fadeInLeft 0.8s ease both 0.5s;} .mainvisual-wrap .bx-wrapper .bx-controls-direction a {display:block; top:0%; width:150px; height:100%; margin-top:0;text-align:center; } .mainvisual-wrap .bx-wrapper .bx-prev {background:url('/resources/images/korean/main/slide_btn_left.png') no-repeat top;} .mainvisual-wrap .bx-wrapper .bx-next {background:url('/resources/images/korean/main/slide_btn_right.png') no-repeat;} .mainvisual-wrap .bx-pager.container {position:absolute; right:0; bottom:20px; left:0; width:100%; text-align:center !important;} .mainvisual-wrap .bx-pager a span {width:0; height:0;} .mainvisual-wrap .bx-pager a {width:15px; height:15px; border-radius:50%; margin:0 6px;} .mainvisual-wrap .bx-pager a.active {background:#fff;} /* bx-slider 버튼 추가*/ /* 2020-03-25 */ .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item {position: absolute; bottom: 37px; left: calc(50% + 20px); margin-left: 75px;} .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item a {display: block; } .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item .bx-start{position: absolute;top: -10px; width: 8px;height: 10px;background:url('/resources/images/korean/main/main_start_icon.png') no-repeat;background-size: 8px 10px; /*z-index: 110*/} .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item .bx-stop{position: absolute;top: -9px; right: -25px; width: 7px;height: 9px;background:url('/resources/images/korean/main/main_pause_icon.png') no-repeat;background-size: 7px 9px; /*z-index: 100*/} .mainTit01 {padding:48px 0 0; font-size:40px; font-size:4.0rem; font-weight:300; text-align:center;} @media screen and (min-width:300px){ .mainvisual-wrap ul li a{text-shadow:0 0 10px rgba(0,0,0,1);} } @-webkit-keyframes fromBottom { 0% {opacity:0; -webkit-transform:translateY(60px);} 100% {opacity:1; -webkit-transform:translateY(0);} } @keyframes fromBottom { 0% {opacity:0; transform:translateY(60px);} 100% {opacity:1; transform:translateY(0);} } @-webkit-keyframes fadeInDown { from {opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @keyframes fadeInDown { from {opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @-webkit-keyframes fadeInRight { from {opacity: 0; -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 0, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @keyframes fadeInRight { from {opacity: 0; -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 0, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @-webkit-keyframes fadeInLeft { from {opacity: 0; -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @keyframes fadeInLeft { from {opacity: 0; -webkit-transform: translate3d(-3%, 0, 0); transform: translate3d(-3%, 0, 0);} to {opacity: 1; -webkit-transform: none; transform: none;} } @media (max-width: 1300px){ /* .mainvisual-wrap .bx-viewport { height:100% !important; background:#896e5b;} */ .mainvisual-wrap .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { width:100% !important;top:unset; bottom:10px;} /*.mainvisual-wrap ul li {height:auto; background-size:auto 460px;}*/ .mainvisual-wrap ul li {height:auto;background-size: 100% auto;display: inline-block; padding-bottom:3.65%} .mainvisual-wrap ul li a {position:relative; display: inline-block;/*display:block; bottom:0; padding-top:490px; padding-bottom:30px;*/ color:#555;} .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item { bottom: 26px; left:calc(50% + 10px)} .mainvisual-wrap .slide-tit {font-size:25px; font-size:2.5rem;} } @media (max-width:1000px){ .mainvisual-wrap ul li{padding-bottom:3.55%;} } @media (max-width: 829px){ .mainvisual-wrap .bx-wrapper .bx-controls-auto .bx-controls-auto-item { bottom: 156px;} } @media (max-width:767px){ .mainvisual-wrap ul li a {padding:220px 16px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /*.mainvisual-wrap ul li {background-size:auto 350px;}*/ .mainvisual-wrap ul li {background-size:cover; padding-bottom:0; height:420px;} .mainvisual-wrap .slide-tit {font-size:18px; font-size:1.8rem;} .mainvisual-wrap .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{bottom:30px; } .mainvisual-wrap .bx-pager a {margin:0 5px;} } /* 팝업추가 */ .popup-all-warp { position:relative; margin:0; padding:0; width:500px; height:500px; background:url(https://www.hoseo.ac.kr/resources/images/korean/popup/2023/pop_susi_img01.jpg)} .popup-div-con { position: absolute; height:auto; bottom:0px; float:right } .popup-div-con ul { } .popup-div-con ul li { width:100%; float:left; padding:5px 0; text-align:right; padding-right:10px} .all_warp2401 { position:relative; margin:0; padding:0; width:400px; height:400px; background:url(https://www.hoseo.ac.kr/resources/images/korean/popup/2409_ipsi_pop01.jpg)} .div-con2401 { position: absolute; height:200px; bottom:50px; left:5%;} .div-con2401 ul { } .div-con2401 ul li { width:100%; float:left; padding:5px 0} @media all and (max-width: 700px) { .popup-all-warp { width:350px; height:350px !important; background-size: cover;} .popup-div-con { position: relative; /*top:110px;*/ padding-top:110px; float:right } .popup-div-con ul li img { width:50%;} /*#popup_1 div{ position:relative; width:350px!important;} #popup_1 div .all_warp2401 { width:350px; height:360px; background-size: cover;} #popup_1 div .div-con2401 { position: absolute; height:150px; bottom:60px;} #popup_1 div .div-con2401 ul li img { width:60%;} #popup_1 div { position:relative; width:350px!important; height:auto !important;} .all_warp2401 { position:relative; width:350px !important; height:350px !important; background-size: cover; bottom: 20px;} .div-con2401 { position: absolute; height:150px !important; bottom:10px;} .div-con2401 ul li img { width:60%;} .all_warp2401 { width:350px; height:350px; background-size: cover;} .div-con2401 ul li img { width:100%;} .all_warp2401 .div-con2401 ul li img { width:100%;}*/ }