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;
}
/* 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;
}