@charset "utf-8";

/* layout style
 * @latest 2020.02.20 ssj
*/


/* index */
.contents {width:100%; /* max-width:1920px; */ margin:0 auto; overflow:hidden; position:relative;}
.contents > .inner {width:100%; max-width:1920px; padding:0; margin:0 auto; overflow:hidden; box-sizing:border-box; /*float:left;*/}

#template00 {width:100%; float:left; box-sizing:border-box;}
.layout_wrap {width:100%; float:left; position:relative; box-sizing:border-box;}
/*.layout_wrap {content:""; clear:both; display:block;}*/
.div_wrap  {width:100%; max-width:1300px; padding:0; box-sizing:border-box; margin:0 auto; position:relative; clear:both;}
.div_wrap2 {width:100%; max-width:none; padding:0; box-sizing:border-box; margin:0 auto; position:relative; clear:both;}

/* layout */
.div_wrap > div {float:left; position:relative; overflow:hidden; box-sizing:border-box;}
.div_wrap > div:after {content:""; clear:both; display:block;}

	.layout_height_H2 {height:400px;}
    .layout_height_H {height:350px;}
    .layout_height_M {height:250px;}
    .layout_height_L {height:150px;}
    
    .layout_height_A {height:auto; min-height:250px;}
    

    
/*copy align*/
.copy.copy_position_lh {top:10%; text-align:left;}
.copy.copy_position_lm {top:30%; text-align:left;}
.copy.copy_position_ll {bottom:10%; text-align:left;}
.copy.copy_position_ch {top:10%; text-align:center;}
.copy.copy_position_cm {top:30%; text-align:center;}
.copy.copy_position_cl {bottom:10%; text-align:center;}
.copy.copy_position_rh {top:10%; text-align:right;}
.copy.copy_position_rm {top:30%; text-align:right;}
.copy.copy_position_rl {bottom:10%; text-align:right;}



/* add tip */
.add_div {width:100%; float:left; height:100%; min-height:50px; text-align:center; cursor:pointer; background:#fff; -webkit-transition:background 1s; transition:background 1s;}
.add_div > h3 {width:100%; height:auto; display:inline-block; line-height:normal; font-size:15px;}
.add_div > h3 > img {vertical-align:middle; padding-left:5px; padding-bottom:7px; width:35px;}
.add_div:hover {background:#f5f5f5;}
.add_div > h3 + h5 {position:absolute; top:20px; width:100%;}

.layout_01 .add_div {height:50px; line-height:50px;}
.layout_height_H2 .add_div {height:400px; line-height:400px;}
.layout_height_H .add_div {height:350px; line-height:320px;}
.layout_height_M .add_div {height:250px; line-height:240px;}
.layout_height_L .add_div {height:150px; line-height:140px;}

.layout_height_A .add_div {height:250px; line-height:240px;}


    .layout_01 {width:100%; height:auto !important; min-height:50px;}



/* left template */
.wrap_left_template {max-width:1520px; margin:0 auto;}
.wrap_left_template .head-group {z-index:0;}
.wrap_left_template .contents,
.wrap_left_template #top ~ .inner {float:left; width:100%;}


/* left template -wide ver. 20190618 
  : wrap_left_template 뒤에 붙여서 사용 */
.wrap_left_template_wide {width:100%; max-width:100%;}
.wrap_left_template_wide .content .contents, 
.wrap_left_template_wide #top ~ .inner {width:100% !important;}
.wrap_left_template_wide .sub_div_wrap {max-width:100%;}
.wrap_left_template_wide .subCon > div {max-width:1300px; margin:0 auto;}


    @media (min-width:1920px){
        .mainVisual .swiper-slide img {max-height:none !important;}
    }
    @media (min-width:1541px){
        .wrap_left_template #top {width:220px; float:left; min-height:100vh;}
        .wrap_left_template .contents, 
        .wrap_left_template #top ~ .inner {width:1300px;}

        .wrap_left_template_wide .content {width:calc(100% - 220px); float:left;}
        .wrap_left_template_wide #top ~ .contents {width:calc(100% - 220px); float:left;}
    }
    @media (min-width:991px) and (max-width:1540px){
        .wrap_left_template #top {width:18%; float:left; min-height:100vh;}
        .wrap_left_template .contents, 
        .wrap_left_template #top ~ .inner {width:82%; float:left;}

        .wrap_left_template_wide .content {width:calc(100% - 18%); float:left;}
    }


    @media (min-width:800px){
        .layout_02 {width:50%;}
        .layout_02_3 {width:30%;}
        .layout_02_7 {width:70%;}
        .layout_03 {width:33.333%;}
        .layout_04 {width:25%;}
        .layout_06 {width:66.666%;}

        .layout_padding > .layout_02 {width:49.5%;}
        .layout_padding > .layout_02_3 {width:29.7%;}
        .layout_padding > .layout_02_7 {width:69.3%;}
        .layout_padding > .layout_03 {width:32.6666%;}
        .layout_padding > .layout_04 {width:24.25%;}
        .layout_padding > .layout_06 {width:66.3333%;}

        .layout_padding > .layout_02:first-child {margin-right:1%;}
        .layout_padding > .layout_02_36:first-child {margin-right:1%;}
        .layout_padding > .layout_03:nth-child(2) {margin:0 1%;}
        .layout_block3 > .layout_02:first-child {margin-right:0;}
        .layout_block3.layout_padding > div:nth-child(2) {margin:0 1%;}
        .layout_block4.layout_padding > .layout_04 {margin-right:1%;}
        .layout_padding > .layout_04:last-child {margin-right:0;}
        .layout_block2 > .layout_03:nth-child(2) {margin:0;}

    }

    @media (max-width:1049px){
        /* wide tamplate empty space delete. */
        .inner_layer {position:relative;}
        .inner_layer .add_div {/*display:none;*/}
        .inner_layer .layout_height_H2 {min-height:0; /*height:auto;*//*max-height:400px;*/}
        .inner_layer .layout_height_H {min-height:0; /*height:auto;*//*max-height:350px;*/}
        .inner_layer .layout_height_M {min-height:0; /*height:auto;*//*max-height:250px;*/}
        .inner_layer .layout_height_L {min-height:0; /*height:auto;*//*max-height:150px;*/}
    }

    @media (max-width:990px){
        .layout_block4 .layout_04 {width:50%;}
        .layout_block4.layout_padding > .layout_04 {width:49.5%;}
        .layout_block4.layout_padding > .layout_04 {margin-right:0;}
        .layout_block4.layout_padding > .layout_04:nth-child(2n+1) {margin-right:1%; margin-bottom:6px;}

        .wrap_left_template #template00 .div_wrap {padding:0;}
        .wrap_left_template #templateFix .div_wrap {padding:0;}
    }

    @media (min-width:991px) and (max-width:1049px){
        .wrap_left_template .layout_block3_2 > .layout_04ml {padding-left:0px;}
        .wrap_left_template .layout_block3_2 > .layout_04mr {padding-right:0px;}
    }
    @media (min-width:800px) and (max-width:1049px){
    	.layout_block3 .layout_height_H2 {height:400px;}
        .layout_block3 .layout_height_H {height:350px;}
        .layout_block3 .layout_height_M {height:250px;}
        .layout_block3 .layout_height_L {height:150px;}

        .layout_block3 > .layout_02 {width:100%;}
        .layout_block3 > .layout_04 {width:50%;}
        .layout_block3.layout_padding > .layout_04 {width:49.5%;}

        .layout_block3_2 > .layout_04 {margin:0 !important;}
        .layout_block3_2 > .layout_04ml {left:0; /*padding-left:45px;*/}
        .layout_block3_2 > .layout_04mr {right:0; /*padding-right:45px;*/}
        .layout_block3_2.layout_padding > div:nth-child(2) {margin:0;}

			.layout_block3_2 > .layout_02.layout_height_H2 {margin-bottom:400px !important;}
            .layout_block3_2 > .layout_02.layout_height_H {margin-bottom:350px !important;}
            .layout_block3_2 > .layout_02.layout_height_M {margin-bottom:250px !important;}
            .layout_block3_2 > .layout_02.layout_height_L {margin-bottom:150px !important;}
            .layout_block3_2.layout_padding > .layout_02.layout_height_H2 {margin-bottom:457px !important;}
            .layout_block3_2.layout_padding > .layout_02.layout_height_H {margin-bottom:357px !important;}
            .layout_block3_2.layout_padding > .layout_02.layout_height_M {margin-bottom:257px !important;}
            .layout_block3_2.layout_padding > .layout_02.layout_height_L {margin-bottom:157px !important;}
            .layout_block3_2 > .layout_04.layout_height_H2 {position:absolute; top:400px;}
            .layout_block3_2 > .layout_04.layout_height_H {position:absolute; top:350px;}
            .layout_block3_2 > .layout_04.layout_height_M {position:absolute; top:250px;}
            .layout_block3_2 > .layout_04.layout_height_L {position:absolute; top:150px;}
            .layout_block3_2.layout_padding > .layout_04.layout_height_H2 {position:absolute; top:457px;}
            .layout_block3_2.layout_padding > .layout_04.layout_height_H {position:absolute; top:357px;}
            .layout_block3_2.layout_padding > .layout_04.layout_height_M {position:absolute; top:257px;}
            .layout_block3_2.layout_padding > .layout_04.layout_height_L {position:absolute; top:157px;}


        /* popup prev */
        .layer_preview .layout_block3_2 > .layout_02.layout_height_M {margin-bottom:0 !important;}
        .layer_preview .layout_block3_2 > .layout_04.layout_height_M {position:relative; top:0;}

    }
    @media (min-width:800px) and (max-width:990px){
        .wrap_left_template .layout_block3_2 > .layout_04ml {padding-left:0;}
        .wrap_left_template .layout_block3_2 > .layout_04mr {padding-right:0;}
    }
    @media (max-width:799px){
    	.layout_height_H2,
        .layout_height_H,
        .layout_height_M,
        .layout_height_L {height:auto; /*min-height:50px;*/}

        .layout_02 {width:100% !important; margin:0;}
        .layout_03 {width:100% !important; margin:0 !important;}
        .layout_06 {width:100% !important;}
        .layout_block2 .layout_02_36:first-child {margin-bottom:10px !important;}
        .layout_padding > .layout_02:first-child {margin-bottom:10px;}
        .layout_block3.layout_padding > .layout_02:first-child {margin-bottom:0 !important;}
        .layout_block3.layout_padding > div:first-child {margin-bottom:0 !important;}
        .layout_block3.layout_padding > div:nth-child(2) {margin:10px 0 !important;}

        .layout_01 {width:100%; margin:0 !important; min-height:0;}
    }

    @media (min-width:600px) and (max-width:799px){
        .div_wrap {padding:0px;}

		.layout_block4 > .layout_height_H2 {height:400px;}
        .layout_block4 > .layout_height_H {height:350px;}
        .layout_block4 > .layout_height_M {height:250px;}
        .layout_block4 > .layout_height_L {height:150px;}

        .layout_block2 > .layout_02,
        .layout_block3 > .layout_02,
        .layout_block2 > .layout_03,
        .layout_block3 > .layout_03,
        .layout_block3 > .layout_04 {width:100%; margin:0 !important; min-height:0;}
        /*.layout_block2 > .layout_height_H .add_div,
        .layout_block2 > .layout_height_M .add_div,
        .layout_block2 > .layout_height_L .add_div,
        .layout_block3 > .layout_02.layout_height_H .add_div,
        .layout_block3 > .layout_02.layout_height_M .add_div,
        .layout_block3 > .layout_02.layout_height_L .add_div,
        .layout_block3 > .layout_03.layout_height_H .add_div,
        .layout_block3 > .layout_03.layout_height_M .add_div,
        .layout_block3 > .layout_03.layout_height_L .add_div,
        .layout_block3 > .layout_04.layout_height_H .add_div,
        .layout_block3 > .layout_04.layout_height_M .add_div,
        .layout_block3 > .layout_04.layout_height_L .add_div {height:0; line-height:0; display:none;}*/
    }
    @media (max-width:599px){
        .div_wrap {padding:0px;}
        .div_wrap > div {width:100% !important; margin:0 !important;}
        .div_wrap > div:last-child {margin-bottom:0 !important;}
        .layout_padding > div {margin-bottom:10px !important;}


        /* wide tamplate empty space delete. */
        .add_div {/*display:none;*/ height:50px !important; line-height:50px !important;}
        .layout_height_H2, .layout_height_H, .layout_height_M, .layout_height_L {min-height:0;}
        .inner_layer .layout_height_H2 {min-height:0; height:auto; max-height:none;}
        .inner_layer .layout_height_H {min-height:0; height:auto; max-height:none;}
        .inner_layer .layout_height_M {min-height:0; height:auto; max-height:none;}
        .inner_layer .layout_height_L {min-height:0; height:auto; max-height:none;}         
    }




/* animation fx */
.swiper-slide .copy,
.swiper-slide .bTextAlign, .swiper-slide .bContentAlign {opacity:0;
                                                        -webkit-transition: all 1s ease;
                                                                transition: all 1s ease;}
.swiper-slide.swiper-slide-active .copy{opacity:1; 
                                         -webkit-transition-delay: 0.3s;
                                                 transition-delay: 0.3s;}
.swiper-slide.swiper-slide-active .bTextAlign,
.swiper-slide.swiper-slide-active .bContentAlign  {opacity:1;}

    /* bottom -> top */
    .swiper-slide .copy.totop {-webkit-transform: translateY(50px); transform: translateY(50px);}
    .swiper-slide.swiper-slide-active .copy.totop {-webkit-transform: translateY(0px); transform: translateY(0px);}
    /* scale */
    .swiper-slide .copy.scalefx {-webkit-transform: scale(1.05); transform: scale(1.05); transform-origin:center;}
    .swiper-slide.swiper-slide-active .copy.scalefx {-webkit-transform: scale(1); transform: scale(1);}
    /* left -> right */
    .swiper-slide .copy.toright {-webkit-transform: translateX(-50px); transform: translateX(-50px);}
    .swiper-slide.swiper-slide-active .copy.toright {-webkit-transform: translateX(0px); transform: translateX(0px);}
    /* right -> left */
    .swiper-slide .copy.toleft {-webkit-transform: translateX(50px); transform: translateX(50px);}
    .swiper-slide.swiper-slide-active .copy.toleft {-webkit-transform: translateX(0px); transform: translateX(0px);}




.mainVisual .swiper-slide-active img {-webkit-animation: scalefx 3s 1 ease;
                                    -o-animation: scalefx 3s 1 ease;
                                    animation: scalefx 3s 1 ease;
                                    -webkit-transform: scale(1);
                                    -o-transform: scale(1); transform:scale(1);}

@keyframes scalefx {
    0% {-webkit-transform:scale(1.05); -o-transform:scale(1.05); transform:scale(1.05);}
    100% {-webkit-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
}

@keyframes opacityfx {
    0% {opacity:0.2;}
    100% {opacity:1;}
}
@keyframes totopfx {
    0% {transform:translateY(50px);}
    100% {transform:translateY(0px);}
}





/* option - cardview */
    .div_wrap.cardview > div {box-shadow:0px 1px 3px 1px rgba(0,0,0,0.1);}
    @media (max-width:599px){
        .div_wrap.cardview {padding:0 15px;}
        .div_wrap.cardview > div {border-radius:5px;}
    }

/* option - layout border */
/* 레이아웃전체를 감싸는 선추가. */
    .div_wrap.borderbox > div {border:1px solid rgba(0,0,0,0.1);}
    .div_wrap.borderbox:not(.layout_padding) > div {border-left:none;}
    .div_wrap.borderbox:not(.layout_padding) > div:first-child {border-left:1px solid rgba(0,0,0,0.1);}
    @media (max-width:599px){
        .div_wrap.borderbox > div {border-width:1px 0;}
        .div_wrap.borderbox:not(.layout_padding) > div {border-bottom:none;}
        .div_wrap.borderbox:not(.layout_padding) > div:last-child {border-bottom:1px solid rgba(0,0,0,0.1);}
    }

/* option - layout between border */
/* 레이아웃 사이사이에 선 추가 (레이아웃 사이 간격 없을때는 이용 가능.) */
    @media (min-width:800px){
        .div_wrap.between_border:not(.layout_padding) > div:not(:last-child) {border-right:1px solid rgba(0,0,0,0.1);}
    }
    @media (max-width:799px){
        .div_wrap.between_border:not(.layout_padding) > div:not(:last-child) {border-bottom:1px solid rgba(0,0,0,0.1);}
    }
    @media (min-width:600px) and (max-width:799px){
        .div_wrap.between_border:not(.layout_padding) > div.layout_04:nth-child(2n+1)  {border-right:1px solid rgba(0,0,0,0.1);}
    }
    
/* option - layout border-radius */
.div_wrap.border-radius > div {border-radius:8px; overflow:hidden;}


    
/* web accessibility : 본문바로가기 링크 */
#skipnavi {float:left; position:relative; width:100%; height:0px; font-size:0px; line-height:0px; z-index:99999999;}
#skipnavi ul {width:100%; max-width:1300px; position:relative; margin:0 auto;}
#skipnavi ul li {float:left; position:absolute; top:0px; left:0px; background:#fff;}
#skipnavi ul li a {float:left; position:absolute; display:block; top:0px; left:-2000px; width:180px; height:auto; 
                  font-weight:600; text-align:center; font-size:14px; color:#0c3a1f; line-height:25px; box-sizing:border-box;}
#skipnavi ul li a:focus,
#skipnavi ul li a:hover,
#skipnavi ul li a:active {left:0px; background:#fff; border:2px solid #383838; z-index:10;}