/*  
	font 
	header 
	header menu 
	main visual
	cont
	¿ÞÂÊ ¶óÀÎ ÅؽºÆ®
	½½¶óÀ̵å
	footer 
-----------------------------------------
*/


*{font-weight: normal;}
a:hover {color: inherit;}
.inner{width: 1300px; margin: 0 auto;}
#container {margin: 0px;}
.box120 {margin: 120px 0px 0px;}
.box280 {margin: 280px 0px 0px;}
.box180 {margin: 180px 0px 0px;}

hr {margin: 60px 0; border: 1px dashed #0084CA;}

/* font */
h1 {font-size: 72px; font-weight: 300; line-height: 1.3;}
h2 {font-size: 44px; font-weight: 500; line-height: 1.3;}
h3 {font-size: 48px; font-weight: bold; line-height: 1.3;}
h4 {font-size: 42px; font-weight: bold; line-height: 1.3;}
h5 {font-size: 24px; font-weight: 500;}
h6 {font-size: 20px; font-weight: 300;}

h4 span {font-size: 35px; font-weight: bold;}

/* margin */
.mar5 {margin-top: 5px;}
.mar10 {margin-top: 10px;}
.mar20 {margin-top: 20px;}
.mar30 {margin-top: 30px;}
.mar40 {margin-top: 40px;}
.mar50 {margin-top: 50px;}
.mar60 {margin-top: 60px;}
.mar70 {margin-top: 70px;}
.mar80 {margin-top: 80px;}
.mar90 {margin-top: 90px;}
.mar100 {margin-top: 100px;}

/* padding */
.pd60 {padding: 80px 0;}


div:focus-visible {
  outline: 2px dashed #1D85C8;
}

a:focus-visible {
  outline: 2px dashed #1D85C8;
}

span:focus-visible {
  outline: 2px dashed #1D85C8;
}
.slide > div:focus-visible {
  outline: 2px dashed #1D85C8;
}


/* header */
#header {background: none;}
#header .inner .header-top1 {width:150px; padding: 40px 5px; background: #0084CA; color: #ffffff;}
#header .inner .header-top1 p {text-align: center; width: 130px; margin: 0 auto;}
#header .inner .header-top1 h3 {text-align: center; font-weight: 900;}
#header.on {background: #0084CA;}
#header.on .inner .header-top1{width: auto; background: none; padding: 15px 5px;}
#header.on .inner .header-top1 p {display: inline-block; width: auto;}
#header.on .inner .header-top1 h3 {display: inline-block; font-size: 28px;}
#header.on .inner .header-top2 div.btn {margin-top: 20px;}



/* header menu */
#header .inner .header-top2 div.btn {border: 1px solid #ffffff; padding: 5px 10px; color: #ffffff; cursor: pointer; font-size: 13px; margin-top: 40px; box-sizing: border-box; transition: all 0.3s;}
#header .inner .header-top2 div.btn span {position: relative; width: 20px; height: 1px; background: #ffffff; display: inline-block; margin-right: 10px;}
#header .inner .header-top2 div.btn span:before {content:''; position: absolute; top: -5px; width: 20px; height: 1px; background: #ffffff;}
#header .inner .header-top2 div.btn span:after {content:''; position: absolute; top: -10px; width: 20px; height: 1px; background: #ffffff;}

#menu { width:350px; height: 100%; position: fixed; top: 0px; right: -402px; z-index: 102; border: 1px solid #c9c9c9; background-color: white; overflow-y: auto; padding: 0px 20px 20px 20px; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; }
#menu.open {right: 0px;}
#menu .close-box {width:30px; height: 30px; cursor: pointer; margin-top: 20px; float: right;}
#menu .close-box .close {position:relative; top: 14px; left: 0px; width: 30px; height: 2px; background: #0084CA; transform: rotate(45deg);}
#menu .close-box .close:after {content:''; position:absolute; width: 30px; height: 2px; background: #0084CA; transform: rotate(-90deg);}
#menu #nav p {color: #0084CA;}
#menu #nav h3 {color: #0084CA; position: relative;}
#menu #nav h3:before {content:''; position: absolute; bottom: -15px; left: 0; width:100%; height:1px; background: #0084CA; }
#menu #nav .bottom {width: 100%; padding: 20px 0px 40px; margin-top: 80px; border-top: 1px solid #0084CA; background: #ffffff;}
#menu #nav .content > li {color: #0084CA; font-weight: bold; font-size:20px; margin-bottom: 20px; cursor: pointer;}
#menu #nav .content > li ul li a{width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.page_cover.open { display: block; } 
.page_cover { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0,0,0,0.4); z-index: 101; display: none; }

#menu .f1-left {padding: 0px;}
#menu .f1-left > li {background: #0084ca; color: #ffffff; padding: 8px 15px;}




/* main visual*/
.visual {height: 840px; background: url('../img/main/main-visual.png') no-repeat center / cover; color: #ffffff;}
.visual a {color: #ffffff;}
.visual .inner {position: relative; height: 100%;}
.visual .inner .txt {position: absolute; top: 50%; left: 0px; transform: translateY(-50%);}
.visual .inner .txt h1 {font-weight: 500;}
.visual .inner .txt h6 {margin-top: 20px; font-size:16px;}
.visual .inner > p {position: absolute; bottom: 50px; right:0px;}
.visual .inner > p span {font-size: 70%;}



/* cont */

.cont {position: relative;}
.cont .inner {overflow: hidden;}
.cont .inner .s_tit {font-size: 20px;}
.cont .inner h6 {color: #919191;}
.cont .inner .left {float: left;}
.cont .inner .right {float: right;}
.cont .inner .back:after {content:''; position: absolute; top: 140px; width: 1120px; height: 720px; background: rgba(29,133,200,0.1); z-index:-1;}
.cont .inner.orange .back:after {background: rgba(245,130,31,0.1);}
.cont .inner.green .back:after {background: rgba(110,185,44,0.1);}
.cont .inner.red .back:after {background: rgba(232,53,87,0.1);}
.cont .inner .more {margin-top: 50px; padding:9px 40px; background: #ffffff; box-sizing: border-box; border: 3px solid #353535; font-weight: bold; font-size: 14px; cursor: pointer; display: inline-block; color: #333333;}
.cont .inner .more:hover {border: 3px solid #0084CA; color: #0084CA;}
.cont .inner .category {position: relative;}
.cont .inner .category .box {position: absolute; top: 0; left: 0; padding: 20px 0; width:100px; color: #ffffff; font-weight: bold; background: rgba(29,133,200,0.8); font-size: 20px; text-align: center;}
.cont .inner.orange .category .box { background: rgba(245,130,31,0.8);}
.cont .inner.green .category .box { background: rgba(110,185,44,0.8);}
.cont .inner.red .category .box { background: rgba(232,53,87,0.8);}
.cont .inner img {width: 100%;}

.sec1 .inner .img.left {position: relative;}
.sec1 .inner .img.left .txt {position: absolute; bottom: 30px; left: 30px; right: 30px; color: #ffffff;}
.sec1 .inner .img.left .txt h3 {font-weight: bold;}
.sec1 .inner .right {width: 53%;}
.sec1 .inner .right .back {right:0;}
.sec1 .inner .right .slide {margin: 90px 0px 0px; padding-bottom: 35px;}
.sec1 .inner .back:after {right:0;}

.sec1 .inner .write {display: flex; flex-direction: column;}
.sec1 .inner .write .img {position: relative; margin-top: 186px;}
.sec1 .inner .write .img .txt {position: absolute; bottom: 30px; right: 30px; left: 30px; color: #ffffff;}



.sec2 .inner .img {width: 100%;}
.sec2 .inner .back:after {top: 230px; left:0; width: 1160px; height: 550px;}

.sec3 .inner .right {width: 55%;}
.sec3 .inner .back:after {top: -30px; right: 220px; width: 990px; height: 575px;}

.sec4 .inner .txt {margin-right:70px; vertical-align: top;}
.sec4 .inner .back:after {top: 55px; left: 0; width: 1560px; height: 490px;}

.sec5 .inner .right {width: 50%;}
.sec5 .inner .right .txt{width: 100%;}
.sec5 .inner .back:after {right:260px; top: 15px; width: 1060px; height: 485px;}
.sec5 .inner .img {width:95%;}

.sec6 .inner .left {width: 50%;}
.sec6 .inner .back:after {right:0; top: 30px; width: 1770px; height: 400px;}
.sec6 .inner .img {width:50%;}

.sec7 .inner {margin-bottom: 180px;}
.sec7 .inner h2 {text-align: center; position: relative;}
.sec7 .inner h2:after {content:''; width: 150px; height: 2px; background: #333333; position: absolute; top: 50%; left: 50%; transform: translateX(-210%);}
.sec7 .inner h2:before {content:''; width: 150px; height: 2px; background: #333333; position: absolute; top: 50%; left: 50%; transform: translateX(105%);}
.sec7 .inner ul li{width: calc((100% - 12px) / 4); text-align: center; display: inline-block;}
.sec7 .inner ul li .s_tit {font-weight: 500; text-decoration: underline;}
.sec7 .inner ul li a.more {margin-top: 30px;}
.sec7 .inner .news_box {background: #ffffff; padding: 14px 0; color: #333333; text-align: center; border: 3px solid #333333; display: block; width: 20%; margin: 0 auto; margin-top: 90px;}
.sec7 .inner .news_box:hover {border: 3px solid #0084CA; color: #0084CA;}

/*mobile*/

.mobile {display: none;}

/* ¿ÞÂÊ ¶óÀÎ ÅؽºÆ® */
.lineL {position: relative; padding-left: 15px; margin: 5px 0 15px; display: block; font-size:18px; font-weight:bold; border-left: 1px solid #ffffff;}
.lineL.bal {font-size:22px; border-left: 1px solid #333333;}

/* ½½¶óÀ̵å */
.slide {display: flex; align-items: center;}
.slide .single-item {width: 600px; margin: 0 auto;}

.slide .slick-dots li {width:10px; height:10px;}
.slide .slick-dots li button {width:8px; height:8px; border-radius:50%; background: #ffffff; border: 1px solid #1D85C8; opacity: 1; padding:0;}
.slide .slick-dots li button:before {display: none;}
.slide .slick-dots li.slick-active button {background: #1D85C8;}
.slide #aro1_prev,
.slide #aro1_next {width: 45px; height: 45px; border-radius: 100px; transition: all 0.6s; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.slide #aro1_prev:hover,
.slide #aro1_next:hover {background: rgba(29,133,200,0.3);}
.slide #aro1_prev:hover svg path,
.slide #aro1_next:hover svg path {fill:#ffffff;}

/* view */
.view .visual {height:400px;}
.view .visual.zine01 {background-image: url('../img/sub/view01_back.png');}
.view .visual.zine02 {background-image: url('../img/sub/view02_back.png');}
.view .visual.zine03 {background-image: url('../img/sub/view03_back.png');}
.view .visual.zine04 {background-image: url('../img/sub/view04_back.png');}
.view .visual.zine05 {background-image: url('../img/sub/view05_back.png');}
.view .visual.zine06 {background-image: url('../img/sub/view06_back.png');}

.view .visual.posi {position: relative;}
.view .visual.posi img {height: 100%;}
.view .visual.posi .inner {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}

.view .visual .inner .txt {width: 100%; text-align: center;}
.view .visual .inner .tit h2 {line-height:1;}
.view .visual .inner .tit h2 span{font-size:65%;}
.view .visual .inner .tit h2 p.title {font-size:44px;font-weight:bold;}
.view .visual .inner .tit h2 p.s_txt{font-size:28px;margin:10px 0;}
.view .cont .inner{width:800px;}

.view .cont .inner .tit h4{text-align: center;}
.view .cont .inner .tit h4 span {font-size:60%; display: block;}
.view .cont .inner .tit p {text-align: center; margin-top: 20px;}
.view .cont .inner .in p {margin-bottom: 30px; font-size:18px; line-height: 1.6; text-align: justify; word-break: break-all;}
.view .cont .inner .in p:nth-child(1){margin-top: 0px;}
.view .cont .inner .in p u {font-weight:normal;}
.view .cont .inner .in i {color:#0084CA; font-weight: inherit; font-style:normal;}
.view .cont .inner .in em {font-weight: inherit; font-style:normal;}
.view .cont .inner .in strong {display: block; font-size:25px; color: #0084CA; margin-bottom: 6px; margin-top: 50px;}
.view .cont .inner .in .caption {margin:5px 0 60px; font-size: 15px; color: #999999; text-align: center;}
.view .cont .inner .in .caption a {color: inherit; font-size: inherit; text-decoration: underline;}
.view .cont .inner .in .img {display: flex; justify-content: center; flex-wrap:wrap; margin-top: 60px;}
.view .cont .inner .in .img.mar10 {margin-top: 10px;}
.view .cont .inner .in .img.mar30 {margin-top: 30px;}
.view .cont .inner .in .img.grid1 div {width: 100%;}
.view .cont .inner .in .img.grid2 div {width: 49%; margin-left: 10px;}
.view .cont .inner .in .img.grid2 div:nth-child(1) {margin-left: 0px;}
.view .cont .inner .in .img.grid3 div {width: 32%; margin-left: 10px;}
.view .cont .inner .in .img.grid4 div {width: 48%; margin-left: 0px; margin-bottom: 10px;}
.view .cont .inner .in .img.grid4 div:nth-child(2n) {margin-left: 10px;}
.view .cont .inner .in .img.grid4 div:nth-child(3),
.view .cont .inner .in .img.grid4 div:nth-child(4){margin-bottom:0px;}
.view .cont .inner .in .img.grid5 {display: block;}
.view .cont .inner .in .img.grid5 > div {display: flex; flex-wrap:wrap; justify-content: center;}
.view .cont .inner .in .img.grid5 .num2 > div {width:49%; margin-bottom: 10px;}
.view .cont .inner .in .img.grid5 .num2 > div:nth-last-child(1) {margin-left: 10px;}
.view .cont .inner .in .img.grid5 .num3 > div {width:32.2%; margin-left: 10px;}
.view .cont .inner .in .img.grid5 .num3 > div:nth-child(1) {margin-left: 0;}
.view .cont .inner .in .img.grid1-n > div:nth-child(1) {width:50%;}
.view .cont .inner .in .img.grid1-n .vertical div {margin: 0 0 10px 10px;}
.view .cont .inner .in .img.grid1-n .vertical div:nth-last-child(1) {margin-bottom: 0px;}
.view .cont .inner .in .img.grid1-n .vertical.num1 {width:64.5%;}
.view .cont .inner .in .img.grid1-n .vertical.num2 {width:49%;}
.view .cont .inner .in .img.grid1-n .vertical.num3 {width:30.6%;}
.view .cont .inner .in .img.g1-1 > div:nth-child(1) {width:32%;}
.view .cont .inner .in .img div img {width:100%;}
.view .cont .inner .in .box {background: rgb(245,245,245); padding: 30px;}
.view .cont .inner .in .hr {border-top: 1px solid #999999; color: #999999; padding-top: 15px; font-size: 14px; margin-top: 30px;}
.view .cont .inner .in .hr a { color: inherit; font-size: inherit;}
.view .cont .inner .in .hr u { color: inherit; font-size: inherit;}
.view .cont .inner .in .author {border: 2px solid #0084CA; padding: 20px; display: flex; justify-content: center; align-content: center; margin: 0 auto; margin-top: 80px;}
.view .cont .inner .in .author img {width:auto; height: 100%;}
.view .cont .inner .in .author p {width: 80%; margin: 0; margin-left: 30px; font-size:16px;}
.view .cont .inner .in .author strong {font-size: 20px; color: #333333; margin-top: 0;}
.view .cont .inner .in .author strong span {font-weight: 700; font-size:16px; border-left: 1px solid #333333; padding-left: 10px;}


.share-link {width: 800px; margin: 0 auto; display: flex; justify-content: flex-end; padding-bottom: 50px;}
.share-link li {margin-right: 10px;}
/* footer */

.newslatter_footer {background: #494949;}
.newslatter_footer .inner {overflow: hidden;}
.newslatter_footer .inner .f1-left h1 {font-size:42px;}
.newslatter_footer .inner .f1-right {padding-top: 30px;}
.newslatter_footer .inner p {color: #ffffff; margin: 20px 0;}
.newslatter_footer .inner span.hr {display: block; background: #ffffff; width: 100%; height: 1px;}
.newslatter_footer .inner:nth-child(2) p {text-align: right;}