@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; font-family: "NanumSquareNeo", 맑은 고딕, 微软雅黑, sans-serif; text-decoration: none;}
select::-ms-expand{ display: none;}
html{ background: #f2f4f7;}
body{ -webkit-text-size-adjust: none; word-break: keep-all; font-weight: 300; letter-spacing: 0; color: #000;}



.main{ display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0 50px 80px 50px;}
.main .container{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main .container .logo{ display: block;}
.main .container .logo img{ display: block;}
.main .container .search{ position: relative; margin: 80px 0 0 0; padding: 2px; max-width: 600px; width: 100%; height: 60px; border-radius: 30px; background: linear-gradient(90deg, #ffbd02, #f24ebf, #6f70ff);}
.main .container .search .i_logo{ display: block; position: absolute; z-index: 10; top: 50%; left: 20px; transform: translate(0,-50%);}
.main .container .search .i_close{ display: block; position: absolute; z-index: 10; top: 50%; right: 65px; height: 20px; transform: translate(0,-50%); opacity: 0.3; cursor: pointer;}
.main .container .search .i_btn{ display: block; position: absolute; z-index: 10; top: 50%; right: 20px; transform: translate(0,-50%); cursor: pointer;}
.main .container .search input{ display: flex; align-items: center; position: relative; z-index: 1; margin: 0; padding: 0 95px 0 65px; width: 100%; height: 56px;  border-radius: 30px; border: 0; background: #FFF; font-size: 16px; font-weight: 300; color: #000; outline: none; -webkit-appearance: none;}
.main .container .tag{ margin: 60px 0 0 0; width: 100%;}
.main .container .tag ul{ display: flex; flex-wrap: wrap; margin: -10px 0 0 -5px;}
.main .container .tag ul li{ margin: 10px 0 0 5px;}
.main .container .tag ul li a{ display: flex; align-items: center; padding: 0 10px; height: 40px; border-radius: 20px; background: #FFF; box-shadow: 0 1px 5px 0 rgba(0 0 0/5%);}
.main .container .tag ul li a span{ display: flex; justify-content: center; align-items: center; padding: 1px 0 0 0; width: 20px; height: 20px; border-radius: 50%;}
.main .container .tag ul li a span font{ display: block; font-size: 12px; color: #FFF; transform: scale(0.8);}
.main .container .tag ul li a p{ padding: 0 5px; font-size: 14px; color: #999;}
.main .container .tag ul li.new a p{ color: #333;}
@media(max-width: 767px){
    .main{ padding: 0 20px 40px 20px;}
    .main .container .logo img{ height: 50px;}
    .main .container .search{ margin: 60px 0 0 0; height: 50px;}
    .main .container .search .i_logo{ left: 15px; height: 20px;}
    .main .container .search .i_close{ right: 50px; height: 16px;}
    .main .container .search .i_btn{ right: 15px; height: 20px;}
    .main .container .search input{ padding: 0 70px 0 50px; height: 46px; font-size: 14px;}
    .main .container .tag{ margin: 40px 0 0 0;}
    .main .container .tag ul{ justify-content: center; margin: -10px -2.5px 0 -2.5px;}
    .main .container .tag ul li{ margin: 10px 2.5px 0 2.5px;}
    .main .container .tag ul li a p{ font-size: 12px;}
}


.header{ position: fixed; z-index: 100; top: 0; right: 0; left: 0; padding: 40px 50px; background: rgba(255 255 255/90%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 0 rgba(0 0 0/5%);}
.header .search{ position: relative; margin: 0 auto; padding: 2px; max-width: 800px; width: 100%; height: 60px; border-radius: 30px; background: linear-gradient(90deg, #ffbd02, #f24ebf, #6f70ff);}
.header .search .i_logo{ display: block; position: absolute; z-index: 10; top: 50%; left: 20px; transform: translate(0,-50%);}
.header .search .i_logo img{ display: block; height: 100%;}
.header .search .i_close{ display: block; position: absolute; z-index: 10; top: 50%; right: 65px; height: 20px; transform: translate(0,-50%); opacity: 0.3; cursor: pointer;}
.header .search .i_btn{ display: block; position: absolute; z-index: 10; top: 50%; right: 20px; transform: translate(0,-50%); cursor: pointer;}
.header .search input{ display: flex; align-items: center; position: relative; z-index: 1; margin: 0; padding: 0 95px 0 65px; width: 100%; height: 56px;  border-radius: 30px; border: 0; background: #FFF; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
@media(max-width: 767px){
    .header{ padding: 20px;}
    .header .search{ height: 50px;}
    .header .search .i_logo{ left: 15px; height: 20px;}
    .header .search .i_close{ right: 50px; height: 16px;}
    .header .search .i_btn{ right: 15px; height: 20px;}
    .header .search input{ padding: 0 70px 0 50px; height: 46px; font-size: 14px;}
}


.list{ padding: 140px 50px 0 50px;}
.list ul{ margin: 0 auto; max-width: 800px; width: 100%;}
.list ul li{ margin: 20px 0 0 0;}
.list ul li a{ display: flex; align-items: center; padding: 30px 30px 30px 150px; border-radius: 10px; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/5%);}
.list ul li a .img{ flex: 0 0 100px; position: relative; margin: 0 20px 0 -120px; border-radius: 10px;}
.list ul li a .img .new{ display: flex; justify-content: center; align-items: center; position: absolute; top: -12.5px; right: -12.5px; padding: 1px 0 0 0; width: 25px; height: 25px; border-radius: 50%;}
.list ul li a .img .new font{ display: block; font-size: 12px; color: #FFF;}
.list ul li a .img img{ width: 100%; height: auto;}
.list ul li a .text{ display: flex; flex-direction: column; justify-content: center;}
.list ul li a .text .t1{ display: flex; justify-content: space-between; align-items: center;}
.list ul li a .text .t1 .fl{ max-width: 70%; font-size: 18px; font-weight: 200; color: #666; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.list ul li a .text .t1 .fl span{ margin: 0 5px 0 0; font-weight: 400; color: #000;}
.list ul li a .text .t1 .fr{ font-size: 14px;}
.list ul li a .text .t2{ margin: 15px 0 0 0; line-height: 20px; font-size: 14px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.list ul li a .text .t3{ display: flex; justify-content: space-between; align-items: center; margin: 20px 0 0 0;}
.list ul li a .text .t3 .fl{ font-size: 12px; color: #999;}
.list ul li a .text .t3 .fr{ display: flex; align-items: center; font-size: 12px; color: #999;}
.list ul li a .text .t3 .fr img{ display: block; margin: 0 5px 0 0; height: 16px; opacity: 0.4;}
@media(max-width: 767px){
    .list{ padding: 90px 0 0 0;}
    .list ul li{ margin: 10px 0 0 0;}
    .list ul li a{ padding: 20px 20px 20px 115px; border-radius: 0;}
    .list ul li a .img{ flex: 0 0 80px; margin: 0 15px 0 -95px; border-radius: 5px;}
    .list ul li a .img .new{ display: flex; justify-content: center; align-items: center; position: absolute; top: -12.5px; right: -12.5px; padding: 1px 0 0 0; width: 25px; height: 25px; border-radius: 50%;}
    .list ul li a .img .new font{ display: block; font-size: 12px; color: #FFF;}
    .list ul li a .text{}
    .list ul li a .text .t1{ display: flex; flex-direction: column-reverse;}
    .list ul li a .text .t1 .fl{ max-width: initial; width: 100%; line-height: 1.2; font-size: 14px; text-overflow: initial; white-space: initial; overflow: initial;}
    .list ul li a .text .t1 .fr{ padding: 0 0 5px 0; width: 100%; font-size: 12px;}
    .list ul li a .text .t2{ margin: 10px 0 0 0; line-height: 16px; font-size: 12px;}
    .list ul li a .text .t3{ margin: 10px 0 0 0;}
    .list ul li a .text .t3 .fl{ font-size: 10px;}
    .list ul li a .text .t3 .fr{ font-size: 10px;}
    .list ul li a .text .t3 .fr img{ height: 14px;}
}



.list_page{ margin: 20px 0 0 0; padding: 0 50px;}
.list_page .row{ display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 800px; width: 100%; padding: 20px 30px; border-radius: 10px; background: #FFF; box-shadow: 0 0 0 1px rgba(0 0 0/5%);}
.list_page .btn_l{ display: flex; justify-content: center; align-items:center; margin: 0 2.5px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); background: #FFF; cursor: pointer;}
.list_page .btn_l img{ display: block; height: 10px;}
.list_page .btn_r{ display: flex; justify-content: center; align-items:center; margin: 0 2.5px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); background: #FFF; cursor: pointer;}
.list_page .btn_r img{ display: block; height: 10px;}
.list_page .page{ display: flex; align-items: center;}
.list_page .page p{ display: flex; justify-content: center; align-items: center; margin: 0 2.5px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0 0 0/10%); background: #FFF; font-size: 12px; font-weight: 200; color: #000; cursor: pointer;}
.list_page .page p.on{ position: relative; z-index: 1; border-color: #f24ebf; background: #f24ebf; color: #FFF;}
@media(max-width:767px){
    .list_page{ margin: 10px 0 0 0; padding: 0;}
    .list_page .row{ padding: 10px 0; border-radius: 0;}
    .list_page .btn_l{ width: 25px; height: 25px;}
    .list_page .btn_l img{ height: 8px;}
    .list_page .btn_r{ width: 25px; height: 25px;}
    .list_page .btn_r img{ height: 8px;}
    .list_page .page p{ width: 25px; height: 25px; font-size: 10px;}
}


.footer{ margin: 20px 0 0 0; padding: 0 50px; box-shadow: 0 0 0 1px rgba(0 0 0/5%); background: rgba(255 255 255/80%);}
.footer .copy{ text-align: center; line-height: 60px; font-size: 12px; color: rgba(0 0 0/30%);}
@media(max-width: 767px){
    .footer{ margin: 10px 0 0 0; padding: 0 20px;}
    .footer .copy{ line-height: 50px; font-size: 10px;}
}