@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url("//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css");

body {margin:0px;}
body, td, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, textarea, figure{font-family:Nanum Gothic, sans-serif; font-size:11pt; color:#000; line-height:140%; -webkit-text-size-adjust:none;}

img{border:0;}

h1, h2, h3, h4, h5, figure, p{padding: 0px; margin: 0px; font-weight: normal;}
ul, li{padding:0px; margin:0px; list-style:none;}

#fixNextTag article{width: 1200px; margin: 0 auto;}

/* page 00 */
#page00{background:url(../images/00bg.jpg) center top no-repeat; background-attachment:fixed; height: 535px; padding-top: 65px;}
#page00 article{text-align: center;}
#page00 h2{font-size: 40px; font-weight: bold; font-family:'Nanum Square'; color:#fff; padding: 50px 0px 85px 0px;}
#page00 h2 a{color: #fff; text-decoration: none;}
#page00 h2 span{color:#ffd302;}
#page00 div{width:624px; margin: 0 auto;}
#page00 div figure{margin: 0px 18px; float: left; width:168px; height:168px; border-radius: 50%; background: #ffd302;}
#page00 div h3{color:#000; font-weight: bold; font-size: 22px; padding-top: 69px;}

/* page 01 */
#page01{height: 500px; padding-top: 65px;}
#page01 .con h2, #page01 .con div{float: left;}
#page01 .con h2{width: 300px; font-size: 22px; line-height: 160%; font-family:'Nanum Square'; padding-top: 90px;}
#page01 .con h2 span{font-weight: bold;}

#page01 .con div{width: 900px; margin-top: 50px;}
#page01 .con div figure{width:245px; height:245px; background:#ffd302; border-radius: 50%; float: left; margin-left: 55px; text-align:center;}
#page01 .con h3{padding-top: 40px; font-size: 24px; font-family:'Nanum Square'; font-weight: bold;}
#page01 .con h4{font-size: 28px; font-family:'Nanum Square'; font-weight: bold; padding-top:26px; }
#page01 .con h5{padding-top: 15px;}

/* page 02 */
#page02{height: 800px; padding-top: 65px; background:url(../images/02bg.jpg) center top no-repeat; background-attachment:fixed;}
#page02 .title h2, #page02 .title h5{color:#fff;}
#page02 .con h2{font-size: 30px; color:#ffd302; font-family:'Nanum Square'; margin-top: 50px;}
#page02 .con h2 span{font-weight: bold;}
#page02 .con .icon{margin-top: 100px;}
#page02 .con .icon figure{padding-top: 40px; width: 246px; height: 206px; background: #fff; border-radius: 50%; border: 2px solid #6e6f70; float: left; text-align: center; margin-right: 65px;}
#page02 .con .icon figure:nth-child(4){margin-right:0px;}
#page02 .con h3{font-size: 22px; font-weight: bold; padding-top: 20px;}

/* page 03 */
#page03{height: 770px; padding-top: 145px;}
#page03 figure{float: left; background: #000; cursor: pointer;}
#page03 figure:nth-child(1){width: 595px; height: 700px; margin-right: 10px;}
#page03 figure:nth-child(2){width: 595px; height: 345px; margin-bottom: 10px;}
#page03 figure:nth-child(3){width: 595px; height: 345px;}

#page03 figure {color: #fff; position: relative; overflow: hidden; background: #000000; color: #ffffff; text-align: left; float: left;}
#page03 figure * {-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}
#page03 figure img {opacity: 0.8; width: 100%; vertical-align: top; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
#page03 figure figcaption {position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;}
#page03 figure figcaption > div {height: 50%; overflow: hidden; width: 100%; position: relative;}
#page03 figure h2,
#page03 figure h3 {color:#fff; margin: 0; position: absolute; left: 0; padding: 0 30px; text-transform: uppercase; font-size: 20pt;}
#page03 figure h2 {font-weight: 900; top: 0;}
#page03 figure h3 {bottom: 0; font-weight: 500;}
#page03 figure h3:nth-of-type(2) {opacity: 0; -webkit-transform: translateY(150%); transform: translateY(150%);}
#page03 figure a {left: 0; right: 0; top: 0; bottom: 0; position: absolute;}
#page03 figure:hover img, figure.main01_con.hover img {opacity: 0.3; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
#page03 figure:hover figcaption h3:first-of-type,
#page03 figure:hover figcaption h3:first-of-type {-webkit-transform: translateY(150%); transform: translateY(150%);opacity: 0;}
#page03 figure:hover figcaption h3:nth-of-type(2),
#page03 figure:hover figcaption h3:nth-of-type(2) {opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%);}

/* page 04 */
#page04{background:#ffd302; padding: 50px 0px;}
#page04 article{background: #fff; padding: 50px 0px; box-sizing: border-box; border: 1px solid #000;}
#page04 h3{margin: 0 auto; text-align: center; font-size: 28px; font-family:'Nanum Square';}
#page04 h3 span{font-weight: bold;}

/* copy */
.copy{padding:50px 0px;font-size:10pt; color:#666; line-height:135%; text-align: center;}

/* topmenu */
.top_bar_fix, .top_fix_zone{position:fixed; right:0px; z-index:999 !important; text-align:right;}

#topmenu{width: 1200px; margin: 0 auto; z-index: 10000;}
#topmenu ul, #topmenu h1{float: left;}
#topmenu ul{width: 80%;}
#topmenu h1{width: 20%;}
#topmenu ul li{display:inline-block;}

.top_bar_fix{background:rgba(0,0,0,0.7) !important;}

.top_fix_zone{background-color:none; top:0px; width:100%; padding: 15px 0px;}
.top_fix_zone #topmenu a{color:#fff; text-decoration:none; font-size:16pt; font-weight: bold; padding-right: 20px; line-height:25pt;}

.top_bar_fix #topmenu a{color:#e2e2e2 !important;}

.top_bar_fix #topmenu a:hover{color:#1e1e1e !important;}
.top_fix_zone #topmenu a:hover{color:#ffd302;}

.top_fix_zone #logo{width: 20%; height: 37px; background:url(../images/logo.png) left top no-repeat; margin-top: 5px;}

label, #toggle, #call{display: none;}
#nav{padding: 0px; margin: 0px; display: inline;}
#contents{background: #d9e5ff; min-height: 200px;}
#footer{background: #eaeaea; font-size: 13px;}

/**/
.title{padding-top: 40px;}
.title h2, .title h5{float: left; width: 50%; color:#000;}
.title h2{text-align: left; font-size: 14px; line-height: 220%;}
.title h2 span{font-weight: bold; font-size: 40px; font-family:'Nanum Square';}
.title h5{text-align: right; font-size: 14px;}
.title h5 span{font-weight: bold;}

.bar{margin-top: 40px;}
.bar div{float: left; background: #ffd302;}
.bar div:nth-child(1){height: 1px; margin-top: 3px; display: none;}
.bar div:nth-child(2){height: 4px; width:20%;}
.bar div:nth-child(3){height: 1px; width:80%; margin-top: 3px;}

.normal{font-size:11pt; color:#666; line-height:150%; word-spacing:-1px;}
.st01{font-size:14pt; color:#333; line-height:150%; padding:0px 0px 10px 0px;}
.st02{font-size:23pt; color:#333; line-height:150%; font-weight:bold; font-family:arial;}
.st03{font-size:18pt; color:#333; line-height:150%; padding:0px 0px 10px 0px; font-weight:bold;}

.sp10{height:10px; font-size:1px;}
.sp20{height:20px; font-size:1px;}
.sp30{height:30px; font-size:1px;}
.sp40{height:40px; font-size:1px;}
.sp50{height:50px; font-size:1px;}
.sp80{height:80px; font-size:1px;}

/*������*/
#online {width:90%; margin: 40px auto 0 auto;}
#online td{padding:0px 0px;}
#online .from_title{font-weight: bold; font-size:17px; width: 70px; font-family:'Nanum Square';}
#online_btn{width:100%;text-align:center;}

#from_one{width: 50%; float: left;}

.from_con{width: 100%; height:25px; margin-bottom: 20px;}
.from_con div{float: left;}
.from_con input{width: 420px; height:25px;}

.from_text{padding-top: 5px; font-size:12pt; line-height:150%; word-spacing:-1px;}

#from_button{margin-top: 30px;}
#from_button input{cursor: pointer; border-radius:30px; width: 100%; border: none; font-family:'Nanum Square'; text-align:center; font-size:20px; font-weight: bold; color:#fff; padding: 15px 0px; background: #000;}

textarea{width: 100%; height: 100px;}

@media all and (max-width: 768px) {
/*����*/
#fixNextTag article{width: 100%;}

/*ž�޴�*/
#topmenu{width: 100%;}
#topmenu ul{width: 100%;}
.top_fix_zone{background-color:#000; padding: 10px 0px 0px 0px;}
.top_fix_zone #logo{display: none;}

#nav{display: none;}
#call{display: block; position:fixed; top:17px; left: 15px; z-index: 10000;}
#call a{z-index: 10000;}
#toggle:checked+#nav{display: block;}
#nav li{display: block; width: 100%; text-align: center; border-top: 1px solid #ccc; padding: 4px;}
label{cursor: pointer; display: block; text-align: center; /*background:url(../images/menu.png); background-repeat: no-repeat;*/ background-position: 97% 15px; background-size: 25px 19px; font-size: 20px; font-weight: bold; padding: 4px 3% 19px 3%;}

/* page 00 */
#page00{height: 450px;}
#page00 h2{font-size: 34px; font-weight: bold; font-family:'Nanum Square'; color:#fff; padding: 80px 0px 45px 0px;}
#page00 div{width:510px;}
#page00 div figure{margin: 0px 5px; width:160px; height:160px; box-sizing: border-box;}
#page00 div h3{padding-top: 46px;}

/* page 01 */
#page01{height: 610px; padding-top: 65px;}
#page01 .con h2, #page01 .con div{float:none;}
#page01 .con h2{width: 100%; text-align: center;}
#page01 .con h2 br{display: none;}
#page01 .con h2 span{display: block;}

#page01 .con div{width: 540px; margin: 50px auto 0px auto;}
#page01 .con div figure{width:170px; height:170px; margin:0px 5px;}
#page01 .con h3{padding-top: 20px;}
#page01 .con h4{padding-top:0px; }
#page01 .con h5{padding-top: 5px; font-size: 12px;}

/* page 02 */
#page02{height: 950px; padding-top: 65px;}
#page02 .con h2{text-align: center; font-size: 26px;}
#page02 .con .icon{margin: 50px auto 0px auto; width: 540px;}
#page02 .con .icon figure{margin:10px;}
#page02 .con .icon figure:nth-child(4){margin-right:10px;}
#page02 .con h3{font-size: 22px; font-weight: bold; padding-top: 20px;}

/* page 03 */
#page03{height: 1050px; padding-top: 0px;}
#page03 figure{float: left; background: #000;}
#page03 figure:nth-child(1){width: 100%; height: 350px; margin-right: 0px;}
#page03 figure:nth-child(2){width: 100%; height: 350px; margin-bottom: 0px;}
#page03 figure:nth-child(3){width: 100%; height: 350px;}

/*page04*/
#page04{height: 570px; padding: 0px;}
#page04 h3{width: 100%;}

/*������*/
.from_con input{width: 400px;}
#from_one{width: 100%; float:none;}
#from_one:nth-child(2){margin-top: 30px;}
.from_con input{width: 430px;}
.from_text{text-align: center;}

/**/
.title{padding-top: 40px;}
.title h5{width: 60%; padding-top: 15px;}
.title h2{text-align:center; width: 100%;}
.title h2 span{font-size: 32px;}
/*.title h5{display: none;}*/

.bar div:nth-child(1){width:35%; display:block;}
.bar div:nth-child(2){width:30%;}
.bar div:nth-child(3){width:35%;}

#page00{background: url(../images/00bg2.jpg) left top no-repeat;}
}

@media all and (max-width: 580px) {
/*������*/
.from_con input{width: 220px;}
.from_text br{display: none;}

/* page 00 */
#page00{height: 650px;}
#page00 h2{font-size: 28px; width: 90%; margin: 0 auto; padding: 20px 0px;}
#page00 div{width:360px;}
#page00 div figure{margin: 0px 10px;}
#page00 .m_00bt{padding: 20px 90px 0px 90px; width:180px; height: 160px; clear: both;}
#page00 div h3{padding-top: 65px;}

/* page 01 */
#page01{height: 400px; padding-top: 65px;}
#page01 .con h2, #page01 .con div{float:none;}
#page01 .con h2{width: 100%; text-align: center;}
#page01 .con h2 br{display: none;}
#page01 .con h2 span{display: block;}

#page01 .con div{width: 360px; margin: 50px auto 0px auto;}
#page01 .con div figure{width:160px; height:160px; margin:0px 10px;}
#page01 .m_01bt{padding: 20px 90px 0px 90px; width:180px; height: 160px; clear: both;}
#page01 .con div figure:nth-child(3){float: none;}
#page01 .con h3{padding-top: 20px;}
#page01 .con h4{padding-top:0px; }
#page01 .con h5{padding-top: 5px; font-size: 12px;}

/* page 02 */
#page02{height: 1500px; background:url(../images/m_02bg.jpg) center top no-repeat;}
#page02 .con h2 br{display: none;}
#page02 .con h2{width: 90%; margin: 50px auto; font-size: 20px;}
#page02 .con .icon{width:250px;}
#page02 .con .icon figure{margin:20px 0px 0px 0px;}
#page02 .con .icon figure:nth-child(4){margin-right:0px;}

/* page 03 */
#page03{height: 600px;}
#page03 figure:nth-child(1){height: 200px;}
#page03 figure:nth-child(2){height: 200px;}
#page03 figure:nth-child(3){height: 200px;}
#page00{background: url(../images/00bg2.jpg) left top no-repeat;}
/* page 04 */
#page04{height: 650px; padding: 0px;}
#page04 article{padding-top: 90px;}
#page04 h3{margin: 0 auto; width: 90%;}
.from_con input{border: 1px solid #000;}
textarea{border: 1px solid #000;}
}