* {margin:0; padding:0; border:0; font-family: 'NanumGothic'; } body {background-color:#fff; font-family: 'NanumGothic'; } #wrap {width:100%; margin:0 auto;} img {-ms-interpolation-mode:bicubic;} /*doesn't work*/ @font-face {font-family: 'NanumGothicBold'; src: url('../fonts/NanumGothicBold.ttf') format('truetype');} @font-face {font-family: 'NanumGothicBold'; src: url('../fonts/NanumGothicBold.otf') format('otf');} @font-face {font-family: 'NanumGothicBold'; src: url('../fonts/NanumGothicBold.woff') format('woff');} @font-face {font-family: 'NanumGothic'; src: url('../fonts/NanumGothic.ttf') format('truetype');} @font-face {font-family: 'NanumGothic'; src: url('../fonts/NanumGothic.otf') format('otf');} @font-face {font-family: 'NanumGothic'; src: url('../fonts/NanumGothic.woff') format('woff');} @font-face {font-family: 'NBG'; src: url('../fonts/NanumGothicBold.ttf') format('truetype');} @font-face {font-family: 'NBG'; src: url('../fonts/NanumGothicBold.otf') format('otf');} @font-face {font-family: 'NBG'; src: url('../fonts/NanumGothicBold.woff') format('woff');} /************************************************************************************/ @media all and (max-width:480px) { /******* common *******/ .add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;} .add_txt a {color:#d65c6f;} .add_txt a:hover {color:#000;} .add_txt a:visited {color:#555;} #bt_top a {text-decoration:none; position:fixed; color:#333; font-size:14px; bottom:10%; right:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:6px; display:block; border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;} /******* Header Start *******/ #top {width:100%; overflow:hidden; border-bottom:1px solid #fff; z-index:100; box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc; }/*to set the logo and top texts*/ /*#top h1 {width:90%; font:bold 28px 'consolas'; float:left; letter-spacing:-0.8pt; line-height:28px; color:#333;} #top h1 span {width:100%; text-align:center; color:#d77a54;}*/ #top h1 img {width:23%; margin:3% 0 0 3%; z-index:2;}/*logo*/ #top h2 {font-size:11px; font-weight:bold; color:#666; position:absolute; top:3%; left:27.5%;} /*tecarto*/ #top h3 {font:bold 11px 'consolas'; line-height:11px; font-weight:normal; letter-spacing:-1pt; color:#ccc; position:absolute; top:7%; left:27.5%;} #top h3 p {font-size:11px; color:#ccc; line-height:11px; position:relative; top:0; left:0;}/*text: technical art organization*/ /******* Header End *******/ /******* GNB-NAV Start *******/ #gnb {width:100%;} /******* GNB-NAV End *******/ /******* Icon part *******/ #icon_part {width:90%; overflow:hidden; margin:0 auto;}/*in mobile the px's area-definition is narrower*/ #icon_part dl {list-style:none; text-align:center; margin:0 auto;} #icon_part dl:last-child {list-style:none; text-align:center; margin:0 auto;} #icon_part dt {width:100%; height:50%; margin:0 auto; overflow:hidden;} #icon_part dt h1 {font-size:14px; font-weight:700; color:#444; text-align:center;} #icon_part dt h1:first-child {margin-top:5px;} #icon_part dt span {font-size:11px; line-height:12px; display:block; font-weight:normal; text-align:center; margin:0 auto; color:#666;} #icon_part dd img {width:28%; margin-top:5px;} /*#icon_part dd:last-child {margin-bottom:15px; border:1px solid #333;}Why doesn't this work????*/ #icon_part dd.icon_last {margin-bottom:15px;} /******* Contents *******/ /******* JQ: Slide down Start *******/ #slidedown {height:100%; overflow:hidden; z-index:1;} #slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;} #section_a, #section_c {background-color:#d9dbdb; width:100%; height:100%; margin:0 auto; display:block;} #section_b, #section_d {background-color:#fff; width:100%; height:100%; margin:0 auto; display:block;} #slidedown .content {width:90%; margin:0 auto;} #section_a h1, #section_c h1 {font:700 17px 'Open Sans'; letter-spacing:-0.2pt; color:#fff; padding-bottom:7px; padding-top:10px;}/*margin doesn't work here*/ #section_b h1, #section_d h1 {font:700 17px 'Open Sans'; letter-spacing:-0.2pt; color:#d9dbdb; padding-bottom:7px; padding-top:8px;}/*margin doesn't work here*/ #slidedown dl section span {width:90%; width:100%; /*font:normal 15px 'NanumGothicBold',나눔고딕;*/ font-size:15px; font-weight:normal; color:#fff; background-color:#555; display:block; letter-spacing:-0.5pt; margin-bottom:5px; padding-left:10px;} #slidedown dl section h3 {width:95%; /*font:normal 12px 'NanumGothic',나눔고딕;*/ font-size:12px; font-weight:normal; line-height:13px; overflow:hidden; margin:5px 0 0 5px;} #slidedown dl section p.eng_txt {width:100%; /*font:normal 12px 'NanumGothic',나눔고딕;*/ font-size:12px; font-weight:normal; line-height:13px; margin:0 auto;} #slidedown dl section .image img {width:60%; border:1px solid #B7B7B7; margin:2% 19%;} #slidedown dl section .image_1 img {width:60%; border:1px solid #B7B7B7; margin:2% 18% 2% 23%;} /*** More Button ***/ #slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;} #slidedown dl dt.more {font:bold 14px 'corbel'; margin:0 0 10px 15px;} #slidedown dl dt.more a {color:#d65c6f; text-decoration:none;} #slidedown dl dt.more a:hover {color:#000;} #slidedown dl dt.no_more {font:bold 14px 'corbel'; margin:0 0 10px 15px; color:#d9dbdb;} /*** ***/ /*** Open Area ***/ #slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;} #slidedown dl dd p {width:90%; margin:0 auto;} #slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;} #slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;} /*** ***/ /******* JQ: Slide down End *******/ #music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;} #music h1 {font:bold 23px 'corbel'; margin-top:10px; letter-spacing:-0.5;} #music h1 a {color:#333; text-decoration:none;} #music h1 a:click {color:#d3445a;} #music h2 span {/*font:normal 12px 'NanumGothic';*/ font-size:12px; font-weight:normal; line-height:14px; color:#666;} #music h2 {width:90%; /*font:700 12px 'NanumGothic';*/ font-size:12px; font-weight:normal; color:#222; line-height:10px;/*if the line-height tag or padding doesn't work*/ display:block; color:#666; text-align:center; margin:0 auto; padding-top:-8px;} /******* Footer *******/ footer {width:100%; height:74px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:11px; line-height:12px; margin-top:5px;} footer p {margin:-10px 0 10px 3px; float:right;} footer p a {float:left; width:36px;} footer p img {width:25px; float:right;}/*margin, padding aren't worked*/ } /************************************************************************************/ @media all and (min-width:481px) and (max-width:767px) { /******* common *******/ .add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;} .add_txt a {color:#d65c6f;} .add_txt a:hover {color:#000;} .add_txt a:visited {color:#555;} #bt_top a {text-decoration:none; position:fixed; color:#333; font-size:15px; bottom:3%; left:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:8px; display:block; border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;} /******* Header *******/ /******* GNB-NAV Start *******/ #gnb {width:98%; background-color:#ddd; padding-left:2%;} /******* GNB-NAV End *******/ #top {width:100%; height:85px; overflow:hidden; border-bottom:1px solid #fff; position:relative; z-index:100; box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc; }/*to set the logo and top texts*/ #top h1 img {width:18%; margin:2%; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/ #top h2 {font-size:13px; font-weight:bold; color:#666; position:absolute; top:28%; left:22%; float:left;} #top h3 {font:bold 13px 'consolas'; font-weight:normal; letter-spacing:-0.5pt; color:#ccc; float:right; margin:3% 10% 0 2%;} nav img {width:200%;} /******* Icon part *******/ #icon_part {width:98%; overflow:hidden; background-color:#fff; margin-left:2%;} #icon_part dl {width:48%; float:left; list-style:none; text-align:center;} #icon_part dt {width:100%; height:50%; margin:0 auto; overflow:hidden;}/*long texts*/ #icon_part dt h1 {font-size:18px; font-weight:700; color:#888; text-align:center; letter-spacing:-0.8pt; margin:12px 0 5px 0;} #icon_part dt span {font-size:13px; text-align:center;} #icon_part dd img {width:40%; margin:10px;} /******* Contents Start *******/ /******* JQ: Slide down Start *******/ #slidedown {height:100%; overflow:hidden; z-index:1;} #slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;} #section_a, #section_c {background-color:#d9dbdb; width:100%; height:100%; margin:0 auto; display:block;} #section_b, #section_d {background-color:#fff; width:100%; height:100%; margin:0 auto; display:block;} #slidedown .content {width:90%; margin:0 auto;} #section_a h1, #section_c h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; color:#fff; padding-bottom:17px; padding-top:10px;}/*margin doesn't work here*/ #section_b h1, #section_d h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; color:#d9dbdb; padding-bottom:17px; padding-top:10px;}/*margin doesn't work here*/ #slidedown dl section span {width:100%; font:normal 16px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; display:block; letter-spacing:-0.5pt; margin:-13px 0 5px 0;} #slidedown dl section h3 {width:90%; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden; margin:5px;} #slidedown dl section p.eng_txt {width:100%; font:normal 13px 'NanumGothic',나눔고딕; line-height:14px; margin:0 auto;} #slidedown dl section .image img {width:60%; border:1px solid #B7B7B7; margin:2% 19%;} #slidedown dl section .image_1 img {width:63%; border:1px solid #B7B7B7; margin:2% 18% 2% 23%;} /*** More Button ***/ #slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;} #slidedown dl dt.more {font:bold 14px 'corbel'; margin:0 0 10px 15px;} #slidedown dl dt.more a {color:#d65c6f; text-decoration:none;} #slidedown dl dt.more a:hover {color:#000;} #slidedown dl dt.no_more {font:bold 14px 'corbel'; margin:0 0 10px 15px; color:#d9dbdb;} /*** ***/ /*** Open Area ***/ #slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;} #slidedown dl dd p {width:90%; margin:0 auto;} #slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;} #slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;} /*** ***/ /******* JQ: Slide down End *******/ /*** Contents End ***/ #music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;} #music h1 {font:bold 40px 'corbel'; margin:10px auto;} #music h1 a {color:#333; text-decoration:none;} #music h1 a:click {color:#d3445a;} #music h2 {width:90%; font:800 13px 'NanumGothic'; color:#222; text-align:center; margin:0 auto; letter-spacing:-0.2pt;} #music h2 span {font:normal 13px 'NanumGothic'; letter-spacing:-0.2pt;} /******* Footer *******/ footer {width:100%; height:70px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:12px; margin-top:10px;} footer p {margin:10px 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:35px; padding:0 5px 5px 0;} #extra_deco {width:100%; height:10px; margin-top:10px; background-color:#ddd; /** background pattern sample start background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102); -webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; behavior:url(../js/pie/ie-css3.htc);**/ } } /************************************************************************************/ @media all and (min-width:768px) and (max-width:979px) { /******* Common *******/ .add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;} .add_txt a {color:#d65c6f;} .add_txt a:hover {color:#000;} .add_txt a:visited {color:#555;} nav {padding-left:4.5%; margin-top:-10px;}/*the res_toggle>styles 's "margin:0 auto" shold be cross out to make this work.*/ #bt_top a {text-decoration:none; position:fixed; color:#333; font-size:15px; bottom:6%; right:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:10px; display:block; border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;} #bt_top a:hover {text-decoration:none; position:fixed; color:#fff; font-size:15px; bottom:3%; right:4%; font-weight:bold; z-index:100; background-color:#ddd; padding:10px; display:block; border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;} /******* Header Start *******/ /******* GNB-NAV Start *******/ #gnb {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-left:10px;} /******* GNB-NAV End *******/ #top {width:100%; overflow:hidden; background-color:#fff; border-bottom:1px solid #fff; position:relative; z-index:100; box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;}/*to set the logo and top texts*/ #top h1 img {width:14%; margin:15px; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/ #top h2 {font-size:13px; font-weight:bold; color:#666; position:absolute; top:35%; left:18%; float:left;} #top h3 {font:bold 13px 'consolas'; font-weight:normal; letter-spacing:-0.5pt; color:#ccc; float:right; margin:3.5% 1.5% 0 0;} /******* Icon part *******/ #icon_part {width:98%; overflow:hidden; background-color:#fff; margin-left:1.3%;} #icon_part dl {width:49%; float:left; list-style:none; text-align:center;} #icon_part dt {width:95%; height:50%; margin:0 auto; overflow:hidden;}/*long texts*/ #icon_part dt h1 {font-size:18px; font-weight:700; color:#888; text-align:center; letter-spacing:-0.8pt; margin:12px 0 5px 0;} #icon_part dt span {font-size:13px; text-align:center;} #icon_part dd img {width:35%; margin:10px;} /******* Contents Start *******/ /******* JQ: Slide down Start *******/ #slidedown {position:relative; height:100%; overflow:hidden;} #slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;} #slidedown dl section {width:100%; height:100%; margin:0 auto; display:block; overflow:hidden;} #section_a, #section_c {background-color:#d9dbdb;} #section_b, #section_d {background-color:#fff;} #slidedown .content {width:98%; margin:0 auto; padding-left:4.5%;} #section_a h1, #section_c h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#fff;} #section_b h1, #section_d h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#d9dbdb;} #slidedown dl section span {width:23%; font:normal 14px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; padding:1px; display:block; letter-spacing:-0.5pt; margin-right:1%;} #slidedown dl section h3 {width:23%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:16px; overflow:hidden; margin-top:10px;} #slidedown dl section p.eng_txt {width:100%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden;} #slidedown dl section .image img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:-3% 0 0 3.2%;} #slidedown dl section .image_1 img {width:21%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0.5% -1% 0 4.1%;} #slidedown dl section .image_1 img:last-child {margin-bottom:45px;} /*** More Button ***/ #slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;} #slidedown dl dt.more {font:bold 17px 'corbel'; margin:10px 0 20px 20px;} #slidedown dl dt.more a {color:#d65c6f; text-decoration:none;} #slidedown dl dt.more a:hover {color:#000;} #slidedown dl dt.no_more {font:bold 17px 'corbel'; margin:10px 0 20px 20px; color:#d9dbdb;} /*** ***/ /*** Open Area ***/ #slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;} #slidedown dl dd p {width:90%; margin:0 auto;} #slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;} #slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;} /*** ***/ /******* JQ: Slide down End *******/ #music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;} #music h1 {font:bold 40px 'corbel'; margin:10px auto;} #music h1 a {color:#333; text-decoration:none;} #music h1 a:hover {color:#d3445a;} #music h2 {width:90%; font:800 13px 'NanumGothic'; color:#222; text-align:center; margin:0 auto;} #music h2 span {font:normal 13px 'NanumGothic';} /*** Contents End ***/ /******* Footer Start *******/ footer {width:100%; height:74px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:12px; margin-top:10px;} footer p {margin:10px 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:35px; padding:0 5px 5px 0;} /******* Footer End *******/ #extra_deco {width:100%; height:10px; margin-top:10px; background-color:#ddd; /** background pattern sample start background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102); -webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; behavior:url(../js/pie/ie-css3.htc);**/ } } /************************************************************************************/ @media all and (min-width: 980px){/******* All Common Start *******/ .add_txt {font:bold 13px 'corbel'; font-weight:bold; float:right; margin-top:10px;} .add_txt a {color:#d65c6f;} .add_txt a:hover {color:#000;} .add_txt a:visited {color:#555;} #bt_top a {position:fixed; color:#333; font-size:16px; bottom:3%; right:2%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:10px; display:block; border:2px solid #ddd; text-decoration:none; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -ms-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; -o-box-shadow:1px 1px 5px #333;} #bt_top a:hover {position:fixed; color:#fff; font-size:16px; bottom:3%; right:2%; font-weight:bold; z-index:100; background-color:#999; padding:10px; display:block; border:2px solid #ddd; text-decoration:none; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -ms-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; -o-box-shadow:1px 1px 5px #333;} /******* All Common End *******/ /******* Header Start *******/ /******* GNB-NAV Start *******/ #gnb {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} /******* GNB-NAV End *******/ #top {width:100%; overflow:hidden; background-color:#fff; border-bottom:1px solid #fff; position:relative; z-index:100; box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;}/*to set the logo and top texts*/ #top h1 img {width:8%; margin:15px 0 5px 15px; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/ #top h2 {font-size:15px; font-weight:bold; color:#666; position:absolute; top:34%; left:11%; float:left;} #top h3 {font-size:14px; font-weight:normal; color:#ccc; float:right; margin:2% 2% 0 0;} /******* Icon part Start*******/ #icon_part {width:96.5%; height:auto; overflow:hidden; margin-left:3.5%;}/*careful for width*/ #icon_part dl {width:24%; height:auto; float:left; list-style:none; text-align:center; border-right:1px dashed #c9c9c9;} #icon_part dl:last-child {border:none;} #icon_part dl.border_none {border-right:none;} #icon_part dt {width:96%; margin:0 auto; overflow:hidden; min-height:110px;} #icon_part dt h1 {font-size:21px; font-weight:700; color:#888; text-align:center; margin:15px 0 10px 0;} #icon_part dt span {font-size:13px !important; font-weight:normal; line-height:14px; text-align:center;}/*better no-margin definition on span tag, instead, can leave on bigger tags such ass h1, dd etc...*/ #icon_part dd img {margin:15px 0 25px 0;} #icon_part dd a img {width:36%; transition: all 1s; transform:scale(1); -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1);} #icon_part dd a img:hover {transform:scale(1.1); -webkit-transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1);} #icon_part dd a img:visited {width:36%;} .ani_over {width:95px; background-color:red;} .ani_over a {width:95px; background-color:red;} .ani_over a:hover {width:95px; background-color:red;} /******* Icon part End*******/ /******* Header End *******/ /******* Contents Start *******/ /**** JQ: Main Dropdown Start ****/ #slidedown {position:relative; height:100%; overflow:hidden;} #slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;} #slidedown dl section {width:100%; height:100%; margin:0 auto; display:block; overflow:hidden;} #section_a, #section_c {background-color:#d9dbdb;} #section_b, #section_d {background-color:#fff;} #slidedown .content {width:98%; margin:0 auto; padding-left:4.5%;} #section_a h1, #section_c h1 {font:700 20px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#fff;} #section_b h1, #section_d h1 {font:700 20px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#d9dbdb;} #slidedown dl section span {width:23%; font:normal 16px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; padding:1px; display:block; letter-spacing:-0.5pt; margin-right:1%;} #slidedown dl section h3 {width:23%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:16px; overflow:hidden; margin-top:10px;} #slidedown dl section p.eng_txt {width:100%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden;} #slidedown dl section .image img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:-3% 0 0 3.2%;} #slidedown dl section .image_1 img {width:21%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0.5% -1% 0 4.1%;} #slidedown dl section .image_1 img:last-child {margin-bottom:45px;} /*** More Button ***/ #slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;} #slidedown dl dt.more {font:bold 16px 'corbel'; margin:20px 0 20px 40px;} #slidedown dl dt.more a {color:#d65c6f; text-decoration:none;} #slidedown dl dt.more a:hover {color:#000;} #slidedown dl dt.no_more {font:bold 16px 'corbel'; margin-bottom:20px; color:#d9dbdb;} /*** ***/ #slidedown dl dd {width:95%; margin:0 auto;} #slidedown dl dd img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;} /**** JQ: Main Dropdown End ****/ /**** Music Start ****/ #music {width:100%; margin:0 auto; border-top:1px solid #ddd; text-align:center; background-color:#ccc;} #music h1 {font:normal 140px 'corbel'; display:block; margin-top:-15px; letter-spacing:-0.8pt;} #music h1 a {color:#333; text-decoration:none;} #music h1 a:hover {color:#d3445a;} #music h2 {font:800 13px 'NanumGothic'; color:#222; margin:-20px 0 30px 0; text-align:center;} #music h2 span {font:normal 13px 'NanumGothic';} /**** Music End ****/ /******* Contents End *******/ /******* Footer Start *******/ footer {width:100%; height:65px;} footer div {width:90%; margin:0 auto; /*border-top:1px solid #ddd; When another section portfolio added, this should be appeard back*/} footer address {float:left; font-size:13px; margin-top:10px;} footer p {margin:10px 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:32px; /*clear:both; padding:0 5px 5px 0;*/} footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;} footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;} /******* Footer End *******/ /******* Extra *******/ #extra_deco {width:100%; height:20px; margin-top:20px; background-color:#ddd; /** background pattern sample start background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102); -webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; -pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; behavior:url(../js/pie/ie-css3.htc);/*구형 익스플로러를 위한 스크립트 핵- 프리픽스 코드들 뒤, radius, box-shadow, text-shadow 에 추가 적용**/ } }