@charset "utf-8";

/* 내용관리 */
#ctt {margin:10px 0;padding:20px;background:#fff}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}


	.pg-sub > .content-body { padding-bottom:0; }
	.page-content { }

    .page-content .section { position:relative; z-index:1; --sec-padding:100px; padding-top:var(--sec-padding); }

	.page-content .section.sec1,
    .page-content .section.sec2,
    .page-content .section.sec3 { padding-bottom:var(--sec-padding); }

    .page-content .section .header { text-align:center; margin-bottom:0px; }
    .page-content .section .header .subhead { font-size:1rem; font-weight:700; display:inline-block; margin:0 auto 20px; border-bottom:1px solid #ddd; padding-bottom:3px; color:var(--main-color3) }
    .page-content .section .header .head { font-size:2.5rem; font-weight:600; }
    .page-content .section .header .desc { line-height:1.5; margin-top:20px; }

	.sec1 .header { position:relative; text-align:left; margin-bottom:150px; z-index:1; }
    .sec1 .header .circular { position:absolute; right:100%; top:50%; transform:translate(50%, -70%); display:block; width:180px; height:180px; z-index: 99; cursor: pointer; z-index:-1; }
    .sec1 .header .circular text { fill: #ddd; font-size: 30px; letter-spacing: 10px; animation: circle-rotate 10s linear infinite; transform-origin: 250px 250px; }

    @keyframes circle-rotate {
        to { transform: rotate(360deg); }
    }

    .sec1 .header .head { font-size:2.8rem; font-weight:800; }
    .sec1 .header .head p:last-child { position:relative; display:inline-block; }
    .sec1 .header .head p:last-child:before { content:""; position:absolute; left:100%; top:0; width:25px; height:25px; background:var(--main-color2); border-radius:99px; transform:translateY(100%); opacity:0; transition:all 600ms 800ms; }
    .sec1 .header .head.active p:last-child:before { transform:translateY(0); opacity:1; }

    .sec1 .header .head span { color:var(--main-color2); }


	.page-content .sec1 { --img-size:650px; --txt-width:40%; margin-bottom: 100px; }
	.page-content .sec1 .header { position:absolute; text-align:left; width:var(--txt-width); }
	.page-content .sec1 .swiper { overflow:visible; margin: 0 auto; }
	.page-content .sec1 .swiper-slide .c { display:flex; height:500px; padding: 0;}

	.page-content .sec1 .swiper-slide .content { width:var(--txt-width); margin-bottom:var(--sec-padding); margin-top:240px; padding: 0;}

	.page-content .sec1 .swiper-slide .title { font-size:1.325rem; font-weight:600; margin-bottom:20px; }
	.page-content .sec1 .swiper-slide .head { font-size:2.7rem; margin-bottom:15px; color:var(--main-color1);font-weight:600; }
	.page-content .sec1 .swiper-slide .desc { line-height:1.5em; font-size:1.125rem; }

	.page-content .sec1 .swiper-slide .content > div:not(.title) { transform:translateY(20px); opacity:0; }
	.page-content .sec1 .swiper-slide-active .content > div:not(.title) { transform:translateY(0); opacity:1; transition-duration:400ms; }

	.page-content .sec1 .swiper-slide .image { position:relative; margin-left:5em; width:55%; max-width:var(--img-size); opacity:0; flex:1; }
	.page-content .sec1 .swiper-slide .image:before { content:""; position:absolute; left:60px; bottom:-20px; width:100%; height:100%; border-radius:0px; background:var(--main-color2); filter: blur(0px); opacity:.7; z-index:-1; }
    .page-content .sec1 .swiper-slide .img { padding-bottom:70%; border-radius:0px; background:none no-repeat center/cover; }

	.page-content .sec1 .swiper-slide-active .image { margin-left:5em; opacity:1; transition-duration:400ms; }

	.page-content .sec1 .ctrl { position:absolute; left:0; right:0; bottom:0; z-index:9; display:flex; align-items:center;  }
	.page-content .sec1 .pg { width:auto; margin:0 20px; }
	.page-content .sec1 .pg .swiper-pagination-current { font-weight:600; }
	.page-content .sec1 .nav { position:relative; display:inline-block; width:40px; height:40px; border:1px solid #666; border-radius:100%; cursor:pointer; }
	.page-content .sec1 .nav.prev:before,
	.page-content .sec1 .nav.next:before { content:""; position:absolute; top:50%; width:15px; height:15px; border-top:1px solid #666; }
	.page-content .sec1 .nav.prev:before { left:60%; border-left:1px solid #666; transform:translate(-50%, -50%) rotate(-45deg); }
	.page-content .sec1 .nav.next:before { left:40%; border-right:1px solid #666; transform:translate(-50%, -50%) rotate(45deg); }

	.page-content .sec2 { padding:100px 0; background:#f8f8f8; margin-top: 70px; }
	.page-content .sec2 .header { text-align:center; margin-bottom:50px; }
	.page-content .sec2 .header .head { font-size:3rem; font-weight:600; }

	.page-content .sec2 .a .img { background:#eee no-repeat center/cover; }
	.page-content .sec2 .a .content { padding:30px 30px; background:#fff; height:auto;  }
	.page-content .sec2 .a .head { font-size:1.25rem; font-weight:600; }
	.page-content .sec2 .a .desc { font-weight:400; }

	.page-content .sec3 { position:relative; z-index:2; background:url('<?=G5_THEME_IMG_URL?>/business1-sec3-bg.jpg') no-repeat center/cover fixed; color:#fff; }

    .page-content .sec3:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.3); z-index:-1; }

    .page-content .sec3 .bg { position:absolute; left:0; top:0; right:0; bottom:0; }

    .page-content .sec3 .header { margin-bottom:0 !imporwjrjtant; }
	.page-content .sec3 .head { }

    .page-content .sec3 .desc { margin-bottom:15px; font-size: 1.25rem; }

    .page-content .sec3 .btn-box { margin-top:40px; }

    .page-content .sec3 .btn-box .btn { background:#fff; padding:20px 30px; color:#333; font-size: 1.25rem;}

    .page-content .sec3 .btn-box .btn:hover { color:#fff; }



	@media (max-width: 1024px) {
        .page-content .section { --sec-padding:100px; }
		.page-content .section .header { margin-bottom:40px; }
		.page-content .section .header .subhead { margin-bottom:20px; }
        .page-content .section .header .head { font-size:2rem; }


		.page-content .sec1 { --img-size:450px; --txt-width:100%; }
		.page-content .sec1 .header { position:relative; text-align:center; }
		.page-content .sec1 .swiper-slide .c { flex-direction:column-reverse; align-items:center; height:auto; }

		.page-content .sec1 .swiper-slide .content { margin-top:35px; margin-bottom:0; text-align:center; padding:0 10%; }

		.page-content .sec1 .swiper-slide .title { margin-bottom:15px; }
		.page-content .sec1 .swiper-slide .head { font-size:2rem; margin-bottom:10px; }
		.page-content .sec1 .swiper-slide .desc { height:auto; }


		.page-content .sec1 .swiper-slide .image { margin-left:0; width:85%;}
		.page-content .sec1 .swiper-slide .image:before { left:10px; bottom:-10px; }
		.page-content .sec1 .swiper-slide .img { position:relative; }
		.page-content .sec1 .swiper-slide-active .image { margin-left:0; }

		.page-content .sec1 .ctrl { justify-content:center; }
		.page-content .sec1 .pg { width:auto; margin:0 20px; }
		.page-content .sec1 .pg .swiper-pagination-current { font-weight:600; }
		.page-content .sec1 .nav { position:relative; display:inline-block; width:40px; height:40px; border:1px solid #666; border-radius:100%; cursor:pointer; }
		.page-content .sec1 .nav.prev:before,
		.page-content .sec1 .nav.next:before { content:""; position:absolute; top:50%; width:15px; height:15px; border-top:1px solid #666; }
		.page-content .sec1 .nav.prev:before { left:60%; border-left:1px solid #666; transform:translate(-50%, -50%) rotate(-45deg); }
		.page-content .sec1 .nav.next:before { left:40%; border-right:1px solid #666; transform:translate(-50%, -50%) rotate(45deg); }

		.page-content .sec2  .header .head { font-size:2.5rem; }

		.page-content .sec3 .btn-box { margin-top:30px; }


	}

	@media (max-width: 767px) {
        .page-content .section { --sec-padding:50px; }

		.section .header { margin-bottom:30px; }
        .section .header .subhead { margin-bottom:10px; }
        .section .header .head { font-size:1.875rem; }
        .section .header .desc { margin-top:10px; }

        .sec1 .header .circular { width:100px; height:100px; }
        .sec1 .header .head p:last-child:before { width:10px; height:10px; }

		.page-content .section.sec1{padding-bottom: 0}


		.page-content .sec2 { padding:60px 0; }
        .page-content .sec2 .header { margin-bottom:30px; }
        .page-content .sec2 .header .head { font-size:2rem; }
        .page-content .sec2 .a .content { padding:20px 20px; }
        .page-content .sec2 .a .desc { margin-top:5px; }

		.page-content .sec3 .btn-box .btn { padding:15px 25px; }
	}