@charset "utf-8";
@import url("preset.css");

/* skip navigation */
#skipnavi a{display:block; position:absolute; top:-400px; left:0; z-index:1005; width:100%; height:40px; line-height:40px; text-align:center; font-weight:bold; transition:0.3s; -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; font-size:30px;}
#skipnavi a:hover{top:0px; z-index:1005; background:#4669b2; color:#fff;}
#skipnavi a:active{top:0px; z-index:1005; background:#4669b2; color:#fff;}
#skipnavi a:focus{top:0px; z-index:1005; background:#4669b2; color:#fff;}

body {background: linear-gradient(135deg, #208E5D 50%, #259764 50%); text-align: center;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
#container {height:100%; position:relative; min-height:700px;}

/************************************************** 대문페이지 **************************************************/
.gate_layout {position:absolute; left:50%; top:45%; transform:translate(-50%, -45%); width:1135px; height:731px; margin:auto; background:url("../../images/noin/gate/gate_bg.png") no-repeat center bottom;}
.gate_contents {display:flex; justify-content:space-between;}
.gate_box {width:450px;}
.gate_box:first-child {margin:40px 80px 0 60px;}
.gate_box:last-child {margin:40px 95px 0 0;}

.gate_inbox {width:450px;}

.gate_title {font-family:'GmarketSans'; font-weight: 600; font-size: 4.6em; color:#FCD110; text-align: center; width:450px;}
.gate_title_sub {font-family:'GmarketSans'; font-size: 3.2em; margin-top:33px; width:450px; text-align: center;}
.gate_list {font-size:2.8em; padding:53px 0 0 120px; font-weight:400;}
.gate_list ul li {text-align:left; line-height:52px;}
.gate_btn_area {margin-top:40px; text-align:center;}
.gate_btn_area img {position:relative;}
.gate_info {margin-top:35px; font-family:'GmarketSans'; font-size:3.1em; width:450px; text-align:center; font-weight:500;}

.gate_layout h2 {font-weight: normal;}

.gate_layout .color_green {color:#208C5A;}
.gate_layout .color_blue_green {color:#057387;}
.gate_layout .color_orange_red {color:#D43B2B}

@media only screen and (max-width:1024px) {

	.gate_layout {position:absolute; left:50%; top:45%;  transform:translate(-50%, -45%); width:100%; height:370px;  margin:auto; margin-top:0px; margin-left:0px; background:none;}
    .gate_contents {display:flex; justify-content:center;}

    .gate_box {width:100%;}
    .gate_inbox {width:100%; background:#fff; border-radius:10px; padding:20px 10px;}
    .gate_box:first-child {position:relative; left:0px; top:0px; margin:20px 10px 20px 20px;}
    .gate_box:last-child {position:relative; left:0px; top:0px; margin:20px 20px 20px 10px;}

    .gate_title {font-family:'GmarketSans'; font-weight:600; font-size: 3.6em; left:0; color:#FCD110; text-align: center; width:100%;}
    .gate_title_sub {font-family:'GmarketSans'; font-size:2.6em; margin-top:0px; width:100%; text-align: center;}
    .gate_list {font-size:2.2em; padding:10px; font-weight:400;}
    .gate_list ul li {width:100%; text-align: center; line-height:30px;}
    .gate_btn_area {width:100%; margin-top:20px;}
    .gate_btn_area img {position:relative; left:calc(0% - 0px); width:160px;}
    .gate_info {margin-top:20px; font-family:'GmarketSans'; font-size:2.6em; width:100%; text-align:center; }
}

@media only screen and (max-width:720px) {

	.gate_layout {position:absolute; top:0px; left:0px; transform:translate(0, 0); width:100%; height:100%; margin:auto; margin-top:0px; margin-left:0px; background:none; display:flex; justify-content:center; align-items:center;}
    .gate_contents {display:flex; flex-direction:column; justify-content:center; width:100%;}

    .gate_box {width:100%;  padding:0 10px;}
    .gate_inbox {width:100%; background:#fff; border-radius:10px; padding:10px 10px;}
    .gate_box:first-child {position:relative; left:0px; top:0px; margin:0px auto;}
    .gate_box:last-child {position:relative; left:0px; top:20px; margin:0px auto;}

    .gate_title {font-family:'GmarketSans'; font-weight:600; font-size: 3.4em; color:#FCD110; text-align: center; width:100%;}
    .gate_title_sub {font-family:'GmarketSans'; font-size:2.6em; margin-top:5px; width:100%; text-align: center;}
    .gate_list {font-size:2.0em; padding:6px; font-weight:400;}
    .gate_list ul li {width:100%; text-align: center; line-height:26px;}
    .gate_btn_area {width:100%; margin-top:5px;}
    .gate_btn_area img {position:relative; left:calc(0% - 0px); width:160px;}
    .gate_info {margin-top:10px; font-family:'GmarketSans'; font-size:2.6em; width:100%; text-align:center; }
}

*:focus {outline:1px dashed #000000; outline-width:2px;}