1_flex.css

/* 전체 설정 */
* { 
    padding: 0;
    margin: 0
}

header {
    height: 150px; 
    /* background-color: red; */

}

.header {
    position: fixed; /*상단바 고정*/
}

nav { /*드롭바 내려와도 본문 이미지 가리지 않게 기본 높이 크게줌 */
    height: 50px; 
    /* background-color: orange; */
}

/* ---시작페이지 본분 나누기--- */
.content {
    /* 전체 본문 */
    /* background-color: greenyellow; */
    display: flex;
}

.content1 {
    /* 1번 이미지  */
    float: left; width: 33%;
    /*33*3=99%*/
    /* background-color: skyblue  */
}
.content2 {
    /* 2번이미지 */
    float: left; width: 33%;
    /* background-color: pink; */
}

.content3 {
    /* 3번 이미지 */
    float: left; width: 33%;
    /* background-color: hotpink; */
}

/*--- 서브페이지 본문나누기--- */
.content_11 {
    height: 1500px;
    text-align: center;
    /* 500*3 */
    /* background-color: blueviolet; */
}
.content4 {
    height: 500px;
    /* background-color: hotpink; */
}

.content5 {
    padding-top: 100px;
    height: 1000px;
    /* background-color: pink; */
}

.content6 {
    padding: 100px;
    height: 800px;
    /* background-color: pink; */
}

footer {
    height: 100px; 
    border-top: 1.5px double #747474; 
    padding: 25px;
    /* background-color: purple; */
}

/*--------메뉴바 설정---------*/
li { /*불릿 없애기 */
    list-style: none
}

a {
    text-decoration: none;
    font-size: 14px
}

.menu {
    width: 100%; /*전체메뉴 화면 크기에 맞춰 바뀜*/
    overflow: hidden;
    margin: auto;
}

.menu>li { /*전체메뉴 리스트 스타일 지정*/
    width: 20%;
    /*20*5=100%*/
    float: left;
    text-align: center;
    line-height: 40px;
    background-color: #080808;
}

.menu a {
    color: #fff;
}

.submenu>li { /*서브메뉴 스타일*/
    line-height: 50px;
    background-color: #484849;
}

.submenu {
    height: 0;
    /*ul의 높이를 안보이게 처리*/
    overflow: hidden;
}
/*메인메뉴 리스트로 마우스 포인터 올렸을때 스타일*/
.menu>li:hover { 
    background-color: #484849;
    transition-duration: 0.5s;
}
/*서브메뉴 리스트로 마우스 포인터 올렸을때 스타일*/
.menu>li:hover .submenu { 
    height: 100px;
    /*서브메뉴 li한개의 높이 50*2*/
    transition-duration: 1s;
}


/* 이미지 스와이프 */
.slides>input[name=ra] {
    display: none;
}

.sl {
    display: none;
}

.sl:nth-of-type(1) {
    display: block;
}

.sl>img {
    text-align : center;
    width: 250px;
}

.page {
    text-align: center;
}

.page>label {
    cursor: pointer;
}
#ra02:checked~.sl:nth-of-type(1) {
    display: none;
}

#ra02:checked~.sl:nth-of-type(2) {
    display: block;
}

#ra03:checked~.sl:nth-of-type(1) {
    display: none;
}

#ra03:checked~.sl:nth-of-type(3) {
    display: block;
}

#ra04:checked~.sl:nth-of-type(1) {
    display: none;
}

#ra04:checked~.sl:nth-of-type(4) {
    display: block;
}

/* 아이패드 위 마우스커서 변경  */
.link:hover { 
    cursor : url(pencil.cur) 64 64, auto;
}

/* 테이블 */

table.type04 {
    border-collapse: separate;
    border-spacing: 1px;
    text-align: center;
    line-height: 1.5;
    border-top: 1px solid #ccc;
    margin-left:auto; 
    margin-right:auto;
}


table.type04 th {
    width: 400px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
}
table.type04 td {
    width: 500px;
    padding: 10px;
    vertical-align: top;
    border-bottom: 1px solid #ccc;
} 

/* 이미지를 자동으로 화면에 맞게 리사이즈 되도록 */
img {
    /* 이미지의 최대사이즈 */
    max-width: 100%; 
    width : auto; 
    height: auto;
    vertical-align: bottom;
}

/* 동영상 반응형 */
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}