@font-face {
    font-family: scdream;
    font-weight: 500;
    src: url(fonts/SCDream5.otf);
}
@font-face {
    font-family: scdream;
    font-weight: 600;
    src: url(fonts/SCDream6.otf);
}
@font-face {
    font-family: nanumSquare;
    font-weight: 500;
    src: url(fonts/NanumSquareNeoOTF-Bd.otf);
}
@font-face {
    font-family: nanumSquare;
    font-weight: 600;
    src: url(fonts/NanumSquareNeoOTF-Eb.otf);
}
@font-face {
    font-family: gmarket;
    font-weight: 500;
    src: url(fonts/GmarketSansBold.otf);
}


html { width: 1080px; height: 1920px;}
body { background-color: #FDF0DA; }
body, a , button { font-family: 'nanumSquare'; font-weight: 500;}
header { height: 230px;}
header .header_top { display: flex; align-items: center; justify-content: space-between; padding: 0 80px; height: 130px; box-sizing: border-box;}
header .date { font-size: 30px; }
header .time { margin-left: -70px; width: 334px; height: 80px; background: url(../images/bg_time.svg) no-repeat center / auto 100%; font-size: 0;}
header .time i { display: inline-block; width: 73px; line-height: 86px; text-align: center; font-size: 40px; font-family: 'gmarket'; font-weight: 500;}
header .time .time_3 { margin-left: 42px;}
header .weather { display: flex; align-items: center;}
header .weather img { width: 65px; height: 65px; }
header .weather b { font-size: 50px; }
header .weather b i { font-size: 30px; }
header .logo_group { display: flex; justify-content:space-between; padding: 0 80px; height: 110px; width: 100%; box-sizing: border-box;}
header .logo_group img { height: 60px;}



/* main */
.main { position: relative; background: url(../images/bg_main.svg) no-repeat center / 100% auto;}
.main .main_img { position: absolute; left: 0; top: 365px; width: 780px;}
.main nav { position: absolute; z-index: 2; }
.main nav a { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 265px; height: 265px; border-radius: 50%; font-size: 33px; font-family: 'scdream'; font-weight: 600; font-size: 33px; color: #5A2907;}
.main nav a:nth-child(1) { top: 40px; left: 400px;}
.main nav a:nth-child(2) { top: 260px; left: 620px;}
.main nav a:nth-child(3) { top: 565px; left: 700px;}
.main nav a:nth-child(4) { top: 865px; left: 620px;}
.main nav a:nth-child(5) { top: 1070px; left: 400px;}
.main nav a::before { position: absolute; content: ""; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; box-shadow: inset 10px 10px 8px #FFFFFF4D; }
.main nav a img { margin-bottom: 10px;}
.main nav a span { z-index: -1; position: absolute; display: inline-block; width: 265px; height: 265px;}
.main nav a span::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: transparent linear-gradient(180deg, #FFFFFF 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box; box-shadow: 8px 8px 10px #00000047; opacity: 0.5;}
.main nav a span::before { z-index: 1; position: absolute; content: ""; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; border-radius: 50%; background: transparent linear-gradient(180deg, #ff9900 0%, #FFBF45 100%) 0% 0% no-repeat padding-box; box-shadow: inset -5px -5px 8px #4D4D4D33; }
.main nav a img { width: 90px; height: 90px;}
.main .btn_instatoon { position: absolute; bottom: 155px; right: 55px; display: inline-block; width: 225px; height: 230px;}
.main main { position: relative; height: 1540px;}
.main p { position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); font-size: 30px; color: #374675; font-weight: 600; text-align: center;}
.main p img { margin-top: -30px;}
footer { display: flex; align-items: center; justify-content: center; background: url(../images/bg_footer.png) no-repeat center / 100% auto; height: 150px; color: #fff; font-family: 'scdream'; font-size: 50px; font-weight: 600;}



/* sub 공통 */
.sub footer { height: 100px; background: #364675; font-size: 40px;}
.btn_home { display: inline-block; z-index: 9; position: absolute; left: 23px; top: 135px; width: 103px; height: 106px;}
.wrap { position: relative; height: 1340px;}
.container { margin: 0 auto; width: 990px; height: 1260px; background: #FFF; border-radius: 52px;}
.title { margin-bottom: 30px; width: 100%; height: 95px; line-height: 95px; background: url(../images/bg_title.svg) no-repeat center / auto auto; text-align: center; color: #fff; font-size: 40px; font-family: 'scdream'; font-weight: 600;}
.img_slider { position: relative; height: 963px; text-align: center;}
.img_slider .img_box { margin: 0 auto; width: 830px; height: 1020px; border: 1px solid red; overflow: hidden;}
.img_slider .img_box img { width: 100%;}
.img_slider .btn_prev,
.img_slider .btn_next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 67px;}
.img_slider .btn_prev img,
.img_slider .btn_next img { width: 100%;}
.img_slider .btn_prev { left: 30px;} 
.img_slider .btn_next { right: 30px;}
.img_slider .dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: -90px; font-size: 0;}
.img_slider .dot li { display: inline-block; width: 14px; height: 14px; margin: 0 10px; border-radius: 7px; background: #ababab;}
.img_slider .dot li.active { background: #FFA800;}
.tab { display: flex; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); border-radius: 40px; background-color: #fff; box-shadow: 5px 5px 6px #00000029; border: 2px solid #B5B5B5; }
.tab li { position: relative; width: 240px; height: 80px;}
.tab li~li::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 40px; background-color:rgb(231, 231, 231); z-index: -1;}
.tab li:first-child button { border-radius: 40px 0 0 40px;}
.tab li:last-child button { border-radius: 0 40px 40px 0;}
.tab li button { width: 100%; line-height: 80px; font-size: 25px;}
.tab li.active button { color: #fff; background-color: #364675;}
.nav_btm { display: flex; height: 250px;}
.nav_btm li { flex-grow: 1; width: 100%; height: 100%; box-sizing: border-box;}
.nav_btm li~li { border-left: 4px solid #247f82;}
.nav_btm li a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 30px; background-color: #2F979A; font-family: 'scdream'; font-weight: 500;}
.nav_btm li a span { display: inline-block; margin-bottom: 20px; width: 130px; height: 130px; line-height: 130px; border-radius: 50%; background-color: #278588; text-align: center;}
.nav_btm li.active span { background-color: #fff;}
.nav_btm li.active a { background-color: #FFBB38; color: #5A2906; font-weight: 600;}



/* sub - test */
.container { text-align: center; }
.txt_info { display: block; margin-bottom: 35px; font-size: 40px; color: #2F979A; font-weight: 600;}
.test_list li { margin:0 auto; margin-bottom: 30px; width: 775px; height: 80px; background: #F9DFA3 0% 0% no-repeat padding-box; box-shadow: 0px 5px 7px #00000033; border: 2px solid #000000; border-radius: 20px; box-sizing: border-box;}
.test_list li button { line-height: 76px; font-size: 30px; text-align: center;}
.txt_info2 { margin-top: 10px; letter-spacing: 0px; color: #374675; font-size: 25px; line-height: 34px;}
.txt_info2 strong { font-weight: 600;}