/* Copyright 2012 Designfever. All Rights Reserved. */ @import url("../font/futura.css"); @import url(http://fonts.googleapis.com/css?family=Muli); @font-face{ font-family:NanumGothic; font-style:normal; font-weight:normal; src: url('NanumGothic'); src:url('../font/NanumGothic.eot'); src:local('?'), url('../font/NanumGothic.woff') format('woff'), url('../font/NanumGothic.ttf') format('truetype'); } @font-face { font-family: 'monotype_modernwide'; src: url('../font/nmwd___0.eot'); src: url('../font/nmwd___0.eot?#iefix') format('embedded-opentype'), url('../font/nmwd___0.woff') format('woff'), url('../font/nmwd___0.ttf') format('truetype'), url('../font/nmwd___0.svg#monotype_modernwide') format('svg'); font-weight: normal; font-style: normal; } /* *************** global *************** */ html { margin:0; padding:0; width:100%; } body { margin:0; padding:0; width:100%; font-family:'Muli', NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif; font-size:12px; color:#000; background:#fff;} /* px to % conversions ------------------- px | % ------------------- 9 | 70 10 | 77 11 | 85 12 | 93 13 | 100 14 | 108 15 | 116 16 | 123.1 17 | 131 18 | 138.5 19 | 146.5 20 | 153.9 21 | 161.6 22 | 167 23 | 174 24 | 182 25 | 189 26 | 197 27 | 204 28 | 212 29 | 219 30 | 227 31 | 234 32 | 242 */ ::selection {background:#f3cd1b;} ::-moz-selection {background:#f3cd1b;} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; }/* ie-mac \*/ *html .clearfix {height: 1%;} .clearfix {display: block;}/* ie-mac */ .none {display:none;} .floatl {float:left;} .floatr {float:right;} .textC { text-align:center} .floatNone { float:none; clear:both} .pos_a {position:absolute;} .pos_r {position:relative;} .italic { font-style:italic;} article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } /*Film*/ #film{display:none; position:fixed; _position:absolute; top:0;left:0; z-index:9999999; background:#fff; width:100%; height:100%; filter:Alpha(opacity=80); opacity:0.8; -moz-opacity:0.8;} .width100p, .width100p img { width:100%;} .width80p, .width80p img { width:80%;} /* *********** other ********** */ .effect {background-color:#000; filter:Alpha(opacity=35); opacity:0.3; -moz-opacity:0.3;} .pngfilter {height:26px; background:url(pngfile) 0 0 repeat-x; * background:url(pngfile) 0 0 repeat-x; _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', src='pngfile');} .iepng {behavior:url('/css/common/iepngfix.htc');} /* after 1*1px blank image if(typeof blankImg == 'undefined') var blankImg = 'blank.gif image url'; */ .select {behavior:url('/css/common/selectbox.htc');} caption, .discription { position:absolute; top:-10000px; visibility:hidden; overflow:hidden; width:0; height:0; margin:0; padding:0; line-height:0; font-size:0;} .underline { text-decoration:underline} .color_gray { color:#a7a7a7 !important} .enTitle { font-weight:normal !important;} .font_futura { font-family:'Muli', NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif !important;} /* title */ h1, h2, h3, h4, h5 {padding:0; margin:0;} /* link */ a:link {color:#000; text-decoration:none} a:visited {color:#000; text-decoration:none} a:active { color:#000; text-decoration:none} a:hover {color:#000; text-decoration:none} /* image */ img {border:0; vertical-align:top} /* define */ dl, dt, dd { margin:0; padding:0;} /* sentence */ div, h2{padding:0; margin:0;} p {margin:0px; padding:0px} /* list */ ul, ol, li {list-style-type:none; margin:0px; padding:0px; font-size:12px;} /* area */ hr {display:none;} /* form */ form {margin:0; padding:0;} form label, label {height:19px; color:#5E5E5E; cursor:default; font-size:12px;} select {font-size:12px; vertical-align:middle; height:20px; letter-spacing:0px} legend {display:none;} fieldset {margin:0; padding:0; border:none;} checkbox {width:13px; height:13px;} input, textarea {vertical-align:middle; font-size:12px; color:#777777; line-height:14px; } /* align */ .textl {text-align:left;} .textc {text-align:center; margin:0 auto;} .textr {text-align:right;} /* table */ table {margin:0; padding:0; border-collapse:collapse; border-spacing:0; border:0} td {margin:0; padding:0; font-size:12px;} .basicTable { width:100%;} .basicTable th, .basicTable td { text-align:left; padding:5px 0; font-size:12px; line-height:24px} .basicTable th{ border-bottom:2px solid #cb2107; font-weight:normal; vertical-align:top; } .basicTable td{ border-bottom:1px solid #cb2107} .basicTable td.space{ width:20px !important; border:0;} .basicTable tr.firstLine th { border-top:2px solid #cb2107} .basicTable tr.firstLine td { border-top:1px solid #cb2107} .basicTable tr.firstLine td.space { border-top:0} /* margin padding */ .pb60 { padding-bottom:60px} #wrap { width:100%; height:100%} /* Header */ #header { max-width:100%; position:relative; margin:0 auto; padding:30px; overflow:hidden; margin-top:30px;} #header .headerLogo { top:73px; width:100%; height:188px; position:absolute; margin:0 auto; overflow:hidden;} #header .headerLogo .logoImg { position:absolute; top: 0px; width:242px; height:172px; left: 50%; margin-left: -155px;} #header .headerTop { margin:0 0 45px 0} #header h1 { float:left; display: none;} #header h1 img { width: 144px;} #header .hMore, #header .mMore, .menuBack { display:none} #header #sidemenu{ float:right;} #header #sidemenu a { margin:0 0 0 20px; font-size:10px} #header #mainmenu{ position:absolute; left:20px; bottom:38px;} #header #mainmenu a { color:#d0d0d0; height:44px; display:block; opacity: 0.25;} #header #mainmenu a img {height: 44px;} #header #mainmenu a.current, #header #mainmenu a.current.mainM { color:#000; opacity: 1;} .df_menuList { display:none} .pf_menuList { display:none} #header .sideDiscription{position:absolute; right:30px; bottom:43px; text-align:right; color:#000} #header .sideDiscription h2 { display:none} #header .sideDiscription .dis1 { width: 312px;} /*#header .sideDiscription .dis1 { font-size:16px; line-height:18px}*/ /*#header .sideDiscription .dis2 { margin-top:10px; font-size:9px; line-height:12px}*/ #header p.headerMotion { display:block; width:242px; height:285px; background:url('../img/logo_0.gif') no-repeat 50% 50%; position:absolute; top:1px; left:50%; margin-left:-121px; z-index:55;} #header p.headerMotion span { display:block; width:242px; height:285px; background:url('../img/logo_shadow.png') no-repeat 50% bottom;} #header #mainmenu #idMenu {display:none;} /* Footer */ #footer { max-width:1227px; margin: 0 auto; padding:45px 0px;} /* border-left:1px solid #ebebeb; background:url('../img/gray_line.gif') repeat-y 50% 0} */ #footer .footerlogo { float:left; height:22px; width: 173px;} #address { font-style:normal; font-size:10px; line-height:20px; padding:0 0 41px 0px} .footerShare {padding:10px 0 0 243px } .footerShare span { padding:0 20px 0 0; line-height:21px;} .footerShare a { margin:0 13px 0 0} /* Content */ #contentWrap { width:100%; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb;} #content { max-width:1228px; height:auto; margin:0 auto; } #content.main { width:1228px;} #subConB { width:1224px; height:auto; margin:0 auto; border-right:1px solid #ebebeb; border-left:1px solid #ebebeb; } #content.sub { background:url('../img/bg_subnav2.gif') no-repeat 18px bottom; border-bottom:1px solid #ebebeb; border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; max-width:1225px;} /* .box.mul4 { border-right:1px solid #ebebeb;} .box.mul5 { border-right:0;} */ /* nav */ #portfolioAside { width:244px; float:left; } #portfolioAside h1 { display:none} #portfolioAside .btnPN , #portfolioAside span, #portfolioAside .navShare li { border-bottom:1px solid #ebebeb;} #portfolioAside .btnBack { background:url('../img/btn_backM.gif') no-repeat 50% 45%; display:block; text-align:center; font-size:24px; padding-top:165px; height:79px; border-bottom:1px solid #ebebeb;} #portfolioAside span {font-size:10px; line-height:27px; text-align:center; letter-spacing:2pt; display:block;} #portfolioAside .btnPN {display:block; float:left; height:121px; color:#fff;} /* 1129:text-indent:-5000px; to color:#fff */ #portfolioAside .navPrev { background:url('../img/nav_prev.gif') no-repeat 50% 50%; border-right:1px solid #ebebeb; width:121px;} #portfolioAside .navPrev.mac-prev { width:120px;} #portfolioAside .navNext{ background:url('../img/nav_next.gif') no-repeat 50% 50%; width:122px;} .navShare li { display:;} .navShare li a { display:block; width:217px; height:44px; padding:32px 0 0 27px; letter-spacing:1pt;} .navShare li.shareF a { background:url('../img/iconF.gif') no-repeat 201px 50%;} .navShare li.shareT a { background:url('../img/iconT.gif') no-repeat 195px 50%;} .navShare li.shareP a { background:url('../img/iconP.gif') no-repeat 195px 50%;} .navPrize li { height:245px; border-bottom:1px solid #ebebeb; text-align:center;} /*.navPrize li.last { border-bottom:0;}*/ .navPrize li img { margin-top:79px;} #portfolioAside a { position:relative} #portfolioAside span.b { position:absolute; left:0; top:0; display:block; border:0; width:0; height:0; background-color:#000; filter:Alpha(opacity=10); opacity:0.1; -moz-opacity:0.1; cursor:pointer} /* #portfolioAside .btnBack:hover .b { width:244px; height:244px;} #portfolioAside .btnPN:hover .b, #portfolioAside .navPrev:hover .b { width:122px; height:122px;} #portfolioAside .navShear li a:hover .b { width:244px; height:76px;} */ /* sub DF nav */ #subNav { background:url('../img/bg_subnav1.gif') no-repeat 100px 0; width:244px; float:left; padding-top:5px; position:relative;} #subNav .current a {text-decoration:underline; } #subNav li { font-size:16px; line-height:18px; padding:20px 0 0 29px;} /* portfolio, at fever box nav */ .portfolio2depth { display:none} #portfolio-filter { width:100%; border-top:1px solid #ebebeb; background:url('../img/gray_line.gif') repeat-y 50% 0; } #portfolio-filter .fillter-area { margin:0 auto; width:1222px; max-width:1222px; height:244px; overflow:hidden; background:#fff; position:relative; letter-spacing:1pt; padding-left:1px; overflow:hidden} #portfolio-filter .search_input { margin-bottom:50px} #portfolio-filter .search_input dt { font-size:14px; height:14px; margin-bottom:150px; padding-left:23px; background:url('../img/icon_search.png') no-repeat 0 1px;} /* #portfolio-filter .search_input dd input { font-size:14px; color:#000; height:24px; width:100%; border:0; border-bottom:1px solid #000} */ #portfolio-filter h3 { font-size:11px; font-weight:normal; height:14px; margin-bottom:30px;} #portfolio-filter div.fillerWrap { width:184px; height:184px; padding:30px; float:left; background:#fff; overflow:hidden; display:block;} #portfolio-filter div.fillerWrap span { display:block; font-size:12px; line-height:12px; margin-top:12px; } #portfolio-filter div.fillerWrap span input {margin-top:-1px;} #portfolio-filter div.fillerWrap span input dd{ width:100%;} #portfolio-filter .btn_search { display:block; width:100%; height:30px; text-align:center; background:#000; line-height:30px; font-size:11px; color:#fff; margin-top:20px;} #portfolio-filter .btn_open { position:absolute; right:0; top:0; display:block; width:28px; height:28px; cursor:pointer; text-indent:-5000px; overflow:hidden; background:url('../img/btn_close.png') no-repeat 6px 6px; border-left:1px solid #ebebeb; border-bottom:1px solid #ebebeb} #portfolio-filter .btn_open.close { background:url('../img/btn_open.png') no-repeat 8px 11px;} #portfolio-filter .layer_open { display:none} #portfolio-filter .search_input dd { margin:0;width:100%; } /* #boxMenu.for640 { display:none} #boxMenu { max-width:1225px; height:auto; margin:0 auto; position:relative; z-index:9999} #boxMenu ul { width:244px; height:244px; border:1px solid #ebebeb; margin:-1px; position:absolute; left:0; top:0; background:#fff; } #boxMenu li { font-size:16px; padding:20px 0 0 29px; } #boxMenu li a { background:url('../img/nonecheck.gif') no-repeat 0 50%; font-size:16px; line-height:18px; padding-left:27px;} #boxMenu li.current a { text-decoration:underline; background:url('../img/checked.gif') no-repeat 0 50%;} #boxMenu li.displayNone1024 { display:none} */ /*{ width:978px; float:left; border-left:1px solid #ebebeb;}*/ /* index */ #contentWrap.mainWrap { /*background:url('../img/bg_main.gif') repeat 0 0;*/ border-bottom:0; overflow:hidden} .boxWrap { border-left:1px solid #ebebeb; overflow:hidden; background:url('../img/bg_line.gif') repeat-y 1226px 0} .box { float:left; width:244px; height:244px; border:1px solid #ebebeb; margin-top:-1px; margin-left:-1px; position:relative; overflow:hidden;}/*width:245px; height:245px;*/ .box dt { position:absolute; bottom:0; left:0; width:219px; background-color:#FFF; height:14px; padding-left:19px; padding-right:6px; padding-top:15px; padding-bottom:15px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; filter:Alpha(opacity=100); opacity:1; -moz-opacity:1; line-height:14px; border-bottom:1px solid #ebebeb;} .box dt p { width:95%; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis;} .box dt span { display:none; font-weight:bold; } .box dd { width:100%; overflow:hidden;} .box dd img { position:relative; width:100%; height:auto;} .box span.new { position:absolute; right:0px; top:0; z-index:5} .box a { width:100%; height:100%; display:block;} .box dl { width:100%; height:245px; z-index:5} /* portfolio */ .portfolioWrap { border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; max-width:1224px !important;} .portfolio { position:relative; border-left:1px solid #ebebeb;} .portfolio > div {padding-bottom:1px;} .portfolio > div+br {display:none;} .portfolio .f_like { position:absolute; right:30px; top:30px; z-index:10} #textCon, .textCon, #visualCon, #halfWrap, .halfWrap, .visualCon { padding-bottom:95px !important; line-height:24px;} #textCon, #halfWrap, .textCon, .halfWrap{ max-width:824px; width:90%; margin:0 auto} #textCon p, .textCon p { font-family:NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif;} #visualCon img, .visualCon img { width:100%;} #visualCon.pb40, .visualCon.pb40 { padding-bottom:40px !important} #halfWrap #textCon, .halfWrap .textCon, #halfWrap .textCon{ max-width:390px; width:48%; margin-bottom:0 !important; padding-bottom:0 !important;} #halfWrap #textCon p, .halfWrap .textCon p { line-height:30px} #textCon h2, #halfWrap h2, .textCon h2, .halfWrap h2 { font-size:20px; color:#000; margin:0 0 25px 0} #textCon h3, .textCon h3 { font-size:20px; line-height:30px; margin-bottom:30px} #textCon h4, .textCon h4 { font-size:12px; margin-bottom:15px; } #textCon ul li, .textCon ul li { display:inline; margin-right:80px} #textCon ol, .textCon ol { margin-top:10px;} #textCon ol li, .textCon ol li { line-height:24px; } #textCon p, .textCon p { font-size:12px; line-height:24px} #textCon .pdText, .textCon .pdText { padding-left:310px;} .portfolio .basicTable th { width:130px !important;} .portfolio .basicTable td { width:auto;} #visualCon.nomarginImg, #textCon.nomarginImg, .visualCon.nomarginImg, .textCon.nomarginImg { padding-bottom:0 !important;} .fullText, #halfWrap.fullText, .fullText, .halfWrap.fullText { width:100%; max-width:100%;} .fullText #textCon.floatl, .fullText .textCon.floatl { margin-left:9%;} .fullText #textCon.floatr, .fullText .textCon.floatr { margin-right:9%;} .fullText#halfWrap #textCon, .fullText#halfWrap .textCon { width:40%; max-width:370px;} .fullText#halfWrap #textCon.floatNone, .fullText#halfWrap .textCon.floatNone { width:90%; max-width:800px;} .fullText h2 { padding:75px 0 0 9%} .fullText #textCon h4, .fullText .textCon h4 { padding:35px 0 10px 0;} .videoCon { width:84%; margin:0 auto} .videoCon iframe { width:100%; height:auto; min-height:487px;} /* sub DF. #subcon { max-width:978px; margin-left:245px; border-left:1px solid #ebebeb; position:relative;} .subBottom { width:100%; } .subBottom ul { max-width:1225px; margin:0 auto; border-left:1px solid #ebebeb; border-right:1px solid #ebebeb; border-top:0;} .subBottom .bBox {border-right:1px solid #ebebeb; } */ #textCon.df { padding-top:70px; position:relative; font-family:NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif;} #textCon.df .hasLine { border-top:1px solid #ebebeb;} /* float:left */ #textCon.df .hasLine.nopadding { padding:0;} /* float:left */ #textCon.df h1 { font-size:12px; color:black; position:absolute; left:-4%; top:30px; font-weight:normal} #textCon.df h2 { font-size:40px; line-height:48px; padding-top:70px; margin-bottom:40px; font-family:'Muli', NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif; letter-spacing:-1px; font-weight:normal} #textCon.df .sub_h1, #textCon .sub_h1 { font-size:20px; line-height:28px; margin-bottom:35px} #textCon.df .sub_h2, #textCon .sub_h2 { font-size:18px; line-height:26px; margin-bottom:30px} #textCon.df h3 { font-size:18px; line-height:24px; margin-bottom:35px; padding-top:20px;} #textCon.df h4 { font-size:16px; line-height:22px; margin-top:70px; margin-bottom:30px;} #textCon.df p { font-size:12px; line-height:22px; margin-bottom:30px;} #textCon.df p.sub_s_text { font-size:12px; margin:0;} #textCon.df p.title_name { font-size:40px; line-height:48px; font-family:NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif; font-weight:bold;} #textCon.df #halfWrap, #textCon.df .halfWrap { width:100%; max-width:100%; min-width:450px; padding-bottom:0 !important; overflow:hidden;} #textCon.df #halfWrap #textCon, #textCon.df .halfWrap .textCon { max-width:420px; width:49%; padding-bottom:0 !important; padding-top:70px;} #textCon.df #halfWrap h5, #textCon.df .halfWrap h5 { border-bottom:1px solid #000; padding-bottom:17px; overflow:hidden} #textCon.df #halfWrap li, #textCon.df .halfWrap li {display:block; line-height:14px; margin-top:23px; background:url('../img/icon_list01.gif') no-repeat 0 50%; padding-left:16px; margin-right:0;} .subTableWrap { margin-top:115px;} .subTableWrap table th, .subTableWrap table td { vertical-align:top; padding-bottom:25px; text-align:left; font-size:14px; font-family:'Muli', NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif !important;} .subTableWrap table th.df_table_title p { margin-bottom:45px; padding-top:30px; font-size:22px !important; line-height:30px !important; border-top:3px solid #000; font-family:'Muli', NanumGothic, �섎닎怨좊뵓, Gulim, sans-serif !important;} .subTableWrap table th.df_table_title span { display:block; font-style:normal; font-size:12px;} .subTableWrap table td p { margin-bottom:10px !important; padding-bottom:0; } .subTableWrap table td p.last { margin-bottom:0;} #textCon .awards_img { padding-top:45px;} #textCon .awards_img li { float:left; margin-right:40px !important; margin-bottom:20px;} #textCon .awards_img li.last { margin-right:0 !important;} #textCon .subTableWrap .awards { font-family:NanumGothic} #textCon .subTableWrap .awards td { font-size:12px} #textCon .subTableWrap .awards td.textC {text-align:center;} #textCon .subTableWrap .awards th img { width:100%;} #textCon .subTableWrap .awards .marginTop th, .subTableWrap .awards .marginTop td { padding-top:70px;} .sub_org p.width100p { margin-top:70px;} #textCon a.underline:hover, .textCon a.underline:hover {text-decoration:underline;} /* sub_context */ .sub_context .subMain { padding:0 0 0 55px} /* portfolio list item */ .item { width:244px; height:244px; overflow: hidden; } #pf_item_more { cursor:pointer} .transparent_btn { cursor:pointer} /* portfolio type2 black */ .type2#textCon, .type2.textCon{ color:#898989} .type3#textCon, .type3.textCon{ color:#484848} .type2.type2_1#textCon, .type2.type2_1.textCon{ color:#000} .type2#textCon h2, .type2#halfWrap h2, .type2.textCon h2, .type2.halfWrap h2 { color:#000;} .type2.fullText { background:#222; color:#898989} .type2.fullText h2 { color:#fff; } .type2.fullText #textCon h4, .type2.fullText .textCon h4 { color:#fff;} /* 釉붾옓�뚯씠釉� */ .basicTable.type2 th{ border-bottom:2px solid #000; color:#000} .basicTable.type2 td{ border-bottom:1px solid #000; color:#000} .basicTable.type2 td.space{ border:0;} .basicTable.type2 tr.firstLine th { border-top:2px solid #000} .basicTable.type2 tr.firstLine td { border-top:1px solid #000} .basicTable.type2 tr.firstLine td.space { border-top:0} /* �고뙆�묓뀒�대툝 */ .basicTable.type3 th{ border-bottom:2px solid #a4c2d6; color:#000} .basicTable.type3 td{ border-bottom:1px solid #a4c2d6; color:#000} .basicTable.type3 td.space{ border:0;} .basicTable.type3 tr.firstLine th { border-top:2px solid #a4c2d6} .basicTable.type3 tr.firstLine td { border-top:1px solid #a4c2d6} .basicTable.type3 tr.firstLine td.space { border-top:0} /* �뚯깋�뚯씠釉� */ #textCon h2.title_gray, #halfWrap h2.title_gray, .textCon h2.title_gray, .halfWrap h2.title_gray { color:#c7c7c7;} .basicTable.type4 th{ border-bottom:2px solid #c7c7c7; color:#c7c7c7} .basicTable.type4 td{ border-bottom:1px solid #c7c7c7; color:#c7c7c7} .basicTable.type4 td a{ border-bottom:1px solid #c7c7c7; color:#c7c7c7} .basicTable.type4 td.space{ border:0;} .basicTable.type4 tr.firstLine th { border-top:2px solid #c7c7c7} .basicTable.type4 tr.firstLine td { border-top:1px solid #c7c7c7} .basicTable.type4 tr.firstLine td.space { border-top:0} /* portfolio type3 blue */ #textCon h2.title_red, #halfWrap h2.title_red, .textCon h2.title_red, .halfWrap h2.title_red { color:#cb2107;} #textCon h2.title_black, #halfWrap h2.title_black, .textCon h2.title_black, .halfWrap h2.title_black { color:#000;} #textCon h2.title_blue, #halfWrap h2.title_blue, .textCon h2.title_blue, .halfWrap h2.title_blue { color:#00ade0;} #textCon h2.title_white, #halfWrap h2.title_white, .textCon h2.title_white, .halfWrap h2.title_white { color:#fff;} /* brief table */ .brief { margin:70px 0 ;} .brief th {padding-bottom:25px; text-align:left; vertical-align:top; font-weight:normal} .brief td { line-height:22px; vertical-align:top;} .brief th.bd, .brief td.bd { border-left:1px solid #000; padding-left:27px;} .brief td.bd { font-size:11px; } /* metaphor */ #metaphor-wrap { position:absolute;} #fixed-area { position:fixed; left:50px; top:40px; z-index:10;} #fixed-area h1 { margin-bottom:35px;} .metaphor-content { position:absolute; width:100%; height:100%; z-index:4;} .text-area { position:absolute; bottom:33%; left:0; z-index:8; width:100%; text-align:center} .text-area.color_white p { color:#fff;} .text-area p { color:#000; font-size:12px; line-height:24px; } .text-area p strong { margin:0 0 15px 0; font-size:60px; font-weight:bolder; line-height:90px;} .text-area.noneImg { top:45%;} .metaphor-btn { position:absolute; left:0; bottom:40%; z-index:8; width:100%; height:auto; text-align:center} .metaphor-btn div.metalink { margin:40px 0 0 0;} .metaphor-btn div.metalink a {display:inline-block; width:14px; height:8px; background:url('../img/metalink_off.png') no-repeat 50% 50% } .metaphor-btn div.metalink a.meta_now {background:url('../img/metalink_on.png') no-repeat 50% 50%} .img-ob { position:absolute; top:0; left:0; z-index:6;} .img-area { position:absolute; top:35%; left:50%; width:305px; margin-left:-153px;} #metaphor-bg { position:absolute; top:0; left:0; z-index:2; width:100%;} #metaphor-bg div img { height:auto; width:100%} #metaphor-bg div { height:900px; overflow:hidden;} #ob1 { top:40%; left:60%;} #ob2 { top:90%; left:20%;} #ob3 { top:30%; left:75%;} #ob4 { top:60%; left:10%;} /* .wrapper{ width:960px; height:200px; margin:0 auto; position:relative; } */ .metaphor-object{ position:absolute; } #ob1-1{top:30%; left:30%;} #ob1-2{top:60%; left:60%;} #ob2-1{top:30%; left:30%;} #ob2-2{top:60%; left:60%;} #ob3-1{top:30%; left:30%;} #ob3-2{top:60%; left:60%;} #ob4-1{top:30%; left:30%;} #ob4-2{top:60%; left:60%;} footer { background-color: #fff; color: #333; padding: 40px; font-size: 14px; margin-top:40px; box-sizing: border-box; } .footer-content { display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 1227px; margin: 0 auto; } .footer-section { flex: 1; margin: 10px; min-width: 200px; } .footer-section h4 { margin-bottom: 15px; font-size: 16px; padding-bottom: 5px; color: #333; } .footer-section p, .footer-section a { color: #666; margin-bottom: 10px; text-decoration: none; display: block; } .footer-section a:hover { color: #000; } .footer-bottom { text-align: center; padding: 10px 20px; color: #666; } .footer-bottom p { margin: 0; }