.wrap {width:70%; margin:0 auto;}
header, footer {position:fixed; width:100%; height:50px; background-color:rgba(0,0,0,0.7); z-index:100;}

header {top:0; padding:15px;}
header .left-area {float:left;}
header .right-area {float:right;}
header .logo-img {width:100px; height:100px; background:url(../images/logo.png) no-repeat top center; background-size:cover; float:left; margin-right:10px;}
header .logo-img:hover {background-position:bottom center;}
header .logo-text {display:inline-block; color:#fff; font-weight:700; font-size:22px; margin:2px 0;}
header .nav-button {float:right; width:35px; height:35px; margin-top:-7px; background-color:rgba(255,255,255,0.5); position:relative; display:none;}
header .nav-button:hover {cursor:pointer;}
header .nav-button span {display:block; height:3px; background-color:#fff; border-radius:5px;}
header .nav-button span::after {background-color:#fff; content:""; width:17px; height:3px; position:absolute; top:7px; left:8px;}
header .nav-button span::before {background-color:#fff; content:""; width:17px; height:3px; position:absolute; bottom:7px; left:8px;}
header .nav-button span.cross {width:0;}
header .nav-button span.cross::after {width:3px; height:38px; left:27px; top:10px; transform:rotate(45deg);}
header .nav-button span.cross::before {bottom:27px; transform:rotate(45deg);}
header .nav-box li {float:left; margin:2px 10px;}
header .nav-box li a {color:#fff; font-size:16px; font-weight:400;}
header .nav-box li a.active {color:yellow;}
header .nav-box li a:hover {color:red;}
header .nav-box li i.axi {margin-right:5px;}

.cnt-page, .pg-contents {height:100%;}
.cnt-page .cnt-area {height:100%; position:relative; background-color:#fff; margin-bottom:50px;}
.cnt-page .cnt-area:last-child {margin-bottom:0;}
.cnt-page .pg-contents {overflow:hidden;}
.cnt-page .swiper-slide {overflow:hidden;}
.cnt-page .cnt-box {position:absolute; width:100%; height:400px; top:50%; margin-top:-200px;}
.cnt-page .cnt-box h2 {text-align:center;}
.cnt-page .cnt-box h2 .subject {font-size:30px; color:red;}
.cnt-page .cnt-box h2 .info {font-size:14px; margin:10px 0; color:#999; color:#333;}
.cnt-page .bg-box {height:100%;}
.cnt-page .card-box {width:300px; height:300px; background:url(../images/okgil_box.png) no-repeat center center; position:absolute; top:50%; left:50%; margin:-150px 0 0 -150px; padding:30px; text-align:center;}
.cnt-page .card-box li {font-weight:bold; color:#fff; line-height:120%;}
.cnt-page .card-box li:nth-child(1) {font-size:30px;}
.cnt-page .card-box li:nth-child(2) {font-size:50px;}
.cnt-page .card-box li:nth-child(3) {font-size:30px;}

.cnt-page .swiper-pagination {right:30px;}
.cnt-page .swiper-pagination-bullet {width:15px; height:30px; margin:10px 0; border:#999 solid 1px; border-radius:100px; opacity:1; background-color:rgba(255,255,255,0.7);}
.cnt-page .swiper-pagination-bullet:hover {background-color:red;}
.cnt-page .swiper-pagination-bullet-active {height:50px; background-color:yellow;}

.cnt-page .list-w4 li {float:left; width:24%; padding:10px; margin:0.5%; background-color:rgba(255,255,255,0.7); box-shadow:#999 0 0 2px; border-radius:5px;}
.cnt-page .list-w4 li:hover {cursor:pointer; background-color:rgba(255,255,0,0.7);}
.cnt-page .list-w4 li:hover .pic {background-size:130%;}
.cnt-page .list-w4 li:hover .pd-brand {opacity:1;}
.cnt-page .list-w4 li:hover .pd-name {color:red;}
.cnt-page .list-w4 li .pic {height:200px; border:#dfdfdf solid 1px; background-size:contain; background-color:#fff; border-radius:5px;}
.cnt-page .list-w4 li [class^="pd-"] {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.cnt-page .list-w4 li .pd-brand {font-size:20px; font-weight:bold; padding:10px 0; opacity:0.5;}
.cnt-page .list-w4 li .pd-brand i {float:left; font-weight:bolder; letter-spacing:-1px;}
.cnt-page .list-w4 li .pd-brand span {float:right;}
.cnt-page .list-w4 li .pd-name {font-size:30px; text-align:center; padding:20px 0;}
.cnt-page .list-w4 li .pd-name span {background-color:red; color:#fff; padding:3px 5px; font-size:16px; line-height:100%; border-radius:10px 0 10px 0; vertical-align:top;}

footer {bottom:0; padding:15px;}
footer .copyright {text-align:center; color:#999; font-size:14px;}
footer .copyright a {color:#fff;}


@media screen and (max-width:1500px) and (max-height:800px) {
    .cnt-page .cnt-box {top:30%;}
    .cnt-page .list-w4 li {width:33.3333%;}
}
@media screen and (max-width:1200px) {
    .cnt-page .list-w4 li {width:49%;}
    .cnt-page .list-w4 li .pic {height:150px;}
}
@media screen and (max-height:1400px) {
}
@media screen and (max-width:800px) {
    header .logo-img {width:40px; height:40px; margin:-10px 5px 0 -10px;}
}
@media screen and (max-width:500px) {
    header .left-area {}
    header .nav-button {display:block;}
    header .right-area {position:absolute; top:50px; left:0; width:100%; background-color:rgba(0,0,0,0.7);}
    header .nav-box {display:none; width:100%;}
    header .nav-box li {width:100%; padding:5px 0;}
    header .nav-box li a {display:block;}

    .cnt-page .swiper-pagination {right:20px;}
    .cnt-page .cnt-box {top:40%;}
    .wrap {width:90%;}
    .cnt-page .list-w4 li .pic {height:150px;}
    .cnt-page .list-w4 li .pd-brand {font-size:14px; padding:10px 0;}
    .cnt-page .list-w4 li .pd-name {font-size:20px; padding:15px 0;}
}
@media screen and (max-width:1100px) and (max-height:1400px) {
    .cnt-page .cnt-box {top:40%;}
}
@media screen and (max-width:768px) and (max-height:1024px) {
    .cnt-page .cnt-box {top:35%;}
}
@media screen and (max-width:360px) and (max-height:640px) {
    .cnt-page .cnt-box {top:35%;}
}
@media screen and (max-width:320px) and (max-height:568px) {
    /* 마지막에 테스트 합니다 */
}