@charset "utf-8";

/*¸ÞÀÎÀ̹ÌÁö·Ñ¸µ*/
.main_container {width:100%; height:100%;position:relative;}
.main_visual_01 {width:100%; height:100%; margin:0px auto 0; overflow:hidden; position:relative;}
.main_visual_01 .typo {width:100%;position:absolute;z-index:9;left:20%;top:40%;}
.main_visual_01 .typo span {font-family:Gotham-Black;color:#fff;font-size:40px;line-height:50px;text-shadow:3px 3px 3px #000;}
.main_visual_01 .typo p {width:80%;color:#ffffff;font-size:18px;text-shadow:3px 3px 3px #000;margin-top:10px;}
.main_visual_01 .imgs {width:100%; height:100%; position:relative; overflow:hidden; background-color:#000;}
.main_visual_01 .imgs li {width:100%; height:100%; position:absolute; top:0; left:100%;}
.main_visual_01 .imgs li.li_01 {left:0; background:url('../../img/images/main_visual1.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_01 .imgs li.li_02 {background:url('../../img/images/main_visual2.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_01 .imgs li.li_03 {background:url('../../img/images/main_visual3.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_01 .imgs li.li_04 {background:url('../../img/images/main_visual4.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_01 .indis {width:100%; position:absolute; left:0; bottom:30px; text-align:center;}
.main_visual_01 .indis ul {display:inline-block; margin:0 auto; overflow:hidden;}
.main_visual_01 .indis ul li {float:left; margin-right:5px; position:relative;}
.main_visual_01 .indis ul li a {width:100%; height:100%; display:block;}
.main_visual_01 .bn_wrap {width:100%; height:45px; position:absolute; top:50%;margin-top:-58px; z-index:10;}
.main_visual_01 .bn_wrap .bns {position:absolute; top:0;}
.main_visual_01 .bn_wrap .bns a {width:100%; height:100%; display:block;}
.main_visual_01 .bn_wrap .left_bn {left:10px;}
.main_visual_01 .bn_wrap .right_bn {right:10px;}
/*¸ÞÀÎÀ̹ÌÁö·Ñ¸µ*/




/*¸ÞÀÎ3°³ÅؽºÆ®*/
.main_content_section{width:100%;height:600px;position:relative;}
.main_content_section .align_wrap{display:block;width:1280px;padding:0;margin:0px auto;}
.main_content_section .left_side{margin-top:50px;display:inline-block;width:33%;padding:0 15px;vertical-align:top;}
.main_content_section .content_section_title{color:#4DC1B4;font-size:40px;text-align:center;line-height:100%;margin:50px 0 0 0;}
.main_content_section .content_section_summary{margin:50px 0 0 0;color:#5d5d5d;line-height:200%;font-size:12px;}
.main_content_section .content_section_btn{margin:50px 0 0 0;color:#fff;font-weight:bold;width:100%;height:100px;text-align:center;}
.main_content_section .content_section_btn a>div{background:#000 url("") no-repeat;width:100px;height:100px;display:inline-block;text-align:center;color:#fff;border-radius:100px;transition:all .3s ease}
.main_content_section .content_section_btn a>div:hover {background:#21bbb1;}
.main_content_section .second_content_section_btn .btn_txt{margin:30px 0 0 2px;}
/*¸ÞÀÎ3°³ÅؽºÆ®*/

/*¸ÞÀÎÁß°£À̹ÌÁö*/
#middle_bg{background:url(../../img/images/middle_bg.png) no-repeat 50% 40%;background-attachment: fixed;text-align:center;}
#middle_bg a {position:relative; display:block; height:100%; padding:250px 0 250px 0; overflow:hidden;font-size:50px;color:#fff;}
#middle_bg a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}
#middle_bg a:hover:after {opacity:.2; filter:alpha(opacity='30')}
/*¸ÞÀÎÁß°£À̹ÌÁö*/

/*¸ÞÀÎÇÏ´Ü8°³¹è³Ê*/
#cont li{float:left;width:20%;position:relative;overflow:hidden;}
#cont li a{display:block;width:100%;height:100%;}
#cont li a h4{position:absolute;top:50%;left:0;margin-top:-30px;width:100%;height:60px;line-height:21px;font-size:21px;color:#fff;text-align:center;z-index:1000;}
#cont li a h4 span{font-size:16px;color:#d7d7d7;}
#cont li a .img_area{position:absolute;top:0;left:0;width:100%; }
#cont li a:hover h4{font-size:27px;color:#21BBB1;letter-spacing:-1px;font-weight:800;}
/*¸ÞÀÎÇÏ´Ü8°³¹è³Ê*/

@media screen and (max-width:1280px){
.main_content_section{width:100%; height:450px;margin:0px;background:#fff;position:relative;}
.main_content_section .align_wrap{width:100%;padding:0;margin-bottom:0px;}
.main_content_section .content_section_title{font-size:30px;text-align:center;line-height:100%;margin:25px 0 0 0;}
.main_content_section .content_section_summary{margin:25px 0 0 0;color:#5d5d5d;line-height:200%;}
.main_content_section .content_section_btn{margin:25px 0 0 0;}
#cont li {width:33.333333333333333%;}
#cont li:last-child {display:none;}
}

@media screen and (max-width:980px){
.main_content_section{padding:0 0 20px 0;height:auto;position:relative;}
.main_content_section .align_wrap{width:100%;padding:0;}
.main_content_section .left_side{margin:30px 0 0 0;width:100%;height:auto;padding:0;}
.main_content_section .left_side_box{width:90%;margin:0 5%;}
.main_content_section .content_section_title{font-size:30px;text-align:center;line-height:100%;/* margin:50px 0 0 0; */margin:0 0 20px 0;}
.main_content_section .content_section_title div{/* float:left; */}
.main_content_section .content_section_summary{margin:0;color:#5d5d5d;line-height:200%;}
.main_content_section .content_section_btn{margin:25px 0;}
}

@media screen and (max-width:890px){
#main_gal .typo {font-size:40px;color:#fff;line-height:30px; }
#middle_bg a {padding:50px 0 50px 0;font-size:30px;}
#cont li {float:left;width:50%;box-sizing:border-box;}
#cont li:last-child {display:block;}
#cont li a h4 {font-size:16px;}
#cont li a h4 span {font-size:14px;}
}

@media screen and (max-width:768px){
.main_visual_01 .typo {width:100%;position:absolute;z-index:9;left:20%;top:30%;}
.main_visual_01 .typo span {font-family:Gotham-Black;color:#fff;font-size:24px;line-height:40px;text-shadow:3px 3px 3px #000; }
.main_visual_01 .typo p {width:80%;color:#fff; font-size:16px;text-shadow:3px 3px 3px #000;margin-top:10px;}
}
@media screen and (max-width:480px){
#cont li {float:none;width:100%;}
}





/*¿µ»ó*/
.videowrapper {
position: relative;
padding-bottom: 56.25%; 
padding-top: 25px;
height: 0;
margin-bottom:20px;
}


.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




/*Ä·33±âµµÈ¸ ¶óÀÌºê ¹öÆ°*/
.youtube-btn{
padding:1rem;
margin-top:2rem;
}

.youtube-btn .btn-style{
display: block;
width: 320px;
margin: 0 auto;
background: #214093;
border: 1px solid #eaeaea;
color: #ffd136;
padding: 1rem;
text-align: center;
font-size: 1.2rem;
font-weight: bold;
transition:all .3s ease;
line-height:1.3
}

.youtube-btn .btn-style:hover{
background: #c6433d;
color:#fff;
}


<!-- Ä·33±âµµÈ¸ ¶óÀÌºê ¹öÆ° -->
<div class="youtube-btn">
<a href="https://www.youtube.com/channel/UCRCIMrew9qyiWE0AK10yaJA" target="blank" class="btn-style">
<div>Ä·ÆÛ½º33 ±âµµÈ¸ ¶óÀÌºê ¹Ù·Î°¡±â</div>
</a>
</div>
<!-- Ä·33±âµµÈ¸ ¶óÀÌºê ¹öÆ° -->








<!--¸ÞÀÎ3°³ÅؽºÆ®-->
<div class="main_content_section ">
<div class="align_wrap">
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Prayer?</div>
<span class="clb"></span>
</div>
<div class="content_section_summary">
Ä·ÆÛ½º¸¦ À§ÇÑ ±âµµ¿îµ¿ÀÔ´Ï´Ù. ¿ª»ç¿Í ±³È¸»ç ¼Ó¿¡¼­ °³Çõ, ºÎÈï, ¿µÀû ´ë°¢¼º, ¼±±³¿îµ¿ ¶ÇÇÑ Ä·ÆÛ½º¿¡¼­ ½ÃÀÛ µÇ¾ú½À´Ï´Ù. Ä·ÆÛ½ºÀÇ Å¸¶ôÀº °ð »çȸÀÇ Å¸¶ôÀ¸·Î À̾îÁý´Ï´Ù. Ä·ÆÛ½º°¡ ¿Ã¹Ù¸¥ ¹ÏÀ½°ú °¡Ä¡°üÀ» ¼¼¿ì´Â ¹Ì·¡ Çѱ¹ÀÇ ¿ä¶÷ÀÌ µÇµµ·Ï ±âµµÇÕ´Ï´Ù.
</div>
<div class="content_section_btn">
<a href="./intro/introduce.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Members?</div>
<span class="floatclear"></span>
</div>
<div class="content_section_summary">
±âµµ¿îµ¿¿¡ Á¤½ÄÀ¸·Î µ¿ÂüÇØÁֽô ¸ðµç ±³È¸¿Í ´Üü¸¦ ¡®Ä·33¸â¹ö½º¡¯·Î ¸ð½Ê´Ï´Ù.
´ÙÀ½¼¼´ë¸¦ À§ÇÑ Ã»³â»ç¿ª¿¡ Áö´ëÇÑ °ü½ÉÀÌ ÀÖ´Â ±³È¸! Ưº°È÷ Ä·ÆÛ½º¸¦ À§ÇÑ ±âµµÇÏ´Â ±âµµ°¡ »ì¾ÆÀÖ´Â ±³È¸! ¿µÀûÀ¸·Î ÀçÁ¤À¸·Î ¼¶±â¸ç Çϳª´Ô ³ª¶ó È®ÀåÀ» ½ÇõÇÏ´Â ±³È¸!
</div>
<div class="content_section_btn">
<a href="./network/members.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Supporters?</div>
<span class="floatclear"></span>
</div>
<div class="content_section_summary">
¼±±³ÇöÀå¿¡¼­ ±âµµÀÇ Áö¿ø¸¸Å­ ¸·´ëÇÑ µµ¿òÀ» ÁÙ ¼ö ÀÖ´Â °ÍÀº ¾ø½À´Ï´Ù.
Ä·ÆÛ½º ¼±±³ÇöÀåµµ ¸¶Âù°¡ÁöÀÔ´Ï´Ù.
°³ÀÎÀÇ °ñ¹æ¿¡¼­ Á¤±âÀûÀ¸·Î ±âµµÇØÁÖ½Ç ºÐµéÀ»¡®Ä·33¼­Æ÷ÅÍÁ·Î ¸ð½Ê´Ï´Ù. Ä·ÆÛ½º ¼±±³ÇöÀåÀÇ ±âµµÈÄ¿øÀÚ·Î µçµçÈ÷ ¼­ÁÖ½Ã±æ ¿äûÇÕ´Ï´Ù.
</div>
<div class="content_section_btn">
<a href="./supporters/supporters.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="clb"></div>
</div>
</div>
<!--¸ÞÀÎ3°³ÅؽºÆ®-->


</div>


<!-- ¿µ»ó -->
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/DLWLBCXzTWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- ¿µ»ó -->

<!--¸ÞÀÎÁß°£À̹ÌÁö
<div id="middle_bg"><a href="#;">PortFolio</a></div>
<div class="floatclear"></div>
¸ÞÀÎÁß°£À̹ÌÁö-->

<!--¸ÞÀÎÇÏ´Ü8°³¹è³Ê-->
<ul id="cont">
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2020<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample015.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample015.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>

<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2019<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample014.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample014.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>




<li>
<a href="#;">
<img src="./img/images/blank.png"/>
<h4>2018<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area" style="width:100%;">
<div><img src="./img/images/sample001.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample001.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2017<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area" >
<div><img src="./img/images/sample002.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample002.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<div class="test"><img src="./img/images/blank.png" /></div>
<h4>2016<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample003.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample003.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2015<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample004.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample004.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2014<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample005.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample005.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2013<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample007.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample007.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2010<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample009.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample009.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<!--<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2009<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample011.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample011.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>-->
<!--<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2008<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample008.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample008.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>-->
<li>
<a href="board/data.php">
<img src="./img/images/blank.png" />
<h4>´õ ¸¹Àº ÀڷẸ±â<br></h4>
<div class="img_area">
<div><img src="./img/images/sample013.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample013.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
</ul>
<!--¸ÞÀÎÇÏ´Ü8°³¹è³Ê-->

<!--°øÅë»ó´Ü¸Þ´º-->
{{$footer}}
<!--°øÅë»ó´Ü¸Þ´º-->
/*¿µ»ó*/
.videowrapper {
position: relative;
padding-bottom: 56.25%; 
padding-top: 25px;
height: 0;
margin-bottom:20px;
}


.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<!--¸ÞÀÎ3°³ÅؽºÆ®-->
<div class="main_content_section ">
<div class="align_wrap">
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Prayer?</div>
<span class="clb"></span>
</div>
<div class="content_section_summary">
Ä·ÆÛ½º¸¦ À§ÇÑ ±âµµ¿îµ¿ÀÔ´Ï´Ù. ¿ª»ç¿Í ±³È¸»ç ¼Ó¿¡¼­ °³Çõ, ºÎÈï, ¿µÀû ´ë°¢¼º, ¼±±³¿îµ¿ ¶ÇÇÑ Ä·ÆÛ½º¿¡¼­ ½ÃÀÛ µÇ¾ú½À´Ï´Ù. Ä·ÆÛ½ºÀÇ Å¸¶ôÀº °ð »çȸÀÇ Å¸¶ôÀ¸·Î À̾îÁý´Ï´Ù. Ä·ÆÛ½º°¡ ¿Ã¹Ù¸¥ ¹ÏÀ½°ú °¡Ä¡°üÀ» ¼¼¿ì´Â ¹Ì·¡ Çѱ¹ÀÇ ¿ä¶÷ÀÌ µÇµµ·Ï ±âµµÇÕ´Ï´Ù.
</div>
<div class="content_section_btn">
<a href="./intro/introduce.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Members?</div>
<span class="floatclear"></span>
</div>
<div class="content_section_summary">
±âµµ¿îµ¿¿¡ Á¤½ÄÀ¸·Î µ¿ÂüÇØÁֽô ¸ðµç ±³È¸¿Í ´Üü¸¦ ¡®Ä·33¸â¹ö½º¡¯·Î ¸ð½Ê´Ï´Ù.
´ÙÀ½¼¼´ë¸¦ À§ÇÑ Ã»³â»ç¿ª¿¡ Áö´ëÇÑ °ü½ÉÀÌ ÀÖ´Â ±³È¸! Ưº°È÷ Ä·ÆÛ½º¸¦ À§ÇÑ ±âµµÇÏ´Â ±âµµ°¡ »ì¾ÆÀÖ´Â ±³È¸! ¿µÀûÀ¸·Î ÀçÁ¤À¸·Î ¼¶±â¸ç Çϳª´Ô ³ª¶ó È®ÀåÀ» ½ÇõÇÏ´Â ±³È¸!
</div>
<div class="content_section_btn">
<a href="./network/members.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="left_side">
<div class="left_side_box">
<div class="content_section_title">
<div>Campus33</div>
<div>Supporters?</div>
<span class="floatclear"></span>
</div>
<div class="content_section_summary">
¼±±³ÇöÀå¿¡¼­ ±âµµÀÇ Áö¿ø¸¸Å­ ¸·´ëÇÑ µµ¿òÀ» ÁÙ ¼ö ÀÖ´Â °ÍÀº ¾ø½À´Ï´Ù.
Ä·ÆÛ½º ¼±±³ÇöÀåµµ ¸¶Âù°¡ÁöÀÔ´Ï´Ù.
°³ÀÎÀÇ °ñ¹æ¿¡¼­ Á¤±âÀûÀ¸·Î ±âµµÇØÁÖ½Ç ºÐµéÀ»¡®Ä·33¼­Æ÷ÅÍÁ·Î ¸ð½Ê´Ï´Ù. Ä·ÆÛ½º ¼±±³ÇöÀåÀÇ ±âµµÈÄ¿øÀÚ·Î µçµçÈ÷ ¼­ÁÖ½Ã±æ ¿äûÇÕ´Ï´Ù.
</div>
<div class="content_section_btn">
<a href="./supporters/supporters.php">
<div class="second_content_section_btn">
<div class="btn_txt">
<div>Detail</div>
<div>view</div>
</div>
</div>
</a>
<span class="clb"></span>
</div>
</div>
</div>
<div class="clb"></div>
</div>
</div>
<!--¸ÞÀÎ3°³ÅؽºÆ®-->


</div>


<!-- ¿µ»ó -->
<div class="videowrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WwoRetqhIPc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- ¿µ»ó -->

<!--¸ÞÀÎÁß°£À̹ÌÁö
<div id="middle_bg"><a href="#;">PortFolio</a></div>
<div class="floatclear"></div>
¸ÞÀÎÁß°£À̹ÌÁö-->

<!--¸ÞÀÎÇÏ´Ü8°³¹è³Ê-->
<ul id="cont">
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2020<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample015.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample015.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>

<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2019<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample014.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample014.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>




<li>
<a href="#;">
<img src="./img/images/blank.png"/>
<h4>2018<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area" style="width:100%;">
<div><img src="./img/images/sample001.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample001.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2017<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area" >
<div><img src="./img/images/sample002.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample002.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<div class="test"><img src="./img/images/blank.png" /></div>
<h4>2016<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample003.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample003.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2015<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample004.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample004.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2014<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample005.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample005.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2013<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample007.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample007.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2010<br><span>Ä·ÆÛ½º33Æ÷½ºÅÍ</span></h4>
<div class="img_area">
<div><img src="./img/images/sample009.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample009.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
<!--<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2009<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample011.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample011.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>-->
<!--<li>
<a href="#;">
<img src="./img/images/blank.png" />
<h4>2008<br><span>Ä·ÆÛ½º33ºê·Î¼Å</span></h4>
<div class="img_area">
<div><img src="./img/images/sample008.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample008.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>-->
<li>
<a href="board/data.php">
<img src="./img/images/blank.png" />
<h4>´õ ¸¹Àº ÀڷẸ±â<br></h4>
<div class="img_area">
<div><img src="./img/images/sample013.jpg" width="100%" height="100%" /></div>
<div><img src="./img/images/ssample013.jpg" width="100%" height="100%" /></div>
</div>
</a>
</li>
</ul>
<!--¸ÞÀÎÇÏ´Ü8°³¹è³Ê-->

<!--°øÅë»ó´Ü¸Þ´º-->
{{$footer}}
<!--°øÅë»ó´Ü¸Þ´º-->