.logo_circle {position:relative; left:0; right:0; margin:auto; border-radius:100%; background:#f8971d;} .logo_circle:after {content:""; display:block; padding-top:100%;} .logo_circle img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); height:71.047%;z-index:3;} .logo_circle .bg_cir {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#053607; border-radius:100%;} .logo_circle .bg_cir:after {content:""; display:block; padding-top:100%;} .logo_circle .bg_cir.bg1 {width:95%;} .logo_circle .bg_cir.bg2 {width:85%; z-index:1;} .logo_circle .c_cir {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#f8971d; border-radius:100%;width:93%;} .logo_circle .c_cir:after {content:""; display:block; padding-top:100%;} #wrapper {position:relative; width:100%; height:auto; min-height:100%; -webkit-overflow-scrolling:touch; } #wrapper header {position:fixed; top:0; left:0; width:100%; z-index:101;transform:translateY(0%); transition: all .3s; } #wrapper header.hid {transform:translateY(-100%);} #wrapper header.open { } #wrapper header .hd_bg {position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-position:center center !important; background-size:cover !important; z-index: 2; transition:all .5s; background:url(/images/bg_fire.jpg) no-repeat; } #wrapper header .hd_bg:after {content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.8);} /* #wrapper header .hd_bg.b_1 { background-color: red !important; } #wrapper header .hd_bg.b_2 { background-color: brown !important; } #wrapper header .hd_bg.b_3 { background-color: #693e3e !important; } #wrapper header .hd_bg.b_4 { background-color: #3576a1 !important; } #wrapper header .hd_bg.b_5 { background-color: orange !important; } */ #wrapper header .hd_wrp {position:relative; } #wrapper header .top_pos {position:relative; max-width:var(--default_wd); width:100%; height:var(--default_nav); left:0; right:0; margin:auto; font-size:0; z-index: 3; transition:all .3s; } #wrapper header .top_pos:hover {/*height:300px;*/} #wrapper header .top_pos .logo {position: absolute; left: 0; top:24px; font-size:0; z-index: 1; cursor:pointer; width:300px; font-size:0;} #wrapper header .top_pos .logo .logo_circle {display:inline-block; vertical-align:middle;width:100px; background:transparent;} #wrapper header .top_pos .logo .logo_circle .bg_cir {background:transparent;} #wrapper header .top_pos .logo .logo_circle .c_cir {background:transparent;} #wrapper header .top_pos .logo .logo_txt {display:inline-block; vertical-align:middle; position: relative; font-size:22px; font-weight:800; color:#fec007; text-align:center; line-height:100%; padding:12px 0 0 5px; letter-spacing:0.05em; text-align:left;} #wrapper header .top_pos .logo .logo_txt span {display:inline-block; font-size:13px; font-weight:600; color:#f8971d; line-height:100%; padding:7px 0 0 0; } /*#wrapper header .top_pos .menu {position:absolute; top:50%; left:350px; width:calc(100% - 600px); height: 80px; transition:all .3s; padding:0; transform:translateY(-50%); }*/ #wrapper header .top_pos .menu {position:absolute; top:50%; left:550px; width:calc(100% - 800px); height: 80px; transition:all .3s; padding:0; transform:translateY(-50%); } #wrapper header button {position:absolute; top:0; left:0; width:80px; border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s; z-index:1; display:none;} #wrapper header button:after {content:""; display: block; padding-top:100%;} #wrapper header button i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff;transition:all .3s; } #wrapper header .top_pos ul.sns_bnr {position:absolute; top:50%; right:20px; text-align:right; transform:translateY(-50%);white-space:nowrap;} #wrapper header .top_pos ul.sns_bnr li {display:inline-block; vertical-align:middle; position:relative; width:65px; margin-left:30px;} #wrapper header .top_pos ul.sns_bnr li:after {content:""; display:block; padding-top:100%; } #wrapper header .top_pos ul.sns_bnr li.kakao {} #wrapper header .top_pos ul.sns_bnr li.facebook {} #wrapper header .top_pos ul.sns_bnr li i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff; font-size: 30px;width: 40px;height: 40px;text-align: center;background: #ddd;line-height: 40px;border-radius: 7px;} #wrapper header .top_pos ul.sns_bnr li.kakao i {color:#000; background: #ffe700;} #wrapper header .top_pos ul.sns_bnr li.facebook i {background: #004fe7; } #wrapper header .top_pos ul.sns_bnr li img {display:none;} #wrapper header .top_pos ul.sns_bnr li a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; font-size:0;} #wrapper header .top_pos ul.sns_bnr li:before {content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); line-height:100%; color:rgba(255,255,255,0.6); font-size:11px; transition:all .3s; } #wrapper header .top_pos ul.sns_bnr li:hover:before {color:#fff; } #wrapper header .top_pos ul.sns_bnr li.kakao:before {content:"@소초스톤";} #wrapper header .top_pos ul.sns_bnr li.facebook:before {content:"Facebook";} #wrapper .contents {position:relative; min-height:100%; height:auto; padding: var(--default_nav) 0 var(--btm_pad) 0; transition:all .3s; font-size:15px; background: #fff; transition: all .3s; } #wrapper .contents .nav_sub_area {position:relative; width:100%; left:0; right:0; margin:50px auto 0 auto; padding:0; transition:all .3s; overflow:hidden; z-index:10;} #wrapper .contents .q_area {position:relative; max-width:var(--default_wd); width:100%; left:0; right:0; margin:0 auto; padding:0 28px; font-size:0; border:0px solid #eee; } #wrapper .contents .q_area:before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300%; height:1px; z-index:1; border-top:1px dashed #eee;} #wrapper .contents .q_area > i {display:inline-block; vertical-align:middle; font-size: 18px; color:#000; background: #fff; position: relative; z-index: 1;} #wrapper .contents .q_area > img {display:none;} #wrapper .contents .plus_area {position:absolute; top:90px; right:0; width:50%; height:60px; background:#f4f4f4;border-radius: 35px 0 0 35px; z-index: 100;/*-webkit-backdrop-filter: blur(50px); backdrop-filter: blur(5px);*/} #wrapper .contents .pa_wd {position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width:calc(var(--default_wd)/2); width:100%;} #wrapper .contents .pa_wd .lastest {position:relative;/* padding-right:70px;*/} #wrapper .contents .pa_wd .kakao {position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width:30px; font-size:0; background:#ffe500; text-align:left; border-radius:100%; display:none;} #wrapper .contents .pa_wd .kakao:after {content:""; display:block; padding-top:100%;} #wrapper .contents .pa_wd .kakao i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; color:#000;} #wrapper .contents .pa_wd .kakao span {display:inline-block; vertical-align:middle; font-size:12px; color:#333; padding-left:10px; display:none;} #wrapper .contents .pa_wd .kakao_channel a {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid red; opacity:0;} #wrapper .contents .pa_wd .kakao_channel a img {position:absolute; top:0; left:0; width:100%; height:100%;} #wrapper footer {position:absolute; left: 0;bottom: 0; width:100%; height:var(--btm_pad); background:#f4f4f4; transition: all .3s; z-index:2; overflow: hidden;} #wrapper footer ul.color {position:absolute; width:100%; bottom:0; left:0; display:flex; z-index:1;} #wrapper footer ul.color li {flex:1; height:3px;} #wrapper footer ul.color li.c1 {background:#000;} #wrapper footer ul.color li.c2 {background:#fc9103;} #wrapper footer ul.color li.c3 {background:#056faf;} #wrapper footer ul.color li.c4 {background:#4bad26;} #wrapper footer ul.color li.c5 {background:#fc0304;} #wrapper footer ul.color li.c6 {background:#98419c;} .content_hdbx {position:fixed; top:0; left:0; width:100%; height:70px; text-align:center; border-bottom:0px solid #eee; background:#003e67; z-index:1001;transition:all .2s;transform: translateY(-100%);} .content_hdbx.move {transition:all .2s;transform: translateY(0%);} .content_hdbx .cwb_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:var(--default_wd); width:100%; padding:0 25px; text-align:left; transition:all .5s;} .content_hdbx.move .cwb_pos {transition:all .5s;} .content_hdbx .title_box {display:inline-block; width:100%; position:relative;} .content_hdbx h2 {position:relative; font-family:var(--neo); font-size:18px; line-height:120%; color:#fff;} .content_hdbx h2 span {display:inline-block; vertical-align:middle;} .content_hdbx h2 .c1 {font-weight:600; color:#eee; padding-right:5px; } .content_hdbx h2 .c2 {font-weight:800;} .content_hdbx .location_box {position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:0; line-height:100%;} .content_hdbx .location_box i, .content_hdbx .location_box a {display:inline-block; vertical-align:middle; transition:all .2s; line-height:100%;} .content_hdbx .location_box i {font-size:13px; color:rgba(255,255,255,0.7); } .content_hdbx .location_box a {font-size:13px; color:rgba(255,255,255,0.7); font-family:var(--neo); font-weight:bold;} .content_hdbx .location_box a:hover {color:#fff; transition:all .2s;} .content_hdbx .location_box a.last {color:yellow} .content_hdbx .location_box a:first-child {color:#fff; font-weight:bold;} .content_hdbx .location_box i {display:inline-block; vertical-align:middle; padding:0 5px; font-size:13px;} .sub_nv_ar {position:relative; border-bottom:1px solid var(--default_sel_line); background:#fff; display:none; width:100%; z-index:11;} .sub_nv_ar nav {position:relative; left:0; right:0; max-width:var(--default_wd); width:100%; height:var(--default_sel_nav); margin:auto;} .sub_nv_ar nav > ul {position:relative; font-size:0;border-left:1px solid var(--default_sel_line);} .sub_nv_ar nav > ul > li {display:inline-block; vertical-align:middle; position:relative; width:calc(50% - (var(--default_sel_nav)/2)); height:100%; border-right:1px solid var(--default_sel_line); background:#fff;} .sub_nv_ar nav > ul > li.home {width:var(--default_sel_nav); position:relative; border-right:1px solid var(--default_sel_line);} .sub_nv_ar nav > ul > li.home:after {content:""; display:block; padding-top:100%; } .sub_nv_ar nav > ul > li > a {position:absolute; top:0; left:0; width:100%; height:100%; font-size:15px; cursor:pointer;} .sub_nv_ar nav > ul > li > a > span {position:absolute; top:50%; left:0; width:100%; padding:0 35px 0 20px; text-align:left; transform:translateY(-50%); line-height:120%; font-size:13px; color:rgba(0,0,0,0.8); transition:all .2s; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-weight:bold;} .sub_nv_ar nav > ul > li > a > i {position:absolute; top:50%; line-height:100%; font-size:25px; color:#383838; transform:translateY(-50%);} .sub_nv_ar nav > ul > li > a > i.xi-home-o {left:50%; transform:translate(-50%, -50%);} .sub_nv_ar nav > ul > li > a > i.xi-angle-down-min {right:10px;} .sub_nv_ar nav > ul > li .list {position:absolute; top:var(--default_sel_nav); left:-1; ; width:calc(100% + 2px); z-index:10;} .sub_nv_ar nav > ul > li .list.l1 {width:calc(100% + 2px);} .sub_nv_ar nav > ul > li .list.l2 {width:calc(100% + 1px);} .sub_nv_ar .empty {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fafafa; z-index: 1;} ul.sub_sel_cate {position:relative; top:0; left:0; width:100%; border:1px solid var(--default_sel_line); border-width:0 1px 1px 1px; background:#fafafa;} ul.sub_sel_cate > li {display:inline-block; letter-spacing: 0em; width: 100% !important; font-family:var(--neo) ; border-top: 1px solid var(--default_sel_line);} ul.sub_sel_cate > li > a {position:relative !important; font-size:13px; display:block; padding:15px 20px; color:#333;} ul.sub_sel_cate > li > a.on {color:red; font-weight:bold;} ul.sub_sel_cate.sub > li > a.on {color:#2979df; font-weight:bold;} ul.sub_sel_cate > li > ul.depth3 {position:relative; padding:0px 20px 25px 20px; border-top:1px dashed var(--default_sel_line);} ul.sub_sel_cate > li > ul.depth3 li {display:inline-block; letter-spacing: 0em; width: 100% !important; font-family: var(--neo); border:0;} ul.sub_sel_cate > li > ul.depth3 li > a {position:relative !important; font-size:15px; display:block; color:#333;} ul.sub_sel_cate > li > ul.depth3 li > a.on {color:red;} ul.sub_sel_cate > li > ul.depth3 li > a:before {content:"ㆍ"; } .title_area {position:relative; z-index:10; } .title_area .ta_wrap {position:relative; left: 0; right: 0; max-width: 1300px; width: calc(100% - 50px); margin: auto; padding-top:80px;} .title_area .ta_wrap:before, .title_area .ta_wrap:after {content:""; position:absolute; bottom:0; width: 7px; height: 7px; border:1px solid #c9c9c9; background: #fff; border-radius: 100%; transform: translateY(50%); display:none;} .title_area .ta_wrap:before {left: 0;} .title_area .ta_wrap:after {right: 0;} .title_area .title_box {position:relative; padding:0 25px; text-align:center; z-index:1;} .title_area .title_box h2 {position:relative; font-family:var(--neo); line-height:120%; color:#000; padding:0 0 0 0px;} .title_area .title_box h2 span {display:inline-block; vertical-align:middle; line-height:110%} .title_area .title_box h2 .c1 {/*font-family:var(--neo); font-weight:normal;*/ font-weight:500; color:#555; letter-spacing:-0.05em; width:100%; font-size:15px; padding:0 0 7px 3px; display:none;} .title_area .title_box h2 .c2 {font-weight:800; font-size:40px;} .title_area ul.color {position:absolute; top:50%; left:0; transform:translateY(-50%); width:14px; font-size:0; line-height:100%;} .title_area ul.color li {display:inline-block; vertical-align:middle; width:calc(50% - 4px); margin:2px; border-radius:100%; line-height:100%;} .title_area ul.color li:after {content:""; display:block; padding-top:100%;} .title_area ul.color li.cr1 {background:#000;} .title_area ul.color li.cr2 {background:#fc9103;} .title_area ul.color li.cr3 {background:#056faf;} .title_area ul.color li.cr4 {background:#4bad26;} .title_area ul.color li.cr5 {background:#fc0304;} .title_area ul.color li.cr6 {background:#98419c;} .title_area .location_set {position:absolute; left:0; right:0; max-width:var(--default_wd); margin:auto; bottom:0px; padding: 0 27px; font-size:0; line-height:100%; text-align:left;} .title_area .url {display:inline-block; width:100%; font-size:9px; line-height:100%; padding:0 0 8px 0; color:#ccc; letter-spacing:0.05em; display:none;} .title_area .location_box {display:inline-block; white-space:nowrap; padding: 13px 0 2px 2px; font-size:0; line-height:100%; display:none;} .title_area .location_box > i, .title_area .location_box a {display:inline-block; vertical-align:middle; transition:all .2s; line-height:100%;} .title_area .location_box > i {font-size:12px; color:rgba(0,0,0,0.7); } .title_area .location_box a {font-size:12px; color:rgba(0,0,0,0.7); font-family:var(--neo); } .title_area .location_box a:hover {color:black; transition:all .2s;} .title_area .location_box a.last {color:#000; font-weight:600;} .title_area .location_box a:first-child {color:black; } .title_area .location_box a i {font-size:14px;} .title_area .location_box > i {display:inline-block; vertical-align:middle; padding:0 5px; font-size:10px;} @media screen and (max-width: 1160px){ #wrapper {min-height:auto;} #wrapper header {background:#fff; height:80px; border-bottom:0px solid #eee;} #wrapper header .hd_bg {display:none;} #wrapper header .top_pos, #wrapper header .top_pos:hover {height:100%;} #wrapper header .top_pos .logo {transform: translate(-50%, -50%); top:50%; left: 50%; width:auto; height:100%; text-align:center;} #wrapper header .top_pos .logo img {position:absolute; top:43%; left:50%; transform:translate(-50%, -50%); width:auto; height:100%;} #wrapper header .top_pos .logo .logo_circle {width:80px;} #wrapper header .top_pos .logo .logo_circle img {width:auto; height:60%;} #wrapper header .top_pos .logo .logo_txt {display:none;} #wrapper header .top_pos .menu {display:none;} #wrapper header button {position:fixed; top:0; left:0; display:inline-block;} #wrapper header button i {color:#000;} #wrapper header .top_pos ul.sns_bnr {right:0px;} #wrapper header .top_pos ul.sns_bnr li {width:80px;margin-left:0px;} #wrapper header .top_pos ul.sns_bnr li i {font-size:35px; color:#000; background: transparent !important;} #wrapper header .top_pos ul.sns_bnr li.kakao i {color:#1c1800; } #wrapper header .top_pos ul.sns_bnr li.facebook i {color:#004ec7; } #wrapper header .top_pos ul.sns_bnr li:before {display:none;} #wrapper .contents {padding: 80px 0 var(--btm_pad) 0;} #wrapper .contents .nav_sub_area {display:none;} #wrapper .contents .plus_area {position:fixed; top:0; width:80px; height:80px; background:none;border-radius: 0; transform:translateY(0); transition: all .3s; z-index:102;} #wrapper .contents .plus_area.hid {transform:translateY(-100%);} #wrapper .contents .pa_wd {left:50%; transform: translate(-50%, -50%); max-width:auto; width:auto;} #wrapper .contents .pa_wd .lastest {display:none;} #wrapper .contents .pa_wd .kakao {left:50%; right:initial; transform: translate(-50%, -50%); width:35px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} .sub_nv_ar {} .sub_nv_ar nav > ul {border:0;} .sub_nv_ar nav > ul > li.navi_sub_m2_box {border:0;} .sub_nv_ar nav > ul > li.navi_sub_m2_box ul.sub_sel_cate {border-width:0 0px 1px 1px;} .sub_nv_ar nav > ul > li > a > span { padding:0 30px 0 15px; font-size:12px;} .sub_nv_ar nav > ul > li > a > i {font-size:16px;} .sub_nv_ar nav > ul > li > a > i.xi-angle-down-min {right:8px;} .title_area .ta_wrap {width: 100%; height: auto; border:0; padding-top:0;} .title_area .ta_wrap:before, .title_area .ta_wrap:after {display:none;} .title_area .title_box {padding:35px 35px 0 35px; position:relative; bottom:initial;} .title_area .title_box h2 .c1 {display:none} .title_area .title_box h2 .c2 {} .title_area .location_box {display:none;} } @media screen and (max-width: 650px){ #wrapper header {height:55px; } #wrapper header .top_pos .logo .logo_circle {width:55px;} #wrapper header button {width:55px; } #wrapper header button i {font-size:20px;} #wrapper header .top_pos ul.sns_bnr {right:10px;} #wrapper header .top_pos ul.sns_bnr li {width:30px;} #wrapper header .top_pos ul.sns_bnr li i {font-size:20px; color:#000; } #wrapper .contents {padding: 55px 0 var(--btm_pad) 0; } #wrapper .contents .nav_sub_area {padding:25px 22px 0 22px;} #wrapper .contents .plus_area { width:55px; height:55px; } #wrapper .contents .pa_wd .kakao {width:25px; } #wrapper .contents .pa_wd .kakao i {font-size:18px;} #wrapper footer {/*position:relative; height:auto;*/} .content_hdbx {height:55px;} .content_hdbx .cwb_pos {padding:0 20px;} .content_hdbx h2 {font-size:14px;} .content_hdbx .location_box {display:none;} ul.sub_sel_cate > li > a {font-size:11px; padding:10px 15px;} .title_area .title_box {margin:30px auto 0 auto; padding:0 25px;} .title_area .title_box h2 {text-align:left;} .title_area .title_box h2 .c2 {font-size:20px;} } /* 하단정보 */ .btm_info {position:relative; margin:0 auto; max-width:1300px; width:100%; padding:50px 50px; font-size:0; } .btm_info .logo {position: absolute; left: 0; top:0; font-size:0; z-index: 1; cursor:pointer; padding:20px; background:#053607; border-radius:10px;} .btm_info .logo:before, .btm_info .logo:after {content:""; position: absolute; display:none;} .btm_info .logo:before {top:0; left:0; border-top:10px solid #f4f4f4; border-right:10px solid transparent;} .btm_info .logo:after {bottom:0; right:0; border-bottom:10px solid #f4f4f4; border-left:10px solid transparent;} .btm_info .logo .logo_circle {width:80px;} .btm_info .logo .logo_txt {position: relative; font-size:16px; font-weight:800; color:#fec007; text-align:center; line-height:100%; padding:10px 0 0 0; letter-spacing:0.05em;} .btm_info .logo .logo_txt span {display:inline-block; font-size:9px; font-weight:600; color:#f8971d; line-height:100%; padding:5px 0 0 0; letter-spacing:0em;} .btm_info .info_box {display:inline-block; vertical-align:top; width:100%; text-align:left; padding:20px 0 0 200px; position:relative; z-index:1;} .btm_info .detail {display:inline-block; vertical-align:top; width:100%; font-size:0;} .btm_info .detail span {display:inline-block; vertical-align:middle; padding:0px 10px 0px 0; font-size:12px; color:#333; line-height:150%;font-family: var(--neo); font-weight: 600;} .btm_info .detail span.cmp {width:100%; padding:0px 10px 10px 0; font-size:17px; color:#fff; font-weight: 700;} .btm_info .detail span.cmp img {width:35px; display:inline-block; vertical-align:middle; padding-right:5px;} .btm_info .detail span a {color:#333;} .btm_info .detail span i {display:inline-block; padding-right:5px; vertical-align:middle; color:#777;} .btm_info .detail span em {display:inline-block; padding-right:5px; font-style:normal; color:#777; font-weight: 300;} .btm_info p {display:inline-block; width:100%; font-size:11px; color:#999; padding-top:7px;} .btm_info .big_typo {position: absolute; right: -90px; bottom:-80px; font-size:170px; font-weight:normal; font-family:var(--GB); line-height:100%; color:#fff; opacity:0.5;} .btm_info .copy {display:inline-block; width:100%; font-size:11px; color:#555; padding-top:20px;} .btm_info .copy span {color:#000; display:inline-block; padding:0 10px;} @media screen and (max-width: 1160px){ .btm_nav {display:none;} } @media screen and (max-width: 800px){ .btm_info .info_box {padding:0 0 0 140px; } .btm_info .logo {padding:10px;} .btm_info .logo .logo_circle {width:50px;} .btm_info .logo .logo_txt {font-size:12px; } .btm_info .logo .logo_txt span {font-size:8px; } } @media screen and (max-width: 650px){ .btm_info {padding:30px;} .btm_info .info_box {padding:0 0 0 0px; } .btm_info .logo {padding:0 0 15px 0; position:relative; background:transparent; text-align:left;} .btm_info .logo .logo_circle {background:transparent; margin:0;display:inline-block; vertical-align:middle; display:none;} .btm_info .logo .logo_txt {font-size:15px; display:inline-block; vertical-align:middle; width:auto;} .btm_info .logo .logo_txt span {display:none;} .btm_info .detail span {font-size:10px; line-height:100%;} .btm_info p {font-size:9px; line-height:150%;} .btm_info .copy {font-size:9px;padding-top:15px;} } /**/ .lastest_box {position:relative; background:#fff6d3; border-bottom:0px solid #eee;} .lastest_box .lb_pos {position:relative; left:0; right:0; margin:auto; max-width:1260px; width:100%; height:70px; font-size:0; padding:0 20px;} .lastest_box .info_bx {position:absolute; top:0; left:0; max-width:400px; width:100%; height:100%; } .lastest_box .info_bx h2 {position:absolute; top:50%; left:30; width:35px; transform:translateY(-50%); line-height:100%; font-size:10px; font-weight:500; background:#333; color:#fff; text-align:center; padding:4px 0; border-radius:30px;} .lastest_box .info_bx .latest_aca_list {position: relative;height: 100%; padding-left:30px;overflow: hidden;} .lastest_box .info_bx .latest_aca_list ul.sub_latest {position: absolute;top: 0;left: 0;right: 0; width: 100%; padding-left:80px;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li {height: 70px;font-size: 0; text-align: left; width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li h3, .lastest_box .info_bx .latest_aca_list ul.sub_latest li span {display: inline-block; vertical-align: middle; height: 70px;line-height: 70px;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li h3 {font-size: 12px; color: #000; font-weight: 600; width:calc(100% - 75px);text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li span {font-size: 11px; color: #333; font-weight: 500; width:75px;} @media screen and (max-width: 650px){ .lastest_box .lb_pos {height:50px; } .lastest_box .info_bx h2 {left:15; width:35px; } .lastest_box .info_bx .latest_aca_list ul.sub_latest {padding-left:65px;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li {height: 50px;} .lastest_box .info_bx .latest_aca_list ul.sub_latest li h3, .lastest_box .info_bx .latest_aca_list ul.sub_latest li span {height: 50px;line-height: 50px;} }