.title{text-align: center;padding: 20px 0;}
#header{height: 136px;}
.title p{color:#0078ff}
.title h1{font-size: 35px;margin-top: -9px}
.wrap{width: 1200px;margin: auto;}
.tap{display: flex;justify-content: center;margin: 20px 0 5px 0;width: 700px;margin: auto;}
.tap li{padding: 5px 10px;cursor: pointer;font-size:15px;border-left: 1px solid rgb(221, 221, 221);width: 20%;text-align: center}
.tap li:first-child{border: 0px solid #000;}
.tap li:hover{background:#0078ff;color:white;}
.on{background:#0078ff;color:white;}
.pWrap{width:1070px;margin: auto;display: flex;flex-flow: row wrap;padding: 30px 0;}
.pWrap:nth-child(1){display: flex;}
.PIWrap .item{width: 250px;height: 250px;border: 1px solid rgb(194, 194, 194);position: relative;overflow: hidden;background-size: cover;background-position: center center}
.PIWrap{margin-bottom: 20px;margin:8px}
.text{padding: 10px 0;}
.text p{font-size: 13px;color:black}
.text p span{font-size: 20px;color:#0078ff}
.box{width: 100%;height: 100%;position: relative;background: linear-gradient(135deg, rgba(210,223,237,0.5) 0%,rgba(210,223,237,0.5) 1%,rgba(200,215,235,0.5) 26%,rgba(166,192,227,0.5) 51%,rgba(175,199,232,0.5) 62%,rgba(186,208,239,0.5) 75%,rgba(153,181,219,0.5) 88%,rgba(121,155,200,0.5) 100%);transform: scale(0);z-index: 999;transition: all 0.3s}
.box p{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);color:white;font-size: 20px;padding: 10px;border: 1px solid rgb(255, 255, 255);width: 80%;text-align: center;text-shadow: 0 0 3px black}
li a{color:black}
li.on a{color:white}
li a:hover{color:white}

@media only screen and (max-width: 480px) 
{
    #header{height: 126px;}
    .pWrap{width: 100%;}
    .PIWrap{width: 100%;}
    .PIWrap a{width: 100%;display: block;}
    .PIWrap .item{width: 100%;}
    .tap{width: 100%;flex-flow: row wrap;justify-content: space-around;}
    .tap li{padding: 10px 0px;font-size:14px;width: 25%;}
    .tap li a{display: inline-block;width: 100%;}
    .PIWrap .item{height: 400px;}
    .title{margin-top: 20px;}
} /* 모바일 */