@charset "utf-8";

@media only screen and (min-width: 1200px) {
          /*main visual*/
          #main_vis { 
              width: 100%;
              height: 720px;
              background: url(../img/media_mainvis.jpg);
              background-position: 50% 50%;
              background-repeat: no-repeat;
              background-attachment: fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
          }


          /*contents*/
          #container {
              width: 100%;
          }

          #container div.press {
              width: 1200px;
              height: auto;
              margin: 0 auto;
          }

          #container div.press > h4 {
              text-align: center;
              padding-top: 50px;
              color: #1a1a1a;
          }

          #container div.press > div > h5 {
              width: 1200px; 
              color: #1a1a1a;
              margin-top: 20px;
              margin-bottom: 10px;
          }

          #container div.press > div > span {
              display: block;
              width: 100%;
              height: 2px;
              background-color: #c42127;
              margin-top: 10px;
              margin-left: 0; 
          }

          #container div.press > div > ul {
              width: 1200px; height: auto; overflow: hidden;
          }

          #container div.press > div > ul > li {
              width: 280px;
              height: 340px;
              background-color: #efefef;
              float: left; 
              margin-top: 25px;
          }

          #container div.press > div > ul > li~li {
              margin-left: 26.6px; 
          }

          #container div.press > div > ul > li.nomarginleft1 {
              margin-left: 0;
          }

          #container div.press > div > ul > li > a {
              display: block;
              width: 280; height: 340px;
              padding: 30px;
              text-decoration: none;
              position: relative;
              border: 1px solid #efefef;
              transition: all 0.3s ease 0s;
          }

          #container div.press > div > ul > li > a .from {
              font-family: 'Titillium Web', sans-serif;
              font-size: 12pt;
              color: #1a1a1a; opacity: 0.8;
              margin-bottom: 20px;
          }

          #container div.press > div > ul > li > a h6 {
              font-family: 'NanumSquare';
              color: #1a1a1a;
              margin-bottom: 15px;
          }

          #container div.press > div > ul > li > a .text {
              font-family: 'NanumSquare';
              font-size: 11pt; line-height: 22px;

              color: #1a1a1a; opacity: 0.8;
          }

          #container div.press > div > ul > li > a .date {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px;
          }

          #container div.press > div > ul > li > a .nat {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px; right: 30px;
          }

          /*-----HOVER---------------------------------------------*/
          #container div.press > div > ul > li > a:hover {
            background-color: white;
            border: 1px solid #cbcbcb;
          }
          /*-------------------------------------------------------*/

          #container div.press > div~div {
              margin-top: 60px;
          }



          /*-----SELECT SECTION---------------------------------------------*/
          #container div.press > div.select > ul{
              width: 1200px; overflow: hidden; margin-top: 30px; height: 80px;
          }

          #container div.press > div.select > ul > li {
              width: 400px;
              height: 80px;
              margin-top: 0;
              margin-left: 0;
              border-right: 1px solid #ccc;
          }

          #container div.press > div.select > ul > li:last-child {
              border-right: none;
          }

          #container div.press > div.select > ul > li > a {
              height: 80px; text-align: center;
              font-family: 'Titillium Web', sans-serif;
              font-size: 15pt; color: #1a1a1a; letter-spacing: 1px;
              transition: none; padding-top: 28px;
          }

          #container div.press > div.select > ul > li > a:hover {
              /*border-right: none;*/
              border-bottom: 4px solid #c42127;
          }
          /*------------------------------------------------------------------*/






          #footer {
              margin-top: 150px;
          }
}





@media only screen and (max-width: 1200px) {
          /*main visual*/
          #main_vis { 
              width: 100%;
              height: 600px;
              background: url(../img/media_mainvis.jpg);
              background-position: 50% 50%;
              background-repeat: no-repeat;
              background-attachment: fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
          }


          /*contents*/
          #container {
              width: 100%;
          }

          #container div.press {
              width: 820px;
              height: auto;
              margin: 0 auto;
          }

          #container div.press > h4 {
              text-align: center;
              padding-top: 50px;
              color: #1a1a1a;
          }

          #container div.press > div > h5 {
              width: 820px; 
              color: #1a1a1a;
              margin-top: 20px;
              margin-bottom: 10px;
          }

          #container div.press > div > span {
              display: block;
              width: 100%;
              height: 2px;
              background-color: #c42127;
              margin-top: 10px;
              margin-left: 0; 
          }

          #container div.press > div > ul {
              width: 820px; height: auto; overflow: hidden;
          }

          #container div.press > div > ul > li {
              width: 252px;
              height: 380px;
              background-color: #efefef;
              float: left; 
              margin-top: 25px;
          }

          #container div.press > div > ul > li~li {
              margin-left: 32px; 
          }

          #container div.press > div > ul > li.nomarginleft2 {
              margin-left: 0;
          }

          #container div.press > div > ul > li > a {
              display: block;
              width: 280; height: 380px;
              padding: 30px;
              text-decoration: none;
              position: relative;
              border: 1px solid #efefef;
              transition: all 0.3s ease 0s;
          }

          #container div.press > div > ul > li > a .from {
              font-family: 'Titillium Web', sans-serif;
              font-size: 12pt;
              color: #1a1a1a; opacity: 0.8;
              margin-bottom: 20px;
          }

          #container div.press > div > ul > li > a h6 {
              font-family: 'NanumSquare';
              color: #1a1a1a;
              margin-bottom: 15px;
          }

          #container div.press > div > ul > li > a .text {
              font-family: 'NanumSquare';
              font-size: 11pt; line-height: 22px;

              color: #1a1a1a; opacity: 0.8;
          }

          #container div.press > div > ul > li > a .date {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px;
          }

          #container div.press > div > ul > li > a .nat {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px; right: 30px;
          }

          /*-----HOVER---------------------------------------------*/
          #container div.press > div > ul > li > a:hover {
            background-color: white;
            border: 1px solid #cbcbcb;
          }
          /*-------------------------------------------------------*/

          #container div.press > div~div {
              margin-top: 60px;
          }




          /*-----SELECT SECTION---------------------------------------------*/
          #container div.press > div.select > ul{
              width: 1200px; overflow: hidden; margin-top: 30px; height: 80px;
          }

          #container div.press > div.select > ul > li {
              width: 273px;
              height: 80px;
              margin-top: 0;
              margin-left: 0;
              border-right: 1px solid #ccc;
          }

          #container div.press > div.select > ul > li:last-child {
              border-right: none;
          }

          #container div.press > div.select > ul > li > a {
              height: 80px; text-align: center;
              font-family: 'Titillium Web', sans-serif;
              font-size: 12pt; color: #1a1a1a; letter-spacing: 1px;
              transition: none; padding-top: 28px;
          }

          #container div.press > div.select > ul > li > a:hover {
              /*border-right: none;*/
              border-bottom: 4px solid #c42127;
          }
          /*------------------------------------------------------------------*/



          #footer {
              margin-top: 150px;
          }
}







@media only screen and (max-width: 820px) {
          /*main visual*/
          #main_vis { 
              width: 100%;
              height: 420px;
              background: url(../img/media_mainvis2.jpg);
              /*background-position: 50% 50%;
              background-repeat: no-repeat;
              background-attachment: fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;*/
          }

          #main_vis h3{
              padding-top: 180px;
          }


          /*contents*/
          #container {
              width: 100%;
          }

          #container div.press {
              width: 85%;
              height: auto;
              margin: 0 auto;
          }

          #container div.press > h4 {
              text-align: center;
              padding-top: 50px;
              color: #1a1a1a;
          }

          #container div.press > div > h5 {
              width: 100%; 
              color: #1a1a1a;
              margin-top: 20px;
              margin-bottom: 10px;
          }

          #container div.press > div > span {
              display: block;
              width: 100%;
              height: 2px;
              background-color: #c42127;
              margin-top: 10px;
              margin-left: 0; 
          }

          #container div.press > div > ul {
              width: 100%; height: auto; overflow: hidden;
          }

          #container div.press > div > ul > li {
              width: 100%;
              height: 320px;
              background-color: #efefef;
              float: left; 
              margin-top: 20px;
          }

          #container div.press > div > ul > li~li {
              margin-left: 0; 
          }

          #container div.press > div > ul > li.nomarginleft2 {
              margin-left: 0;
          }

          #container div.press > div > ul > li > a {
              display: block;
              width: 280; height: 320px;
              padding: 30px;
              text-decoration: none;
              position: relative;
              border: 1px solid #efefef;
              transition: all 0.3s ease 0s;
          }

          #container div.press > div > ul > li > a .from {
              font-family: 'Titillium Web', sans-serif;
              font-size: 12pt;
              color: #1a1a1a; opacity: 0.8;
              margin-bottom: 20px;
          }

          #container div.press > div > ul > li > a h6 {
              font-family: 'NanumSquare';
              color: #1a1a1a;
              margin-bottom: 15px;
          }

          #container div.press > div > ul > li > a .text {
              font-family: 'NanumSquare';
              font-size: 11pt; line-height: 22px;
              color: #1a1a1a; opacity: 0.8;
          }

          #container div.press > div > ul > li > a .date {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px;
          }

          #container div.press > div > ul > li > a .nat {
              font-family: 'Titillium Web', sans-serif;
              font-size: 10pt;
              color: #1a1a1a; opacity: 0.8;
              position: absolute;
              bottom: 30px; right: 30px;
          }

          /*-----HOVER---------------------------------------------*/
          #container div.press > div > ul > li > a:hover {
            background-color: white;
            border: 1px solid #cbcbcb;
          }
          /*-------------------------------------------------------*/

          #container div.press > div~div {
              margin-top: 60px;
          }




          /*-----SELECT SECTION---------------------------------------------*/
          #container div.press > div.select > ul{
              width: 100%; overflow: hidden; margin-top: 30px; height: auto;
          }

          #container div.press > div.select > ul > li {
              width: 100%;
              height: 60px;
              margin-left: 0;
              border-right: none;
              border-bottom: 1px solid #ccc;
              overflow: hidden;
          }

          #container div.press > div.select > ul > li:last-child {
              border-right: none;
              border-bottom: none;
          }

          #container div.press > div.select > ul > li > a {
              height: 60px; text-align: center;
              font-family: 'Titillium Web', sans-serif;
              font-size: 12pt; color: #1a1a1a; letter-spacing: 1px;
              transition: none; padding-top: 20px;
          }

          #container div.press > div.select > ul > li > a:hover {
              /*border-right: none;*/
              border-bottom: 4px solid #c42127;
          }
          /*------------------------------------------------------------------*/

          #footer {
              margin-top: 150px;
          }
}