|
|
1번째 줄: |
1번째 줄: |
| <html> | | <html> |
− | | + | <link href="https://work-note.net/g-img/custom-index.css" rel="stylesheet" /> |
− | <style> | |
− | .a-li
| |
− | {
| |
− | filter: sepia(0.2) !important;
| |
− | }
| |
− | @media screen and (max-width:1000px)
| |
− | {
| |
− | .story-list li
| |
− | {
| |
− | | |
− | width: calc(50% - 40px) ;
| |
− | margin-bottom: 20px ;
| |
− | margin-right:40px ;
| |
− | height:120px;
| |
− | }
| |
− | .c-li-list
| |
− | {
| |
− | width:calc(33% - 20px) !important;
| |
− | margin-right:15px !important
| |
− | }
| |
− | }
| |
− | @media screen and (min-width:1001px)
| |
− | {
| |
− | .story-list li
| |
− | {
| |
− | width: calc(20% - 20px);
| |
− | margin-right: 10px;
| |
− | height: 90px;
| |
− | }
| |
− | .c-li-list
| |
− | {
| |
− | width:calc(33% - 20px) !important;
| |
− | margin-right:15px !important
| |
− | }
| |
− | }
| |
− | | |
− | | |
− | | |
− | .story-list li {
| |
− |
| |
− | border-radius:10px;
| |
− | | |
− | | |
− | margin-bottom: 50px;
| |
− | | |
− | padding: 10px;
| |
− | list-style: none;
| |
− | float: left;
| |
− | border: 1px solid black;
| |
− | /* border-radius: 18px; */
| |
− | transition: all 0.5s;
| |
− | cursor: pointer;
| |
− | text-align: center;
| |
− | vertical-align: middle;
| |
− | display: flex;
| |
− | box-shadow: 0 0 20px #eee;
| |
− | background-size: 200% auto;
| |
− | align-items: center;
| |
− | background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
| |
− | justify-content: center;
| |
− | | |
− | | |
− | | |
− | }
| |
− | | |
− | .network-g
| |
− | {
| |
− | display: block;
| |
− | position:absolute;
| |
− | opacity:0;
| |
− | z-index:1;
| |
− | }
| |
− | .net-act | |
− | {
| |
− | opacity:1 !important;
| |
− | z-index:999 !important;
| |
− | }
| |
− | #catlinks
| |
− | {
| |
− | border:none !important;
| |
− | }
| |
− | .ppp_title {
| |
− | width: calc(100% - 120px);
| |
− | margin-left: 60px;
| |
− | z-index: 10001 !important;
| |
− | text-align: left;
| |
− | font-size: 30px;
| |
− | z-index: 1001 !important;
| |
− | position: absolute;
| |
− | margin-top: -50px;
| |
− | font-family: 'pyeonghwa' !important;
| |
− | }
| |
− | | |
− | .s-header {
| |
− | margin-left: 15px;
| |
− | margin-top: 30px;
| |
− | border-bottom: 1px solid black;
| |
− | width: calc(100% - 30px);
| |
− | margin-bottom: 20px;
| |
− | padding-bottom: 10px;
| |
− | | |
− | }
| |
− | | |
− | .page-header {
| |
− | display: none !important;
| |
− | }
| |
− | | |
− | .story-list {
| |
− | width: 100%;
| |
− | list-style-type: none;
| |
− | position: relative;
| |
− | height: auto;
| |
− | display: inline-block;
| |
− | | |
− | | |
− | }
| |
− | | |
− | .story-list li:hover {
| |
− | background-position: right center; /* change the direction of the change here */
| |
− | color:black;
| |
− | filter: sepia(0.2) !important;
| |
− | }
| |
− | | |
− | .but-go
| |
− | {
| |
− | background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%);
| |
− | justify-content: center;
| |
− | align-items: center;
| |
− | display: flex;
| |
− | transition: all 0.5s;
| |
− | border:1px solid black !important;
| |
− | }
| |
− | .but-go:hover
| |
− | {
| |
− | background-position: right center; /* change the direction of the change here */
| |
− | color:black;
| |
− | | |
− | | |
− | }
| |
− |
| |
− | .meta-div
| |
− | {
| |
− | margin-bottom:30px !important;
| |
− | }
| |
− | .meta-div p
| |
− | {
| |
− | font-size:20px;
| |
− | margin-top:10px;
| |
− | }
| |
− | .col-md-4 iframe{
| |
− | width:100% !important;
| |
− | height:300px !important;
| |
− |
| |
− | }
| |
− | .col-md-4 .mata-img{
| |
− |
| |
− | | |
− | cursor:pointer;
| |
− | }
| |
− | .all-bu
| |
− | {
| |
− | width:300px;
| |
− | padding:10px;
| |
− | border-radius:20px;
| |
− | margin-left:calc(50% - 150px);
| |
− | font-size:25px;
| |
− | margin-top:30px;
| |
− | background: white;
| |
− | transition:all 0.5s;
| |
− | margin-bottom:30px;
| |
− | }
| |
− | .all-bu:hover
| |
− | {
| |
− | background: black;
| |
− | color:white;
| |
− | }
| |
− | </style>
| |
− | <style>
| |
− | @media screen and (min-width: 992px) {
| |
− | .container {
| |
− | width: 100% !important;
| |
− | }
| |
− | | |
− | #content {
| |
− | padding: 0 !important;
| |
− | width: 100%;
| |
− | }
| |
− | }
| |
− | </style>
| |
| | | |
| <div class="col-md-12" style="margin-top:120px;"> <h2 class="s-header">인문스토리 네트워크</h2> | | <div class="col-md-12" style="margin-top:120px;"> <h2 class="s-header">인문스토리 네트워크</h2> |
383번째 줄: |
194번째 줄: |
| | | |
| | | |
− | | + | |
− | <style>
| |
− | .col-md-6 iframe {
| |
− | width: 100%;
| |
− | height: 200px;
| |
− | | |
− | }
| |
− | | |
− | .col-md-6 {
| |
− | padding: 0;
| |
− | }
| |
− | | |
− | .firstHeading,
| |
− | .tweekiFirstHeading {
| |
− | display: none !important;
| |
− | }
| |
− | | |
− | #contentwrapper {
| |
− | width: 100% !important;
| |
− | padding: 0 !important;
| |
− | margin: 0 !important;
| |
− | }
| |
− | | |
− | #content {
| |
− | width: 100% !important;
| |
− | margin: 0 !important;
| |
− | | |
− | }
| |
− | | |
− | #bodyContent {
| |
− | width: 100%;
| |
− | }
| |
− | | |
− | .main_link {
| |
− | background: black;
| |
− | color: white;
| |
− | padding: 10px;
| |
− | border: 1px solid black;
| |
− | font-size: 20px;
| |
− | position: absolute;
| |
− | left: 60px;
| |
− | top: calc(50vh + 150px);
| |
− | z-index: 10001 !important;
| |
− | }
| |
− | | |
− | #firstHeading {
| |
− | display: none !important;
| |
− | }
| |
− | | |
− | .page-header {
| |
− | display: none !important;
| |
− | }
| |
− | </style>
| |
| | | |
| <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" | | <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" |