@charset "utf-8";
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*, a, input[type=text], input[type=password], select, html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, canvas, details, figcaption, summary, time, mark, audio, video{font-family:'GmarketSansMedium'; color:#333; font-size:16px;}

.wrap {padding-left:2%; padding-right:2%; max-width:1920px; margin:auto;} 

header{padding-top:1.5%; padding-bottom:1.5%;}
header h1 a{color:#68AA15; font:1.6rem 'GmarketSansBold';}
#lnb h2{display:none;}
#lnb>ul{display:flex;}
#lnb>ul>li{margin-left:80px;}
#lnb>ul>li>a{display:block; padding-top:10px; padding-bottom:10px; font-size:1.6rem; text-decoration:none;}
#lnb>ul>li:hover>a,
#lnb>ul>li.select>a{position:relative; color:#333;}
#lnb>ul>li>a:before,
#lnb>ul>li.select>a:before{content:''; position:absolute; left:50%; right:0; bottom:0; width:0; height:2px; background-color:#333; opacity:0; transition:.3s;}
#lnb>ul>li:hover>a:before,
#lnb>ul>li.select>a:before{left:0; width:100%; opacity:1;}
#gnb{display:flex;}
#gnb>li{margin-left:25px;}
#gnb>li:first-child{margin-left:0;}
#gnb>li>a{color:#666;}

footer{text-align:center; padding-top:4%; padding-bottom:4%;}
footer p{color:#666; font:0.85rem 'GmarketSansMedium';}

/* main_sub 공통 */
.btn_control li{width:48px; height:48px; border-radius:100%; box-sizing:border-box;}
.btn_control li a{display:block; width:100%; height:100%;}
.btn_control li.btn_prev a,
.btn_control li.btn_next a{position:relative; width:48px; height:48px;}
.btn_control li.btn_prev a:after,
.btn_control li.btn_prev a:before,
.btn_control li.btn_next a:after,
.btn_control li.btn_next a:before{content:''; position:absolute; width:3px; height:15px; border-radius:60px;}
.btn_control li.btn_prev a:after{left:20px; top:12px; transform:rotate(45deg);}
.btn_control li.btn_prev a:before{left:20px; top:21px; transform:rotate(-45deg);}
.btn_control li.btn_next a:after{left:23px; top:12px; transform:rotate(-45deg);}
.btn_control li.btn_next a:before{left:23px; top:21px; transform:rotate(225deg);}

/* .ic-length{background:url(../img/inc/ic_length.svg) 0 0 no-repeat;}
.ic-time{background:url(../img/inc/ic_time.svg) 0 0 no-repeat;}
.ic_course{background:url(../img/inc/ic_course.svg) 0 0 no-repeat;} */
.ic-length,
.ic-time,
.ic-course{font-size:0;}
.ic-length:before,
.ic-time:before,
.ic-course:before{font-size:40px;}

#photo .wrap{position:relative;}
#photo .tit_box .tit{width:303px; height:160px; background:url(../img/inc/photo_tit.svg) 0 0 no-repeat;}
#photo .list{white-space:nowrap; overflow:hidden;}
#photo .list li{display:inline-block; width:100%; overflow:hidden;}
#photo .list ul{display:flex; align-items:flex-end;}
#photo .list a{position:relative; display:block; box-sizing:border-box;}
#photo .list a span{position:absolute; left:30px; bottom:20px;}
#photo .list a span:before{content:'#';}
#photo .list a p img{width:100%; height:100%; object-fit:cover;}
#photo .list a p.noimg{text-align:center; background:#f0f0f0;}
#photo .list a p.noimg img{width:119px; height:119px; position:relative !important; top:50%; left:0px !important; transform:translateY(-50%) !important; -webkit-transform:translateY(-50%) !important; width:auto !important; height:auto !important; min-height:auto !important; z-index:1 !important; }
#photo .list a p.noimg+span{display:none;}

@media screen and (max-width:1400px){
	#photo .tit_box .tit{width:180px; height:100px; background-size:100%;}
}

@media screen and (max-width:1100px){
	#lnb>ul>li{margin-left:20px;}
	#gnb>li{margin-left:10px;}
}

/*pc*/
@media all and (min-width:801px){
	header .wrap{display:flex; justify-content:space-between; align-items:center;}
	footer br{display:none;}
	#photo .tit_box{position:absolute; top:5%; left:54.5%; text-align:center; z-index:2;}
	#photo .tit_box .tit{font-size:0; text-indent:-5000px;}
	#photo .btn_control li{display:inline-block; background:#fff; border:1px solid #eee;}
	#photo .btn_control li a:after,
	#photo .btn_control li a:before{background-color:#333;}
	#photo .list ul li:nth-child(1){width:51%; margin-right:1%;}
	#photo .list ul li:nth-child(2){width:23%; margin-right:.5%; margin-left:.5%;}
	#photo .list ul li:nth-child(3){width:23%; margin-left:1%;}
	#photo .list ul li a{border:8px solid #fff;}
	#photo .list ul li a span{ color:#fff; font-size:1.3rem; line-height:1.3rem; text-shadow:-1px 0 rgba(0,0,0,.2), 0 -1px rgba(0,0,0,.2), 1px 0 rgba(0,0,0,.2), 0 1px rgba(0,0,0,.2);}
	#photo .list ul li:nth-last-child(1) a span{left:auto; right:30px;}
	#photo .list ul li a p{position:relative; height:545px; width:100%; line-height:0; overflow:hidden;}
	#photo .list ul li:nth-child(2) a p{height:250px;}
}

/*tablet~mobile*/
@media screen and (max-width:800px){
	#photo .btn_control{display:none;}
	header{padding-top:34px;}
	header h1{text-align:center; margin-top:20px; margin-bottom:20px;}
	#gnb{position:absolute; left:0; right:0; top:0; padding-top:5px; padding-bottom:5px; width:100%; background-color:#F5F5F5; justify-content:center;}
	#gnb>li>a{font-size:.8rem;}
	#lnb>ul>li{text-align:center; margin-left:0; flex-basis:33.3%;}
	#lnb>ul>li>a{color:#999; font-size:1.05rem;}
	footer p{font-size:.7rem; letter-spacing:.5px;}

	#photo .tit_box .tit{width:auto; height:auto; margin-bottom:10px; color:#000; font-size:1.5rem; background:none;}
	#photo .list{padding-bottom:10px; overflow-y:hidden; overflow-x:auto;}
	#photo .list::-webkit-scrollbar{width:5px; height:3px;}
	#photo .list::-webkit-scrollbar-track-piece{background:rgba(0,0,0,.1);}
	#photo .list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);}
	#photo .list li{display:inline-block; width:85%; max-width:380px; margin-right:2%;}
	#photo .list li:first-child{margin-left:0;}
	#photo .list a{padding-bottom:30px; height:215px; box-sizing:content-box;} 
	#photo .list a p{position:relative; height:215px; overflow:hidden;}
	#photo .list a span{left:0; bottom:-5px; font-size:1rem;}
	#photo .list a p img{position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);}
}