@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
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%;vertical-align:baseline;}
body{font-family: 'Noto Sans KR', sans-serif; font-family: 'NanumSquare', sans-serif;font-size:16px;color:#333;font-weight: 400;}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0;}
ul,ol,li{list-style:none}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
fieldset,img{border:0}
hr{height:0;}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
address,caption,em,var{font-style:normal;font-weight:normal}
a{text-decoration:none;cursor:pointer;color:#333;}
a[href^="tel"]{font-style:normal}
a:hover,a:active,a:focus{text-decoration:none;}
b,strong{font-weight:bold}
dfn{font-style:italic}
img{border:0;vertical-align:top}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0;}
legend, caption{overflow:hidden;text-indent:-9999999px; height:0 !important; width:0 !important;line-height:0 !important;margin:0;padding:0;}
input{vertical-align:middle;margin:0;padding:0;}
input[type="text"],input[type="password"],input[type="email"]{-webkit-appearance:none;border-radius:0;}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{border-radius:0;-webkit-appearance:button;font-family:'Dotum';}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
button{overflow:visible;border:none;cursor:pointer;margin:0;padding:0;}
button,select{text-transform:none}
optgroup{font-weight:bold}
textarea{border:1px solid #bcbcbc;overflow:auto;-webkit-appearance:none}
input::-ms-clear{display:none;}
.fl_l {float:left !important;}
.fl_r {float:right !important;}
.cl_b{clear:both !important;} 
.fl_txt {text-align:left !important;}
.disN{display:none;}
.disN2{display:none !important;}
.disB{display:block;}
.disB2{display:block !important;}
.txC{text-align:center;}
.W_Auto{width:auto;}
.rel{position:relative;}
.pointer{cursor: pointer;}
*{outline: none;box-sizing:border-box;letter-spacing:-1px;line-height: 100%;}
.visiH{visibility:hidden;}
.cursor{
    cursor: pointer;
}

:root{
    --gradient: linear-gradient(0deg, #ff7916 0%, #ff4359 100%);
    --gradient2: linear-gradient(0deg, #ff4359 0%, #ff7916 100%);
    --gradient3: linear-gradient(0deg, #25253a 0%, #0a2199 100%);
    --main-color:#ddcc98;
}

body{
}

.mainWrap{
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 5% 2.5%;
    background: url(../images/bg.jpg) center top / cover no-repeat;
    text-align: center;
}
.mainWrap .content{
    max-width: 960px;
    margin:0 auto;
    color: #fff;
}
.mainWrap .arrowWrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5%;
    width: 80%;
    margin: 0 auto 7.5%;
    flex-wrap: wrap;
    justify-content: center;
    gap:20px;
}
.mainWrap .arrowWrap .arrow{
    background: #fff;
    padding: 12.5px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -1.5px;
    width: 40%;
    justify-content: center;
}
.mainWrap .arrowWrap .arrow.--only{
    width: 50%;
    flex: 0 0 40%;
    align-items: center;
    justify-content: center;
}
.mainWrap .arrowWrap .ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; 
    height: 20px;
    background-color: #000;
    border-radius: 50%;  
    cursor: pointer;
    transition: transform 0.2s ease; 
    border: none;
    outline: none;
    transform: scale(1.3);
}
.mainWrap .arrowWrap .ico:after{
    content: '';
    width: 5px;        
    height: 5px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);    
    margin-right: 2px; 
    border-radius: 2px;
}
.mainWrap .maintit{
    font-weight: 800;
    font-size: 40px;
    opacity: 0;
    animation: fadeInUp 1s 0.5s forwards;
}
.mainWrap .maintit .name{
    color: var(--main-color);
    margin-bottom: 1%;
    letter-spacing: -2px;
}
.mainWrap .maintit .subject{
    font-size: 150%;
}
.mainWrap .maintit .line{
    padding-bottom: 5%;
    background: #fff;
    width: 1px;
    margin: 2.5% auto;
}
.mainWrap .listWrap{
    display: flex;
    flex-direction: column;
}
.mainWrap  .listcon{
    margin-bottom: 5%;
    border-bottom: 1px solid #ffffff66;
    padding-bottom: 5%;
}
.mainWrap .listcon:nth-last-child(1){
    border: none;
    margin-bottom: 0;
}
.mainWrap .listcon .title{
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 2.5%;
}
.mainWrap .listcon .title.--only{
    opacity: 0;
    animation: fadeInUp 1s 1.25s forwards;
}
.mainWrap  .listcon .title_con{

}
.mainWrap  .listcon .title_con.--color{
    color: var(--main-color);
}
.mainWrap .listcon .image{
    margin-bottom: 5%;
}
.mainWrap .listcon .image.--only{
    opacity: 0;
    animation: fadeInUp 1.5s 1.75s forwards;
}
.mainWrap .listcon .image img{
    width: 100%;
}
.mainWrap .listcon .iframeWrap{
    padding: 56.25% 0 0 0;
    position: relative;
    border: 3px solid #fff;
    border-radius: 20px;
    overflow: hidden;
}

@media(max-width:720px){
    .mainWrap{
        padding: 20% 5%;
    }
    .mainWrap .maintit{
        font-size: 6vw;
    }
    .mainWrap .maintit .line{
        padding-bottom: 10%;
        margin:5% auto;
    }
    .mainWrap .listcon{
        margin-bottom: 10%;
        padding-bottom: 10%;
    }
    .mainWrap .listcon .title{
        font-size: 5vw;
        margin-bottom: 5%;
    }
    .mainWrap .arrowWrap{
        width: 100%;
        margin-bottom: 15%;
    }
    .mainWrap .arrowWrap .arrow{
        font-size: 3.8vw;
        padding: 7.5px 0;
        gap: 5px;
        width: 45%;
    }
    .mainWrap .arrowWrap .arrow.--only{
        font-size: 3.8vw;
        padding: 7.5px 0;
        gap: 5px;
        width: 45%;
        flex: 0 0 45%;
    }
    .mainWrap .arrowWrap .ico{
        transform: scale(0.8);
    }
}

@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */ 
    .have_background_fix{
        background-attachment: scroll !important;
    }
}