*{word-break:keep-all} /* 줄넘김 단어단위로 설정 keep-all*/ /* 상단에 60px 숨은 페이지가 있음*/ /*area_0*/ #o #area_0{ width:100%; overflow:hidden; height:1866px; background-color:#242223; padding-top:60px;} #o #area_0 .img_layout{ width:970px; height:1268px; position:relative; -background-color:red} #o #area_0 .img_layout .img_layout_01, #o #area_0 .img_layout .img_layout_02, #o #area_0 .img_layout .img_layout_03, #o #area_0 .img_layout .img_layout_04, #o #area_0 .img_layout .img_layout_05, #o #area_0 .img_layout .img_layout_06{ display:block; position:absolute; top:98px; left:0px; } #o #area_0 .img_layout .img_layout_02, #o #area_0 .img_layout .img_layout_03, #o #area_0 .img_layout .img_layout_04, #o #area_0 .img_layout .img_layout_05, #o #area_0 .img_layout .img_layout_06{ left:147px; } #o #area_0 article{ width:970px; position:relative; clear:both; top:-193px; } #o #area_0 article .area_0_sbc{display:block; position:relative; padding-bottom:15px; padding-bottom:30px;} #o #area_0 article .text{ display:block; font-size:14px; width:970px; font-weight:400; line-height:30px; padding-bottom:30px; color:#bebebe} #o #area_0 article .spec_dv{ display: inline-block; position:relative; padding:0 15px;} #o #area_0 article .area_0_award{display:block} #o #area_0 article .area_0_sbc{margin-top:250px;} #o #area_0 article .text{ top:-200px;} #o #area_0 .curtain_area{ opacity:1; position:absolute; display:block; height:2000px; width:100%; overflow:hidden; top:0px; left:0px; background-color:rgba(0,0,0,0.8)} /*area_1 */ #o #area_1{height:740px; width:100%; overflow:hidden; background-color:#0f0f0f } #o #area_1 .img_layout{ position:relative; display:block; width:970px; height:749px; top:0px; } #o #area_1 .img_layout .img_layout_10{ display:block; position:absolute; left:-475px; top:0px;} #o #area_1 article{width:970px; height:265px; top:-572px; } #o #area_1 .title, #o #area_1 .text{ text-align:left; left:495px; } #o #area_1 .title{ top:0px; color:#ffb975; font-weight:400; font-size:38px; line-height:50px; font-weight:100; font-family: 'Spoqa Han Sans', 'Sans-serif'; letter-spacing:-1px;} #o #area_1 .title b{ color:#fff; font-weight:600; font-size:41px; letter-spacing:0px; line-height:60px; font-family: 'Lato', sans-serif; } #o #area_1 .text { top:160px; color:#fff; word-break: keep-all} /*area_2*/ #o #area_2{height:1022px; width:100%; overflow:hidden; background-color:#001f2e } #o #area_2 .img_layout{ position:relative; display:block; width:970px; height:466px; top:0px; } #o #area_2 .img_layout .img_layout_20{ display:block; position:absolute; left:-475px; top:0px;} #o #area_2 article{ width:970px; position:relative} #o #area_2 article .sign{ display:block; position:absolute; top:0px; width:206px; color:#cacaff; font-size:14px; font-weight:600; line-height:40px; border:4px solid #565496; border-radius:30px; font-family: 'Lato', sans-serif; } #o #area_2 article .title, #o #area_2 article .text{ color:#e6d5e0; position:absolute} #o #area_2 article .text_area_21{ left:35px} #o #area_2 article .text_area_22{left:258px} #o #area_2 article .text_area_23{left:482px} #o #area_2 article .text_area_24{left:705px} #o #area_2 article .text_area_25{ top:126px; left:37px; } #o #area_2 article .text_area_26{top:206px; left:37px; } #o #area_2 article .text_area_27{top:126px; left:485px; } #o #area_2 article .text_area_28{top:206px; left:485px; } #o #area_2 article .text_area_25, #o #area_2 article .text_area_26, #o #area_2 article .text_area_27, #o #area_2 article .text_area_28{ width:440px; text-align:left} /*area_3 */ #o #area_3{height:1680px; background-color:#fff } #o #area_3 .img_layout{ width:970px; height:1680px; } #o #area_3 .img_layout .img_layout_30{ display:block; position:absolute; top:150px; left:685px;} #o #area_3 article{width:896px; top:-1468px; } #o #area_3 article .sign, #o #area_3 article .title, #o #area_3 article .text{ left:0px; width:970px; text-align:left; position:absolute; display:block; } #o #area_3 article .title{ width:548px; font-weight:600 } #o #area_3 article .text{ width:590px} #o #area_3 article .text_area_31{ top:0px;} #o #area_3 article .text_area_32{top:112px;} #o #area_3 article .text_area_33{top:187px;} #o #area_3 article .text_area_34{top:508px;} #o #area_3 article .text_area_35{top:620px;} #o #area_3 article .text_area_36{top:695px;} #o #area_3 article .text_area_37{top:874px;} #o #area_3 article .text_area_38{top:981px;} #o #area_3 article .text_area_39{top:1056px;} #o #area_4{height:1440px; background-color:#2b2b2b; } #o #area_4>article{ position:relative; width:970px; height:250px; margin-top:176px; -background-color:red} #o #area_4 article .title, #o #area_4 article .text{ text-align:center; width:970px; } #o #area_4 article .title{ color:#d0786c;} #o #area_4 article .title b{ font-size:30px; line-height:46px; font-weight:100; letter-spacing:-2px; } #o #area_4 article .text{ color:#dddddd; top:106px; } #o #area_4 .graph_area.grar_bt1{} #o #area_4 .graph_area.grar_bt2{} #o #area_4 .grar_bt1{display:block;} #o #area_4 .grar_bt2{display:none;} #o #area_4 .graph_area{ width:970px; position:relative; height:800px; -background-color:yellow} #o #area_4 .graph_area li{ display:block; position:relative; float:left; width:422px; height:398px; -background-color:red} #o #area_4 .graph_area li.graph_a{ margin-left:32px; margin-bottom:40px;} #o #area_4 .graph_area li.graph_b{ margin-left:62px; margin-bottom:40px;} #o #area_4 .graph_area li.graph_c{ margin-left:32px; margin-bottom:60px;} #o #area_4 .graph_area li.graph_d{ margin-left:62px; margin-bottom:60px;} #o #area_4 .graph_area li .grp_title, #o #area_4 .graph_area li .grp_text{ width:100%; display:block; position:relative; text-align:left; } #o #area_4 .graph_area li .grp_img{ display:block; width:100%; position:relative; } #o #area_4 .graph_area li .grp_title{color:#d5a12b; font-size:16px; font-weight:400; line-height:40px; height:40px; font-family: 'Lato', sans-serif; } #o #area_4 .graph_area li .grp_text{ color:#d5d5d5; font-size:14px; font-weight:400; line-height:24px; height:100px;} #o #area_4 .graph_area li .grp_img{} #o #area_4 .graph_area li .grp_img .grp_img_bg{} #o #area_4 .graph_area li .grp_img .grp_img_bar{ display:block; position:absolute; } #o #area_4 .graph_area li .grp_img .grp_img_text{display:block; position:absolute;top:87px; font-size:11px; font-weight:400; line-height:20px; height:20px; font-family: 'Lato', sans-serif; } #o #area_4 .graph_area li.graph_a .grp_img_bar{ top:81px; left:34px; height:33px; background-color:#e04000; } #o #area_4 .graph_area li.graph_b .grp_img_bar{ top:81px; left:34px; height:33px; background-color:#e04000; } #o #area_4 .graph_area li.graph_c .grp_img_bar{ top:81px; left:34px; height:33px; background-color:#09d9d1; } #o #area_4 .grar_bt1 li.graph_a .grp_img_bar{ width:364px; width:0px; } #o #area_4 .grar_bt1 li.graph_b .grp_img_bar{ width:343px; width:0px; } #o #area_4 .grar_bt1 li.graph_c .grp_img_bar{ width:4px; width:0px; } #o #area_4 .grar_bt1 li.graph_a .grp_img_text, #o #area_4 .grar_bt1 li.graph_b .grp_img_text, #o #area_4 .grar_bt1 li.graph_c .grp_img_text{ opacity:0; } #o #area_4 .grar_bt2 li.graph_a .grp_img_bar{ width:364px; } #o #area_4 .grar_bt2 li.graph_b .grp_img_bar{ width:343px; } #o #area_4 .grar_bt2 li.graph_c .grp_img_bar{ width:4px; } #o #area_4 .graph_area li.graph_a .grp_img_text{ color:#000; left:350px;} #o #area_4 .graph_area li.graph_b .grp_img_text{ color:#000; left:324px;} #o #area_4 .graph_area li.graph_c .grp_img_text{ color:#09d9d1; left:44px;} #o #area_4 a.area_4_popup_open, #o #area_4 a.area_4_popup_close{ cursor:pointer; display:block; clear:both; position:relative; width:180px; border:1px solid #cd5f50; color:#e88174; height:40px; line-height:40px; letter-spacing:0px; padding:0 7px; font-size:13px; } #o #area_4 a:hover.area_4_popup_open, #o #area_4 a:hover.area_4_popup_close{ border:1px solid #fff; color:#fff; } #o #area_4 .popup_4{ display:none; } /*=================IF IF IF IF===================* #o #area_4 .popup_4{ display:block;} #o #area_4{ height:2711px;} #o #area_4 a.area_4_popup_open{ opacity:0} /*=================IF IF IF IF===================*/ #o #area_4 .popup_4{ position:relative; width:970px; top:0px; clear:both} #o #area_4 .popup_4>article{ text-align:left; display:block; position:relative; height:280px; width:896px; top:0px; margin-top:25px; -background-color:red } #o #area_4 .popup_4>article .title{ position:absolute; display:block; top:0px; left:0px; width:100%; color:#d0786c; text-align:center;} #o #area_4 .popup_4>article .text{position:absolute; display:block; top:57px; left:0px; width:100%; color:#dddddd; text-align:left; box-sizing:border-box; padding:0px 0px;} #o #area_4>.popup_4>.img_layout{ display:block; position:relative; width:896px; padding-bottom:30px;} #o #area_4>.popup_4>.popup_4_detatil{ padding-bottom:80px; display:block; position:relative; text-align:center; width:896px; font-size:15px; color:#a9796c; font-family:'', 'Nanum Gothic', sans-serif;} #o #area_4 .line_end_popup{ display:block; position:relative; width:970px; height:80px; border-bottom:1px solid #b1b1b1} /*area_1 */ #o #area_5{height:618px; width:100%; overflow:hidden; background-color:#0f0f0f } #o #area_5 .img_layout{ position:relative; display:block; width:970px; height:618px; top:0px; } #o #area_5 .img_layout .img_layout_50{ display:block; position:absolute; left:-475px; top:0px;} #o #area_5 article{width:970px; display:block; position:relative; top:-422px; height:618px; } #o #area_5 article .sign{ text-align:center; position:absolute ; display:block; width:970px; height:90px; } #o #area_5 article .title{ text-align:center; position:absolute ; display:block; width:970px;} #o #area_5 article .text{ text-align:center; position:absolute ; display:block; width:970px;} #o #area_5 article .title{ top:130px; left:0px; color:#fff; font-weight:400; } #o #area_5 article .text { top:205px; color:#fff; } /*area_6 */ #o #area_6{height:1017px; width:100%; overflow:hidden; background-color:#664d42 } #o #area_6 .img_layout{ position:relative; display:block; width:970px; height:1017px; top:0px; } #o #area_6 .img_layout .img_layout_61{ display:block; position:absolute; left:-186px; top:190px; } #o #area_6 article{width:485px; display:block; position:relative; left:243px; top:-764px; height:1017px; } #o #area_6 article .sign, #o #area_6 article .title, #o #area_6 article .text{ width:100%; display:block; position:relative; } #o #area_6 article .sign{ height:214px;} #o #area_6 article .title{ height:76px; color:#fff} #o #area_6 article .text{ color:#fff} #o #area_6 article .sign .sign_61, #o #area_6 article .sign .sign_62, #o #area_6 article .sign .sign_63{ display:block; position:absolute; height:214px; } #o #area_6 article .sign .sign_61, #o #area_6 article .sign .sign_63{ width:156px; } #o #area_6 article .sign .sign_62{ width:36px; color:#fff; font-size:70px; line-height:146px; font-weight:300; font-family: 'Lato', sans-serif; } #o #area_6 article .sign .sign_61{ left:52px; } #o #area_6 article .sign .sign_62{ left:214px; } #o #area_6 article .sign .sign_63{ left:260px; } #o #area_6 article .sign .sign_dd, #o #area_6 article .sign .sign_vl{ display:block; position:absolute; color:#fff; font-family: 'Lato', sans-serif;} #o #area_6 article .sign .sign_61 .sign_dt, #o #area_6 article .sign .sign_63 .sign_dt{ line-height:23px; height:23px; font-size:15px; font-weight:600; font-family: 'Lato', sans-serif; width:100%; border-radius:30px; background-color:#baa49b; display:block; position:relative; color:#242424 } #o #area_6 article .sign .sign_61 .sign_dd, #o #area_6 article .sign .sign_63 .sign_dd{line-height:85px; font-size:73px; font-weight:300; letter-spacing:-5px; left:-2px; top:39px; } #o #area_6 article .sign .sign_61 .sign_vl, #o #area_6 article .sign .sign_63 .sign_vl{line-height:45px; font-size:33px; font-weight:300; letter-spacing:-1px; left:116px; top:74px; } /*area_7 */ #o #area_7{height:720px; width:100%; overflow:hidden; background-color:#000 } #o #area_7 .img_layout{ position:relative; display:block; width:970px; height:720px; top:0px; } #o #area_7 .img_layout .img_layout_70{ display:block; position:absolute; left:-475px; top:0px;} #o #area_7 article{width:970px; display:block; position:relative; top:-462px; height:720px; } #o #area_7 article .title{ text-align:left; position:absolute ; width:438px;} #o #area_7 article .text{ text-align:left; position:absolute ; width:438px;} #o #area_7 article .title{ top:0px; left:0px; color:#fff; } #o #area_7 article .text { top:75px; left:0px; color:#fff; } #o #area_7 article .text .text_detail{ color:#b77f7f; line-height:22px;} /*area_8 */ #o #area_8{height:1626px; width:100%; overflow:hidden; background-color:#706c6b } #o #area_8 .img_layout{ position:relative; display:block; width:970px; height:960px; margin-top:111px; } #o #area_8 .img_layout .img_layout_80{ display:block; position:absolute; left:0px; top:0px;} #o #area_8 article{width:970px; display:block; position:relative; top:0px; } #o #area_8 article .sign, #o #area_8 article .title, #o #area_8 article .text{ display:block; position:absolute; width:438px; text-align:left} #o #area_8 article .sign{ font-family: 'Lato', sans-serif; color:#ffce95; letter-spacing:0px; font-size:30px; font-weight:800; text-align:left } #o #area_8 article .title{ color:#fff; font-weight:400;} #o #area_8 article .text{color:#fff} #o #area_8 article .sign{ top:0px } #o #area_8 article .title{ top:34px } #o #area_8 article .text{ top:149px } #o #area_8 article .text_area_81, #o #area_8 article .text_area_82, #o #area_8 article .text_area_83{ left:37px} #o #area_8 article .text_area_84, #o #area_8 article .text_area_85, #o #area_8 article .text_area_86{ left:495px;} /*area_9 */ #o #area_9{height:858px; width:100%; overflow:hidden; background-color:#e4e2e3 } #o #area_9 .img_layout{ position:relative; display:block; width:970px; height:860px; top:0px; } #o #area_9 .img_layout .img_layout_90{ display:block; position:absolute; left:585px; top:171px;} #o #area_9 article{width:970px; top:-720px; } #o #area_9 .sign{ display:block; position:absolute; top:0px; left:37px;} #o #area_9 .title, #o #area_9 .text{ text-align:left; width:523px; left:37px;} #o #area_9 .title{ top:176px; color:#000; font-weight:400 } #o #area_9 .text { top:251px; color:#000; word-break: keep-all} #o #area_9 .text .text_detail{ color:#916c32} /*area_z */ /*area_m */ #o #area_m{height:907px; padding-top: 159px; background-color:#bebec8 } #o #area_m article{ left:0px; width:970px; top:0px; text-align:center; margin-top:0; height:562px; } #o #area_m article .title, #o #area_m article .text{ left:0px; width:970px; text-align:center } #o #area_m article .title{top:0px; font-weight:400; } #o #area_m article .text{top:75px; } #o #area_m .darkgraph_area{ position:relative; display:block; width:970px; height:475px; margin-top:20px; } #o #area_m .darkgraph_area .darkgraph_graph{margin:auto; display:block; position:relative; width:610px; height:320px; top:-334px; overflow: hidden; } #o #area_m .darkgraph_area .darkgraph_graph .darkgraph_graph_slide{position:absolute; display:block; width:4420px; height:320px; top:0px; left:0px; } #o #area_m .darkgraph_area .darkgraph_graph .darkgraph_graph_slide>div{ position: relative; float:left; display:block; margin-right:20px; width:610px; height:320px;} #o #area_m .darkgraph_area .darkgraph_arrow{ margin: auto; display:block; position:relative; width:780px; height:60px; top:-525px; } #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_l, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_r, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_l, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_r{ display:block; position:absolute; top:7px; width:66px; height:66px; border-radius:100%; background-color:#b1b1b9} #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_l:hover, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_r:hover{ background-color:#4b4b61; cursor:pointer} #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_l img, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_l img{ display:block; position:absolute; top:0px; left:0px; } #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_r img, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_r img{ display:block; position:absolute; top:0px; right:0px; } #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_l, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_l{ left:0px} #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrowbg_r, #o #area_m .darkgraph_area .darkgraph_arrow .darkgraph_arrow_r{ right:0px;} #o #area_m .darkgraph_area .darkgraph_arrow_2, #o #area_m .darkgraph_area .darkgraph_arrow_3, #o #area_m .darkgraph_area .darkgraph_arrow_4, #o #area_m .darkgraph_area .darkgraph_arrow_5, #o #area_m .darkgraph_area .darkgraph_arrow_6, #o #area_m .darkgraph_area .darkgraph_arrow_7{ display:none} #o #area_m .darkgraph_area .darkgraph_foot{display:block; position:relative; width:970px; height:60px; top:-390px; } #o #area_m .darkgraph_area .darkgraph_foot li{ display:inline-block; position:relative; width:120px; height:120px; cursor:pointer} #o #area_m .darkgraph_area .darkgraph_foot li .icon{ display:inline-block; position:relative; width:80px ; height:80px; border-radius:22%; overflow:hidden;} #o #area_m .darkgraph_area .darkgraph_foot li .icon .icon_image{ display:block; position:absolute; top:-20px; left:-20px; background-color:#616161;} #o #area_m .darkgraph_area .darkgraph_foot li .text{ display:block; padding-top:15px; font-size:11px; line-height:18px; font-family:lato;} /*area_y */ #o #area_y{height:1088px; width:100%; overflow:hidden; background-color:#fff } #o #area_y .img_layout{ position:relative; display:block; width:970px; height:700px; top:0px; } #o #area_y .img_layout .img_layout_y0{ display:block; position:absolute; left:0px; top:-115px;} #o #area_y .img_layout .img_layout_y1{ display:block; position:absolute; left:0px; top:-115px;} #o #area_y article{width:970px; top:-150px; } #o #area_y .title, #o #area_y .text{ text-align:center; width:970px; } #o #area_y .title{ top:0px; color:#000; font-size:30px; font-weight:600 } #o #area_y .text { top:125px; color:#000; } #o #area_y .title b{ font-weight:100; line-height:58px; font-size:26px; } /*area_x*/ #o #area_x{height:835px; width:100%; overflow:hidden; } #o #area_x a.area_x_popup_open, #o #area_x a.area_x_popup_close{ cursor:pointer; display:block; clear:both; position:relative; width:160px; border:1px solid #000; color:#000; height:40px; line-height:40px; letter-spacing:0px; padding:0 7px; font-size:13px; } #o #area_x a:hover.area_x_popup_open, #o #area_x a:hover.area_x_popup_close{ border:1px solid #cd5f50; color:#e88174; } #o #area_x a.area_x_popup_close{ margin-top:150px; clear:both;} #o #area_x>article{ display:block; width:970px; height:480px;} #o #area_x>article .title, #o #area_x>article .text{ text-align:left; width:450px; left:37px;} #o #area_x>article .title{ top:0px; font-weight:400; } #o #area_x>article .title b{ font-size:42px; font-weight:600; line-height:60px;font-family:lato;} #o #area_x>article .text{top:150px; } #o #area_x>article a.area_x_popup_open{margin-top:350px; float:left; margin-left:37px;} #o #area_x .img_layout{ display:block; position:relative; width:970px; height:160px; } #o #area_x .img_layout>div{ display:block; position:relative; width:90px; float:left;} #o #area_x .img_layout>div img{ width:100%} #o #area_x .img_layout .img_layout_x1{ margin-left:37px; opacity:0.5; } #o #area_x .img_layout .img_layout_x2{margin-left:10px; opacity:0.5} #o #area_x .img_layout .img_layout_x3{margin-left:10px; opacity:1} #o #area_x .img_layout .img_layout_x4{margin-left:10px; opacity:0.5} #o #area_x .swiper_layout{ width:970px; height:362px; display:block; position: relative; } #o #area_x .swiper_layout li{ display:block; position:absolute; left: 554px; top:-608px;} #o #area_x .swiper_layout .swiper_layout_x1{ opacity:0} #o #area_x .swiper_layout .swiper_layout_x2{ opacity:0} #o #area_x .swiper_layout .swiper_layout_x3{ opacity:1} #o #area_x .swiper_layout .swiper_layout_x4{ opacity:0} #o #area_x .swiper_arrow{display:block; position: absolute; width:516px; height:60px; top:-356px; left:473px; } #o #area_x .swiper_arrow .swiper_layout_l, #o #area_x .swiper_arrow .swiper_layout_r{ display:block; position:absolute; top:7px; width:46px; height:46px; border-radius:100%; background-color:#b1b1b9} #o #area_x .swiper_arrow .swiper_layout_l:hover, #o #area_x .swiper_arrow .swiper_layout_r:hover{ background-color:#4b4b61; cursor:pointer} #o #area_x .swiper_arrow .swiper_layout_l img, #o #area_x .swiper_arrow .swiper_layout_r img{width:100%} #o #area_x .swiper_arrow .swiper_layout_l{ left:0px} #o #area_x .swiper_arrow .swiper_layout_r{ right:0px;} #o #area_x .swiper_arrow .swiper_layout_1{ display:none} #o #area_x .swiper_arrow .swiper_layout_2{ display:none} #o #area_x .swiper_arrow .swiper_layout_3{ display:block} #o #area_x .swiper_arrow .swiper_layout_4{ display:none} #o #area_x .dot_layout{ display:block; position: absolute; width:516px; height:60px; top:16px; left:473px; } #o #area_x .dot_layout>span{ display:inline-block; width:12px; height:12px; border-radius:100%; margin:0 3px; background-color:#929292 } #o #area_x .dot_layout .dot_layout_x1{ background-color:#f26000} /* ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ani sample */ /*ani sample ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== ========================================================== */ #o #area_x .popup_x{ display:block; position:relative; width:970px; top:-260px} #o #area_x .popup_x article{display:block; position:relative; width:970px;} #o #area_x .popup_x article .sign, #o #area_x .popup_x article .title, #o #area_x .popup_x article .text{ display:block; text-align:left} #o #area_x .popup_x article .sign{ left:0px; height:120px; margin-left:33px;} #o #area_x .popup_x article .sign img{ float:left;} #o #area_x .popup_x article .title, #o #area_x .popup_x article .text{ padding:0px 37px 0px 27px;box-sizing:border-box} #o #area_x .popup_x article .title{ font-weight:400; height:75px; position:relative; } #o #area_x .popup_x article .text{position:relative; clear:both; padding-bottom:25px} #o #area_x .popup_x article .text{ word-break:keep-all} #o #area_x .popup_x article .pic{ display:block; padding-bottom:45px} #o #area_x .je5_board{ width:896px; position:relative; display:block; height:640px; } #o #area_x .line_end_popup{ display:block; position:relative; width:970px; height:80px; border-bottom:1px solid #b1b1b1} /* ani*/ #o #area_x .popup_x{ display:none; } #o #area_x{height:835px; } /*ani 2 */ /*area_w */ #o #area_w{height:816px; width:100%; overflow:hidden; background-color:#63767a } #o #area_w .img_layout{ position:relative; display:block; width:896px; height:433px; top:0px; margin-top: 102px;} #o #area_w .img_layout .img_layout_u0{ display:block; position:absolute; left:0px; top:0px;} #o #area_w article{width:970px; top:-40px; } #o #area_w .title, #o #area_w .text{ text-align:center; width:970px; } #o #area_w .title{ top:0px; color:#fff; font-weight:400 } #o #area_w .text { top:75px; color:#fff; word-break: keep-all} /*area_u */ #o #area_u{height:810px; width:100%; overflow:hidden; background-color:#0f0f0f } #o #area_u .img_layout{ position:relative; display:block; width:970px; height:850px; top:0px; } #o #area_u .img_layout .img_layout_u0{ display:block; position:absolute; left:-475px; top:0px;} #o #area_u article{width:970px; top:-477px; } #o #area_u .title, #o #area_u .text{ text-align:center; width:970px; } #o #area_u .title{ top:0px; color:#eab98a; font-weight:800; font-family: 'Lato', sans-serif; } #o #area_u .title b{ font-weight:100; font-size:36px; letter-spacing:0px; line-height:68px; letter-spacing:-1px; -font-family: 'Spoqa Han Sans', 'Sans-serif'; } #o #area_u .text { top:125px; color:#fff; word-break: keep-all} /*area_v*/ #o #area_v{ width:100%; overflow:hidden } #o #area_v .emt_v1, #o #area_v .emt_v2, #o #area_v .emt_v3{ display:block; position:relative; width:100%; } #o #area_v .emt_v1{ height:128px;} #o #area_v .emt_v2{ height:32px;} #o #area_v .emt_v3{height:160px;} #o #area_v .icon_layout.#o #area_v .icon_layout_1{} #o #area_v .icon_layout.#o #area_v .icon_layout_2{} #o #area_v .icon_layout{ display:block; position:relative; width:970px; height:250px; text-align:center; -background-color:green } #o #area_v .icon_layout li{ width:190px; height:250px; position:relative; display: inline-block; box-sizing:border-box; cursor:pointer } #o #area_v .icon_layout li .sign{ display:block; position:relative; text-align:center; width:100%;} #o #area_v .icon_layout li .text{ display:block; position:absolute; width:190px; top:130px; height:50px; font-size:15px; line-height:20px;} #o #area_v .icon_layout .arrow{ display:block; position:absolute; top:237px; left:0px; width:188px; height:13px; background-color:#575757; -background-color:red } #o #area_v .icon_layout .arrow_1{ opacity:0} #o #area_v .icon_layout .arrow_2{opacity:0} #o #area_v .ex_layout.ex_layout_1{} #o #area_v .ex_layout.ex_layout_2{} #o #area_v .ex_layout{ display:block; position:relative; width:100%; height:644px; height:0px;box-shadow:inset 0px 5px 11px #cbc7c4; background-color:#ebe7e3; overflow:hidden; } #o #area_v .ex_layout .ex_layout_inbox{display:block; position:relative; width:970px; height:644px; } #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap{ display:block; position:relative; height:644px; width:5050px; left:0px;} #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li{display:block; position:relative; float:left; width:970px; height:644px; } #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .title, #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .pic, #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .text{ display:block; position:relative; } #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .title{ margin-top:60px;} #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .pic{margin-top:60px;} #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .text{ width:432px; margin-top:20px;} #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .title{ font-size:24px; font-weight:600; line-height:29px;letter-spacing:-0.6px; color:#252525; text-align:center; font-family: '', 'Nanum Gothic', sans-serif; } #o #area_v .ex_layout .ex_layout_inbox .ex_layout_inbox_wrap li .text{ margin: auto; font-size:15px; font-weight:500; line-height:26px; letter-spacing:-0.5px; color:#252525; text-align:left; font-family: '', 'Nanum Gothic', sans-serif; } /*ani*/ #o #area_v .icon_layout .arrow_1{ opacity:0} #o #area_v .icon_layout .arrow_2{opacity:0} #o #area_v .ex_layout_1 .ex_layout_inbox .ex_layout_inbox_wrap{ left:-0px;} #o #area_v .ex_layout_2 .ex_layout_inbox .ex_layout_inbox_wrap{ left:-0px;} #o #area_v .ex_layout_1{ height:644px; height:0px; } #o #area_v .ex_layout_1{ height:644px; height:0px;} /*ani*/ /*area_b*/ #o #area_b{ -height:767px; clear:both; padding-bottom:0px; width:100%; padding-top:0px; overflow:visible} #o #area_b .circle_bg{ display:block; position:relative; width:970px; height:182px; height:105px; } #o #area_b .circle_bg span{ left:0px; top:325px; width:198px; height:13px; background-color:#575757; position:absolute; opacity:0} #o #area_b .featue_icon{width:970px; height:195px; display:block; position:relative; } #o #area_b .featue_icon li{ display: inline-block; cursor:pointer; position:relative; padding:0; margin:0; overflow:hidden; } #o #area_b .featue_icon li{ width:190px; height:195px; } #o #area_b .featue_icon li .icon{ top:0px; display:block; position:relative; width:190px; height:67px; padding-top:25px; overflow:hidden; } #o #area_b .featue_icon li .icon img{ display:block; width:45%; } #o #area_b .featue_icon li .text{ top:16px; display:block; position:relative; font-weight:600; font-size:13px; line-height:18px; font-family:'', 'Nanum Gothic', sans-serif; font-style:normal; } #o #area_b .featue_area{ display:block; width:0px; height:0px; margin-bottom:0px; overflow:hidden; top:36px;} #o #area_b .featue_area{width:100%; display:block; overflow: hidden; position:relative; } #o #area_b .featue_area .featue_area_in{ width:969px; display:block; overflow:visible; position:relative;} #o #area_b .featue_area .featue_area_wrap{ display:block; position:relative; width:5096px; -height:1048px; height:644px; padding-left:36px; top:0px; } #o #area_b .featue_area{ height:0px; } #o #area_b .featue_area li{ display:block; position: relative; float:left; padding-top:40px; padding-bottom:40px; margin-right:40px; } /* #o #area_b .featue_area li{}*/ #o #area_b .featue_area li .img_area{ display:block; position:relative; height:192px; width:438px; left:0px; top:-5px; overflow:hidden;} #o #area_b .featue_area li .txt_area{ display:block; position:relative; height:192px; width:896px; top:25px; } #o #area_b .featue_area li .txt_area .title, #o #area_b .featue_area li .txt_area .text{ position:relative; width:50%; text-align:center; color:#000; font-family: '', 'Nanum Gothic', sans-serif; } #o #area_b .featue_area li .txt_area .title{ top:0px; font-size:24px; font-weight:600; line-height:29px;letter-spacing:-0.6px; height:28px; } #o #area_b .featue_area li .txt_area .text{ top:48px; font-size:13px; font-weight:500; line-height:2em; letter-spacing:-0.5px; } #o #area_b .featue_area li .txt_area .text b{ font-weight:500; font-size:12px; color:#79695a; position:relative; top:13px;} #o #area_u a.area_u_popup_open{ cursor:pointer; display:block; clear:both; position:relative; width:140px; border:1px solid #fff; color:#fff; height:40px; line-height:40px; letter-spacing:0px; padding:0 7px; font-size:13px; top:-257px; } #o #area_u a:hover.area_u_popup_open{ border:1px solid #eab98a; color:#eab98a; } /* */