@charset "utf-8";

/* notesans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet');

/* 구글폰트(서브) */
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;600;700;900&display=swap');

/* 폰트어썸 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
/* 구글아이콘 */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100,0,0');


#container {  margin-top: 70px; width: 100%; } 
#box0 {
    position: relative;
    width: 100%; height: 400px;
    background: url(../images/subbg3.jpg) no-repeat center;
    background-size: cover;
}
/* 컨테이너 이미지 하단 효과 */
.custom-shape-divider-bottom-1703743338 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}
.custom-shape-divider-bottom-1703743338 svg {
    position: relative;
    display: block;
    width: calc(200% + 1.3px);
    height: 100px;
    transform: rotateY(180deg);
}
.custom-shape-divider-bottom-1703743338 .shape-fill {
    fill: #ffffff6c;
}


section { width: 100%; max-width: 1400px; margin: auto; }

#sec1 { padding: 0 1rem; }
#pageroot { display: flex; justify-content: end; align-items: center; color: #fff; padding-top: 20px;  }
.icon1 { padding: 0; scale: 1.2; color: #fff; transform: translateY(1px);}
#pageroot p { font-size: 0.9rem; }
#pageroot strong { font-size: 0.9rem; }

.title1 { 
    font-family: 'NanumSquareBold';
    letter-spacing: 0.1em;
    font-size: 60px;
    -webkit-text-stroke: 1px #fff; opacity: 0.6;
    color: transparent;
    writing-mode:unset;
    animation: tracking-in-contract 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate both;
}
.title2 { font-size: 50px; color: #fff; }
#titlebox > hr { margin: 1rem 0; width: 95%; }
.titlecaption { color: #fff; font-size: 20px;  }
.titlecaption > br { display: none; }

@keyframes tracking-in-contract {
    0% { letter-spacing: 0.6em; opacity: 0; }
    40% { opacity: 0.6; }
    100% { letter-spacing: normal; opacity: 1; }
}


#prdlinkbox {
    width: 100%; max-width: 310px;
    margin: auto; margin-top: 20px;
    display: flex; justify-content: space-between;
}
.prdlinklist { width: 150px; border-bottom: 1px solid #eaeaea; }
.prdlink {
    width: 150px; height: 60px; padding: 0.5rem 0;
    /* margin-bottom: 1rem; */
    transition: 0.3s; display: block;
    text-align: center; color: #333;
}
.prdlink:hover {
    border-bottom: none; background: #3D79D2;
    color: #fff;
    opacity: 0.9;
}


#sec2 { width: 100%; max-width: 1200px; margin: 20px auto; }
#box2 {
    margin: 1rem; 
    border-radius: 10px; border: 2px solid rgba(196, 196, 196, 0.4);
    box-shadow: 4px 4px 8px rgba(0,0,0,.2); 
}
#box2-2 {
    width:80%; max-width: 1200px; margin:50px auto; 
    padding:30px 0;     /*줌인 내용을 고려한 세로 폭 확장*/
    position:relative; overflow:hidden; 
}
#prdslidebox {
    width:200%;   /*화면 폭을 채우는 6장 이미지의 비율(3장 2세트)*/
    display:flex; 
}
.prdslide {
    width:calc(100% / 6); padding:0 5px; 
    transform:scale(.8);     /*좌우 슬라이드 10% 축소*/
    transition:.6s 
}
.prdslide:nth-child(2) { transform:scale(1.2) }      /*중앙 슬라이드 10% 확대*/
.prdslideimg { width: 100%; display: block; border-radius:10px 10px 0 0 }
.prdbutton {
    position:absolute; 
    top:50%; transform:translateY(-50%); /*세로 중앙 배치*/
    border:none;  padding:15px;
    background:transparent; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.5);
    font-size:3vw;	opacity:.5; transition:.3s; cursor:pointer
}
.prdleft { left:0%; }
.prdright { right:0%; }
.prdbutton:hover { color:#3D79D2; opacity:1 }


.prdtitle { text-align: center; margin-bottom: 1rem; }
.prdtext { 
    text-align: center; line-height: 1.8rem; margin-bottom: 1rem;
}


#vsec {
    width: 100%; max-width: 100%;
    background: #FBF8F2;
}
#vbox {
    width: 100%; max-width: 1000px; margin: auto;
    padding: 50px 1rem;
}
#vtitle { text-align: center; margin-bottom: 1rem; color: #555; }
#videobox {
    width: 100%; height: 0;
    padding-bottom: 56.25%;
    position: relative;
    z-index: 8;
}
#video {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 100%;
}



#sec3 { 
    width: 100%; max-width: 100%; height: 450px;
    position: relative;
}
#listbox3 { 
    width: 95%; margin: auto;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.list3 { margin-bottom: 1rem; line-height: 1.8rem; }
.prdtext2 > br { display: none; }



#sec4 {
    width: 100%; max-width: 1200px; margin: 70px auto;
    background: #fff;
}
#cera1 { width: 100%; max-width: 1200px; margin: 5rem auto; }

.downloadbox { 
    width: 90%; margin: auto;
    display: flex; align-items: center; 
}
.title4 {  font-size: 20px; margin-right: 2rem; }
.title4 > span {  font-family: "Noto Serif KR", serif; }

.dlbutton { 
    width: 160px; height: 40px; line-height: 40px;
    text-align: center; transition: 0.3s;
    border-radius: 5px; font-weight: bold;
    background: #9f9f9f; color: #fff;
    font-size: 14px; margin-right: 1rem;
}
.dlbutton:last-child { margin-right: 0; }
.dlbutton:hover {
    background: #3D79D2;
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 4px rgba(0,0,0,.4);
}
.dlimgbox, .dlimgbox2 { padding: 1rem; }
.dlimgbox2 { display: none; }
.cataimg { width: 95%; display: block; margin: auto; }
.cataimg2 { width: 90%; display: block; margin: auto; }

#dlimgbox {
    width: 100%; padding: 1rem; justify-content: center;
    display: flex; flex-wrap: wrap;
}
.dlbox { width: 50%; }
.dlbox > img { width: 100%; display: block; }



#sec5 { width: 100%; max-width: 100%; background: #FBF8F2; display: none; }
#box5 { 
    width: 100%; max-width: 1200px; margin: auto;
    padding: 1rem;
}
#manualbox {
    margin: 2rem 0;
    display: flex; flex-wrap: wrap; justify-content: center;
}
.manubt { 
    display: block; line-height: 40px; 
    padding: 0 1rem; margin-right: 1rem;
    background: #8b8b8b; color: #fff; 
    border-radius: 3px; text-shadow:1px 1px 2px rgba(0,0,0,.5);
    transition: 0.3s;
}
.manubt > span {  font-family: "Noto Serif KR", serif; }
.manubt:hover { background: #3D79D2; }




@media screen and (max-width:800px) {
    #prdslidebox { width: 300%; }

    .dlbox { width: 90%; }
    .dlbox:first-child { display: none; }
    .dlimgbox { display: none; }
    .dlimgbox2 { display: block; }
}
@media screen and (max-width:630px) {
    .title1 { font-size: 50px; }
    .title2 { font-size: 45px; }
    .titlecaption { font-size: 16px; line-height: 1.5rem; }
}
@media screen and (max-width:566px) {
    .prdtext2 { font-size: 14px; }

    .downloadbox { flex-wrap: wrap; justify-content: center; }
    .title4 { width: 100%; margin-bottom: 1rem; text-align: center; }
    .dlbutton { 
        width: 150px; height: 25px; line-height: 25px;
        font-size: 12px;
     }
}
@media screen and (max-width:515px) {
    #sec1 { padding: 0 0.5rem;}
    .titlecaption { font-size: 15px; }
}

@media screen and (max-width:500px) {
    #prdslidebox { width: 600%; }
    .list3 { margin-bottom: 1rem; line-height: 1.6rem; }
    .list3:last-child {margin-bottom: 0; }
    .prdtext2 > br { display: block; }
}
@media screen and (max-width:475px) {
    .text1 { font-size: 0.85rem; padding: 0; }
}