html{scroll-behavior: smooth;}
*{
    font-family: agchoijeongho-screen, sans-serif;
    font-weight: 400; font-style: normal;
    word-break: keep-all; line-height: 2;
}
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 
#intro .engIntro{
    font-family: 'EB Garamond', serif; font-weight: 500;
}
#intro .chnIntro{
    font-family: 'Noto Serif SC', serif;
}

a{color: black; text-decoration: none;}

body{
    margin: 0; cursor: default;
}
.title_text_img, #skipButton, .logo, .cl{
    cursor: pointer;
}
#intro, #article{
    cursor: text;
}


#sampleOutput{
    position: fixed; z-index: 1000;
    width: 99.5%; border: 1px solid red;
    opacity: .4; display: none;
}

#page1{
    display: non/e;
    opacity: 1;
}
#page2{
    display: non/e;
    opacity: 0;
}
#pageM{
    display: none;
}

@media (max-width: 1199px) {
    #page1, #page2{display: none;}
    #pageM{ display: block;}
    
    #screenIcon{width: 11rem; margin-bottom: 2rem;}
    #textM1{font-size: 1.6rem;}
    #textM2{font-size: 1.4rem;}

    #hangulggolLogo{
        bottom: 6%;
        width: 8rem; margin-left: -4rem;
    }
}
@media (max-width: 767px) {
    #page1, #page2{display: none;}
    #pageM{display: block;}
    
    #screenIcon{width: 6.3rem; margin-bottom: .3rem;}
    #textM1{font-size: .8rem;}
    #textM2{font-size: .7rem;}

    #hangulggolLogo{
        bottom: 8%;
        width: 4rem; margin-left: -2rem;
    }
}

#pageM *{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
}
#topAreaM{
    position: fixed; width: 100%; height: 25%;
    background: #19269C;
}
#textM{
    position: fixed; top: 48%; left: 50%;
    width: 1000px; margin-left: -500px;
    text-align: center;
}
#textM2{opacity: .7;}
#hangulggolLogo{position: fixed; left: 50%;}

/* CODE BEGINS */

/* 1ST PAGE */

#topArea{
    position: fixed; top: 0%;
    width: 100%; height: 19%;
    background: #19269C;
}

#bottomArea{
    position: fixed; height: 75%;
    top: 26%;
    /* top: 20%; */
    padding-top: 3rem;
    background: rgb(255, 255, 255);
}

#title{
    position: relative;
    left: 29.5rem;
    /* left: 9rem; */
    width: 20rem; float: left;
    background: #ffffff;
    transform: scale(1);
    transform-origin: 74% 47.5%;

    z-index: 100;
}
#title_bg{
    display: non/e;
}
#title_bg_solid{
    position: absolute; left: -40rem;
    width: 60rem; height: 100vh;
    background: rgb(255, 255, 255);

    /* border: 1px solid black; */
}
#title_bg_grad{
    position: absolute; left: 19.5rem;
    width: 19rem; height: 100vh;
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
    
    /* border: 1px solid black; */
}

#title_text
#title_text{
    z-index: 110;
}
#title_text .title_text_img{
    height: 7.7rem;
    margin-bottom: 0.1rem;
    /* height: 3.2rem; */
    /* margin-bottom: -.8rem; */
    position: relative;
    border-bottom: .3rem solid;
    border-color: white;
}
.overText{
    opacity: 1;
}
#title_text .title_indicator{
    height: 2.2rem;
    position: relative;
    top: .2rem; left: .5rem;
    display: none;
}
#title_text_space{
    height: 4rem;
}
#title_text_lower{
    position: relative; top: -11.5rem; left: 39rem;
}
#title_text_lower .title_text_img{
    height: 2rem; margin-bottom: 1rem;
}

#title #skipButton{
    position: relative; top: 7rem; left: .5rem;
    width: 10rem; height: 3rem;
    text-align: center;
    font-size: 1.4rem; color: #19269C;
    border: 1px solid #19269C;

    display: none;
}

#intro{
    position: relative; left: 25rem;
    width: 4600rem; opacity: 0;
}
#intro *{
    font-size: .88rem; line-height: 1.6;
}
#intro > *{
    float: left; margin-right: 16.5rem;
}
#intro p{
    width: 26rem; height: 35rem;
    /* border: 1px solid rgba(0, 0, 0, 0.329); */
}
#intro .multiIntro{
    float: left; margin-right: 3rem;
}

#intro #bookList{
    position: relative; left: -3.9rem;
}
#intro #bookList span{
    position: relative; left: 1.4rem;
}
#intro #bookList .multiIndex{
    float: left; margin-right: 1.6rem;
}
#intro #bookList .multiIntro{
    margin: 0 2.7 rem;
}
#intro #aboutTranslator{
    position: relative; left: -7rem;
}


/* #page1_scroll{width: 10rem; height: 1000%;
    background-color: red; z-index: 10000;
    display: none;
} */

/* 2ND PAGE */

.pageNum{font-family: cormorant-garamond, serif;
    font-weight: 400; font-size: 1.5rem;
    font-style: normal;}

#article{
    position: relative;
    background: #ffffff;
    width: 0rem; height: 1000rem;
    /* width: 78rem; */
    margin: 11000px auto 0;
    padding: 250rem 0 0;
    opacity: 1;
}
#article > div{
    width: 34.4rem;
    margin: 0 auto; position: relative;
}
#article .pageLine{border-left: solid 1px #19269C;
    width: 0; height: 7rem;
    margin-top: 22rem; margin-bottom: 1.5rem;}
#article .pageNum{color: #19269C;
    margin-bottom: 7rem; text-align: center;}

#article .leftArticle{left: -18rem;}
#article .rightArticle{right: -18rem;}

#betweenSpace{height: 200rem;}

#credit{position: relative; left: -14rem;}
#credit .logo{width: 10rem;}
#credit #hgg_logo{width: 13rem;}
#credit #gndr_logo{width: 20rem;}
#credit a{
    text-decoration: underline;
    position: relative;
}

#credit div{
    height: 30rem; column-count: 2;
    margin-top: 5rem;
}
#credit > p{
    height: 15rem;
}


#credit #finalPart1{
    position: relative; top: -6rem;
}
#credit #finalPart2{
    position: relative; top: 12rem;
}
#credit #finalPart3{
    position: relative; top: 22rem;
    margin-bottom: 20rem;
}


.footnote{
    color: #19269C; position: relative;
}
.footnote .footnoteBox{
    position: absolute;
    display: none;
    border-top: 1px solid #19269C;
}
.footnote .footnoteContent{
    position: relative;  background-color: white;
    padding: .75rem 1rem; font-size: .7rem;
}
#fn1 .footnoteBox{
    width: 52rem; left: 0rem;}
#fn1 .footnoteContent{
    width: 20.5rem; left: 29.5rem;;
}
#fn2 .footnoteBox{
    width: 34.5rem; right: 0rem;}
#fn2 .footnoteContent{
    width: 13rem; right: 0rem;
}


#side{
    opacity: 0;
}

nav .logo{position: fixed; width: 10rem;
    top: 2rem; left: 3rem;}
nav > #nav{position: fixed; width: 7rem;
    bottom: 26rem; left: 2.5rem; display: none;}
nav > #chapterList{
    position: fixed; bottom: 30rem; left: 1rem;
}
nav > #chapterList li{list-style-type: none;
    height: 2rem;
}
nav > #chapterList .cl{float: left;}
nav > #chapterList .invertChapter .cl{
    transform: scaleX(-1);
    transform: rotateX(180deg);
}
nav > #chapterList .clImage{width: .7rem;
    position: relative; top: .15rem; left: 1rem;
    display: none;
}


#highlightButton{
    position: fixed; width: 2.5rem;
    right: 8rem; top: 5%;
}
.dragText{
    background-color: red;
}

#progressBar_full{
    position: fixed; top: 5%; right: 5rem;
    height: 90%;
    border: 2px solid #969696;
}
#progressBar_now{
    position: fixed; top: 5%; right: 5rem;
    height: 0%;
    border: 2px solid #19269C;
}

.progressPoint{
    position: relative; bottom: .5rem; left: -2px;
    width: 1rem; height: 1rem; border-radius: 1rem;
}
#progressPoint_now_outer{
    position: fixed; top: 5%; right: 4.5rem;}
#progressPoint_now{
    background-color: #19269C;
}

#chapterNum{
    font-size: 3rem; margin-left: 2.8rem;
    color: #19269C;
}

#bg{
    position: fixed; bottom: -0.1%; left: 50%;
    margin-left: -50%;

    width: 101%;
}
#scrollDownImg{
    position: fixed; top: 30%; left: 50%;
    width: 2rem; margin-left: -1rem;
    z-index: 10;
}
    
::-webkit-scrollbar{
    display: none;
}

#dataNum{
    position: fixed; right: 9rem; top: 9rem;
    background-color: #fff; border: 1px solid black;
    padding: 1rem; display: none;
}