@media (max-width: 769px) {
   body {background-color: #F9F9F9;}
   #main .banner {position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 20%;left: 10%;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 20px;}
   #main .banner .txt span:nth-child(2) {font-weight: bold;letter-spacing: 3px;}
   #main .navigation {padding: 0 40px 0 20px;background-color: #FFF;}
   #main .navigation .breadcrumb {padding-left: 0;margin-bottom: 0;background-color: #FFF;border-bottom: 1px solid rgba(100, 100, 100, .1);border-radius: 0;display: flex;align-items: center;}
   #main .navigation .breadcrumb li:nth-child(1) {margin-right: 8px;}
   #main .navigation .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: rgba(0, 0, 0, .7);padding: 0 5px;}
   #main .navigation .breadcrumb li a {color: #999;font-size: 13px;}
   #main .navigation .breadcrumb li a i {font-size: 17px;color: #000;}

   #main .content {background-color: #F9F9F9;}
   #main .content .title {text-align: center;font-size: 18px;font-weight: bold;letter-spacing: 1px;color: #41210f;background-color: #FFF;margin: 0;padding: 30px 0 10px;}
   #main .content .synopsis {padding: 0 5%;color: rgba(65, 33, 15, .7);font-size: 13px;line-height: 25px;text-align: center;background-color: #FFF;margin: 0;padding-bottom: 20px;}
   #main .content .postInfo {padding: 30px 5%;}
   #main .content .postInfo table {width: 100%;display: table;border: 1px solid #b7b7b7;}
   #main .content .postInfo table tr {height: 40px;line-height: 40px;}
   #main .content .postInfo table tr th, #main .content .postInfo table tr td {font-size: 12px;color: rgba(65, 33, 15, .7);}
   #main .content .postInfo table tr td {border-top: 1px solid #b7b7b7;}
   #main .content .postInfo table tr th:nth-child(1), #main .content .postInfo table tr td:nth-child(1) {padding-left: 20px;}

   #main .content .page {text-align: center;}
   #main .content .page a {width: 30px;height: 30px;line-height: 30px;font-family: "Gotham Bold";font-size: 15px;display: inline-block;color: rgba(65, 33, 15, .7);}
   #main .content .page .previousPage, #main .content .page .nextPage {border-radius: 50%;color: #FFF;background-color: rgba(65, 33, 15, .2);}
   #main .content .page .previousPage:hover, #main .content .page .nextPage:hover {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#0172ba, #0172ba);background-blend-mode: normal, normal;}
   #main .content .page .previousPage {transform: rotate(180deg);margin-right: 5px;}
   #main .content .page .nextPage {margin-left: 5px;}
   #main .content .page .ellipsis {font-size: 17px;font-weight: bold;}
   #main .content .page .on {color: #01DD62;font-size: 20px;}
}

@media (min-width: 769px) and (max-width: 1100px) {
   #main {margin-bottom: 60px;}
   #main .banner {height: 36.5vw;position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 10.4vw;left: 5.2vw;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 4.2vw;}
   #main .banner .txt span:nth-child(2) {font-size: 3.6vw;letter-spacing: 3px;margin-top: -1vw;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 20px;right: 5%;display: flex;align-items: center;}
   #main .banner .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: #FFF;;padding: 0 5px;}
   #main .banner .breadcrumb li a {color: #FFF;}
   #main .banner .breadcrumb li:nth-child(1) a {margin-right: 8px;}
   #main .banner .breadcrumb li a i {font-size: 17px;}

   #main .content {background-color: #F9F9F9;}
   #main .content .title {text-align: center;font-size: 35px;letter-spacing: 2px;color: #41210f;background-color: #FFF;margin: 0;padding: 70px 0 15px;}
   #main .content .synopsis {padding: 0 5% 70px;color: rgba(65, 33, 15, .7);font-size: 13px;line-height: 25px;text-align: center;background-color: #FFF;margin: 0;}
   #main .content .postInfo {padding: 30px 5%;}
   #main .content .postInfo table {width: 100%;display: table;border-collapse: collapse;border-bottom: 2px solid #b7b7b7;}
   #main .content .postInfo table tr {height: 60px;line-height: 60px;border: 1px solid #b7b7b7;border-bottom: none;}
   #main .content .postInfo table tr:nth-child(1) {height: 50px;line-height: 50px;}
   #main .content .postInfo table tr th, #main .content .postInfo table tr td {font-size: 0.8vw;color: rgba(65, 33, 15, .7);}
   #main .content .postInfo table tr td {font-size: 1.1vw;}
   #main .content .postInfo table tr th:nth-child(1), #main .content .postInfo table tr td:nth-child(1) {padding-left: 20px;position: relative;}
   #main .content .postInfo table tr td a {display: inline-block;width: 9.8vw;height: 3.6vw;line-height: 3.6vw;text-align: center;border: 2px solid #01DD62;border-radius: 35px;font-size: 0.8vw;color: #01DD62;cursor: pointer;}
   #main .content .postInfo table tr+tr:hover {border: 1px solid #01DD62;background-color: #F3F7ED;}
   #main .content .postInfo table tr+tr:hover td {color: #41210f;}
   #main .content .postInfo table tr+tr:hover td:nth-child(1)::before {content: "";width: 4px;height: 4.3vw;background-color: #01DD62;position: absolute;top: 0;left: 0;}
   #main .content .postInfo table tr+tr:hover td a {color: #FFF;border: 2px solid rgba(249, 249, 249, 0);background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#f9f8f7, #f9f8f7);background-blend-mode: normal, normal;}

   #main .content .page {margin-top: 50px;text-align: center;}
   #main .content .page a {width: 40px;height: 40px;line-height: 40px;font-family: "Gotham Bold";font-size: 15px;display: inline-block;color: rgba(65, 33, 15, .7);}
   #main .content .page .previousPage, #main .content .page .nextPage {border-radius: 50%;color: #FFF;background-color: rgba(65, 33, 15, .2);}
   #main .content .page .previousPage:hover, #main .content .page .nextPage:hover {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#0172ba, #0172ba);background-blend-mode: normal, normal;}
   #main .content .page .previousPage {transform: rotate(180deg);margin-right: 5px;}
   #main .content .page .nextPage {margin-left: 5px;}
   #main .content .page .ellipsis {font-size: 17px;font-weight: bold;}
   #main .content .page .on {color: #01DD62;font-size: 20px;}
}

@media (min-width: 1100px) {
   #main {margin-bottom: 60px;}
   #main .banner {height: 36.5vw;position: relative;}
   #main .banner img {width: 100%;height: 100%;}
   #main .banner .txt {color: #FFF;position: absolute;top: 10.4vw;left: 5.2vw;}
   #main .banner .txt span {font-family: "Gotham Bold";display: block;font-size: 4.2vw;}
   #main .banner .txt span:nth-child(2) {font-size: 3.6vw;letter-spacing: 3px;margin-top: -1vw;}
   #main .banner .breadcrumb {background-color: initial;padding: 0;margin: 0;position: absolute;bottom: 20px;right: 5%;display: flex;align-items: center;}
   #main .banner .breadcrumb > li + li:before {content: "\e603";font-family: "iconfont";color: #FFF;;padding: 0 5px;}
   #main .banner .breadcrumb li a {color: #FFF;}
   #main .banner .breadcrumb li:nth-child(1) a {margin-right: 8px;}
   #main .banner .breadcrumb li a i {font-size: 17px;}

   #main .content {background-color: #F9F9F9;}
   #main .content .title {text-align: center;font-size: 35px;letter-spacing: 2px;color: #41210f;background-color: #FFF;margin: 0;padding: 70px 0 15px;}
   #main .content .synopsis {padding: 0 5% 70px;color: rgba(65, 33, 15, .7);font-size: 13px;line-height: 25px;text-align: center;background-color: #FFF;margin: 0;}
   #main .content .postInfo {padding: 30px 5%;}
   #main .content .postInfo table {width: 100%;display: table;border-collapse: collapse;border-bottom: 2px solid #b7b7b7;}
   #main .content .postInfo table tr {height: 4.3vw;line-height: 4.3vw;border: 1px solid #b7b7b7;border-bottom: none;cursor: pointer;}
   #main .content .postInfo table tr:nth-child(1) {height: 50px;line-height: 50px;}
   #main .content .postInfo table tr th, #main .content .postInfo table tr td {font-size: 0.8vw;color: rgba(65, 33, 15, .7);}
   #main .content .postInfo table tr td {font-size: 1.1vw;}
   #main .content .postInfo table tr th:nth-child(1), #main .content .postInfo table tr td:nth-child(1) {padding-left: 20px;position: relative;}
   #main .content .postInfo table tr td a {display: inline-block;width: 7.8vw;height: 2.6vw;line-height: 2.6vw;text-align: center;border: 2px solid #01DD62;border-radius: 35px;font-size: 0.8vw;color: #01DD62;cursor: pointer;}
   #main .content .postInfo table tr+tr:hover {border: 1px solid #01DD62;background-color: #F3F7ED;}
   #main .content .postInfo table tr+tr:hover td {color: #41210f;}
   #main .content .postInfo table tr+tr:hover td:nth-child(1)::before {content: "";width: 4px;height: 4.3vw;background-color: #01DD62;position: absolute;top: 0;left: 0;}
   #main .content .postInfo table tr+tr:hover td a {color: #FFF;border: 2px solid rgba(249, 249, 249, 0);background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#f9f8f7, #f9f8f7);background-blend-mode: normal, normal;}

   #main .content .page {margin-top: 50px;text-align: center;}
   #main .content .page a {width: 40px;height: 40px;line-height: 40px;font-family: "Gotham Bold";font-size: 15px;display: inline-block;color: rgba(65, 33, 15, .7);}
   #main .content .page .previousPage, #main .content .page .nextPage {border-radius: 50%;color: #FFF;background-color: rgba(65, 33, 15, .2);}
   #main .content .page .previousPage:hover, #main .content .page .nextPage:hover {background-image: linear-gradient(90deg, #00dc62 0%, #8dd600 100%), linear-gradient(#0172ba, #0172ba);background-blend-mode: normal, normal;}
   #main .content .page .previousPage {transform: rotate(180deg);margin-right: 5px;}
   #main .content .page .nextPage {margin-left: 5px;}
   #main .content .page .ellipsis {font-size: 17px;font-weight: bold;}
   #main .content .page .on {color: #01DD62;font-size: 20px;}
}