@import url("layout.css");

/*-------------------------------------------------
Author : SY,CHo
Create date : 2020. 08. 03.
-------------------------------------------------*/

/* ========================================== LAYOUT */

#wrap {line-height: 1; letter-spacing: -0.05em;}

/* ========================================== 공통 */

.section h2, 
.section h3 {font-family: 'GmarketSans'; font-weight: 400;}

.btnMore {position: absolute; top: 0; right: 0; display: inline-block; width: 1.75rem; height: 1.75rem; line-height: 1.65rem; text-align: center; font-size: 1rem; color: #6e6e6e; border: 0.05rem solid #a0a0a0; border-radius: 50%; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.btnMore:hover {font-size: 1.1rem;}


/*비주얼*/
.Main_visual {position:relative; width:100%; height:100%;; margin-top:-100px; overflow:hidden;background: #4287a8;/*-*/}
.Main_visual .M_visual {height:100%; text-align:left;}
.Main_visual .M_visual img {width:auto; height:100%;}

.Main_visual .slogan {position:absolute; width:40%; max-width:1400px; top:37%; right:0;}/*-*/
.Main_visual .slogan .txt {font-family:'GmarketSans'; color:#fff; line-height:1.4; letter-spacing:-1px; word-break:keep-all;}/*-*/
.Main_visual .slogan .txt .txt01 {font-size:2.4rem;  font-weight:600;}/*-*/
.Main_visual .slogan .txt .txt02 {font-size:1.3rem;  font-weight:400;}/*-*/


/*-------------------메인콘텐츠------------------------------*/

.main_content {position:relative; width:100%; z-index:0;}

/*바로가기1*/
.section1 {position:relative; max-width:1400px; height:5.6rem; background:#fff; margin:-3rem auto 0; border-radius: 2.5rem 0 0 0 ;}
.section1::before{content:''; position: absolute; top: 0; right:-600px; width:100%; height: 5.6rem; background:#fff;}
.M_link01 {position:relative; width:100%;}
.M_link01 ul {display:block; height:auto;}
.M_link01 ul li {position:relative;  float:left; width:33.3%;}
.M_link01 ul li a {display:block; padding:0 3rem; color:#333; font-size:1rem; font-family:'GmarketSans'; background:url("/images/web/gmt/main/M_link_line.png") no-repeat left center;}
.M_link01 ul li a:hover { text-decoration:none; }
.M_link01 ul li:first-child a{background: none;}
.M_link01 ul li a p {position:absolute; transform:translateY(22px); background-color:#a7c4f7;/*-*/ width:3.5rem; height:3.5rem; line-height:3.5rem; border-radius:50%;   display:inline-block; text-align: center; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; overflow:hidden;}
.M_link01 ul li a p:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; width: 41px; height:39px; margin:auto; background-repeat:no-repeat; background-position:center; }
.M_link01 ul li:nth-child(1) a p:before { background-image: url("/images/web/gmt/main/M_icon01.png");}
.M_link01 ul li:nth-child(2) a p:before {background-image: url("/images/web/gmt/main/M_icon02.png");}
.M_link01 ul li:nth-child(3) a p:before {background-image: url("/images/web/gmt/main/M_icon03.png");}
.M_link01 ul li a span{margin:0 0 0 4.5rem; line-height: 5.6rem;}
.M_link01 ul li a em {display: block; position:absolute; top:50%; right:40px; z-index: 1; transform: translateY(-50%);}
.M_link01 ul li a em::before{content:''; position: absolute; top:50%; left:1rem; transform: translateY(-50%); width:40px; height:40px; background: #ccc; border-radius:50%; z-index:-1;}
.M_link01 ul li a:hover p {background-color:#3365c1;/*-*/}
.M_link01 ul li:nth-child(1) a:hover p:before{background-image:url("/images/web/gmt/main/M_icon01_h.png");}
.M_link01 ul li:nth-child(2) a:hover p:before{background-image:url("/images/web/gmt/main/M_icon02_h.png");}
.M_link01 ul li:nth-child(3) a:hover p:before{background-image:url("/images/web/gmt/main/M_icon03_h.png");}
.M_link01 ul li a:hover p:after {content:''; display:block; position:absolute; bottom:-3.7rem; right:-1.9rem; width:100px; height:100px; border-radius: 50%; background-color:#16408d;/*-*/ z-index: -1;}

/*주류전시관*/
.section2 { position:relative; margin:7rem 0 0 0; width:100%; height:25.25rem; background:#f1f4f6;/*-*/ z-index:2;}
.section2 .section_w {max-width:1400px; margin:0 auto; }

.section2 .div1 {position:absolute; margin-top:-3.75rem; left:50%; margin-left:-48rem;}
.section2 .div1 img {width:100%; height:100%;}
.section2 .div1:before {content:'';position:absolute;bottom: -1.3rem;height: 3rem; left: 26.5rem;width: 6.25rem;background:url("/images/web/gmt/main/div1_pttrn.png") no-repeat; z-index: -1;}
/*이용안내*/
.section2 .div2 {position:absolute; top:10.2rem; left:50%; margin-left:-18rem; width:18.6rem; height:13.05rem; background:#785f4e url("/images/web/gmt/main/div2_pttrn.png") no-repeat bottom left; border-radius:3rem 0 3rem 0; box-shadow: 3px 3px 5px rgb(0,0,0,0.4); }
.section2 .div2 {padding:1.5rem 1rem; color:#fff; text-align:center; }
.section2 .div2:before {content:''; position:absolute; top: 3.3rem; left: 50%; margin-left: -7.5rem; width: 15.15rem; height:0.3rem; background: url("/images/web/gmt/main/div2_pttrn_line.png") repeat;}
/*210604 수정*/
.section2 .div2 ul {margin: 3rem 0;font-family: 'GmarketSans';}
.section2 .div2 ul li {position:relative; margin:0.5rem 1rem; text-align:left;}
.section2 .div2 ul li em {display:inline-block; width:4.5rem; height:1.5rem; background:#ffc011; color:#333; text-align:center; line-height:1.65rem; border-radius:7rem; margin-right:0.2rem;}
.section2 .div2 ul li p {display:inline-block;letter-spacing:-0.5px;line-height: 1.6;}
.section2 .div2 ul li span {display:block; padding-left:5rem; color:#fff799; }
/*
210604 백업
.section2 .div2 ul {margin:2rem 0; font-family: 'GmarketSans';}
.section2 .div2 ul li {position:relative; margin:0.5rem 1rem; text-align:left;}
.section2 .div2 ul li em {display:inline-block; width:4.5rem; height:1.5rem; background:#ffc011; color:#333; text-align:center; line-height:1.65rem; border-radius:7rem; margin-right:0.2rem;}
.section2 .div2 ul li p {display:inline-block; letter-spacing:-0.5px;}
.section2 .div2 ul li span {display:block; padding-left:5rem; color:#fff799; }*/
/*주류전시관*/
.section2 .div3 {position:relative; width:43%; float:right; margin-top:4rem;  }
.section2 .div3 h2 {font-size:1.75rem; padding-left:3rem; letter-spacing:-3px;}
.section2 .div3 h2:before {content:''; position:absolute; left:0; top:0; width:50px; height:30px; background: url("/images/web/gmt/main/div3_tit.png") no-repeat;}
.section2 .div3 p.txt {padding:2rem 4.8rem 3rem 0; font-family:'NotoSans'; font-size:0.85rem; font-weight:400; color:#555555; line-height:1.7rem;}

.section2 .div3 a.btn_more{line-height:2rem; font-family:'GmarketSans'; font-size:0.7rem; color:#333333; display:block; float:left; text-align:left;}
.section2 .div3 a.btn_more:hover { text-decoration:none; }
.section2 .div3 a.btn_more:before {content:''; position:absolute; width:7rem; height:2rem; border-radius:3rem; border:1px solid #333333;}
.section2 .div3 a.btn_more span{position:relative; padding:0 2.5rem 0 1.2rem; line-height:2.1rem;}
.section2 .div3 a.btn_more span::after{content:url("/images/web/gmt/main/div3_btn_more.png"); position: absolute; right:0.5rem;}
.section2 .div3 a.btn_more span:hover{color:#785f4e;}
.section2 .div3 a.btn_more span:hover::after{right:-0.1rem;}
.section2 .div3 a.btn_more span::after{-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}


/* 공지사항 */
.section3 {position:relative; max-width:1400px; width:100%; height:100%;  margin:3.25rem auto 3.25rem; overflow:hidden;}
.section3 .section3_con {position:relative; width:1400px; margin:0 auto;}

.notice { position:relative; width:33.5rem; height:15rem; margin:0 2rem 0 0; float:left;}
.notice:before {content:"";display:block;position:absolute;top: 2.3rem;left:0;width:100%;height:1px;background:#a0a0a0;}
.notice:after { content:""; display:table; clear:both; }
.notice h2 { float:left; max-width:33%; }
.hotive .tit2 {color:#777777;}
.notice h2 ~ h2 { margin-left:1rem; }
.notice h2 a {display:block;overflow:hidden;white-space:nowrap;position:relative;padding-bottom: 1.1rem;font-family:"GmarketSans";font-weight:500;font-size:1.25rem;line-height:1.1;color:#777777;}
.notice h2 a.current:before { content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#000; }
.notice h2 a:hover { color:#000; text-decoration:none; } 
.notice h2 a.current { color:#000;} 
.notice .list_box {display:none;position:absolute;top: 3rem;left:0;width:100%;height:auto;}
.notice .list_box.on { display:block; }
.notice .list_box li { position:relative; line-height:3rem; letter-spacing:-0.01rem; }
.notice .list_box li:after {content:''; position:absolute; bottom:0; left:0; width:100%; border:1px dashed #d2d2d2;}
.notice .list_box li:last-child:after {border:none;}
.notice .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-right:5rem; font-size:0.85rem; letter-spacing:-1px; color:#333; }
.notice .list_box li a.new { position:relative; padding-left:1.9rem; }
.notice .list_box li a.new:before { content:""; display:block; position:absolute; top:0; bottom:0; left:0; width:1.5rem; height:1.5rem; margin:auto 0; background:url("/images/web/gmt/main/notice_new_icon.png") no-repeat; background-size:100%; }
.notice .list_box li a:hover,
.notice .list_box li a:focus,
.notice .list_box li a:active { font-weight:400; text-decoration:underline; }
.notice .list_box li span { display:block; position:absolute; top:0; right:0; font-size:0.8rem; color:#666; }
.notice a.btn_more{position: absolute;top: -2.8rem;right:0;}
.notice a.btn_more:hover { text-decoration:none; }
.notice a.btn_more span{position: relative;z-index:2; font-size:14px; font-family: 'GmarketSans';  padding-right:2rem; color:#333333;background: url("/images/web/gmt/main/notice_btn_more.png") no-repeat 2.5rem center; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}
.notice a.btn_more:hover span{color:#000; padding-right:2.2rem;}
.notice a.btn_more::after{content:"";width: 1.25rem;height: 1.25rem;position:absolute;right: 0;top:0;background: #eeeeee; z-index: 0;}

/* 알림판 */
.popup { position:relative; width:19rem; height:15rem; float:left; overflow:hidden; }
.popup h2 { overflow:hidden; white-space:nowrap; margin-right:9rem; margin-bottom:1.3rem; font-family:"GmarketSans"; font-weight:500; font-size:1.25rem; line-height:1.1; color:#222; }
.popup .items { overflow:hidden; }
.popup .items .item { display:inline-block; vertical-align:top;}
.popup .items .item a { display:block; height:12.5rem; background:#f0f1f5; text-align:center;}
.popup .items .item a + a { margin-top:0.5rem; }
.popup .items .item a img { width:380px; max-width:100%; height:100%; }
.popup .count { display:inline-block; margin-right:0.9rem; font-weight:400; font-size:0.8rem; color:#777; vertical-align:middle; }
.popup .count .current { color:#7a5600; }
.popup .count .line { margin:0 0.2rem; }
.popup .btns { display:block; position:absolute; top:0; right:0; font-size:0; }
.popup .btns button { display:inline-block; overflow:hidden; padding:0; background-repeat:no-repeat; background-position:center; font-size:1px; color:transparent; vertical-align:middle; }
.popup .btns .btn_prev,
.popup .btns .btn_next { width:34px; height:35px; }
.popup .btns .btn_stop,
.popup .btns .btn_play { width:35px; height:35px;}
.popup .btns .btn_prev { background-image:url("/images/web/gmt/main/pop_prev.png"); }
.popup .btns .btn_next { background-image:url("/images/web/gmt/main/pop_next.png"); }
.popup .btns .btn_stop { background-image:url("/images/web/gmt/main/pop_stop.png"); }
.popup .btns .btn_play { display:none; background-image:url("/images/web/gmt/main/pop_play.png"); }


/*바로가기2*/
.M_link02 {position:relative; width:13.5rem; height:15rem; float:left; margin:0 0 0 2rem; }
.M_link02 ul{overflow:hidden; }
.M_link02 ul li{position:relative; width:100%; height:7rem; text-align:center; margin-top:18px;}
.M_link02 ul li:first-child {margin-top:0;}
.M_link02 ul li a{ display:block; cursor:pointer;}
.M_link02 ul li a:hover { text-decoration:none; }
.M_link02 ul li a .tit{font-size:1rem; font-family: 'GmarketSans'; color:#fff; letter-spacing: -1px; line-height:7rem; padding-right:1.8rem;}
.M_link02 ul li a .tit:before {content:''; position:absolute; top:2.7rem; right:2rem; width:30px; height:30px; background:url("/images/web/gmt/main/M02_btn_more.png") no-repeat; transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }
.M_link02 ul li.m1{background:url("/images/web/gmt/main/M_bgImg01.png") no-repeat; background-size:cover;}
.M_link02 ul li.m2{background:url("/images/web/gmt/main/M_bgImg02.png") no-repeat; background-size:cover;} 
.M_link02 ul li.m2 a .tit:before {right:3rem;}
.M_link02 ul li a:hover .tit:before {transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);}




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

    /* 메인비주얼 */
    .Main_visual .slogan { right:2%; margin-left:0; } 

     /*바로가기1*/     
    .section1 {height:auto;}
    .M_link01 ul {height:auto; overflow:hidden;}

    /*공지사항, 팝업, 바로가기2*/
    .section3 .section3_con {width:96%; margin:0 auto;}
    .notice {width:58%; margin:0 4% 0 0;}
    .popup {width:38%;}
    .M_link02 {width:100%; height:auto; margin:1.5rem 0 0 0;}
    .M_link02 ul li {width:48%; margin-top:0; float:left; }
    .M_link02 ul li.m1 {margin:0 4% 0 0;}
 
}

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

    /*메인비주얼*/
    .Main_visual .M_visual img {height:23rem; transform:translateX(-20%)}
    .Main_visual .slogan {width:50%;}
    
    /*바로가기1*/
    .M_link01 ul li a {padding:0 2.5rem; text-align:center; padding:0;}
    .M_link01 ul li a p {position:relative; line-height:0; display:block; margin:0 auto;}
    .M_link01 ul li a span {margin:0;}
    .M_link01 ul li a em {display:none;}

    /*주류전시관*/
    .section2 {margin:3.8rem 0 0 0;}

}

@media screen and (max-width: 1024px){
	/*메인비주얼*/
    .Main_visual .slogan {top:29%;}
    
    /*공지사항*/
    .notice a.btn_more span {background:url("/images/web/gmt/main/notice_btn_more.png") no-repeat 2.7rem center;}
    .section3 {margin:1.5rem auto 3.25rem;}

    /*주류전시관*/
    .section2 {height:41rem;}
    .section2 .div1 {position:static;left:0; margin-left:0;}
    .section2 .div1:before {display:none;}
    .section2 .div2 {position:relative; top:auto; left:auto; float:right; margin:14rem 1rem 0 0;}
    .section2 .div3 {position:relative; width:96%;float:right; margin:2rem auto 2rem;}
    .section2 .div3 p.txt {padding:1.5rem 4.5rem 2rem 0; }

}

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

    /*바로가기1*/
    .M_link01 {height:8rem;}

    /*주류전시관*/
    .section2 {height:40rem;}
    .section2 .div2 {margin:10rem 1rem 0 0;}

    /*공지사항*/
    .notice {width:100%; margin:0;}
  
    /*팝업*/
    .popup {width:100%; margin:4% 0 0 0;}
    .popup img {width:auto;}

    /*바로가기2*/
    .M_link02 {width:100%; margin: 1rem 0 0 0;}
    .M_link02 ul li {margin-top:0; width:48%; float:left;}
    .M_link02 ul li.m1 {margin:0 4% 0 0;}

}

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

    /*주류전시관*/
    .section2 {height:auto; overflow:hidden; margin:0; border-top-right-radius:11vw}
    .section2 .div1 {margin-top:0;}
    .section2 .section_w {margin:0;}
    /* .section2 .div3 {margin:1rem auto 4rem;} */
    .section2 .div3 p.txt {padding:1.5rem 1rem 1.5rem 0;}
    .section2 .div3 h2 {font-size:1.5rem;}
    
}

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

    /*메인비주얼*/
    /* .Main_visual .M_visual img {transform:translateX(-50%)} */
    .Main_visual .slogan{width:90%; top:35%; text-shadow: 2px 1px #325869;}
    .Main_visual .slogan .txt .txt01 {font-size:1.8rem;}
    .Main_visual .slogan .txt .txt02 {font-size:1.2rem;}

    /*바로가기1*/
    .section1 {height:auto;}
    .M_link01 ul li a span {font-size:0.9rem;}

    /*공지사항*/
    .section3 {margin:1.5rem auto 2rem;}
    .notice h2 a {font-size:1.2rem; padding-bottom:1rem; }
    .notice:before {top:2rem;}

    /*알림판*/
    .popup h2 {font-size:1.2rem; margin:0.5rem 9rem 1rem 0;}

    /*바로가기2*/
    .M_link02 ul li {width:100%; float:none; margin:2% 0 0 0} 
    
}

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

    /*주류전시관*/
    .section2 {margin:0;}
    
    .section2 .div2 {margin:-8rem auto 0.5rem; width:92%; float:none; padding:1.5rem 0.2rem; }
    .section2 .div2:before {width:12rem; margin-left:-6rem;}
    .section2 .div2 ul li span {display:block; padding-left:5rem; }
    .section2 .div3 h2 {font-size:1.2rem;} 
    .section2 .div3 h2:before {top:-6px;}

}

@media screen and (max-width: 420px){
    
    /*비주얼*/
    .Main_visual .M_visual img {height:20rem;}
    .Main_visual .slogan .txt .txt01 {font-size:1.3rem;}
    .Main_visual .slogan .txt .txt02 {font-size:1rem;}

    /*바로가기1*/
    .M_link01 ul li a span {font-size:0.85rem;}


    /*주류전시관*/
    .section2 .div2 {margin:-5rem auto 0.5rem; }

}

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

    /*비주얼*/
    .Main_visual .M_visual img {height:18rem;}
    .Main_visual .slogan .txt .txt02 {font-size:0.9rem;}
    
     /*바로가기1*/
    .M_link01 ul li a p {margin:0 auto 1.8rem; line-height:0; }
    .M_link01 ul li a span {font-size:0.8rem; line-height:0; word-break:keep-all;}

    /*주류전시관*/
    .section2 .div2 ul li span {font-size:0.7rem;}

    /*공지사항*/
    .notice h2 a {font-size:1rem; }

    /*알림판*/
    .popup h2 {font-size:1rem;}

}