/********* Published by Sung-hye Park (Grace Park), 2004 *********/ * {margin:0; padding:0; border:0;} body {background-color:#fff;} #wrap {width:100%; margin:0 auto;} img {-ms-interpolation-mode:bicubic;} @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: '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');} /************************************************************************************/ @media all and (max-width:480px) { /******* common *******/ .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 {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%; height:80px; z-index:100;} #top h1 {width:100%; overflow:hidden;} #top h1 img {z-index:2; background:url(../images/d_logo_1.png) no-repeat; background-size:30%; margin:0 0 0 3%; display:block;}/*logo*/ #top h3 {font:bold 13px 'consolas'; line-height:15px; font-weight:normal; color:#666; padding-left:3%; margin-top:-18%;} /******* GNB-NAV Start *******/ #gnb {width:100%; border-bottom:1px dashed #555; -webkit-border-bottom:1px dashed #555; -ms-border-bottom:1px dashed #555; -moz-border-bottom:1px dashed #555; -o-border-bottom:1px dashed #555;} /******* GNB-NAV End *******/ /******* Header End *******/ .img_main {border-top:1px dashed #555;-webkit-border-top:1px dashed #555;-ms-border-top:1px dashed #555;-moz-border-top:1px dashed #555;-o-border-top:1px dashed #555; border-bottom:1px dashed #555;-webkit-border-bottom:1px dashed #555;-ms-border-bottom:1px dashed #555;-moz-border-bottom:1px dashed #555;-o-border-bottom:1px dashed #555; clear:both; background:url(../images/m_img_2.png) no-repeat; background-size:150%; height:170px; margin-top:-1px;} .img_main img {opacity:0;} /******* Icon part Start*******/ icon_part {width:100%; height:auto; background-color:#F5F7DD;} #icon_part dl {width:50%; height:auto; float:left; list-style:none; text-align:center; margin:0 auto;} #icon_part dt {width:80%; margin:0 auto; padding-top:8%;} #icon_part dt h1 {font:700 21px 'Open Sans'; font-size:16px; font-weight:bold; color:#555; text-align:center; letter-spacing:-0.5pt;} #icon_part dt span {width:100%; font:normal 12px 'NanumGothic',나눔고딕; color:#444; margin:0 auto; line-height:12px; text-align:center letter-spacing:-0.5pt;} #icon_part dd img {width:38%; margin:6% 0 1% 0;} /******* Icon part End*******/ /******* Contents Start *******/ p#txt_ex {font:bold 20px 'consolas',나눔고딕; color:#fff; display:block; margin:2% 5% -1% 5%;} #sections {} #sections dl, #sections dt, #sections dd, #sections li {margin:0; padding:0; list-style:none;} #section_a {width:100%; background-color:#ddd; display:block; overflow:hidden;} #section_a ul.txt_gen {width:100%; margin:0 5%;} #section_a .txt_gen li {width:90%; float:left; font:normal 14px 'NanumGothic',나눔고딕; line-height:15px;} #section_a .img_ports img {width:70%; margin:2% 15%;} #section_a .img_ports {margin-top:2%;} #section_b {width:90%; background-color:#fff; display:block; margin:2% auto;} #section_b ul {width:100%;} #section_b li {width:24.2%; display:block; background-color:#fff; float:left; margin:1px;} #section_b li span {width:100%; height:36px; font:bold 14px 'NanumGothic',나눔고딕; line-height:36px; background-color:#ccc; color:#fff; padding:0.5%; margin-top:-1%; display:block; text-align:center; } #section_b li img {width:85%; padding:5px 0 0 10px; margin:0 auto;} #section_c {width:100%; height:170px; background-color:#ddd; overflow:hidden; maring-top:-10%;} #section_c ul {width:90%; margin:0 auto;} #section_c li {width:50%; float:left; margin-top:3%;} #section_c li img {width:100%; overflow:hidden; position:relative; border:1px solid #666; -webkit-border:1px solid #666; -ms-border:1px solid #666; -moz-border:1px solid #666; -o-border:1px solid #666;} #section_c span {width:70%; height:50px; overflow:hidden; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis; display:block; position:relative; top:-50px; right:0; padding-right:4%; float:right; font:normal 13px 'NanumGothic',나눔고딕;} #section_c span strong {font:bold 14px 'NanumGothic',나눔고딕; color:#000; line-height:20px;} #section_c li a {text-decoration:none; font:normal 13px 'NanumGothic',나눔고딕; color:#333; letter-spacing:-0.5pt;} #section_c li a:hover {color:#fff;} .img_ports img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0 3% 3% 0;} /******* Contents End *******/ /******* Footer Start *******/ footer {width:100%; height:90px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:13px; margin:1.5%;} footer p {margin:10px 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:35px;} 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 *******/ } /************************************************************************************/ @media all and (min-width:481px) and (max-width:800px) { /******* 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:10%; right: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 Start *******/ #top {width:100%; height:75px; overflow:hidden; background-color:#e5e5e5; position:relative; z-index:100; border-bottom:1px solid #ccc; -webkit-border-bottom:1px solid #ccc; -ms-border-bottom:1px solid #ccc; -moz-border-bottom:1px solid #ccc; -o-border-bottom:1px solid #ccc;} #top h1 img {margin:5px 0 0 25px; float:left; z-index:2; background:url(../images/d_logo_2.png) no-repeat; background-size:35%;} #top h3 {width:100%; font:bold 13px 'consolas'; line-height:14px; font-weight:normal; color:#999; margin-top:3%;} /******* GNB-NAV Start *******/ #gnb {font:bold 90% 'NanumGothicBold',굵은나눔고딕,NanumGothic,나눔고딕; height:38px; z-imdex:500;} #gnb a {color:#333;} #gnb a:hover {color:#ce3951;} /******* GNB-NAV End *******/ /******* Header End *******/ .img_main {border-top:1px dashed #555;-webkit-border-top:1px dashed #555;-ms-border-top:1px dashed #555;-moz-border-top:1px dashed #555;-o-border-top:1px dashed #555; border-bottom:1px dashed #555;-webkit-border-bottom:1px dashed #555;-ms-border-bottom:1px dashed #555;-moz-border-bottom:1px dashed #555;-o-border-bottom:1px dashed #555; clear:both; background:url(../images/m_img_3.png) no-repeat; background-size:120%; height:250px; margin-top:-1px; margin-bottom:3%;} .img_main img {opacity:0;} /******* Icon part Start*******/ icon_part {width:100%; height:auto; background-color:#F5F7DD; padding-bottom:4%; display:block;} #icon_part dl {width:50%; height:auto; float:left; list-style:none; text-align:center; margin:0 auto;} #icon_part dt {width:80%; margin:0 auto; padding-top:8%;} #icon_part dt h1 {font:bold 25px 'Open Sans'; font-size:16px; font-weight:bold; color:#ccc; text-align:center; margin-top:-10%;} #icon_part dt span {width:100%; font:normal 13px 'NanumGothic',나눔고딕; color:#444; margin:0 auto; line-height:12px; text-align:center letter-spacing:-0.5pt;} #icon_part dd img {width:38%; margin:6% 0 1% 0;} /******* Icon part End*******/ /******* Contents Start *******/ p#txt_ex {font:bold 28px 'consolas',나눔고딕; color:#fff; display:block; margin:2% 5% -1% 5%;} #sections {} #sections dl, #sections dt, #sections dd, #sections li {margin:0; padding:0; list-style:none;} #section_a {width:100%; background-color:#ddd; display:block; overflow:hidden;} #section_a ul.txt_gen {width:100%; margin:0 0 -2% 5%;} #section_a .txt_gen li {width:90%; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; padding-bottom:-5%;} #section_a .img_ports {width:90%; margin:0 auto;} #section_a .img_ports img {width:45.6%; margin:0 2% 4% 2%;} #section_b {width:90%; background-color:#fff; display:block; margin:2% auto;} #section_b ul {width:100%;} #section_b li {width:24.2%; display:block; background-color:#fff; float:left; margin:1px;} #section_b li span {width:93%; height:35px; font:bold 14px 'NanumGothicBold',굵은나눔고딕,NanumGothic,나눔고딕; line-height:35px; background-color:#ccc; color:#fff; display:block; text-align:center; overflow:hidden;} #section_b li img {width:85%; padding:5px 0 0 10px; margin:0 auto; border:1px dashed #ccc; -webkit-border:1px dashed #ccc; -ms-border:1px dashed #ccc; -moz-border:1px dashed #ccc; -o-border:1px dashed #ccc;} #section_c {width:100%; height:170px; background-color:#ddd; overflow:hidden; maring-top:-10%;} #section_c ul {width:90%; margin:0 auto;} #section_c li {width:25%; float:left; margin-top:3%;} #section_c li img {width:100%; overflow:hidden; position:relative; border:1px solid #666; -webkit-border:1px solid #666; -ms-border:1px solid #666; -moz-border:1px solid #666; -o-border:1px solid #666;} #section_c span {width:70%; height:50px; overflow:hidden; white-space:nowrap; word-wrap:normal; text-overflow:ellipsis; display:block; position:relative; top:-50px; right:0; padding-right:4%; float:right; font:normal 13px 'NanumGothic',나눔고딕;} #section_c span strong {font:bold 14px 'NanumGothic',나눔고딕; color:#000; line-height:20px;} #section_c li a {text-decoration:none; font:normal 13px 'NanumGothic',나눔고딕; color:#333; letter-spacing:-0.5pt;} #section_c li a:hover {color:#fff;} .img_ports img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0 3% 3% 0;} /******* Contents End *******/ /******* Footer Start *******/ footer {width:100%; height:80px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:13px; margin:1.5%;} footer p {margin:0 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:35px;} 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 *******/ } /************************************************************************************/ @media all and (min-width: 801px){ /******* All Common Start *******/ #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 {color:#fff; background-color:#ccc;} /******* All Common End *******/ /******* Header Start *******/ #top {width:100%; height:75px; overflow:hidden; background-color:#e5e5e5; position:relative; z-index:100; border-bottom:1px solid #ccc; -webkit-border-bottom:1px solid #ccc; -ms-border-bottom:1px solid #ccc; -moz-border-bottom:1px solid #ccc; -o-border-bottom:1px solid #ccc;} #top h1 img {margin:5px 0 8px 25px; float:left; z-index:2; background:url(../images/d_logo_2.png) no-repeat; background-size:42%;} #top h3 {font-size:14px; font-weight:normal; color:#fff; float:right; margin:3% 2% 0 0;} /******* GNB-NAV Start *******/ #gnb {font:normal 17px 'NanumGothic',나눔고딕; height:40px; z-imdex:500; margin-left:6px;} #gnb a {color:#333;} #gnb a:hover {color:#ce3951;} /******* GNB-NAV End *******/ /******* Header End *******/ .img_main {border-top:1px dashed #555;-webkit-border-top:1px dashed #555;-ms-border-top:1px dashed #555;-moz-border-top:1px dashed #555;-o-border-top:1px dashed #555; border-bottom:1px dashed #555;-webkit-border-bottom:1px dashed #555;-ms-border-bottom:1px dashed #555;-moz-border-bottom:1px dashed #555;-o-border-bottom:1px dashed #555; clear:both; background:url(../images/m_img_1.png) no-repeat; background-size:103%; margin-top:-1px;} .img_main img {opacity:0; height:100%;} /******* Icon part Start*******/ #icon_part {width:96.5%; height:auto; overflow:hidden; margin-left:3.2%;} #icon_part dl {width:24.5%; height:auto; float:left; list-style:none; text-align:center; border-right:1px dashed #2b608c;} #icon_part dl:last-child {border:none;} #icon_part .last-border {z-index:1000; border:1px solid #f3f7f7; -webkit-border:1px solid #f3f7f7; -ms-border:1px solid #f3f7f7; -moz-border:1px solid #f3f7f7; -o-border:1px solid #f3f7f7;} #icon_part dl.border_none {border-right:none;} #icon_part dt {width:80%; margin:0 auto; overflow:hidden;} #icon_part dt h1 {font:700 20px 'Open Sans'; font-size:20px; font-weight:bold; color:#555; text-align:center; margin:15px 0 10px 0; letter-spacing:-0.5pt;} #icon_part dt span {font:normal 15px 'NanumGothic',나눔고딕; color:#444; width:70%; margin:0 auto; line-height:15px; text-align:center letter-spacing:-0.5pt;;}/*better no-margin definition on span tag, instead, can leave on bigger tags such ass h1, dd etc...*/ #icon_part dd img {width:35%; margin:25px 0 20px 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*******/ /******* Contents Start *******/ p#txt_ex {font:bold 30px 'consolas',나눔고딕; color:#fff; display:block; margin:-1.5% 0 -0.5% 0;} #sections {height:100%; overflow:hidden;} #sections dl, #sections dt, #sections dd, #sections li {margin:0; padding:0; list-style:none;} #section_a {width:100%; background-color:#ddd; display:block; overflow:hidden; padding:3% 0 0 5.3%;} #section_a ul.txt_gen {margin:-0.5% 0 1% 0;} #section_a .txt_gen li {width:90%; max-width:900px; float:left; font:normal 14px 'NanumGothic',나눔고딕;} #section_a .img_ports img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left;} #section_b {width:90%; background-color:#fff; background:url(../images/bk_cross.png) repeat; display:block; overflow:hidden; padding:3% 0 0 5.3%;} #section_b ul {width:100%; margin:0 auto; overflow:hidden; padding:2px 0 3.5% 2px;} #section_b li {width:10.25%; display:block; padding:1%; border:2px dashed #ddd; margin:-2px 0 0 -2px; background-color:#fff; float:left;} #section_b li span {width:100%; height:36px; font:bold 17px 'NanumGothic',나눔고딕; line-height:36px; background-color:#ccc; color:#fff; padding:1%; margin-top:-1%; display:block; text-align:center; } #section_b li img {width:85%; padding:5px 0 0 10px; margin:0 auto;} #section_c {width:100%; height:210px; background-color:#ddd; display:block; overflow:hidden; padding:3% 0 2% 5.3%;} #section_c ul {width:100%; margin:0 auto;} #section_c li {width:20%; float:left; margin:2% 3% 3% 0;} #section_c li img {width:100%; overflow:hidden; position:relative; border:1px solid #666;} #section_c span {width:70%; height:auto; overflow:hidden; display:block; position:relative; top:-90px; right:0; padding-right:2%; float:right; font:normal 13px 'NanumGothic',나눔고딕; overflow:hidden;} #section_c span strong {font:bold 15px 'NanumGothic',나눔고딕; color:#000; line-height:20px;} #section_c li a {text-decoration:none; font:normal 13px 'NanumGothic',나눔고딕; color:#333;} #section_c li a:hover {color:#fff;} .img_ports img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0 3% 3% 0;} /******* Contents End *******/ /******* Footer Start *******/ footer {width:100%; height:90px;} footer div {width:90%; margin:0 auto;} footer address {float:left; font-size:13px; margin:1.5%;} footer p {margin:10px 0 0 5px; float:right;} footer p a{float:left; width:36px;} footer p img {width:35px; margin-right:10px;} 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 *******/ }