/* containerk ---------------------------------------------------------------------------------------------------------------*/ #containerk { width:100%; float:left; clear:both; padding:0px 0; background:#fff; position:relative; z-index:1000; } .paint { width:100%; height:10px; background:url(/images/paint.png) center bottom no-repeat; position:absolute; left:0; top:-22px; } #containerk article { width:54.081633%; /* 530px / 980px; */ padding:0 4.0816327% 30px 0; /* 40px / 980px; */ float:left; right 0 repeat-y; } #containerk h1, #containerk h2 { display:block; width:100%; height:41px; text-indent:-9999px; padding-bottom:24px; font-family:'NanumGothic', Arial, sans-serif; font-weight:normal; font-size:4.6em; letter-spacing:-0.02em; line-height:0.9em; text-transform:uppercase; } #containerk article h3 { font-family:'NanumGothic',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic',sans-serif; font-weight:normal; font-size:2em; line-height:1em; text-transform:uppercase; padding:0.6em 0 0.3em 0; } #containerk article p { font-family:'NanumGothic',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic',sans-serif; serif; font-weight:100; font-size:1.5em; line-height:1.4em; padding-bottom:0.9em; } #containerk article p.intro { font-family:'NanumGothic',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic',sans-serif; font-size:1.5em; line-height:1.4em; text-transform:uppercase; } #containerk article ul { list-style:none; padding:1em 0 1.4em 0; } #containerk article ul li { font-family:'NanumGothic', serif; font-weight:400; font-size:1.7em; line-height:1.2em; padding:0 0 0.8em 16px; } #containerk article p a{ color:#888; text-decoration:none; } #containerk article p a:hover { color:#00abbd; } #containerk article ul li a { color:#00abbd; text-decoration:none; } #containerk article ul li a:hover { border-bottom:1px dotted #00abbd; } #containerk aside { width:37.755102%; /* 370px / 980px; */ padding:0 0 40px 4.0816327%; /* 40px / 980px; */ float:right; } #containerk .quotes, #containerk aside #images, #containerk aside ol, #share-buts, #links { width:100%; float:left; clear:both; } #containerk aside img, #containerk div img { max-width:100%; height:auto; } #containerk .caption { font-family:'NanumGothic', serif; font-weight:400; font-size:1.4em; line-height:1em; font-style:italic; width:100%; text-align:center; padding:10px 0 30px 0; } /* TITLE BG IMAGES */ .title-why-sign { background-position:0 -200px; } .title-thank-you { background-position:0 -400px; } .title-privacy-policy { background-position:0 -500px; } #containerk article .title-why-protect-waves { background-position:0 -1100px; height:88px; } #containerk article .title-protecting-waves { background-position:0 -1300px; height:88px; } .title-approach { background-position:0 -1500px; } #containerk article .title-threats { background-position:0 -1600px; height:88px; } #containerk article .title-offhsore-renewables { background-position:0 -2500px; height:88px; } .title-legislation { background-position:0 -1800px; } .title-case-studies { background-position:0 -2700px; } .title-ambassadors { background-position:0 -2800px; } .title-killing-waves { background-position:0 -2900px; } .title-film { background-position:0 -3000px; } #containerk article .title-gww-terms { background-position:0 -3100px; height:68px; } .quotes { padding:20px 0; border-top:4px solid #484848; border-bottom:4px solid #484848; margin-bottom:30px; } .quotes blockquote { text-align:center; } .quotes.flexslider blockquote { padding-bottom:27px; } .quotes blockquote p { font-family:'NanumGothic',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic',sans-serif; font-weight:normal; font-size:2em; line-height:1em; text-transform:uppercase; padding-bottom:0.4em; } .quotes blockquote cite { font-family:'NanumGothic', serif; font-weight:400; font-size:1.6em; line-height:1.1em; } .quotes blockquote a, .caption a { color:#484848; text-decoration:none; } .quotes blockquote a:hover, .caption a:hover { color:#00abbd; } #images { padding:0 0 55px 0; } #images .showcase-slide { float:left; } #share-buts { list-style:none; padding-bottom:30px; } #share-buts li { float:left; padding-right:10px; } #share-buts li:last-child { padding-right:0; } #share-buts li.pin-but { float:right; padding-right:0; } #tbutton { overflow-x:hidden; padding:0; width:60px !important; } #links, #share { padding:22px 0 0 0; border-top:4px solid #484848; margin-top:18px; } #containerk aside #links { border-top:none; margin-top:0; } #containerk.thank-you-content aside #links { border-top:4px solid #484848; } #containerk #links h3, #containerk #share h3 { font-family:'NanumGothic',NanumGothic,ng,'¸¼Àº °íµñ','Malgun Gothic',sans-serif; font-weight:normal; font-size:1em; line-height:1em; text-transform:uppercase; padding:0 0 16px 0; } #links ol { list-style:none; width:100%; float:left; font-size:1em; clear:both; padding-top:2px; border-top:1px dotted #ddd; } #links li { font-family:''NanumGothic'', serif; font-weight:400; font-size:1.5em; line-height:1.9em; width:100%; float:left; clear:both; border-bottom:1px dotted #ddd; } #links li a { color:#484848; text-decoration:none; width:100%; float:left; clear:both; } #links li a:hover { color:#00abbd; } #links li a.sas-link { color:#00abbd; font-style:italic; } #links li a.sas-link:hover { color:#484848; } #share { width:325px; } #share ol { list-style:none; } #share li { float:left; padding-right:10px; } #share li a { display:block; height:55px; width:55px; text-indent:-9999px; border-radius:55px; -moz-border-radius:55px; -webkit-border-radius:55px; text-decoration:none; -webkit-transition:background-position 0.6s ease; -moz-transition:background-position 0.6s ease; -o-transition:background-position 0.6s ease; transition:background-position 0.6s ease; } #share li a:hover { background-color:#00abbd !important; } #share li a.share-twitter { background-position:center -1900px; background-color:#00acee; } #share li a.share-twitter:hover { background-position:center -1955px; } #share li a.share-fb { background-position:center -2010px; background-color:#0053a5; } #share li a.share-fb:hover { background-position:center -2065px; } #share li a.share-stumbleupon { background-position:center -2120px; background-color:#f04e23; } #share li a.share-stumbleupon:hover { background-position:center -2175px; } #share li a.share-google { background-position:center -2230px; background-color:#ecb420; } #share li a.share-google:hover { background-position:center -2285px; } #share li a.share-email { background-position:center -2340px; background-color:#484848; } #share li a.share-email:hover { background-position:center -2395px; } /* HOME PAGE COLS */ #containerk.home-col article { width:45.918367%; /* 450px / 980px; */ } #containerk.home-col aside { width:45.918367%; float:right; padding-bottom:0; } /* FLEXSLIDER */ .flexslider .slides > li { list-style:none; } .flexslider .slides img { width:100%; display:block } .slides:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } html[xmlns] .slides { display:block; } * html .slides { height:1%; } .no-js .slides > li:first-child { display:block; } /* No JavaScript Fallback */ .flexslider { position:relative; } .flex-viewport { max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease; } .loading .flex-viewport { max-height:300px; } .flexslider .slides { zoom:1; } .flex-control-nav { width:100%; position:absolute; bottom:20px; text-align:center; } .flex-control-nav li { display:inline-block; zoom:1; *display:inline; } .flex-control-paging li a { width:10px; height:10px; text-indent:-9999px; background-position:-600px -20px; display:block; margin-right:4px; cursor:pointer; } .flex-control-paging li a.flex-active { background-position:-600px 0; } .flex-control-paging li a:hover { background-position:-600px -40px; } /* AMBASSADORS ---------------------------------------------------------------------------------------------------------------*/ .ambassadors { } #containerk.ambassadors h1 { padding-bottom:40px; } .two-span { width:65.306122%; /* 640px / 980px; */ float:left; padding:0 2.0408163% 0 0; /* 20px / 980px; */ } .col-one { width:46.845%; /* 300px / 640px; */ padding:0 3.125% 0 0; /* 20px / 640px; */ float:left; background:url(/images/divide-vert.gif) right 0 repeat-y; } .col-two { width:46.845%; padding:0 0 0 3.125%; float:left; } .col-three { width:30.612245%; /* 300px / 980px; */ padding:0 0 0 2.0408163%; float:left; background:url(/images/divide-vert.gif) 0 0 repeat-y; } .progress-bar { float:left; margin:13px 0 0 20px; background:#07a4b4; border:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:214px; height:22px; -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2); box-shadow:inset 0 1px 3px rgba(0,0,0,0.2); } .progress-bar span { display:block; height:100%; background:#fff; border-top-left-radius:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topleft:5px; border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; background-image:-moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 20%); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(20%,rgba(0,0,0,0))); */ background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 20%); background-image:-o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 20%); background-image:-ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 20%); background-image:linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 20%); } .progress-bar span { -webkit-animation:pbanim 2.5s ease; /* Saf5, Chrome */ -moz-animation:pbanim 2.5s ease; /* Firefox 5-15 */ -o-animation:pbanim 2.5s ease; /* Opera 12+ */ animation:pbanim 2.5s ease; /* Saf5, Chrome, Firefox 16+ */ } @-webkit-keyframes pbanim { 0% { width:0; } } @-moz-keyframes pbanim { 0% { width:0; } } @-o-keyframes pbanim { 0% { width:0; } } @keyframes pbanim { 0% { width:0; } } /* white-space:nowrap;*/ /* MEDIA QUERIES (smaller) ---------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width:940px) { #top div p span, #top .progress-bar, #logos { display:none; } } /* MEDIA QUERIES (even smaller) ---------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width:700px) { #top .target h3, #top .sign-share p { display:none; } #top .target p { float:left; } } /* MEDIA QUERIES (tablet in landscape) ---------------------------------------------------------------------------------------------------------------*/ @media only screen and (device-width:768px) and (orientation:landscape) { body { font-size:0.6em; } .logo-msw, .pin-but { display:none; } #containerk article h1, #containerk article h2 { display:inherit; width:auto; height:auto !important; text-indent:0; padding-bottom:16px; background:none; } #logos { display:block; } #sas-links li { font-size:2.8em; display:inline; padding-right:15px; width:auto; float:none; clear:none; } #credits p { font-size:10px; } #credits { width:auto; float:none; clear:none; text-align:left; padding-top:5px; } #credits p { display:block; } #credits p.credit { padding-top:0; } } /* MEDIA QUERIES (mobile) ---------------------------------------------------------------------------------------------------------------*/ @media only screen and (max-width:480px) { #top nav .icon-prev, #top nav .icon-next, #top .sign-share h2 span, .thank-you-header, #containerk.thank-you-content span, .home-share #share-buts .pin-but { display:none; } #top nav li .icon-twitter { border-left:none; } #containerk { padding-top:30px; } #containerk h1, #containerk article h2 { font-size:3.8em; display:inherit; width:auto; height:auto !important; text-indent:0; padding-bottom:16px; background:none; } #containerk article p { font-size:1.7em; } #containerk article p.intro { font-size:2em; } #containerk.thank-you-content { padding-top:45px; } #containerk.thank-you-content article p a { border-bottom:none; color:#00abbd; } #primary { padding:20px 0; } #primary li { font-size:2.6em; line-height:1.1em; } #primary li a { padding-top:4px; } #share li { padding-right:5px; } #share li a { height:50px; width:50px; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; } .video-wrap { width:96%; padding:2%; } } #user-info { list-style:none; padding:0; margin:0;} #user-info li { margin-bottom:10px;} .u-info { width:419px; height:40px; border:0; font:20px NanumGothic; font-weight:400; padding-left:10px;} .address { font:20px NanumGothic; font-weight:400; border:0; width:419px; height:40px; padding-left:10px;} .address-btn { font: 20px NanumGothic; font-weight:400; color:#fff; background:#999; border:0; width:70px; height:40px;} .lightbox, #show-sns { display:none; } #v-list { list-style:none; font:1em NanumGothic; } .u-name {font:0.7em NanumGothic; width:60px; float:left; padding-right:10px; clear:left; font-weight:200; margin-bottom:0px; } .u-con { float:left; } .ifr { width:750px; max-width:750px; min-width:300px; height:750px; min-height:400px; } .b-str { font-weight:bold; } #img_t {width:350px;} #ma_a {width:100%; height:600px; positon:relative;padding-top:80px;} #img_titl {width:419px;}