@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Noto+Sans+KR:wght@400;500&family=Poppins:wght@700&display=swap');
/* 
    font-family: 'Montserrat', sans-serif;
    font-family: 'Noto Sans KR', sans-serif;
    font-family: 'Poppins', sans-serif;
 */


/* ==========================================================================
   #FONT
   ========================================================================== */
.po{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.mon{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.mon-sm{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.mon-r{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
.mon-l{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.kor{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}
.kom{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
}
.upp{
    text-transform: uppercase;
}
.cap{
    text-transform: capitalize;
}
.t-shadow{ 
    text-shadow: 2px 0 4px rgba(51,51,51,0.4);
}
/* ==========================================================================
   #root
   ========================================================================== */
.t-point1{ color: #595454; transition: .5s;}
.t-point2{ color: #736966; transition: .5s;}
.t-point3{ color: #bfb0a3; transition: .5s;}
.cf{ color: #fff; transition: .5s;}
.c6{color: #666; transition: .5s;}
.c9{color: #999; transition: .5s;}
.cbc{ color: #bcbcbc;}
.inet{ color: #ea3d3d;}
.bg-01{background-color: #bfb0a3; transition: .5s;}





/* ========== reset ============== */

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    -webkit-text-size-adjust: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: none;} 
address{font-style: normal;}
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, a, select{cursor: pointer; outline: none;} 
input{ outline: none;}

label.away{position: absolute;left: -999em;} 



/* 공통 */
body{ font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 400;  overflow-x: hidden; }
body > section{ width: 100%; height:auto; position: relative; overflow: hidden; }
.wrap1400{ width: 1400px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
a.inner{ display: block; width: 100%; height: auto;}

/*  타이틀 */
.con .tit h3{ font-size: 40px; line-height: 40px;}
.con .tit p.kor{ font-size: 14px; line-height: 14px; letter-spacing: -0.025em; padding-top: 15px;}


/* 스크롤바 */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #bfb0a3; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }


.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both;}


/* width */
.col-1{ width: 100%;}
.col-2{ width: 50%;}
.col-3{ width: 33.33%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}
.col-7{ width: calc(100%/7);}


.img{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;  position: relative; transition: .5s;}


/* pc/mo */
.none-mo{ display: block!important;}
.none-pc{ display: none!important;}


/* btn */
.btn1{ display: inline-block; background-color: #bfb0a3; transition: .5s; }
.btn1:hover{ background-color: #736966;}

.btn2{ display: inline-block; background-color: transparent; border: 1px solid #736966; color: #736966; transition: .5s; }
.btn2 img{ display: inline-block; position: relative; top: -3px; padding-left: 15px;} 
.btn2 img:nth-child(2){ display: none;}
.btn2:hover{  background-color: #736966; color: #fff; }
.btn2:hover img:nth-child(2){ display: inline-block;}
.btn2:hover img:nth-child(1){ display: none;}

.btn3{ display: inline-block; background-color: #736966; border: 1px solid #736966; color: #fff; transition: .5s; }
.btn3 img{ display: inline-block; position: relative; top: -3px; padding-left: 15px;} 
.btn3 img:nth-child(2){ display: none;}
.btn3:hover{  background-color: transparent; color: #736966; }
.btn3:hover img:nth-child(2){ display: inline-block;}
.btn3:hover img:nth-child(1){ display: none;}


.box-shadow{ box-shadow: 1px 0 5px rgba(51,51,51,0.4) ;}

/* swiper */
.swiper-button-next i, .swiper-button-prev i{ font-size: 16px; color: #999; opacity: 1;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-bullet{ width: 8px; height: 8px; background: #fff; opacity: 1; margin: 0 10px!important; transition: .5s; border-radius: 0; }
.swiper-pagination-bullet-active{ position: relative; opacity: 1; background: #fff;}
.swiper-pagination-bullet-active:after{ content: ''; position: absolute;  opacity: 1; width: 16px; height: 16px; left: -4px; top: -4px; border:1px solid #fff; border-radius: 0; box-sizing: border-box; animation-name: dotani;
    animation-duration: .5s;
    animation-iteration-count: unset;
    animation-timing-function: ease ;
    animation-direction: normal;
    transition: .5s;}
@keyframes dotani{
    0%{
        transform: scale(1.4);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}



/* full-swiper */
.full-swiper{ width: 100%; height: 100%;}
.full-swiper .img-wrap{ width: 100%; height: 100%; }


.full-swiper .play{ display: inline-block; position: relative;}
.full-swiper .play a{ position: relative; z-index: 10;}
.full-swiper .play a.full-play{ display: none;}

.full-swiper .play i{ font-size: 12px; color: #fff;}

.full-swiper .control-wrap{ position: absolute; bottom: 80px; width: 100%; text-align: center; height: 20px;}
.full-swiper .control-inner{ position: relative; display: inline-block; width: 100%; text-align: center; }

.full-pag{ display: inline-block; position: relative; text-align: center; bottom: unset; width: auto;}
.full-next,.full-prev{ width: 20px; height: 20px; line-height: 20px; text-align: center;  transition: .3s; border-radius: 50%; top: 3px; position: relative; display: inline-block; padding: 0 30px;}
.full-next i,.full-prev i{ font-size: 20px; color: #fff; transition: .5s;}
.full-next:hover i, .full-prev:hover i{ color: #fff;}
.full-next{ right: unset;}
.full-prev{ left: unset; }



/* =================== 1023px =================== */
@media (max-width: 1023px) {
    body{ font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 400;  color: #555; overflow-x: hidden; position: relative; }
    body > section{ width: 100%; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}

    .t-shadow{ text-shadow: 1px 0 2px rgba(51,51,51,0.4); }
    .box-shadow{ box-shadow: unset ;}

    /* pc/mo */
    .none-mo{ display: none!important;}
    .none-pc{ display: block!important;}


    .wrap1400{ width: 100%; padding: 0 15px; position: relative; margin: 0 auto; box-sizing: border-box; }


    /*  타이틀 */
    .con .tit h3{ font-size: 21px; line-height: 19px;}
    .con .tit p.kor{ font-size: 12px; line-height: 12px; letter-spacing: -0.025em; padding-top: 10px;}



    /* 스크롤바 */
    body::-webkit-scrollbar {display: none; }


    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}




    /* swiper */
    .swiper-button-next, .swiper-button-prev{ top: calc(50% - 30px);}
    .swiper-button-next i, .swiper-button-prev i{ font-size: 30px; }

    .swiper-pagination-bullet{ width: 4px; height: 4px; background: #fff; opacity: 1; margin: 0 5px!important; transition: .5s; border-radius: 0; }
    .swiper-pagination-bullet-active{ position: relative; opacity: 1; background: #fff;}
    .swiper-pagination-bullet-active:after{ content: ''; position: absolute;  opacity: 1; width: 8px; height: 8px; left: -2px; top: -2px; border:1px solid #fff; border-radius: 0; box-sizing: border-box; animation-name: dotani;
        animation-duration: .5s;
        animation-iteration-count: unset;
        animation-timing-function: ease ;
        animation-direction: normal;
        transition: .5s;}


    .full-swiper .img{ padding-top: 56.25%; height: 0; }
    




    /* tit-area */
    #tit-area{ margin-top: 50px; height: 150px; }
    #tit-area h3{ padding-top: 50px; padding-bottom: 15px; font-size: 25px; }
    #tit-area p{ font-size: 13px;}


    
    /* full-swiper */
    .full-swiper{ padding-bottom: 20px; margin-bottom: 0;}

    .full-swiper .control-inner{ position: relative; display: inline-block; width: 100%; text-align: center; }

    .full-swiper .swiper-pagination-bullet{ background: #666;}
    .full-swiper .swiper-pagination-bullet-active{ background: #666;}
    .full-swiper .swiper-pagination-bullet-active:after{border:1px solid #666; }

    .full-swiper .control-wrap{ position: relative; bottom: 0; width: 100%; text-align: center; height: 20px;}
    .full-swiper .play{ display: inline-block; position: absolute; right: 15px; top: 1px;}
    .full-swiper .play a{ position: relative; z-index: 10; padding-right: 0;}
    .full-swiper .play i{ font-size: 10px; color: #999999;}

    .full-swiper .control-wrap .full-next, .full-swiper .control-wrap .full-prev{ display: none;}

    .full-pag{ display: inline-block; text-align: center; bottom: 0; width: 100%;}
    .full-next,.full-prev{ width: 10px; height: 25px; line-height: 25px; top: 50%; padding: 0;}
    .full-next i,.full-prev i{ font-size: 15px; }

    .full-next{ position: absolute; top: 50%; right: 10px;}
    .full-prev{ position: absolute; top: 50%; left: 10px; }
}