@charset "utf-8";
#wrap{width:100%; overflow-x:hidden}
.visual{position:relative}
.visual .control{position:absolute; top:calc(50% - 73px); left:37px;}
.visual .control>li[class^=btn_]{font-size:0px}
.visual .control>li[class^=btn_] a{display:block; position:relative; height:50px; }
.visual .control>li[class^=btn_] a:before,
.visual .control>li[class^=btn_] a:after{display:block; content:''; position:absolute; width:1px; background:#222;}
.visual .control>li[class^=btn_] a:before{left:50%; height:100%}
.visual .control>li[class^=btn_] a:after{left:calc(50% - 4px); height:10px; background:#222; transform:rotate(45deg)}
.visual .control>li.btn_next a:after{left:calc(50% - 4px); top:auto; bottom:0px; transform:rotate(-45deg)}
.visual .control>li.num{text-align:center; padding:10px 0px; width:50px; font-weight:300; font-size:.95em;;}
.visual .control>li.num #stt_cnt{font-weight:500;}
	.visual .control>li.num span:before{display:inline; content:'0';}
.visual .img{margin-left:119px; --visuH:81.884vh; height:var(--visuH); /* max-height:800px;  */;}
.visual .img>ul{position:relative; overflow:hidden; border-radius:20px 0px 0px 20px; height:var(--visuH); }
.visual .img>ul>li{opacity:0; position:absolute; width:100%;  height:100%; background-repeat:no-repeat; background-position:center center; background-size:max(100%, 1780px) max(100%, 800px); transition:opacity ease-in 1s}
.visual .img>ul>li.select{opacity:1}
.visual .img>ul>li.visual01{background-image:url(/GCM/img/main/visual01_img.jpg)}
.visual .img>ul>li.visual02{background-image:url(/GCM/img/main/visual02_img.jpg)}
.visual .img>ul>li .txt{position:absolute; left:0px; top:0px; z-index:1; max-width:80%}
.visual .img>ul>li .txt img{;max-height:calc(var(--visuH) - var(--visuH)/4);}
.visual .img>ul>li .bg img{position:absolute; left:calc(50% - 50%); top:calc(50% - 50%); width:100%; min-width:1780px; height:100%; min-height:800px}

.religion{background:url(/GCM/img/main/bg.png) no-repeat right 24px  top 23px}
.religion .beginning{padding:130px 70px 50px}
.religion .beginning>div{position:relative;}
.religion .beginning>div:after{display:block; content:''; clear:both;}
.religion .beginning>div:before{display:block; content:''; position:absolute; right:50%; bottom:-40px;}
.religion .beginning>div.methodist:before{margin-right:-51px; width:102px; height:102px; background:url(/GCM/img/main/religion_bg01.png) no-repeat center center}
.religion .beginning>div.anglican:before{margin-right:10%; width:90px; height:86px; background:url(/GCM/img/main/religion_bg02.png) no-repeat center center}

.religion .beginning>div p.img{float:left; width:52%; max-width:780px; font-size:0px; overflow:hidden; border-radius:15px 15px 250px 15px}
.religion .beginning>div dl{float:right; padding:6% 0px; width:45%}
.religion .beginning>div dl dt{font-size:min(8.5vw, 2.33em); font-family:'SangSangRock'; color:var(--color02)}
.religion .beginning>div dl dt span{display:inline-block; padding:7px 7px 5px; margin-right:3px; line-height:1; background:var(--color02); border-radius:5px; color:#fff}
.religion .beginning>div dl dd{margin-top:10px; font-size:1.05em; max-width:480px; word-break:keep-all}
.religion .beginning>div:last-child p.img{float:right; border-radius:250px 15px 15px 15px}
.religion .beginning>div:last-child dl{float:left; text-align:right;}
.religion .beginning>div:last-child dl dt{color:var(--color-txt)}
.religion .beginning>div:last-child dl dt span{background:var(--color-txt)}
.religion .beginning>div:last-child dl dd{float:right;}
.religion .result{padding:60px 70px 0px}
.religion .result:After{display:block; content:''; clear:both}
.religion .result>ul{float:left; width:62%; width:min(62%, 890px); vertical-align:top;}
.religion .result>ul>li{display:inline-block; text-align:center; margin:0px 1%; width:30%; }
.religion .result>ul>li p.txt{margin-top:20px; font-size:1.27em; font-weight:bold;}
.religion .result>div{float:right; width:37.5%; width:min(37.5%, 570px); color:#fff}
.religion .result>div a{display:block; text-align:right; }
.religion .result>div dl{text-align:left; padding:55px; padding-left:50%; padding-right:5%; background:#7B02F3 url(/GCM/img/main/banr_img04.jpg) no-repeat left center/contain; border-radius:15px 15px 15px 300px; overflow:hidden; word-break:keep-all; }
.religion .result>div dl dt{font-size:2.33em; font-family:'SangSangRock'}
.religion .result>div dl dd{margin-top:10px; line-height:1.2;}
.religion .result>div .go{display:inline-block; position:relative; padding:20px 35px 5px 15px; border-bottom:1px solid #333; color:#333}
.religion .result>div .go:After{display:block; content:''; position:absolute; right:2px; bottom:0px; width:18px; height:1px; background:#333; transform:rotate(45deg); transform-origin:bottom right}

.board{margin-top:30px; ;margin-top:max(7%, 40px)}
.board:After{display:block; content:''; clear:both}
.board h3{display:inline-block; position:relative; margin-top:5px; }
.board .more{display:block; position:absolute; right:-50px; top:-10px; width:49px; height:49px; text-indent:-50000px; overflow:hidden}
.board .more:After,
.board .more:before{display:block; content:''; position:absolute; top:50%; left:10px; right:10px; height:1px; background:#333;}
.board .more:before{transform:rotate(90deg)}
.board .photo{float:left; position:relative; padding-top:30px; padding-top:max(3%, 30px); ;width:50%}
.board .photo:after{display:block; content:''; position:absolute; right:100px; top:0px; width:300%; height:410px; border-radius:0px 20px 500px 0px; background:var(--color); z-index:-1}
.board .photo h3{color:#FFE166; font-size:max(5.23vw, 3.5em); line-height:1.2;}
.board .photo h3 span{color:#FFF1B8}
.board .photo .more{right:-40px; top:0px}
.board .photo .more:After, .board .photo .more:before{background:var(--color);}
.board .photo ul{clear:both; padding-top:35px; max-width:780px; overflow:hidden}
.board .photo ul>li{float:left; width:48.718%; }
.board .photo ul>li:nth-child(2){float:right}
.board .photo ul>li .img{height:240px; border-radius:10px; overflow:hidden;}
.board .photo ul>li .img img{min-height:100%}
.board .photo ul>li .txt{margin-top:20px; font-size:1.05em}
.board .notice{float:right; width:43.7%;}
.board .notice h3{font-weight:normal; color:#222; font-size:3.61em}
.board .notice ul{}
.board .notice ul:after{display:block; content:''; clear:both;}
.board .notice ul li{float:left; width:50%; }
.board .notice ul li a{display:flex; flex-direction:column; align-items:flex-start}
.board .notice ul li:first-child{width:100%; padding-bottom:40px; border-bottom:1px solid #333}
.board .notice ul li:first-child a .date{order:1; margin-top:20px; padding:7px 8% 3px 15px; background:var(--color01); color:#fff}
.board .notice ul li:first-child a .tit{order:2; margin-top:20px; font-size:1.38em}
.board .notice ul li:first-child a .txt{order:3; margin-top:10px; color:#666; word-break:keep-all; height:4.2em; overflow:hidden}
.board .notice ul li:not(:first-child){padding-top:40px}
.board .notice ul li:not(:first-child) p.tit{display:flex; height:64px; align-items:center; font-size:1.22em}
.board .notice ul li:not(:first-child) p.txt{display:none}
.board .notice ul li:not(:first-child) p.date{margin-top:20px; color:#666}
.board .notice ul li:last-child{border-left:1px solid #333}
.board .notice ul li:nth-child(1){}
.board .notice ul li:nth-child(2){padding-right:5%}
.board .notice ul li:nth-child(3){padding-left:5%}

.graycon{margin-top:6%; padding:6% 0px; background:#F5F5F5;}
.graycon>div{display:flex; position:relative;}
.graycon>div>*{border-radius:15px; overflow:hidden}
.graycon>div>dl{flex:1 1; padding:20px; padding:max(30px, 2.5%) max(30px, 2.5%) 25px; margin-right:4%; background:#fff;}
.graycon>div>dl:first-child{margin-right:2%;}
.graycon>div>dl>dt{text-align:center; margin-left:-15px; margin-bottom:20px; font-weight:bold; font-size:1.55rem; color:#222}
.graycon>div>dl>dt:before{display:inline-block; content:''; margin-top:-3px; margin-right:7px; vertical-align:middle; width:32px; height:32px; background:url(/GCM/img/main/ic_info.png) no-repeat center center/32px}
.graycon>div>dl:nth-child(2)>dt:before{background-image:url(/GCM/img/main/ic_fee.png)}
.graycon>div>dl dd ul li{position:relative; padding-left:13px; font-size:.94em; color:#484848; word-break:keep-all}
.graycon>div>dl dd ul li+li{margin-top:10px}
.graycon>div>dl dd ul li:before{display:block; content:''; position:absolute; left:0px; top:10px; width:7px; height:1px; background:#aaa }
.graycon>div>dl dd .free{clear:both; padding-top:15px; color:var(--color02); font-size:.95em}
.graycon>div>dl dd .free span{display:inline-block; position:relative; vertical-align:middle; margin-top:-4px; text-indent:5000px; width:20px; height:20px; border-radius:20px; border:2px solid var(--color02); overflow:hidden}
.graycon>div>dl dd .free span:before,
.graycon>div>dl dd .free span:after{display:block; content:''; position:absolute; top:calc(50% - 1px); left:3px; right:3px; height:2px; background:var(--color02);}
.graycon>div>dl dd .free span:before{transform:rotate(90deg)}
.graycon>div>dl dl{float:left; width:50%;}
.graycon>div>dl dl dt{margin-bottom:10px; font-weight:bold}
.graycon>div>dl dl dd ul li+li{margin-top:5px}
.graycon>div .popupzone{position:relative; width:43.774%; max-width:665px}
.graycon>div .popupzone .btn{position:absolute; right:5%; top:8%; z-index:1;}
.graycon>div .popupzone .btn>li{display:inline-block; vertical-align:middle;}
.graycon>div .popupzone .btn>li:not(.num) a{display:block; position:relative; font-size:0px; width:20px; height:20px}
.graycon>div .popupzone .btn>li:not(.num) a:before{display:block; content:''; position:absolute; top:15%; width:70%; height:70%;}
.graycon>div .popupzone .btn>li:not(.num, .control) a:before{border:2px solid #111; border-width:2px 0px 0px 2px; }
.graycon>div .popupzone .btn>li.prev a:before{left:5px; ;transform:rotate(-45deg)}
.graycon>div .popupzone .btn>li.next a:before{right:5px; transform:rotate(135deg)}
.graycon>div .popupzone .btn>li.control{display:none;}
.graycon>div .popupzone .btn>li.control.ib{display:inline-block}
.graycon>div .popupzone .btn>li.control a:before{left:5px; width:3px; top:8%; height:90%; box-shadow:7px 0px 0px #111; background:#111;}

.graycon>div .popupzone .btn>li.control.ib.next{background:yellow;}
.graycon>div .popupzone .btn>li.num{padding-top:3px}
.graycon>div .popupzone .list ul{position:relative; font-size:0px; white-space:nowrap}
.graycon>div .popupzone .list ul li{display:inline-block}
.graycon>div .popupzone .list ul li a{display:block; }

/* 애니메이션 */
.beginning>div.anima:before{opacity:0; transform:rotate(180deg); transition:all ease-out 1.5s }
.beginning>div.anima .img{opacity:0; position:relative; transition:all ease-out 1s; z-index:1;}
.beginning>div.anima dl{opacity:0; position:relative; transition:all ease-out 1.5s }
.beginning>div.anima.methodist .img{left:-50px; transition-duration:.5s;}
.beginning>div.anima.methodist dl{left:-150px; transition-duration:.5s}
.beginning>div.anima.anglican .img{right:-50px; transition-duration:.5s}
.beginning>div.anima.anglican dl{right:-150px; transition-duration:.5s}
.beginning>div.anima.stt:before{opacity:1; transform:rotate(0deg); transition-delay:.3s}
.beginning>div.anima.stt .img{opacity:1}
.beginning>div.anima.stt dl{opacity:1}
.beginning>div.anima.stt.methodist .img{left:0px; transition-delay:.3s; transition-duration:1s}
.beginning>div.anima.stt.methodist dl{left:0px;    transition-delay:0s; transition-duration:1.5s}
.beginning>div.anima.stt.anglican dl{right:0px;    transition-delay:0s; transition-duration:1.5s}
.beginning>div.anima.stt.anglican .img{right:0px; transition-delay:.3s; transition-duration:1s}
.result.anima>ul>li{position:relative; opacity:0; top:50px; transition:all ease-out 1s; transition-duration:.5s;}
.result.anima>div{opacity:0; position:relative; right:-30px; transition:all ease-out 2s; transition-duration:.5s;}
.result.anima.stt>ul>li{opacity:1; top:0px; transition-duration:.8s;}
.result.anima.stt>ul>li:nth-child(2){transition-delay:.2s}
.result.anima.stt>ul>li:nth-child(3){transition-delay:.4s}
.result.anima.stt>div{right:0px; opacity:1; transition-delay:0s; transition-duration:1s}
.board.anima{}
.board.anima .photo:after{opacity:0; margin-right:100px; transition:all ease-out 1s }
.board.anima .photo h3{position:relative; right:-50px; color:#fff; transition:all ease-out 1s }
.board.anima .photo h3 span{color:#fff;}
.board.anima .photo .more{opacity:0;}
.board.anima .photo ul>li{opacity:0; position:relative; top:30px; transition:all ease-out 1s }
.board.anima.stt .photo:after{opacity:1; margin-right:0px}
.board.anima.stt .photo h3{right:0px; color:#FFE166}
.board.anima.stt .photo h3 span{color:#FFF1B8}
.board.anima.stt .photo .more{opacity:1}
.board.anima.stt .photo ul>li{opacity:1; top:0px; transition-delay:.3s; }
.board.anima.stt .photo ul>li:nth-child(2){transition-delay:.5s; }
.board.anima .notice h3{opacity:0; position:relative; top:-50px; transition:all ease-out 1s }
.board.anima .notice ul>li{opacity:0; position:relative; top:30px; transition:all ease-out 1s}
.board.anima.stt .notice h3{opacity:1; top:0px}
.board.anima.stt .notice ul>li{opacity:1; top:0px}
.board.anima.stt .notice ul>li:nth-child(1){transition-delay:.3s; }
.board.anima.stt .notice ul>li:nth-child(2){transition-delay:.5s; }
.board.anima.stt .notice ul>li:nth-child(3){transition-delay:.5s; }
.graycon.anima{opacity:0; ; transition:all ease-out 1s}
.graycon.anima>div>dl{opacity:0; position:relative; top:20px; transition:all ease-out .6s}
.graycon.anima>div .popupzone{opacity:0; position:relative; top:20px; transition:all ease-out .6s}
.graycon.anima.stt{opacity:1}
.graycon.anima.stt>div>dl:nth-child(1){opacity:1; top:0px}
.graycon.anima.stt>div>dl:nth-child(2){opacity:1; top:0px; transition-delay:.3s;}
.graycon.anima.stt>div .popupzone{opacity:1; top:0px;  transition-delay:.5s;} 


/***************************************************************************************************************************/


@media all and (min-width:1921px){
	.board .photo h3{font-size:min(4vw, 5.5em)}
}

@media screen and (max-width:860px){
	.visual .control{left:0px;}
	.visual .img{margin-left:50px; --visuH:300px; border-radius:15px 0px 0px 15px}
	.visual .img>ul>li{background-position:calc(50% - 10%) center; background-size:160% 120%; background-size:160% 120%}
	.visual .img>ul>li .bg img{top:0px; min-width:120%; min-height:var(--visuH)}
	.religion{background:none;}
	.religion .beginning{padding:20% 0px}
	.religion .beginning>div{width:90%;}
	.religion .beginning>div+div{margin-left:10%}
	.religion .beginning>div p.img{float:none; width:100%}
	.religion .beginning>div dl{float:none; width:100%}
	.religion .result{padding:0px}
	.religion .result>ul{float:none; width:100%}
	.religion .result>ul>li p.txt {font-size:1.125em; white-space:nowrap}
	.religion .result>div{float:none; width:100%; margin-top:20px}
	.religion .result>div dl{padding-top:30px; padding-bottom:30px; border-radius:15px; background-size:cover;}
	.board .photo{float:none; width:100%}
	.board .photo:after {right: 40px; height: 300px;}
	.board .photo .more{right:auto; left:160px; top:-20px}
	.board .photo .more:After, .board .photo .more:before{background:#fff;}
	.board .photo ul>li .img{height:130px;}
	.board .notice{float:none; margin-top:50px; width:100%}
	.board .notice ul li:not(:first-child) p.tit{display:-webkit-box; -webkit-line-clamp:2;  -webkit-box-orient:vertical; white-space:normal; height:55px; overflow:hidden; text-overflow:ellipsis}
	.graycon{padding:50px 0px}
	.graycon>div{display:block}
	.graycon>div>dl{margin-right:0px; margin-bottom:20px}
	.graycon>div .popupzone{margin:0px; width:100%;}
	/*애니메이션
	.beginning>div.anima.methodist:before{opacity:1; transform:rotate(0deg)}
	.beginning>div.anima.methodist .img{opacity:1; left:0px}
	.beginning>div.anima.methodist dl{opacity:1; left:0px} */
}