File name
Commit message
Commit date
@charset "utf-8";
/* 변수 선언 */
:root{
--img-box1: url('https://www.icqa.or.kr/images/cn/box1_1_bg.png');
--img-box2: url('https://www.icqa.or.kr/images/cn/box1_2_bg.png');
--img-box3: url('https://www.icqa.or.kr/images/cn/box1_3_bg.png');
--img-box4: url('https://www.icqa.or.kr/images/cn/box1_4_bg.png');
}
/* 변수 선언 */
/* 공통 */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
background-color: white;
}
ul li {
list-style: none;
}
a, a:hover, a:link, a:active{
text-decoration: none;
color: #222;
}
.wrap {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.bold {font-weight: 600;}
.left {float: left;}
.right {float: right;}
.red {color: red;}
.green {color: green;}
.blue {color: blue;}
.white {color: white;}
.black {color: black;}
.grey {color: #aaa;}
.w50 {width: 50px;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w32p {width: 32%;}
.w66p {width: 66%;}
.h50 {height: 50px;}
.h100 {height: 100px;}
.h200 {height: 200px;}
.bg_red {background-color: red;}
.bg_black {background-color: black;}
.bg_green {background-color: green;}
.bg_blue {background-color: blue;}
.big {font-size: 2em;}
.small {font-size: 0.5em;}
.m10 {margin: 10px;}
.m50 {margin: 50px;}
.m100 {margin: 100px;}
.m10 {margin-left: 10px;}
.ml2p {margin-left: 2%;}
.p10 {padding: 10px;}
.p50 {padding: 50px;}
.p100 {padding: 100px;}
.mt100 {margin-top: 100px;}
/* top */
.top {
background-color: #1b4fa0;
width: 100%;
}
.top .bg{
background-color: #143b78;
color: #fff;
padding: 10px 20px;
font-size: 0.8rem;
float: left;
}
.top .bg:hover {
color: #ccc;
}
.top .gnb {
text-align: right;
}
.top ul li {
display: inline-block;
}
.top ul li a {
display: block;
padding: 10px 15px;
font-size: 0.8rem;
color: #fff;
}
.top ul li a:hover {
color: #ccc;
}
nav {
background-color: #eee;
}
nav .logo {
float: left;
padding: 16px 0px;
width: 30%;
}
nav .lnb {
width: 70%;
display: inline-block;
}
nav .lnb li {
float: left;
width: 20%;
}
nav .lnb li a{
display: block;
padding: 27px 0;
font-weight: 600;
font-size: 1.1rem;
text-align: center;
}
nav .lnb li a:hover {
color: #005baa;
}
/* MAIN */
section {
width: 100%;
margin-top: 25px;
}
section:after {
content: '';
display: block;
clear: both;
}
/* SECTION1 */
#section1 ul li {
background-color: #333;
float: left;
min-height: 225px;
text-align: center;
width: 23%;
margin-left: 2%;
}
#section1 ul li a{
color: #fff;
display: block;
padding: 50px 0;
width: 100%;
}
#section1 ul li h3 {
font-size: 1.6rem;
font-weight: 600;
}
#section1 ul li p {
font-size: 0.8rem;
margin-top: 15px;
border: 1px solid white;
padding: 5px 15px;
display: inline-block;
}
#section1 .box {
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
}
#section1 #box1 {
margin-left: 0;
background-color: #00a882;
background-image: var(--img-box1)
}
#section1 #box1:hover {
background-color: #00c29a;
}
#section1 #box2 {
background-color: #2263c8;
background-image: var(--img-box2)
}
#section1 #box2:hover {
background-color: #2875db;
}
#section1 #box3 {
background-color: #2083cb;
background-image: var(--img-box3)
}
#section1 #box3:hover {
background-color: #2592df;
}
#section1 #box4 {
background-color: #ff893e;
background-image: var(--img-box4)
}
#section1 #box4:hover {
background-color: #ff944c;
}
/* SECTION2 */
.board_box {
width: 46%;
margin-right: 4%;
display: inline-block;
font-size: 0.8rem;
}
.board_title {
width: 100%;
font-size: 1.5rem;
border-bottom: 3px solid #005BAA;
margin-bottom: 5%;
padding-bottom: 2%;
}
.board_title a{
float: right;
color: #005BAA;
font-size: 0.8rem;
position: relative;
top: 15px;
}
.board_content ul li {
line-height: 22px;
background-image: url("https://www.icqa.or.kr/images/cn/bullet1.png") no-repeat left center;
}
#section2 .board_content li:nth-child(odd) {
background-color: #e8e6ee;
}
.board_content ul li a {
font-weight: 600;
}
.board_content ul li a:hover{
color: #444
}
.board_content ul li span {
float: right;
color: grey;
}
#board_pds {
margin-right: 0;
}
/* SECTION3 */
#section3 {
background-color: #eee;
padding: 20px 0;
}
#section3 .area_banner:after {
display: block;
clear: both;
content: '';
}
#section3 .box_banner {
float: left;
}
#section3 .box_banner:nth-child(1) {
margin-right: 1.5%;
}
#section3 .box_banner:nth-child(3) {
margin-left: 1.5%;
}
#section3 .area_sitemap {
width: 98.8%;
margin-top: 10px;
background-color: #fff;
border: 1px solid #ddd;
height: 67px;
}
#section3 .area_sitemap h3 {
float: left;
background-color: #3363c8;
color: #fff;
font-weight: 600;
padding: 20px 0;
width: 13%;
text-align: center;
}
#section3 .area_sitemap ul {
float: left;
width: 87%;
padding: 22px 1%;
}
#section3 .area_sitemap ul li {
display: inline-block;
width: 15%;
text-align: center;
background-image: url("https://www.icqa.or.kr/images/cn/box3_4.png") no-repeat left center;
}
#section3 .area_sitemap ul li a {
font-weight: 600;
}
#section3 .area_sitemap ul li a:hover {
color: tomato;
}
/* FOOTER */
footer {
border-top: 1px solid #ddd;
color: #666;
padding: 20px 0;
}
footer img {
padding: 15px 0;
}
footer ul {
margin-bottom: 10px;
position: relative;
right: 21px;
}
footer ul li {
display: inline-block;
padding: 0 10px;
border-right: 1px solid #888;
}
footer ul li:last-child {
border: none;
}
footer p {
font-size: 0.8rem;
color: #666;
line-height: 18px;
position: relative;
right: 12px;
}
.ok {
position: relative;
right: 120px;
}