/*
	ID : MOBILE CSS
	WORK : Shinjunho
	NOTE : 모바일 CSS
*/

/***** Mobile ver *****/
@media all and (max-width:800px){

  section {min-height:auto;}

  /* GNB */
  nav {width:100%; height:50px !important; min-height:auto; overflow:hidden; padding:0; position:fixed; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; border-bottom:solid #ddd 1px; box-shadow:0px 0px 7px rgba(0,0,0,0.3);}
  nav h1 {width:100%; padding:7px 0; text-align:center; border-bottom:#7fb900 solid 1px;}
  nav h1 img {width:40px; height:40%; object-fit:contain;}
  nav > a {font-size:1em; padding:2px 0px 0px 0px; text-align:center; width:100%;}
  nav > a::before {background:#7fb900; width:0%; height:33px; left:0px;}
  nav > a.active::before,
  nav > a:hover::before {width:100%;}
  nav.active {height:280px !important;}
  nav input[type="button"] {display:block;}
  nav .navBottom {position:relative; top:auto; padding-left:0px; text-align:center;}
  nav .navBottom .eft {background:none; width:100%; color:#000; font-size:1em; font-weight:400;}
  nav .navBottom .sns {display:none;}
  nav .navBanner {top:0px; right:0px;}
  nav .navBanner img {width:50px; height:50px; border-radius:0px; margin-left:0px;}

  /* article */
  article {margin-left:0px; min-height:auto; padding:60px 0 30px 0;}
  /* main */
  article.main div {width:95%; height:auto;}
  article.main div ul {position:relative; float:left; width:49%; padding-top:49%; margin:0.5%;}
  article.main div ul img {position:absolute; top:0px; left:0px; width:100%; height:100%; }
  article.main div .left1 {left:0px;} /*왼쪽부터*/
  article.main div .left2 {left:0px;}
  article.main div .left3 {left:0px;}
  article.main div .left4 {left:0px;}
  article.main div .top1 {top:0px;} /* 위쪽부터 */
  article.main div .top2 {top:0px;}
  article.main div .top3 {top:0px;}
  article.main div .left4.top2 {width:100%;}
  article.main div .left4.top2 img {object-fit:cover;}

  /* sub */
  article.sub {width:100%; height:auto; padding:50px 0px 0px 0px; margin:0 auto;}
  article.sub div.header {padding:25px 10px; height:auto; text-align:center;}
  article.sub div.header h1 {font-size:1.8em; line-height:1.2em; letter-spacing:-2px;}
  article.sub div.header h2 {font-size:0.8em; line-height:1.3em; margin-top:15px; letter-spacing:-1px;}
  article.sub div.header .mainimg {position:relative; z-index: 1; width:70%; margin-top:15px; top:0px; right:0px; display:none;}

  article.sub div.content,
  article.sub div.content+.content {padding:25px 2.5%;}
  article.sub div.content .number {font-size:3em; text-align:center; margin-bottom:25px;}
  article.sub div.content .number::before {width:50px; height:2px; bottom:0px; left:50%; transform:translateX(-50%);}
  article.sub div.content .conSubject {font-size:1.4em; line-height:1.2em; text-align:center; margin-bottom:25px;}
  article.sub div.content .gray {font-size:0.9em; padding:0px 10px;}
  article.sub div.content ul+ul {margin-top:40px;}
  article.sub div.content .blackh1 {font-size:1.1em; text-align:center; margin:30px 0;}

  /* sub type */
  article.type1 div.content ul,
  article.type2 div.content ul,
  article.type3 div.content ul,
  article.type4 div.content ul,
  article.type5 div.content.floLleft ul,
  article.type6 div.content ul {width:100%;}
  article.type2 div.content ul .imgright,
  article.type3 div.content ul .imgright,
  article.type4 div.content ul.v1 .imgright,
  article.type4 div.content ul.v2 .imgright,
  article.type6 div.content ul .imgright {position:relative; width:80%; left:10%; top:auto; margin-top:20px;}

  article.type1 div.content.floLleft ul {float:none; width:100%; margin-bottom:30px;}
  article.type1 div.content.floLleft ul:nth-child(odd) {margin-right:0px;}
  article.type1 div.content.floLleft ul img {width:100%;}
  article.type3 div.content ul .imgright {width:95%; left:2.5%;}
  article.type4 div.content ul.v1 .imgright {left:auto; right:43%; width:140%;}
  article.type4 div.content ul.v1,
  article.type4 div.content ul.v2 {height:auto; overflow:hidden;}
  article.type5 div.content.floLleft ul  {float:none; }
  article.type5 div.content.floLleft ul h2 {font-size:3em; text-align:center; margin-bottom:25px; letter-spacing:-2px; text-decoration:none; position:relative;}
  article.type5 div.content.floLleft ul h2::before {content:""; width:50px; height:2px; bottom:0px; left:50%; transform:translateX(-50%); position:absolute; background:#0d89b2;}
  article.type5 div.content.floLleft .conSubject {margin-bottom:25px; letter-spacing:-2px;}
  article.type5 div.content.floLleft ul+ul {margin-top: 40px;}
  article.type5 div.content.info ul {floaT:none; width:100%;}
  article.type5 div.content.info ul h1 {font-size:1.4em; margin-bottom:25px;}
  article.type5 div.content.info ul li *{font-size:0.85em;}
  article.type5 div.content.info ul.history li time {width:25%;}
  article.type5 div.content.info ul.history li::before {left:57px;}
  article.type5 div.content.info ul.history li::after {left:54px;}
  article.type5 div.content.info ul.history li p {display:block; width:75%;}
  article.type5 div.content.info ul+ul {margin-top: 40px;}
  article.type6 div.content ul.v1 .imgright {position:relative; left:10%; top:auto; width:80%;}
  article.type6 div.content ul.v2 {height:auto; padding-bottom:40px;}
  article.type6 div.content ul.v2 .imgright {position:relative; width:80%; top:0px; left:10%;}

  /* footer */
  footer {font-size:0.8em; min-width:auto; line-height:20px;}
  footer .company {padding:10px 5%;}
  footer .company span { display: inline-block;}
  footer .copy {padding:10px 0;}
}