@charset "UTF-8";

/* 공통 */
::selection {background:#1adf9d; color:#fff;}

/* 공통 요소 */

@media screen and (max-width: 350px) {
	
}



/* main */
#main {height:calc(100vh - 70px);}
#main .menuList {display:flex; flex-wrap:wrap;}
#main .menuList > li {display:block; width:50%; transition:width 0.3s;}
#main .menuList > li.v02 {width:100%;}
#main .menuList > li .menu {display:flex; position:relative; width:100%; height:calc((100vh - 70px - 240px)/3); padding:0 15px; align-items: center; justify-content:center; transition: .5s;}
#main .menuList > li .menu.v01 {background-color:#48BEFF;}
#main .menuList > li .menu.v02 {background-color:#3E79F4;}
#main .menuList > li .menu.v03 {background-color:#276296;}
#main .menuList > li .menu.v04 {background-color:#1D3E7F;}
#main .menuList > li .menu.v05 {background-color:#1EBCBB;}
#main .menuList > li .menu.v06 {background-color:#35A3B2;}
#main .menuList > li .menu.v07 {background-color:#87BEDD;}
#main .menuList > li .menu.v08 {background-color:#D4DAE7;}
#main .menuList > li.v02 .menu {height:120px;}
#main .menuList > li .menu::before {content:''; display:block; position:absolute; top:50%; left:50%; width:0%; height:0%; border-radius:50%; background-color:rgba(255,255,255,0.1); transition: .5s; transform:translate(-50%, -50%);}
#main .menuList > li .menu:focus::before,
#main .menuList > li .menu:hover::before,
#main .menuList > li .menu.active::before {width:100%; height:100%; border-radius:0%;}
#main .menuList > li .menu .tit {display:block; position:absolute; padding-top:55px; font-weight:600; font-size:1.25rem; color:#fff; transition: .3s;}
#main .menuList > li.v02 .menu .tit {padding:0 0 0 55px;}
#main .menuList > li .menu .tit::before {content:''; display:block; position:absolute; top:0; left:50%; width:45px; height:45px; background-size:45px; background-repeat:no-repeat; background-position: center center; transform:translateX(-50%) scale(1); transition: .5s;}
#main .menuList > li .menu.v01 .tit::before {background-image:url(../images/main/i_menu01.svg);} 
#main .menuList > li .menu.v02 .tit::before {background-image:url(../images/main/i_menu02.svg);} 
#main .menuList > li .menu.v03 .tit::before {background-image:url(../images/main/i_menu03.svg);} 
#main .menuList > li .menu.v04 .tit::before {background-image:url(../images/main/i_menu04.svg);} 
#main .menuList > li .menu.v05 .tit::before {background-image:url(../images/main/i_menu05.svg);} 
#main .menuList > li .menu.v06 .tit::before {background-image:url(../images/main/i_menu06.svg);} 
#main .menuList > li.v02 .menu .tit::before {top:50%; left:0; transform:translate(0, -50%) scale(1);}
#main .menuList > li .menu.v07 .tit::before {background-image:url(../images/main/i_menu07.svg);} 
#main .menuList > li .menu.v08 .tit::before {background-image:url(../images/main/i_menu08.svg);} 
#main .menuList > li .menu:focus .tit::before,
#main .menuList > li .menu:hover .tit::before,
#main .menuList > li .menu.active .tit::before {transform:translateX(-50%) scale(1.12);}
#main .menuList > li.v02 .menu:focus .tit::before,
#main .menuList > li.v02 .menu:hover .tit::before,
#main .menuList > li.v02 .menu.active .tit::before {transform:translate(0, -50%) scale(1.12);}

@media screen and (max-width: 400px) and (max-height:750px) {
	#main .menuList > li .menu {height:calc((100vh - 70px - 200px)/3);}
	#main .menuList > li.v02 .menu {height:100px;}
}
@media screen and (max-width: 380px) and (max-height:670px) {
	#main .menuList > li .menu {height:calc((100vh - 70px - 160px)/3);}
	#main .menuList > li.v02 .menu {height:80px;}
	#main .menuList > li .menu .tit,
	#main .menuList > li.v02 .menu .tit {padding:0 0 0 32px; font-size:1.125rem;}
	#main .menuList > li .menu .tit::before {top:50%; left:0; width:25px; height:25px; background-size:25px; transform:translate(0, -50%) scale(1);}
	#main .menuList > li .menu:focus .tit::before,
	#main .menuList > li .menu:hover .tit::before,
	#main .menuList > li .menu.active .tit::before,
	#main .menuList > li.v02 .menu:focus .tit::before,
	#main .menuList > li.v02 .menu:hover .tit::before,
	#main .menuList > li.v02 .menu.active .tit::before {transform:translate(0, -50%) scale(1.1);}
}














/* Popup */
#wrap .popupwrap {display:inline-block; position:absolute; top:150px; left:300px; z-index:9999999; background-color:#1A4399;}
#wrap .main-popup{background:#ffffff;}
#wrap .popuphead {padding: 10px; background:linear-gradient(to top, #17479E, #17479E);}
#wrap .popuphead .tit {line-height: 22px; font-weight: 700; font-size: 1rem; color: #fff;}
#wrap .popupcontent {display: block; border-top:2px solid #ddd; border-left:2px solid #ddd; border-right:2px solid #ddd;}
#wrap .popupcontent .con-box {display: block;}
#wrap .popupcontent .con-box > img {display: block; width:100%; margin:0 auto;}
#wrap .popupfoot {margin-bottom:-3px;padding:7px 0;background:#ffffff; border:1px solid #d9d9d9;}
#wrap .popupfoot:after {display:block;content:"";clear:both;}
#wrap .popupfoot .popfleft {float:left;margin-left:15px; color: #777; line-height: 25px; font-size: 1rem;}
/* #wrap .popupfoot .popfleft .today {} */
#wrap .popupfoot .popfleft > label {padding:0 5px;}
#wrap .popupfoot .popfright {float:right;margin-right:15px;}
#wrap .popupfoot .popfright .btn-close {display: block; height: 25px; padding: 0 10px; border-radius: 3px; background-color:#666;}
#wrap .popupfoot .popfright .btn-close > span { color: #fff;}

#wrap .popupfoot .popfright .btn-close {background-color:#666; transition:background 0.3s;}
#wrap .popupfoot .popfright .btn-close:focus,
#wrap .popupfoot .popfright .btn-close:hover,
#wrap .popupfoot .popfright .btn-close.active {background-color:#222;}

@media screen and (max-width: 1400px) {
	#wrap .popupwrap {left: 0px !important;}
}
@media screen and (max-width: 1024px) {
    #wrap .popupwrap {top: 137px !important;}
    #wrap .popupcontent {width: 100% !important; height: auto !important;}
}
@media screen and (max-width: 800px) {
    #wrap .popupwrap {top: 127px !important;}
}
@media screen and (max-width: 600px) {
    #wrap .popupwrap {top: 97px !important;}
}