#content{padding-top:0}
.section>.wrap{text-align:left;}
.section>.wrap>p{padding-top:0px;color:#333}


/* sectino1(main visual) **************************************************** */
.section.main-type1{
    --bg-img:'';
    --content-color: '';
    --link-color: '';
    --link-border-color: '';
    --link-hover-bg-color: '';
    --link-hover-color: '';
}
.section.main-type1{height:1000px;position:initial}
.section.main-type1 .swiper-container{overflow:hidden; width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.section.main-type1 .swiper-slide{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; 
    /*text-align: center; */
    font-size: 18px; 
    background: #fff; 
}
.section.main-type1 .swiper-slide>.bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat top center/cover;
    will-change: background-size;
    background-image: var(--bg-img);
    overflow: hidden;;
}
.section.main-type1 .swiper-slide.youtube>.bg>iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 170%;
    height: 170%;
    /* width: 100%; */
    /* height: 100%; */
    transform: translate(-50%, -50%)  scale(1);
    pointer-events: none;
    object-fit: cover;
}
.section.main-type1 .swiper-slide.youtube>.bg::after{
    content:'';
    display:block;
    position: absolute;
    top: 0%;
    left: 0%;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}

.section.main-type1 .swiper-slide>.bg.active{animation: bgMotion 15s ease-in-out forwards}
.section.main-type1 .swiper-slide.youtube>.bg.active{animation:none}
@keyframes bgMotion { 0%{ transform: scale(1); } 100%{ transform: scale(1.2); } }
.section.main-type1 .swiper-slide>.content{position:relative;z-index:2;width:50%;margin:calc(var(--header-height) * 3) 0 0 var(--size60);font-size:var(--fs60);color:var(--content-color);font-weight:700;text-align:left;line-height: 1.0;}
.section.main-type1 .swiper-slide>.content>div{display:inline-block;overflow:hidden;}
.section.main-type1 .swiper-slide>.content>div>span{display:block;}

.section.main-type1 .swiper-slide>.content>div.small{display:block;font-size:var(--fs24);font-weight:600;margin-top:var(--size20);line-height: 1.2;}

.section.main-type1 .swiper-slide>.content>a {
    position: relative;
    display: inline-block;
    margin-top: var(--size40);
    padding: var(--size10) var(--size40);
    font-size: var(--fs18);
    color: var(--link-color);
    border: 2px solid var(--link-border-color);
    border-radius: 50px;
    /* transition: all 1.3s ease-out; */
    background: rgba(0, 0, 0, 0.3);

    
}
.section.main-type1 .swiper-slide>.content>a>span{ display: inline-block; position: relative; transition: all 300ms ease-out; will-change: transform; font-weight:400; }
.section.main-type1 .swiper-slide>.content>a>i{position:absolute;top:50%;right:0px;transform:translate(0,-50%);opacity: 0; transition: all 300ms ease-out; will-change: right, opacity; }

.section.main-type1 .swiper-slide>.content>a:hover{background:var(--link-hover-bg-color);color:var(--link-hover-color);}
.section.main-type1 .swiper-slide>.content>a:hover>span{transform: translate3d(-15px, 0, 0); font-weight:700}
.section.main-type1 .swiper-slide>.content>a:hover>i{ opacity: 1; right: var(--size20); }

.section.main-type1 .swiper-slide.swiper-slide-active>.content>div>span{animation: visual_text_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.section.main-type1 .swiper-slide.swiper-slide-active>.content>a{animation: visual_text_motion 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:.2s}

@keyframes visual_text_motion{0%{opacity: 0;transform: translateY(100%);} 100%{opacity: 1;transform: translateY(0);}}

/* .section.main-type1 .swiper-slide.type1>.bg{background-image:url(/image/main/index/section1_1.jpg);}
.section.main-type1 .swiper-slide.type2>.bg{background-image:url(/image/main/index/section1_2.jpg);}
.section.main-type1 .swiper-slide.type3>.bg{background-image:url(/image/main/index/section1_1.jpg);}
.section.main-type1 .swiper-slide.type4>.bg{background-image:url(/image/main/index/section1_2.jpg);} */

/* .section.main-type1 .swiper-slide.type1>.content{color:#fff;}
.section.main-type1 .swiper-slide.type1>.content>a{color:#fff;border-color:#fff;}
.section.main-type1 .swiper-slide.type1>.content>a:hover{background:#fff;color:#333;} */

/* content text 단어에 강조색을 넣고 싶은 경우 아래와 같이.. */
/* .section.main-type1 .swiper-slide.type1>.content>div>span>em{color} */

/* 컨트롤러 박스 */
.section.main-type1 .swiper-controller{display:flex;flex-wrap: wrap;align-content: center;align-items: center;position:relative; z-index:1; bottom:100px; left: var(--size60); transform: translate(0%, 0); /*width:var(--w100-to-94); max-width:400px;*/ height:80px; }


/* 페이징 */
.section.main-type1 .swiper-controller .swiper-pagination { position: relative; display:inline-block; top: 0; left:0; bottom:0;transform: translate(0, -0%); width:70px; text-align:left; color: #fff; font-size:16px; font-weight:700; z-index: 1; }


/* 프로그래스바 */
.section.main-type1 .swiper-progress-bar { position: relative; width: 20%; display: block; z-index: 1; height: 4px; margin: 0 20px 0 10px;}
.section.main-type1 .swiper-progress-bar .slide_progress-bar { position: absolute; height: 4px; background: rgba(255, 255, 255, 0.3); width: auto; clear: both; opacity: 0; left: 0; right: 0; border-radius: 4px; }
.section.main-type1 .swiper-progress-bar .slide_progress-bar:after { position: absolute; top: 0; left: 0; background:var(--color-green2); height: 100%; width: 0; content: ""; transition: 0.1s width linear; border-radius: 4px; }
.section.main-type1 .swiper-progress-bar.active .slide_progress-bar { opacity: 1; }
.section.main-type1 .swiper-progress-bar.animate .slide_progress-bar:after { transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s; }



/* Next, Prev 버튼 */
.section.main-type1 .swiper-button-next, .swiper-button-prev{position:relative;top:0;left:0;right:0;width:30px;height:30px;margin:0;background:#fff;color:#333;border-radius: 50%;transition:0.3s ease;}
.section.main-type1 .swiper-button-next{margin-left:10px;}
.section.main-type1 .swiper-button-next:after, .swiper-button-prev:after{content:''}
.section.main-type1 .swiper-button-next i, .swiper-button-prev i{font-size:14px}
/*.section.main-type1 .swiper-button-next:hover, .swiper-button-prev:hover{transform: scale(1.4); } */
.swiper-button-prev:hover{background:var(--color-green2);transition:0.3s ease;color:#fff;}









/* ad banner */
.section.main-type1 .banner-box.main_section1_banner{display:none}
.section.main-type1 .banner-box{
    position:absolute;z-index:100;
    top:calc(var(--header-height) * 2);
    right:0em;
    width:60%;
    max-width:460px;
    padding:var(--size20);;
    background:#333;
    border-radius: 20px;
    font-size:16px;
    box-shadow: 0px 5px 11px 0px rgba(0, 0, 0,0.1)
}
.section.main-type1 .banner-box a{display:block;margin:0 0 20px 0;  }
.section.main-type1 .banner-box img{width:100%;object-fit: contain;border-radius: 20px;}
.section.main-type1 .banner-box>div{display:flex;justify-content: space-between;padding:8px;}
.section.main-type1 .banner-box label{font-size:var(--fs16); color:#ccc; }
.section.main-type1 .banner-box label{font-size:var(--fs16); color:#ccc; }
.section.main-type1 .banner-box button{border:0;background:none;font-weight:600;color:#000;font-size:var(--fs18); color:#ccc;}
.section.main-type1 .banner-box input[type="checkbox"]{
    accent-color: #333; margin-right: 6px;
}

/* Sectino 2  *************************************************************** */
.section.main-type2{}
.section.main-type2>.wrap{width:100%;background:#fff;padding: var(--size100) 0 0 0;}


@media (max-width: 1600px) {
    .section.main-type1 .swiper-slide>.content{margin-left:var(--size60)}
    .section.main-type1 .swiper-controller{left:var(--size60)}
}

@media (max-width:1320px){
    #content{padding:0}
}

/* 여기서부터 태블릿 */
@media (max-width:1200px)
{
    /* .section.main-type1{height:100vh} */
    .section.main-type1 .swiper-slide{justify-content: flex-start;}
    .section.main-type1 .swiper-slide>.content{
        width:60%;
        margin: calc(var(--header-height)* 2.5) 0 0 0.5em;
        font-size:var(--fs80);
    }

    .section.main-type1 .banner-box{
        width:42%;
        top: calc(var(--header-height)* 1.5);
    }
    /* .section.main-type1 .swiper-controller{bottom:5vh} */
    .section.main-type1{max-height:700px}
}

@media (max-width:1024px)
{


}

@media (max-width:960px)
{
    .section.main-type1 .swiper-slide.youtube>.bg>iframe{
        width: 400%;
        height: 400%;
    }
}

/* 여기서부터 모바일 */
@media (max-width: 768px) 
{
    
    .section.main-type1 .swiper-progress-bar {width: 30%;}
    .section.main-type1 .swiper-slide>.content{width:90%; margin: calc(var(--header-height)* 2) 0 0 1em;}
    .section.main-type1 .banner-box{
        top:calc(var(--header-height) + 1.5em);
        left:50%;
        right:auto;
        transform: translateX(-50%);
        width:calc(100% - 10em);
        max-width:100%;
        padding: var(--size30);
    }
    .section.main-type2{padding-left:1em;padding-right:1em; }
    
    .main-type1 .content>br.pc {display: block; }
    
    .section.main-type1 .swiper-slide>.content {font-size: var(--fs60); line-height: 1.1; }
    
}

@media (max-width: 480px) 
{
    
    .section.main-type1 .banner-box {
        width:calc(100% - 3em);
        padding: var(--size20);
    }
    .section.main-type2 {padding-left:1em; padding-right:1em; }
    
    .section.main-type1 .swiper-slide>.content {margin-left: 0.5em;}
    
    
}