@charset "utf-8";
@import url("default_03.css"); 



html, body{width:100%; min-width:320px; height:100%; margin:0; padding:0; overflow:hidden;}
#fullpage{position:relative; top:0; width:100%; height:100%;}

#fp-nav.left{left:45px;}
#fp-nav ul li{position:relative; display: block; width:24px; height:24px; margin-bottom:8px;}
#fp-nav ul li:last-child{display: none;}
#fp-nav ul li a{display: block; position: relative; width: 100%; height: 100%; cursor: pointer; text-decoration: none; z-index: 1;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span{width:9px; height:9px; margin:0; background:#000}
#fp-nav ul li a span{position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); width:9px; height:9px; margin:0; background: #999; border:0; border-radius: 50%; -webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; z-index: 1;}
#fp-nav ul li:hover a span{width:9px; height:9px; margin:0; background:#000}
#fp-nav ul li a.active span:before, #fp-nav ul li:hover a.active span:before{content:''; display:inline-block; width:24px; height:24px; margin:-9px 0 0 -9px; border:2px solid #000; border-radius:50px; text-align:center;}

.container{position:relative; max-width:1400px; margin:0 auto;z-index:2;}

.section{position:relative; width:100%; height:100%; overflow:hidden;}
.section h3{font-family: 'Gmarket Sans'; font-weight: 700; font-size:43px; text-align:center; letter-spacing:-1px;}
.section .stxt02{max-width:1200px; margin:0 auto; padding:30px 0; font-size:18px; font-weight:500;}

.section01 > div:before{content:''; position:absolute; top:160px; right:0; display:block; width:447px; height:366px; background:url('../images/img_onlinearts/bg_s01-1.png') right top no-repeat;}
.section01 > div:after{content:''; position:absolute; bottom:0; left:0;  display:block; width:565px; height:290px; background:url('../images/img_onlinearts/bg_s01-2.png') left bottom no-repeat;}
.section01{background:#cfeee9; text-align:center;}
.section01 h1{position:absolute; top:0; width:100%; height:160px; padding-top:47px; background:#fff; text-align:center; z-index:2}
.section01 h1 img{max-width:100%}
.section01 > div{padding:0; height:calc(100% - 190px);}
.section01 .stxt01{position:relative; z-index:1;}
.section01 .stxt01 > h3{font-family: 'Gmarket Sans'; font-weight: 700; font-size:52px; line-height:1.3;}
.section01 .stxt01 > p{margin:30px 0; font-weight:500; font-size:27px;}
.main-scroll{position:absolute; bottom:45px; left:50%; transform:translateX(-50%); animation-name:m; animation-duration:0.52s; animation-iteration-count:infinite; animation-direction:alternate; z-index:1}
.main-scroll > span{display:block; padding:8px 0; font-size:12px; color:#000;}
@keyframes m{
	from{bottom:4%;}
	to{bottom:2%;}
}

.section02{background:#f8f4eb;}
.section02 .bg1{position:absolute; top:0; left:0; width:402px; height:510px; display:inline-block; background:url('../images/img_onlinearts/bg_s02-1.png') left top no-repeat; z-index:0;}
.section02 .bg2{position:absolute; top:40px; right:0; width:214px; height:301px; display:inline-block; background:url('../images/img_onlinearts/bg_s02-2.png') right top no-repeat; z-index:0;}
.section02 .bg3{position:absolute; bottom:0; left:20%; width:403px; height:263px; display:inline-block; background:url('../images/img_onlinearts/bg_s02-3.png') left bottom no-repeat; z-index:0;}

.owl-carousel {width: 100%; position: relative; z-index:2;}
.owl-carousel.owl-loaded {visibility: visible; opacity: 1;}
.owl-carousel .owl-stage-outer {position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-stage {position: relative;}
.owl-carousel .owl-item {position: relative; float:left;}
.owl-carousel img {display: block; max-width: 100%; margin:0 auto;}
.owl-prev{position:absolute; left:-105px; top:50%; transform:translateY(-50%); width:75px; height:75px; background:url('../images/img_onlinearts/btn_prev.png') no-repeat;}
.owl-next{position:absolute; right:-105px; top:50%; transform:translateY(-50%); width:75px; height:75px; background:url('../images/img_onlinearts/btn_next.png') no-repeat;}
.owl-prev > span, .owl-next > span{display:none}

.cont-list .item > div{position: relative; width:320px; height:530px; margin-right:40px; padding-top:30px; background:#fff; border-radius:20px; text-align:center;}
.cont-list .item > div > h4{height:140px; padding:30px; font-size:20px; word-break:keep-all; word-wrap:break-word; line-height:1.3; overflow:hidden;}
.cont-list .item .thumbs{width:100%; height:210px; margin-bottom:40px; overflow:hidden; cursor:pointer}
.cont-list .item .thumbs > img{width:100%; min-height:210px; object-fit: cover;}
.cont-list .item .thumbs:hover .info, .cont-list .item .thumbs:focus .info{display:block; position: absolute; top: 0; left: 50%; width: 100%; height: 100%;  padding: 40px; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); z-index: 1;}
.cont-list .item .thumbs:hover:before, .cont-list .item .thumbs:focus:before{content:''; display: block; position: absolute; top:0;  left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); border-radius:20px; z-index: 1; transition: top 0.5s; }
.cont-list .item .thumbs:hover .info{display:table;}
.cont-list .item .thumbs:hover .info p{display:table-cell; font-size:18px; color:#fff; vertical-align:middle;}

.btn-wrap{margin-bottom:65px; text-align:center;}
.btn-black{display:inline-block; min-width:178px; padding:13px 50px; color:#fff; background:#383838; text-align:center; font-size:17px;}
.btn-default{position:relative; display:inline-block; min-width:130px; padding:5px 10px; color:#000; border:1px solid #333; border-radius:5px; text-align:center; font-size:15px; font-weight:500; z-index:1}
.btn-default:hover{color:#fff;}
.btn-default::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-radius:5px; background: #383838; z-index:-1; transition: 0.25s;}
.btn-default:hover::before {width: 100%; transition: 0.5s;}




.type{display:inline-block; padding:12px 18px 7px; border-radius:50px; font-family: 'Gmarket Sans'; font-weight:500; font-size:14px; color:#fff; text-align:center; letter-spacing:-1px;}
.type1{background:#ff6f32}
.type2{background:#038e5c}
.type3{background:#ffbc13}

.section03{background:#f3ebe8;}
.section03 .bg1{position:absolute; top:0; right:0; width:331px; height:359px; display:inline-block; background:url('../images/img_onlinearts/bg_s03-1.png') right top no-repeat; z-index:0;}
.section03 .bg2{position:absolute; top:120px; left:5%; width:90px; height:90px; display:inline-block; background:url('../images/img_onlinearts/bg_s03-2.png') left top no-repeat; z-index:0;}
.section03 .bg3{position:absolute; bottom:0; left:0; width:185px; height:328px; display:inline-block; background:url('../images/img_onlinearts/bg_s03-3.png') left bottom no-repeat; z-index:0;}
.section03 .bg4{position:absolute; bottom:0; left:50%; width:264px; height:79px; display:inline-block; background:url('../images/img_onlinearts/bg_s03-4.png') left bottom no-repeat; z-index:0;}

.section04{background:#f8f4eb;}
.section04 .bg1{position:absolute; top:220px; left:0; width:169px; height:381px; display:inline-block; background:url('../images/img_onlinearts/bg_s04-1.png') left top no-repeat; z-index:0;}
.section04 .bg2{position:absolute; top:0; right:0; width:468px; height:523px; display:inline-block; background:url('../images/img_onlinearts/bg_s04-2.png') right top no-repeat; z-index:0;}
.section04 .bg3{position:absolute; bottom:0; left:0; width:100%; height:198px; display:inline-block; background:url('../images/img_onlinearts/bg_s04-3.png') left bottom no-repeat; background-size:cover; z-index:0;}

.section.section05 > div{padding:130px 0 0;}
.footer{position:absolute; bottom:0; width:100%; height:130px; padding:40px 0; background:#383838;}
.footer > div > h1{margin-bottom:15px; font-family: 'Gmarket Sans'; font-weight:500; font-size:20px; color:#fff;}
.footer .copyright{font-size:14px; color:#707276;}
.footer .banner{position:absolute; top:0; right:0;}
.footer .banner li{display:inline-block; margin-left:10px;}



@media screen and (max-width:1399px) {
	.section .stxt02{padding:20px; font-size:14px;}
	.owl-carousel .owl-nav, #fp-nav{display: none;}
	.cont-list .owl-carousel::-webkit-scrollbar {display: none;}
	.cont-list.owl-carousel {padding: 0; box-sizing:border-box;}

	.btn-wrap{margin-bottom:40px;}
	.btn-black{min-width:1px; padding:8px 20px; font-size:14px;}

	.footer > div{padding-left:20px; padding-right:20px;}
	.footer .banner{position:absolute; top:0; right:20px;}

}

@media screen and (max-width:1023px) {
	.cont-list .item > div{width:265px; margin:0 10px;}
	.cont-list .item > div > h4{height:140px; padding:20px; font-size:20px;}
	.cont-list .item .thumbs{width:100%; height:170px; margin-bottom:30px;}
	.cont-list .item .thumbs > img{width:100%; min-height:170px; object-fit: cover;}

	.btn-default{width:85%; margin-bottom:5px;}
}

@media screen and (max-width:767px) {
	.section{padding:30px 0;}
	.section h3{font-size:23px;}

	.section01 h1{height:80px; padding-top:15px;}
	.section01 h1 img{max-width:220px;}
	.section01 .stxt01{padding:30px}
	.section01 .stxt01 > h3{font-size:23px; line-height:1.3;}
	.section01 .stxt01 > p{margin:30px 0;font-size:13px;}	
	.section01 > div:before{top:80px; background-size:80%;}
	.section01 > div:after{background-size:70%;}
	.section02 .bg1, .section02 .bg2, .section02 .bg3{background-size:40%;}
	.section03 .bg1, .section03 .bg2, .section03 .bg3, .section03 .bg4{background-size:40%;}
	.section04 .bg1, .section04 .bg2{background-size:40%;}

	.section.section05 > div{padding:170px 0 0;}
	.footer{height:230px; text-align:center;}
	.footer > div{padding:0 20px 30px; background:#383838;}
	.footer .banner{position:static; margin-top:40px;}
	.footer .banner li{margin:0 0 10px 0}
}